{"_id":"@material/card","_rev":"1829-31e0254fd06883a320627d966d6cca4b","name":"@material/card","description":"The Material Components for the web card component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/card","version":"0.1.0","license":"Apache-2.0","_id":"@material/card@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45aea15f21ba6a0f7cb25a1233481a2f1de9e09f","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.0.tgz","integrity":"sha512-ZzDe4IGQz+L2bP4O4C8QbONQrJuYRahC6+zByPIXuN2EIFVvozQUT9utseNCiCxubKS9o75eQRiiob6PJmt5Ng==","signatures":[{"sig":"MEUCIQDhpJS8ssxQMfU4s1BoYzvLfhVFXoAYReAGG94PlOmk+AIgDIEwbpQF/n6l+y0lCySqkeaRQouw/2fnArCi36Ox4bU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"45aea15f21ba6a0f7cb25a1233481a2f1de9e09f","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/theme":"^0.1.0","@material/elevation":"^0.1.0","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.0.tgz_1481824468575_0.8312818345148116","host":"packages-12-west.internal.npmjs.com"}},"0.1.1":{"name":"@material/card","version":"0.1.1","license":"Apache-2.0","_id":"@material/card@0.1.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f37119493b9f2a52e913746afb61965c8ce5bd2","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.1.tgz","integrity":"sha512-Lf3OKNNp4xxcQpQFGUEBYFJQef6Fc9EFxl3cdTdlpNTp2lOv96KBOPLkrN5hKxxHyYXXZe/m1V3CZ7TNvQfJEg==","signatures":[{"sig":"MEYCIQDw0gxZAsVdTOR3x10GX7dMdGHGwgn+Mav1Kl3x8Q4yQgIhAIgid7R27+DRMlrmgzXuhyqWxlp+NR+LLrFhiasdyPtl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"0f37119493b9f2a52e913746afb61965c8ce5bd2","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.0","@material/elevation":"^0.1.1","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.1.tgz_1483977432184_0.08993042400106788","host":"packages-18-east.internal.npmjs.com"}},"0.1.2":{"name":"@material/card","version":"0.1.2","license":"Apache-2.0","_id":"@material/card@0.1.2","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b81692f252c653831d34f67efb2f47cb2d76efe","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.2.tgz","integrity":"sha512-jHIwA07YeYL4sU7eYn8gYOr/NoWpMEdg3IjXQYUIU/POHH/dFoPba+RkIjnkiXmQweEOk7T4shkU65ne8+oHYg==","signatures":[{"sig":"MEUCIQDssPAJX77oArBSZUzrdr0GJcrkVGqFlC+/i9byFKBUMAIgOygpqsD2BL4eNWNXfTNWkexeD63GiTplND07eRo3NnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"7b81692f252c653831d34f67efb2f47cb2d76efe","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.1","@material/elevation":"^0.1.2","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.2.tgz_1485190173404_0.18074862263165414","host":"packages-12-west.internal.npmjs.com"}},"0.1.3":{"name":"@material/card","version":"0.1.3","license":"Apache-2.0","_id":"@material/card@0.1.3","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14db602fa7d20179e93a0a66fecf0230dde12765","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.3.tgz","integrity":"sha512-KY5XpGtwF31/F9A/NTsRVOOj5wdm6OgOchSOEtpilxfEWpUaYm3FDbGn69CkbM9T+WDVHDykS3nRQ41ayGZypg==","signatures":[{"sig":"MEUCIEmGA1JTepJE+qZInLTdFOIlGJ/uPZ4B6gGYTQAEafkiAiEAwk7p19T883EqMgxa1XqT7UHwLqJkQnVJyHMaanMfoew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"14db602fa7d20179e93a0a66fecf0230dde12765","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.1","@material/elevation":"^0.1.2","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.3.tgz_1486407879808_0.8449985166080296","host":"packages-18-east.internal.npmjs.com"}},"0.1.4":{"name":"@material/card","version":"0.1.4","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.1.4","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80030a76b9cf8f4e5261d2ff9c171f6dd9d3fe8b","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.4.tgz","integrity":"sha512-g2QdzOZ0muXp94YxcnwCtQ4p2j8aMUv2YWBoShqAKkn/mSsA4lh6NN2LzX47+ArMcgIbPoRORphKibXAfJPWJA==","signatures":[{"sig":"MEYCIQCSuFfmZ0sFGpga4wTQhmdt0TD0wDI1mnsJDyfMdeqCHgIhAIQuQcBA1aeOypukrfMg2OSQhuDTX/+ZXpBHUVCSDtMC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"80030a76b9cf8f4e5261d2ff9c171f6dd9d3fe8b","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.2","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.4.tgz_1487698051354_0.7755233203060925","host":"packages-12-west.internal.npmjs.com"}},"0.1.5":{"name":"@material/card","version":"0.1.5","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.1.5","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"993e07ea2a052ee5b970b696543042ff29027d47","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.5.tgz","integrity":"sha512-x/ADwuJ+aTSIBX7+saki7uwV5ZeIPTXyEoE2rNHiDvpVo3gelrLz7ipqI3zQzDOqWhQ46l/RomGAuN3WBGfUpg==","signatures":[{"sig":"MEUCIDL8iWkEdL0Qhia9eeIaOdzsxtvQnpQrgusEt4MQIks/AiEAr8eBRL8dWJUuZPsUtOJXzJfiVcnMDepuMMcu4PbDqk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"993e07ea2a052ee5b970b696543042ff29027d47","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.2","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.5.tgz_1490027203396_0.5452197040431201","host":"packages-18-east.internal.npmjs.com"}},"0.1.6":{"name":"@material/card","version":"0.1.6","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.1.6","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08efdbab0fc345e7664905fb706056011021665c","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.6.tgz","integrity":"sha512-DKZEdrEwnBrz9RQLplRJcK4QMGGZu0ZeEge+/Dnl8CD5LWo/8oLvTa+zIhtrpuhr2YEjV7z4cwuBpbrN0kBPsA==","signatures":[{"sig":"MEUCIDjo1UpwvOBa8pbzlJokMs9C8oD9IBZHA+aFUyafEsMbAiEAquaJHHSw3rDJCRjmoZJHyi4Hu8ucMWP+n8UYD/sV2ug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"08efdbab0fc345e7664905fb706056011021665c","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.3","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.6.tgz_1491233277745_0.9244537393096834","host":"packages-18-east.internal.npmjs.com"}},"0.1.7":{"name":"@material/card","version":"0.1.7","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.1.7","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe4fca8c8b838e9b786721ca5dee2b63e4a02ee","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.7.tgz","integrity":"sha512-HX0HA5TZoPfWaWES5JMl82mG1et9wdZodA8NLkMnXtA62YNCwnl8vlSVkIMX77NyORLXUSWiOTZ16iO9rnDmCg==","signatures":[{"sig":"MEUCIQCStcGAYHgOo3k9gI9DFcNk8UDo5JWTXtfrrPTNsNOAswIgfmDVD47G6KAKrpS4NfdH3zJmMkmbNGwA5AZ1/hEcq7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"4fe4fca8c8b838e9b786721ca5dee2b63e4a02ee","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.4","@material/elevation":"^0.1.4","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.7.tgz_1492527073093_0.17305718548595905","host":"packages-18-east.internal.npmjs.com"}},"0.1.8":{"name":"@material/card","version":"0.1.8","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.1.8","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e13a63b256c45a5bada40e33d786ba766d5c73ca","tarball":"https://registry.npmjs.org/@material/card/-/card-0.1.8.tgz","integrity":"sha512-e38T9Yly5eYbW2/VZ/paIBJYDxmFtN8TOr4CwdqGioYUKpj3XEyj8fsvVQaU0cD101+iN6LVUPbfYiJXr/Cw6g==","signatures":[{"sig":"MEQCIDB7q/tL2HvTIseEERPN/yaABWWe7HMFhiZ9cVueJ7c1AiBjIsM3rTGCjIej22CruMaIYqkIp6gpE4GhZhxmn+KBwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"e13a63b256c45a5bada40e33d786ba766d5c73ca","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.4","@material/elevation":"^0.1.5","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/card-0.1.8.tgz_1493653380782_0.0024058958515524864","host":"packages-18-east.internal.npmjs.com"}},"0.2.0":{"name":"@material/card","version":"0.2.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.0","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c814b8ce1ef5df7695019c456f99498c23d8f750","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.0.tgz","integrity":"sha512-D7O0WMp/jXpjXTf3zL70YEP9i2SrEe+eGkNbeIQGQDx4yvNuHh3Wr1Gc31W8LI/bXqXlY2WGFogLjxzlrNsJWA==","signatures":[{"sig":"MEUCIG2e6CXCAAZBRH4Sz8Ycb+2Jh5wKnNYaJGj/IiPLxSB8AiEAvgMRHFdee5HBk7V4GsSqocjSnMCVU6WII+pPjpvgMQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"c814b8ce1ef5df7695019c456f99498c23d8f750","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.4","@material/theme":"^0.1.5","@material/elevation":"^0.1.6","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.0.tgz_1494865558686_0.2322403199505061","host":"packages-18-east.internal.npmjs.com"}},"0.2.1":{"name":"@material/card","version":"0.2.1","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.1","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fbf7b7dbdf776b816bcd503b051c6f7f1cbe4e5","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.1.tgz","integrity":"sha512-9YAp/RxyGExBUvlZ2aPRF7ui8xuUcoV8Qf22LNjabs5461uMaqpm/TFic6HtijaV/fb+rUJLleaI1K/yv//FMg==","signatures":[{"sig":"MEQCIHMlANdVqJIz59SDPVxVmmnYShMP89xtRlJGctxfEUpYAiBykvRQVziTEZ0fxCOzRaP6ZW5rJAFRkDzit2JNdgov9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"7fbf7b7dbdf776b816bcd503b051c6f7f1cbe4e5","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.4","@material/theme":"^0.1.5","@material/elevation":"^0.1.7","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.1.tgz_1495031293617_0.6201694225892425","host":"packages-12-west.internal.npmjs.com"}},"0.2.2":{"name":"@material/card","version":"0.2.2","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.2","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d51034694f79efa3271702e4971a2460fa5ea87f","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.2.tgz","integrity":"sha512-q3FfDNXzZWXQWqAnwU5YkHalZu+IINYri0IAaaIMsVVpsIUM14xJnDohxvxzuOzhBLgRXJ7GP8ami+L/4cb0HA==","signatures":[{"sig":"MEQCIH4NESU+h81lHN+E6ggwR4/RGFXxH99Z4ua/pCmJQUSBAiBKMwfDd8IfZoNBULljadAJadfFcoR7zqtW/fh7KQ0j/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"d51034694f79efa3271702e4971a2460fa5ea87f","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/rtl":"^0.1.4","@material/theme":"^0.1.5","@material/elevation":"^0.1.8","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.2.tgz_1496171071545_0.8368952053133398","host":"s3://npm-registry-packages"}},"0.2.3":{"name":"@material/card","version":"0.2.3","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.3","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15524aeafe22d5911d8836f8d3013ded828751f0","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.3.tgz","integrity":"sha512-pqODD8UgvEyITDSjWbAR+01BcTgGoSYLNAwwixzuJ+7IJQhfjsdQhsZn+iNt7qd9nKL/3nIa2ioQXObss1rCeg==","signatures":[{"sig":"MEUCIHjvWFypV2SYagl383fCzvbO2vs6Wuo0/JOla8ocy0CIAiEAllTR5pMFprxXZ3lYsUprAdzW4UrXyt0YBMDVrwtBV5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.0.3","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"@material/rtl":"^0.1.5","@material/theme":"^0.1.5","@material/elevation":"^0.1.8","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.3.tgz_1497282795256_0.8881738525815308","host":"s3://npm-registry-packages"}},"0.2.4":{"name":"@material/card","version":"0.2.4","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.4","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"097b3231ae807e22c0b4ae30a1c0e68f26fdbc4c","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.4.tgz","integrity":"sha512-/yQQWbk8lMFWUbpg8zDPGycZjAIf4OlcB5i0Rh8vC0WO4tynkML+3ZrQiPuBtWBpbepBn+Ph/tXM5wJxBVagKw==","signatures":[{"sig":"MEUCIQDczNwT3iXpp+FrrXbpNQQ0BKIn8eBbpgmzM/GwEANcgAIgfdcBCSJu1pCSiJLnojnBR8EDlJaWxz2DWLeddwJWmJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"097b3231ae807e22c0b4ae30a1c0e68f26fdbc4c","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.6","@material/theme":"^0.1.5","@material/elevation":"^0.1.9","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.4.tgz_1498493447480_0.5086930501274765","host":"s3://npm-registry-packages"}},"0.2.5":{"name":"@material/card","version":"0.2.5","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.5","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc58e68b50e53a889000695b0e94f868234f4afd","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.5.tgz","integrity":"sha512-djdTbU/lVfAuglW8jji2En+A/FzRuSqkEN1V1DSN2EPxkXnRR6oXXKdRA5oKQFXU84ACZzVWaGnA1cvI7yXi/A==","signatures":[{"sig":"MEUCIQCUPmuijodFHhVFBZx9OD+tVnbnXCN/X5Kf292G4S/c6AIgbfIfxVLcI4cOJE0lecN95zftmfntesXm0gWCI/MorJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"dc58e68b50e53a889000695b0e94f868234f4afd","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.7","@material/theme":"^0.1.6","@material/elevation":"^0.1.10","@material/typography":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.5.tgz_1500911352919_0.5895948549732566","host":"s3://npm-registry-packages"}},"0.2.6":{"name":"@material/card","version":"0.2.6","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.6","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37184de3629490eb9e6b562dc7f7823cf87cf8f8","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.6.tgz","integrity":"sha512-t4+UqPZO1+tUOW604TQ6yCds7RSYPlbEec5nKwTzD8y/Pl8t0PCly1v6tOaw2+0pfjPSXU1WwMd+KbAsPPBAsw==","signatures":[{"sig":"MEQCID9ylceL55S5lCBxINrTok72G1VnGlu4myqexwK+vf6fAiBI+gu3r99kK1gsPG9eArYclZH0NO+JNKZkSDG+71FgEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"37184de3629490eb9e6b562dc7f7823cf87cf8f8","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.7","@material/theme":"^0.1.7","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.6.tgz_1502138904468_0.8546733371913433","host":"s3://npm-registry-packages"}},"0.2.7":{"name":"@material/card","version":"0.2.7","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.7","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"277f08d8013ea61fbd91885eb6f029ba9bc5502b","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.7.tgz","integrity":"sha512-K8JY6wPX3FNWme/S35vmWUawDc+8GBkvjcFxWIXkqnofe0I1+XQMJwVkdeZ6dYfHV4BP5ISUX5OePptghSk1lw==","signatures":[{"sig":"MEUCIQC0AQUEo9VIhnPnJV7KKC+PAmHnRCeEsWjQy/8WDPZtTAIgAYGGfIpcv6OJyPLK14atNrXvmlsdJyevNvIf0TH+Xgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/theme":"^0.2.0","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.7.tgz_1503336465152_0.04534676158800721","host":"s3://npm-registry-packages"}},"0.2.8":{"name":"@material/card","version":"0.2.8","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.8","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d290c53cb20d2e77ccee7e046f9e0118bdb2b96","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.8.tgz","integrity":"sha512-DFKcCIHC/MDHPOSg1kLrW35W7YJuj4w3YtDSfOU1MGS0RPf0aiHXiGBjRjuGK/TKYtsQNN3n3kDpSTEP0Ar3NQ==","signatures":[{"sig":"MEUCIFH+pJ2DcEyzxnpGfj39ekdz98nEzOSE8XiuGiTPgVzAAiEA1WKA7Vhq99O2dMrya/l10Oa3dtkZb9t1VlFoHHlZzyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"1d290c53cb20d2e77ccee7e046f9e0118bdb2b96","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.7","@material/theme":"^0.3.0","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.8.tgz_1504642564405_0.7324870093725622","host":"s3://npm-registry-packages"}},"0.2.9":{"name":"@material/card","version":"0.2.9","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.9","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de2fc12ad27ee07f93bed9fd1041000611f01b20","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.9.tgz","integrity":"sha512-S6ohfD2ptNPPC8v5vRcnZ0xPM4MDCjz67W87IGWuUv6lFYUSMcfj34YO+Om0Ejpgl3e/E0oIcxebU7ucY0OVJw==","signatures":[{"sig":"MEUCIHnKZhYfWQ9wqw3udVpPoNKacDAWoWenMtEwP8kePASmAiEAzDKbsRaHcNrz/VYK2PUhqwungDpkzq6eh2WY4/IsIOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/theme":"^0.3.1","@material/elevation":"^0.1.12","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.9.tgz_1505759737083_0.36843917495571077","host":"s3://npm-registry-packages"}},"0.2.10":{"name":"@material/card","version":"0.2.10","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.2.10","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59a553f445c07a2bd2a6c39390316a1d9c2af2b1","tarball":"https://registry.npmjs.org/@material/card/-/card-0.2.10.tgz","integrity":"sha512-33lKRbYS/MbC5qej5vrDJF8/fbm5+qmj1phIM/pNXPvSf+0xLHETlTiFygmmNscvh7xAqq1Dzv7pNGPF25DkGA==","signatures":[{"sig":"MEQCIDhHFOiNuJn+FTgoHC7Z7Ws8NKbfdh1u6Z4pqVr5dJUQAiBsNrQshBt8Gq9fBvm6J5KeBA/9l0cHazHCe5E0jgyphg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"59a553f445c07a2bd2a6c39390316a1d9c2af2b1","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.8","@material/theme":"^0.4.0","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.2.10.tgz_1506978701559_0.6841331529431045","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/card","version":"0.24.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c11bea0999e11e8abba939600c05f97195195530","tarball":"https://registry.npmjs.org/@material/card/-/card-0.24.0.tgz","integrity":"sha512-IPJhHrHoErst05GObIA4aEOQS4DequiVmOuIVj7/U75VZqmj0REDRSPJedeTW73/yX/tIgtULGnIbH1G99PDew==","signatures":[{"sig":"MEUCICDmQFLZ7L/SZtk6lQ9ZnB1HF/xnbs5vjdpon0xdZP51AiEAxI66bmRQ9amXNmSFmHoS7HwzW3uYrWCga1VNXDfbvwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/rtl":"^0.1.8","@material/theme":"^0.24.0","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.24.0.tgz_1509390679787_0.39481444051489234","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/card","version":"0.25.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"694dc834e46143b33eef5eac829eb759f71a3665","tarball":"https://registry.npmjs.org/@material/card/-/card-0.25.0.tgz","integrity":"sha512-vpNXUj90uBqf0UlEqw8yDS6X9a5y5QGu+8sQznQLrLfXVKRXzMVix25QDdV5MF1lJoAeLzmWGC/jRBeVN2i0fw==","signatures":[{"sig":"MEUCIQDg+7yfMM4YdECZhhQUbPZXF+/qaRejccsIubr4fR6kyAIgByfX/tkDWp0cHGS0qA6fJhCnDpbSQ9bBpGTRUInhuFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/theme":"^0.25.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.25.0.tgz_1510603341143_0.9565958268940449","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/card","version":"0.27.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0513fe8f23430faeadb12611763122a901b3aaf7","tarball":"https://registry.npmjs.org/@material/card/-/card-0.27.0.tgz","integrity":"sha512-cit86kCLOLPx2gxOOePLyRAr2Zgt82udt7e+eyb/qMkfWXlAidd0IEqX/yaq4izAnBfcdGB3AfyseS5STLiEmA==","signatures":[{"sig":"MEUCIEWFtte+s3QaOJPCQVPN11grqLF9s4xNEY2qY9dXXE50AiEArbdrYm8AldbigXszOqkfVaLGO+fqdf1C3saj8RbzWho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/theme":"^0.27.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.27.0.tgz_1513020927961_0.6697857333347201","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/card","version":"0.28.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a5886615d889f0217b3a2a64867a79c01a4ebf","tarball":"https://registry.npmjs.org/@material/card/-/card-0.28.0.tgz","integrity":"sha512-F7PkH51n/aFQcSbWHiWFmf5BN6ljpicJ5gJcKnEtKq/5yHBuojc5l8HTbm3DUD5OGAWqRcJztpg13sDL756aeg==","signatures":[{"sig":"MEQCIESmb6LhF/raf/OEoExRxqQ1rEIbj/mewkMjGZRx5ncjAiBkysJseVlzlOeQegRp5GSccdXgX1XaDTR64bo6DTKZVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/theme":"^0.28.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.28.0.tgz_1515437708911_0.06193718872964382","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/card","version":"0.29.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cef88c555dfa2a7d1b3b951a8c40419ea9ae604f","tarball":"https://registry.npmjs.org/@material/card/-/card-0.29.0.tgz","integrity":"sha512-WOhrcEazNIT0/6k5Ga3h0tcx3Y+B3tJm4HjfTKXN0GVWV1/JwZ4duEKOxWnso+/iuvPQt2bk4EGvI/9P/N8TxQ==","signatures":[{"sig":"MEQCIFYbcXwi0Ep3UpXLq4bNIYHkxe1YGYmE3U37K6vTmkAeAiBH52WLvMRd57GdzDnr1+11AD4HV31gQqHlwhZXC6nJ9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"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":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.29.0","@material/theme":"^0.29.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.29.0.tgz_1516645855744_0.09533054288476706","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/card","version":"0.30.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f14b8bdb322fa63646244804c4d6fcae4406d76","tarball":"https://registry.npmjs.org/@material/card/-/card-0.30.0.tgz","integrity":"sha512-y3pr7X7MzzPjJKy3IHfsW2ZruIfue25nx7RNImcRM/FbTLQsRz9BLOpGCFZhxsg8p4AAExtsZw1OyZMm6KpTlg==","signatures":[{"sig":"MEQCIG02jVYFl2VbGmWYd77sOyou++JsYT5jDYAK+uVbcAhqAiBXlUlyIpi9SCKRm44BK9tqfuRG7G+BgFjNlfJ/gT7VYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.30.0","@material/theme":"^0.30.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/card-0.30.0.tgz_1517868128620_0.2524720800574869","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/card","version":"0.31.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.31.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa8dd4d0980d82a61636069077e6ce2572d219a","tarball":"https://registry.npmjs.org/@material/card/-/card-0.31.0.tgz","fileCount":6,"integrity":"sha512-WZrTwCCZgagVXRyBV1m8ETZHssH0POUTdvd0MKnlX0xrqq2rqM1A6SsZ4hJ9LVBX5fwqxRdwX9o7QUu8M0NOxw==","signatures":[{"sig":"MEYCIQDmABpvCs6yU2YkuoQ+bHLe4KEoCTf9FG105Wecl88KUQIhAOs0RLjVsVlj3yAGMGRyEJ93O1fmI7Vnxswhb/f0sVFh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33909},"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"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":{},"_nodeVersion":"9.0.0","dependencies":{"@material/rtl":"^0.30.0","@material/theme":"^0.30.0","@material/ripple":"^0.31.0","@material/elevation":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.31.0_1519150978039_0.5105971354880408","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/card","version":"0.32.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.32.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e4533a64730dca9754b362b754d7185810a566a","tarball":"https://registry.npmjs.org/@material/card/-/card-0.32.0.tgz","fileCount":6,"integrity":"sha512-Y/o8Mekvlt3su0K80gcLpmcdFUa+D57nKDI3nVcM1Xi2r5/ra3qjAmFda5mauxZK/8PzyB/FJzF1fy/RH5s+9g==","signatures":[{"sig":"MEYCIQCO0+ZrQCQhg9tGZ1lp0/tMQrd8h3eLmoOKtw+25FBcGQIhAIb/msILQAbBm0QYffRQdE9tYaOMWciQRmdd+tfTh9xw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30427},"_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.30.0","@material/theme":"^0.30.0","@material/ripple":"^0.32.0","@material/elevation":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.32.0_1520287719655_0.46455727374404576","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/card","version":"0.33.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"becd32aaeb6c9ffbbb1fe3f0183f60a503c5d25a","tarball":"https://registry.npmjs.org/@material/card/-/card-0.33.0.tgz","fileCount":6,"integrity":"sha512-Cy0mkceFiQ1wmnXj/S6/p/zuQjxMa/DEa/pWUC3uzNKXaPHjexQBgski8pPsrIYQ7ROhO3MnCL3zVXkJPZ5CUA==","signatures":[{"sig":"MEUCIDLw78YsdMVyQzrQbVw+r5uHaKWCgMlD7D5jtL6jnGqEAiEAk1ZVRyWl3YXkSXr7Hl2Udrs+KA3aSU96Im5sFQQ8JKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30779},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"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":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/theme":"^0.33.0","@material/ripple":"^0.33.0","@material/elevation":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.33.0_1521477597212_0.8445234110837903","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/card","version":"0.34.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acf0a13fa382b4bda08b826a19e6eb7327ea1a6b","tarball":"https://registry.npmjs.org/@material/card/-/card-0.34.0.tgz","fileCount":6,"integrity":"sha512-xuDFTenpazcFfAAZNr+FQmwea6l73WL9BBloubI4xq65bvGGkQQWzizOw0p8I6zD8diE0vfnGPj+uvG1CpGkpg==","signatures":[{"sig":"MEQCIBTHYZYj+EShyl59UihRYZcZM4iKhqJUN+Tu+y3QHFNiAiB/AEVYeAzCg/kPKeylFwIKBsinNDgO42sYFb+IpqAuSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30659},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.0","@material/elevation":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.34.0_1522705911620_0.48011867115202334","host":"s3://npm-registry-packages"}},"0.34.1":{"name":"@material/card","version":"0.34.1","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.34.1","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f74e0fb19816f8cd338bfda8b06655c82259113","tarball":"https://registry.npmjs.org/@material/card/-/card-0.34.1.tgz","fileCount":6,"integrity":"sha512-qvqpS57KkdzvCsk6Rncl8McNdNYRXpoVNR3TrwkYMN00Ae0YvycoinT1JtAxfagiErx6QBN6svspx3t0l2mlow==","signatures":[{"sig":"MEUCIQCdFsUXiK5v5N5pAItRicNpzYU1QA4NahQXvFApOjLDegIgTHvNX9ka9LL0u7vWoOz/qA0sWlO7wXD8BR3Ey4No/oo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30659},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.1","@material/elevation":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.34.1_1522798783784_0.4792389275538529","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/card","version":"0.35.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.35.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","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"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards for displaying content composed of different elements.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/card.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/cards.html\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/card.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  Simple\n</div>\n```\n\nFully-featured:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__media mdc-card__media--square\">\n    <div class=\"mdc-card__media-content\">Title</div>\n  </div>\n  <!-- ... content ... -->\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">Action 1</button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">Action 2</button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <i class=\"material-icons mdc-card__action mdc-card__action--icon\" tabindex=\"0\" role=\"button\" title=\"Share\">share</i>\n      <i class=\"material-icons mdc-card__action mdc-card__action--icon\" tabindex=\"0\" role=\"button\" title=\"More options\">more_vert</i>\n    </div>\n  </div>\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">Action 1</button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">Action 2</button>\n</div>\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<div class=\"mdc-card__actions\">\n  <i class=\"mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon\"\n     tabindex=\"0\"\n     role=\"button\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\"\n     data-toggle-on='{\"content\": \"favorite\", \"label\": \"Remove from favorites\"}'\n     data-toggle-off='{\"content\": \"favorite_border\", \"label\": \"Add to favorites\"}'>\n    favorite_border\n  </i>\n  <i class=\"material-icons mdc-card__action mdc-card__action--icon\" tabindex=\"0\" role=\"button\" title=\"Share\">share</i>\n  <i class=\"material-icons mdc-card__action mdc-card__action--icon\" tabindex=\"0\" role=\"button\" title=\"More options\">more_vert</i>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    All Business Headlines\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">Read</button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">Bookmark</button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n    <i class=\"material-icons mdc-card__action mdc-card__action--icon\" tabindex=\"0\" role=\"button\" title=\"Share\">share</i>\n    <i class=\"material-icons mdc-card__action mdc-card__action--icon\" tabindex=\"0\" role=\"button\" title=\"More options\">more_vert</i>\n  </div>\n</div>\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","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"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":{},"_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"}},"0.36.0-0":{"name":"@material/card","version":"0.36.0-0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.36.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c28143873e9b0884e2343ac932f1330cfdd7468","tarball":"https://registry.npmjs.org/@material/card/-/card-0.36.0-0.tgz","fileCount":7,"integrity":"sha512-Y4TtPGoEzyxw4XLr6Ywp4a9LFtGKoCgH1xKQ5fqig9ozEsFhMbY3Ai/m9WG3nzV/8x9q/piN68CVFIUU5NlAmw==","signatures":[{"sig":"MEUCIBEOqmprtViEf+G8FYKUgThrriYghVXx+RTJNZbnD58jAiEA2zECnY8eDo6QwUxkys/t8R8CdMfjWZI+eWM3YSE29l8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXAeCRA9TVsSAnZWagAAc3sP/iVCIyZKkGG82tA+sxs+\ntdS0t5t6sCk+a0Uss9gJsfd4o55RI5RmfK7VN1eACqXvyGJtNSEfKa21qsYz\n6/M+O7Wa0tgcg0yPCUYOChA4aeGbIanh6TXL45cv2B0o9MXdR2pWPY6bgziP\ns5/WqTM1rOMJb7FvGoFmM3Y4MKzMxFU+tvKLYp5w54By0imnPYx7X1Ne2dym\ntBlg6VGYauuSAUSi7A/9jZz+eRMkgo9UWrB8ijVqQY7UIIIlzKRfChQ4C2S8\nLbgHqBltbcpdugKE9bE1+ti8j9CfbffFG2TFqgobL61t+w8W2DW6bXJ3TQCW\nVrTIwJq4r30xmwKMbLCkPaxntr8/uFq+EAii4v5oXIVB0KDSdBtmsq3CGSgW\nsK9qkE9sME8PZaPq2vuin/uuIlQc9eiIBzeONhhB/pnbBTLgjdBB2KOKMENX\nQ1rGM+DnNlIac7Vj+hnzBa2+q9AYeTXc5I19t3hlAs6GRtO2yDYtDAAbI1bp\nr/juQnz86QxMe6NEP2bpQ4iNjRYK+j/NrHiJm5CDhQ9vf9IWVaNrBcJLg+7u\nTlwAWjhj69Kj036tY1ycgRDe0QBO2X1SU8EZR7qU3jXaDN7qSrqYsbGtFE9R\nDg8xwjtU8DmXVLjhhgxpNdILbkn4QajUabvpqq6zuX1uSoPZVPmqwF3GurkR\nxT0N\r\n=moKI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0-0","@material/elevation":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.36.0-0_1527607325426_0.2945067699046582","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/card","version":"0.36.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.36.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40ac79ff34eb2d5e319977c4510e200bcef59268","tarball":"https://registry.npmjs.org/@material/card/-/card-0.36.0.tgz","fileCount":7,"integrity":"sha512-8oKLbgpYPBkql3jcUjDrWEtWBCusqXNeIBT2nvz4tW7Dzk+I3MnAT8fmMm57N3Hn4qTwha9ZmLlIy+6OVyVBRQ==","signatures":[{"sig":"MEUCIQCf0zYn7JWwFcNc0ketCGxOSgyA6ORByPQUNHlbuF/L/gIgPssSpLIrqM6fSWpXvEKNTe03MU8140OuGgaLFAsLGQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzICRA9TVsSAnZWagAAj3EQAJS0k5Ng+m0bLQnN9ifh\nNpZHphBHXLS2NGteBwFgUjcjrTl96JsNCSH7mid+lunWCEiBUFEBFn82nL6u\nVJp5eaZOf4Ttt7daWW/FZUeOKmhRhbuJMJMpPq6Z8J+sp0i8nfuBSKMszygP\nKXoXlGm+9QeSHMBtE1iMAZ6bez4F0bslPuEn/CUphgsNr+5OHecxCf7H4BTH\nI+mAW74HpEKw+LqY6CLcotLpCQ6G+H/i2XHxLdHjd5ZCWkecSJGnp6ZQtpdx\n8vKxb/GRS1uO8rdtHnYX2a057ifGq0Wd/tUYVfV6OR77RQjsBsU02rohE+fO\nPGSE087t+H4YTbjnD/ArLDfDc6A+I9WKdgJ3rHkM0s94qDZrQQNrsdh4mOP9\nazqtvd3jmtVyb9se8MOsDgHiEBRcaJQgzv4USaeTUDEcxrhtz6sSPyctsFnu\n3fOFNMnY9ytn1YA5X6MjmJ2y2jmXT6daqRyjrenx1LYBZilHaDCpThycOH88\nFnEoOl9rSLzneOyInt6y0P10DaZuPmfcj0yANBxDjvqAGkbz8Fo0C5r+4VZq\ntlqc21SC9bvte7yV2PeH17Zcp3YMaSOu+dG3HywmPIY433BJ3pabD9+I9P3n\n2kNonjuINUxMLS2hb6MdEBMzYWZFlKR6UEqZ/IWR3lHRIrJ2Tj9RX47VZXP/\nk1ma\r\n=x1dP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/elevation":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.36.0_1528126662980_0.11461976909290761","host":"s3://npm-registry-packages"}},"0.36.1":{"name":"@material/card","version":"0.36.1","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.36.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4803cdda93e2b43a9848bd36a36b4bb3f74a2b69","tarball":"https://registry.npmjs.org/@material/card/-/card-0.36.1.tgz","fileCount":7,"integrity":"sha512-+wn2546RPtBScryVbAUTyCe2fcP5h5PJ+K5pe887WOZIvymn+s563Yz9uKgMxXwZ7PTrAIpvaZ9r/WMQLrJeyQ==","signatures":[{"sig":"MEUCIB1yZDTzGHsiPgASTR14JiqRxujIqTOljS4gytrq3QjmAiEA4qemF2Q8hYGFy4uree4PfZo/zUeMzlDZu8zvt1hXSDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9JjCRA9TVsSAnZWagAAl2EP/RB9a5FkoZqRLjpq/79l\n1I3N3IUiXFQfBBSmFxcs5NUhTqrHOk9z76o/u0jX+J4o6czGROlklf+xn+Pb\nMfEVqjozpYYqAz5TFu/ORMdPcRyCvjxQN8hnYS2KgOMzOKy/LwGDExehB3rM\neM58Hyg/xHzmmIuVwx9+ElAUejC9ilWt6U2ZxHTNOB/II26JBykNItJQX5no\nQbGfAywLmKSgrSiT3AwFf22b4Ss9PAsiIp4D3biakDXWCxYZtsfMYK94Oph6\nAzGkbEZQeT/ZtCz9BYLh4/eRaY5icP/tgUvS9qjV32U3hsd4vw3cUqMofCsI\nj0bpA58yJqFQJ+sKndRmBd+aAfi2eFQtMasQ1pptp2PzjROByH5o1c0xkHEP\nh1EmggYkC/U6S/ZJ8ZDW6OR9FxAiLImop+NSScGqp1P6UDWbIy8pc0+f4SQG\nqB+ppAxDXJEE+VEim0/zmBblVl6H/EXu7Nt9/+CaIGUX0a++60gk3SWs0dPF\nbNF4n6xLHSUl/8k06BfiUG2+I6eJKxHORVeH0m+g7ZbjJc05YwumTOeyp6Qs\nIFjo+3ANaYpi4y1KUPlUKw/EaU0G7Lw46Cof+lJ4Js2eb2XsHJx9WX/oZ41c\nPdVXGszwcmmU+FyAoGMJ+Qm/vAf+arjTM30t2OvXfssXCMd48Xy+2Z7jV330\nKiFG\r\n=S2iD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/elevation":"^0.36.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.36.1_1529336417973_0.6164125957732174","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/card","version":"0.37.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.37.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89dd7c79052d9a5906605c946a9426ebbc072dfe","tarball":"https://registry.npmjs.org/@material/card/-/card-0.37.0.tgz","fileCount":7,"integrity":"sha512-pBTomsmvPY07/Ecue74JvZjZ1k5uFo03X7jWU0ZYIULqdjq2PUQSDrz7KmZ6NVJhjOpquwsnqpZj1pnFLzpe9w==","signatures":[{"sig":"MEQCIHA4C3IXSk8QTizuC5Y8RI/CoXTXl2AxxfSiJCSCoBolAiBR4kGtuapUe2ovcOHhURRHutPsSK1zc3Faz7LR6ds7xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqOiCRA9TVsSAnZWagAAdTgQAIIkhfezIYuR2GKudEFt\nAU0Jvm2uxSa/oh+Qv47pmd+oIMwsNaPsO0vla74PNhS+imU1brLtBRPi35SP\ncgncQMbypD+G/gnou9kkskReztDLLr9aBQ2auighiHcjxGGsfHod068TiT/b\nIojtdI78iS5WSrQD65b+e6eNaM/KS6MFs7uMguLJ4yJW5ctW70LZRGN1/syH\ns4//xP1XeXRE8krkTg+JrOBXznq5G8O/wTKN7bnFY3k2wWTasROR2JXFjR2F\n6MKPgi2P9yr0wa2BJY1Ar51PW/GOcx47st0VO/cIOzLL1NRleFPBOFglEfr7\nUHkLdwyZoMTdw8KE+r4Qa+uyCI77IVOkbNJpDYhT0ANYX4E7SdVsfFoEGe3J\nCAFvhNXvIqRYuB9C6IXsxRfi5ha3gr6bO/EUIKdL8868NNhPpUOm+/+iS212\nnHn5XxMaQ0mcA2pxpuKXFG4cbULmx9WkpZndEyf9BehNK+/S5lK+NlId/pVV\nn5JsZgtDqMUs0QqYkgOgpfGfg9ofPe18O3neF7AulcJB57p91mP34ZQZimB9\nMaXU7eUYosiER77cH3YbQBIYldEkH4kUiPhhAWd7weZcsrH/JlVIBRrZ/gwf\nGVQJS7SCCBLmlPLllx0/4DxqH+S8VnKEy2n+K12KFoRmHpr7nggBqo5AoQ83\nfZ29\r\n=9xnR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.0","@material/elevation":"^0.36.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.37.0_1530569634344_0.5742900988301027","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/card","version":"0.37.1","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.37.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c5a56814cacbf4ab3b09b5aea030cf22857646f","tarball":"https://registry.npmjs.org/@material/card/-/card-0.37.1.tgz","fileCount":7,"integrity":"sha512-HLLov0DPnJJbQulkg/gHSlJlmDRDdL8TKR8Okd24UPjzQx5azjE6TUYjXDLHxESmZYYeAcDUcs2wq+j9q12ywg==","signatures":[{"sig":"MEUCIQDYU4+q7UpJ+77KFu+NoABRPkevNJ+7/+1UEVu/NoxCwgIgKYDD5LAvw6NkbuqtfWvYUcU0SmbgP8oeAHVSNoXdr7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvOCRA9TVsSAnZWagAAAcsP/idQuudIzRPf+SNeg5XZ\nX+W6bNrkuk91D3BQ8XQk875bOE6f0U8ulBoswTGwOyFAyZ3tuqT2vseYHW5D\nBTcPqq7ZURR0B/z/ZRuoQtzJHcSUJW3sfTh/SxxiO15jmR1rtk/KbKMJ6zM+\nRqaPydOUY/jCwhYR5FSaCZG8VGQxRv04M3qi9SjwmaaTON4mFbtiUSzSNu8a\nCVBARZ5IMH/yI3Qyv+fsZDiLUhETnQdPS823p4opytszzjaXvRrQPYbZBLS0\nPH6EFB1/HTMheWVjGeZcheSi4YpTdzozZZnKTFR5TZ80R4v2Y4EtaUhbAz9n\nsfbZ8IK1fxYzVaGgx9EqVRVfMUrI+N4fsMrYpMNgTgn/Dis0tp6Ed0Szkici\nW2YUrqqz80bL9RFbyrhul/iQJxDIejBQyQ20IqiVg3/wfWB/ojHaFHkxmdiP\nhd6lgIyYF1PWtJRq3ur9/Kq1cyLB16MeUrCN0hTlDo4SprK+RzAcJ6CYpYTC\npL+LH0kgyfykXMqurnKHjdM/WOhltghA5tXwiuuA0gZ47YJZg8l1V1L26wX3\nTgSf+63v0tIFH0v8iuWCa6HTCTCMMkCLfw3tKIWYQR53/VdH5tWMpZByriPR\noTMn3gF6QoYyZFbqLYGEZwFZdjXbq44ptW1ouk7Zv2WslnSbRnoUmSdXfSFE\n2Y9B\r\n=uUqb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.1","@material/elevation":"^0.36.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.37.1_1531775950426_0.1045231971680467","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/card","version":"0.38.0","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.38.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bfc488d5f6b4d459c1287ea2459369bf6843344","tarball":"https://registry.npmjs.org/@material/card/-/card-0.38.0.tgz","fileCount":7,"integrity":"sha512-kpTvrRX13Eh4rzb2xLSjJTfWUVMhED4TtfC7tDsYAY6UnDMcNYVqS/I+FvsmiwZhUzAgKCb0PPRTkNmjoV0l/g==","signatures":[{"sig":"MEUCIQCLpE4Nru5S+gX+ZNpQ+jhn9dhwpnT9aTxeY2XUUXwJjQIgVPyZdLh7LH8RPrZiocAGR+3MDnmY/Z3cK4GUR7gkVJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WwCRA9TVsSAnZWagAAVLkP/2wDJ565zLl+H/ukDfP3\nuEgtcczkgscPx+4S88sJZlUTrMbLI/DpSRJn5bbk+xuG/fBYPLPRH6F2EoAm\nETYs8nY8wlHMb14aaCWkUg05rIm47A9BQ7SqQCbll4irjSKc/O4peTpWUC4e\nBXs7PR1ZvIfRTzqGJb3WI1MHToW1kQFAxgC7htAIxIhKmCPEIviw8ABZyGx4\nOK21lqP1m1VBlZE/tqJACslCNqc9k2PCcHf+Mu70CcgYoDOZo8OJuFRUIeVu\nSIvN9eW7sxtI9TqdchG7IBHHd46XW85XKNc37OfvIGrS8rnOt1ZNRtDktxTw\nO8yMiUN+UmJqmcHlQTG8IUzRDTlF0PUd8qDiGsmvIy5Jr/Va/6hZBlWh8a2S\nwXmpDFVU8egy4QZUTWPM6+UjQObglJvkN0lGFSRVwmtUZEenLsTN6h9kYh3x\n0G0GGEALkqFYfpLw7UPME1PqPqSV24VV8ttyoY9JmwSTrOusOReMMWi66nVg\n/dVSFPZnWEX32eUqLBJh9erORLTfYP5BrbAH7pPDV22tnl1wrvlrT0T0wDEy\n5AKLZvHUwf5U+Ubz9CdjCjCXVpQowECtPJHkclNXSrqzY4wOOM1QoxBI3zEv\nbJjvzq7EkpDUaApfgMdQr+wBG6StmUQm99Kzk+nwzjIWkkuSl/Qq/1U/gTXZ\n/zcB\r\n=SI3E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.0","@material/elevation":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.38.0_1532970416178_0.4331795687908382","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/card","version":"0.38.1","keywords":["material components","material design","card"],"license":"Apache-2.0","_id":"@material/card@0.38.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b5b905212703b4ac67aac8825a30f0112b88f26","tarball":"https://registry.npmjs.org/@material/card/-/card-0.38.1.tgz","fileCount":7,"integrity":"sha512-IAJsjD6DNjCUqH7Kk4+Xbehs8VVIqtyFKk4hgAC9poiMWi1gHs9M0H5KRforMlb6lXDAJ9b5t/7QvQodC++Fbg==","signatures":[{"sig":"MEYCIQCDh+7mQfmDzmqUvScaIPrM62TdmMW3Tvq1Nln4m4Ht6gIhAKS+lFs2PpMO3RKhPtmkf8u2BLRP8EX2TsKJH8xzNvis","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcexlCRA9TVsSAnZWagAAxsgP/0s+6CvxjEJubw7QPpZ3\nH9FYvrfvyS5xOqQ0RsMM5CF1BgRVXIiypBG1m8GhFgzuC2xBO6lTD7yEXY6D\nF4j+z3DhSsa5vpOnpr5m9/Qk9tytUpl3uOkrVXYkFGHx1qq0yP3DLAxAdX3G\nDhXjEkELFwDwsX9KCxIOhkd0q4oVUutZsKOrmokqvbnacMInKZdsQka2NDqY\nmTXpxP4sZp0Q8t9Y5R8EptLsHvjyOHvz2OZG9o9ofkjptS+5BkVcoY6lFnkO\nY3GJAEuPlhXA+KWoABHy2PJPj8ClY96d3K7RjHzm+qPJeK+alZUDO0Vmd11f\n4uKW3QJMLq/OQ8PEPVXNWsmAu2yUsYq8maAWjRzA6MiwFEu5m7jF+CgCyOBl\nEtlvIvPtZxi5NSZFUysWWHzLl3wASHdtNpiAmf2oq4BLVYFfgGbzh9Yd/yq+\n651kHuycjJF03Zjfti37KCRVpWuSSPN2hr9aBHhtOSxBKr5d91eQwbE/Mcwr\nzb5GapR3ePeEr1o34ssitH3Eow/k9MLRL6PMXbxdmnhUutrewgjvXrKTympr\nxRzTyQvMIEr7wbvRctoonWoYAKsSa1tt/DJjQcc7z/YnpGqP+Pub2GMsOXMq\nonzeDvBvp1vkUKm74kmxbkG4mzvBkwSB72rvmNzL0QDYnnyBELKPMt5y4OOJ\nJ2bG\r\n=EJWt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/elevation":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.38.1_1534192741009_0.5998358604491179","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/card","version":"0.39.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.39.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c9b74dc5859433dc55a9d18e936ae5151aee30f","tarball":"https://registry.npmjs.org/@material/card/-/card-0.39.0.tgz","fileCount":7,"integrity":"sha512-ymwENJ+1yWOiFGseqeQcuRvR7Dp0y9ckqfi9i7iQGuVa09WGLFRxR489OmgfkXju1REc/sRMiZExpr9Mr5nNWQ==","signatures":[{"sig":"MEYCIQDlYYhO3aMXCdLjauYsHHmjQUMJV2u3oHKUNCw1bnP7YwIhAO14frmCiLFdo71ndJCTfzbrxXMmPic0pqSdzIPKdGzm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeRCRA9TVsSAnZWagAAyt8QAJHJNHsep7GB/muThZ59\nJF/a+f87VrEE1vKM267/JUyGJXYnWwYNXQPpFnWGBPy1pLhAvZNdcgL9KZAF\n6b0aOHYLHT+1epy+p0T6LzFl8FS1Ru5HhouGyDT9K6s32sBFyDT2XlcFhR6+\nkJWwr+wMJGvKyBEN+sjvSxOLgN6jT49Gad0tr3nwv22Xwd+ISL1D/qqWivJz\nW6y0uuNYk5MYDUNtED5Ca7GpwgxSdKli5EJiadYb9Tpjzu5kk/DNxdMCNRO4\nEPc5Coh7/5SVYApzGvlggJvpJs0363iQk3/GHoLnV07bVpanaYULvWEvlh8B\nHMywz/XjBUgIsanDlvKFh0hA08zfLrJD34AwuRHz01IjFVihfqLJq9AmbfS+\nK6Ql2tPWfHKYVjNlzvarQiXHz4rdg9RZAfnf8UgidLpjYcB+RkpNco2grTQG\nBAghM5E8VGX4GHyDxykw5pQhmG2fk+2cAKZa59xB6E9sIrIPzeghRAT1JXHX\nU+nj6I6Emk9i8lMfWGD2uPOfhoTS3Qg0N7WPItYeNCELWN/aMcT8py/ixnpT\nYEk+z+4b0HB1kvLUyvZOpDoDuGk9qJU0XxLsWIapdLwsTlmyOINdzCwJIGHT\nFFe075h4Q4JE8zfLvmHBwNcAlfFEZanAx1o2aeoxbbuYA7EplRn03kearm0c\nOXgz\r\n=i0NO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/theme":"^0.39.0","@material/ripple":"^0.39.0","@material/elevation":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.39.0_1535391633002_0.14488590676974256","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/card","version":"0.39.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.39.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8465d1cb5702faaa90fe978b91d69f0c09b84abf","tarball":"https://registry.npmjs.org/@material/card/-/card-0.39.1.tgz","fileCount":7,"integrity":"sha512-AKYg/xVgXNa4GZguaFZPJxITLZ0HROElQI0CHJV1kUgtty25eHdPe8z761ffqoNZ5G7tggbNUssEL7YKMdrJFQ==","signatures":[{"sig":"MEUCIFeA1Vq9hHG0nf2DjcA/OhKSxa0uRTJd+FW1fHh0IyZFAiEA0vSKTUhBYjMolCi6GcTThqDRyfPgyGd4keUSwEg5xFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTbCRA9TVsSAnZWagAAo+IQAIn2qYkogHigjLyiyRO/\nfqYY4k6Skj5YccMa/WxXBVMKUF+QcKxeKPkE2si2THKJmF0C4Q/StIYFJC52\ntBni2zo+ohHQAaHBVCYJOTr0dI2IL6TcdVzm+Yoxc1uTe5D5E1JTiw+pK7/5\nl6EA5HqY7PLkbSK5LpXCZ8egCEyf2+nxDktCmhndRsWkyesD2+2SdL0a25zf\n7wD83KVHEsITFAmrsnwa7xDO2t0d6SH+4YhzvxOYfQSutZRLq2elhGwCcOEW\ntKgquIe8CPzo5RVwD8BcQ5qWlfhoYLooyZ7VYbQXLIrxs3ADAgozeA5e99WN\n2C+4M7JwW8aVTHqJi89TH0aozEWUMQ9OMQPWwVqN2BehY2avXspe1kbTnp62\naae2IQ/ox9Ti3wa/vhi9CgYm2uQw19ImVryHuThf6kBNbwB18omUcHq0POa8\nayHBwsMV3h1aK2TVe5Ps7PS2EIRk8hEFVVlyAJXOsTIyklDpnTKXVyf/FQJr\nSRnKXiZKfu3hH3Npy6psimbipq5c3+XoZEv9WeupalBI6RYsfY/W7ftvXhcU\n6avt1hkRVe2prfisPliqmIRE3+QmS0Z4k4s8pfF/iQz+gFciCCGuzBu/TN/g\nwslY9mWPH0/tXm73ySDnNW3OaUf2GfD1Zct8er2eONAVdn8tCgQu7Sla0QSd\ntmmK\r\n=mEJk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.1","@material/elevation":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.39.1_1535751386221_0.9436178946432316","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/card","version":"0.39.2","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.39.2","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"479d81894e10379905f6149963240ddeb3bc0f6a","tarball":"https://registry.npmjs.org/@material/card/-/card-0.39.2.tgz","fileCount":7,"integrity":"sha512-zQHnsOaCmBLwOplkZM4oEKeOiZULDPRnuA5HQlSIYNAnEjSicjuvy/cKOOo/Ln+fNlktfquTmcSZPsmJBzauQA==","signatures":[{"sig":"MEUCIQDuJLyI3EIqyLViKfxj1Fh723KnGbXVG6OVciq4jM8AQgIgeTlJdoWnIJIoaGAn42l2pYz1xt2b0HGqMEonpIMGFIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/NrCRA9TVsSAnZWagAA0XAP/0YHlseuRmK0A2FfCuB2\nZEXjU0QWBbvxqWs9Z7irmS+zq+5VMeM6xUzjHVhG61Lfdnea60DvtU3x1wu+\nN7TtstlZ2+e7UXLLGlAj/TAs2x+TkPrd+UaJEwTdLYmqZUv8FWEN2V7acgmL\nsU3Aakj1Psd+JM/p7XMHVLf9VOy5hBP+r3Q11aIhW2XWIq3y8euzzgLgUhsk\npFjkW/XSYwTTb6u1ic/Zo4cNMRzq8DmR4xTB57cvfm6N4GpjsdqoHrOAMP37\nLf7X+sEwD26ENmjqLpvsmJKIhh76CYSsZXiCY4olD47XFZR7Ep7G115dGsP0\nUd+FrtfQvoFSTSRgNwgPQb824SCxNUIeaYAG+ZqYrY7vQqBueOc62iQ9Ns9+\nvI2bRhNzUYW1XkQLDovvzjyHxzevHZhQ8Q2hIt0fYCJ4EMDUDVN0frcbK66m\n/UhR1OzHkRM8cXoG92P7TkMRpGIRmSSqmGUt0pwC60zVhtHeP7wZIk7QErfL\nQas4mIHqWNVR+nPK+ROIwcXZdPsMDebnLtTaFE0N+2q+yYNbVxB8h2eRH5vK\nK3aXcFxhhrbbMjjar2tbd3CjQYgswTASzmBBKlPh+BSRWXvW+D1nkKBEIfUJ\nfp0LAUqW6wP7O0ey88JU9oaqzMb9QWfvXIVICy2qqdtALj0ctFA64Qtfj4Mm\n4ngO\r\n=2tLd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.2","@material/elevation":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.39.2_1536684906665_0.6906722416784461","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/card","version":"0.39.3","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.39.3","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd66454ce3560adb9554b15a9e4d2284f17b9af5","tarball":"https://registry.npmjs.org/@material/card/-/card-0.39.3.tgz","fileCount":7,"integrity":"sha512-5g+fgkMbYIztfME9nYVgPhQNE705rdEvS6oCbEGZuHgglSdhCqmAgvptc/fGh7DiDN5gYevr8RoTE5SU/oWTAg==","signatures":[{"sig":"MEUCIQCmjtbKV5sTA2u6eaJAhR62kHDl4bQjA1oPQzkXcrXlsQIgIJaQ+MZWpa3aUsMEAFQIlCgx7snI3hUEKpXRQt0uRXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/j/CRA9TVsSAnZWagAAb9MP/jvObEp9y4UaGTf2ZSRA\npcG1PkKcKhkvMm183IrVhmLRNpO1XNrsUENxwiWsduBqwwNDZzzlUALMWRmj\nLD4KteTBQbTEeK9hjCKlGdm5AxHIJb6Ml8pts2C9HXOYwLj3Z6hrMGNS2aXd\njpS8wq1nCLodnch5K91MzCeqROW3X2556igu5z/jfW1kWLJYDH1VlxoM3GFC\n/b0BUW/8e9Avzz9amjslGRSwuUuPvvcqXrNCHx6RtEptJwlkIjvFW5QY7AmF\nyJduTIoi+hrnW9x5GbdIu5e/q9kNdt3t07XoxTEyXRJ6oCfpT71/T81MpAdP\nxkkip4KyB7445hzJYaTgQXET1DCONfr8iotNyurmuHHPqQ+naVuj1OalAw40\nn62coNLr7CnEKqHeDc4kgdpX2r3QrLnFurLY/1g8MhtXmFrv4MLDyu1kudRA\nNqUGah/uHm+0CePv4DItYzRotzsZLAGq+6tEXntFqyFP/QskUWhfbXdW7hJw\npvRLWaJXa08nDMynglh3AIx0u6mygRqtmevzRz4Tdu9Q9xL1ID6oyw7ufe7I\ni8qcUiyMhhBeuCXF0g3qQg4nXEsrdizNMR6lYlZy2XoWFGnlcIuSvPy+EmGJ\ndZ7gPYXfzlhzYbbq+vTIfNgWlJd3Zjs2oYZETJGcFxVfynMb66EGEvFteA31\nm2sE\r\n=EqnF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.3","@material/elevation":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.39.3_1536686334799_0.35359567694816896","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/card","version":"0.40.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.40.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8de9118cb8c5b297480ffa6c2bb044d1cd7d68ba","tarball":"https://registry.npmjs.org/@material/card/-/card-0.40.0.tgz","fileCount":7,"integrity":"sha512-Af/67uDx4oxHz+Oas0ZB69B7dxwcHYGW3mgyExcjfcE7Ku+dQCcyFwt8ooVWAxlF27vBIhEmbHxqc44dMdJLIw==","signatures":[{"sig":"MEUCIDopkupDHgdR/zTs2lLFOt5A38sXyolrYFpnUZbD2918AiEAgLEXgjZDyBZ9iUDMrdb5E0+PUUkQzswOJO8dtK2x8es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUKDCRA9TVsSAnZWagAAKzIP/3jNQnjUsdT/EXhO8pX3\nJ/eBwWMp0+KVbQdpDcTbaygfX8zw60O1OhVoCztzTmXraBZMMlEqoPNB5CuN\np0eiCEuDILaH3yNtCkaf0Z6X/NWY8h4L2FCQSkH1d24BuAPw/6/rxKUkpsNA\nbce8yKwDW5ks5kajNwcwJkaP3J/8A/QNCff9BkPL2PulB1+E01NqojJjjqk/\ne3DaVyUpqR96Ifz96yd335zBL8aeTVeWVvoGkT+t91MvsJeLK5+Jqtef15KV\nCBWByDpnpgoKBConXLNenu2E1/AnhCTK6XbENhkDb/03wRf3RO7+dr+rgF5B\nU5iauCWL18X59XsQr6ULtvjba7McxN/9/9HhuHj4NsVNFBuR9Jt29oKXYxLo\nkRoQKwB++ct4PR8mqIMFCuNlHxV187pxLiYGVyB8+XGa9Y/KXAbreBvqi4ET\nWy6s38iSwgnb0/qtHiYLnj5NVN6zU6SLMgdHOBVGJ9L99PDpTDEmHjP4v94K\nexosl+Ul2vAyA43AptFEwFLEbgaKLynVuDRdUsAsl7czDeLTaWLQTC/s+9Rf\nTeWHEpIttSRZmuMpqBBWQYwEReQPolOxLSS6S5IR9/W2qXE1OgDRgkiz7qdN\nfJlYrk6pys5/w+vNhDTFP3NFJRSGAEZu4oKiirAy/yEjSUMdo1easrezL6LL\nt/UK\r\n=7UIL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/shape":"^0.40.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0","@material/elevation":"^0.40.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.40.0_1537819266813_0.6973320869375752","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/card","version":"0.40.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.40.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b48a9a985b8f65d48f28a7913296354bcca05f8","tarball":"https://registry.npmjs.org/@material/card/-/card-0.40.1.tgz","fileCount":7,"integrity":"sha512-yxywT+YSjnmO4kBfkhiU4agno6qXbPcz7rfNDdl3F7F0rSNVgk13SwqkdmwLZ4+1lGwWjg8NGihm0Tr8nranLg==","signatures":[{"sig":"MEYCIQDs7eMyDMA2+DExYzDZFI8TYBkz3aL7p7kgWMSQgRnzgAIhANHtD9NlHs9ruHp6L1HNwpPmWjz1FvQV5qCIxeoP0/kH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8QMCRA9TVsSAnZWagAAtYYQAJxcq4RfIfMQRNC+RXjZ\nYhnl2+8PGmMNK8ogKdEZvBQQ4GBs4prrhiQIAr4uSRifxetG96cbU/qxA4qb\nScNEjSbi8hjWLBt3tVExpMnEEVvvQrSHMfoHhAeI0aDZ+HXLFFWokZ7BdV5G\nz3PHmVKrtEuiywYbI/PhKXwHKeRu9GHDedcW9dWd07LCiGABJnxnxQhAQd3C\nlI6VdtL6RwJ9EuERhFNa7MHHmRUBxah5GI/pS2nKtAUh/Ay59h0HFPYp7LBC\ne+8HT/trd8p1n+hCilcogiE3FvMlnUtq1YfU95vx944Pt6P02ER8EseGs+H2\nLcIsnRHsgwu2YHWLhGKDa+0mA+ny5zj2gWHVl5ZupzjhqAKY4KeA935SEwef\n2C8NyBg5n8EZOhhf5y140y4g26X5juUltvsEoZcvUbRWYr2/KGjQntcnWd0f\nIkh+9BoMwxfZIkbJ6SBIXy3FFB3Trd2cPUV62bVFPOEIcrIo58+cuKOxYpQG\niqdBv07rBjOWZXablwGYKfxTMNqETtlUBUovlp07WpvhS2FQhe2hnDDoFcAT\ng9wf3N/RV6H1o3hrUdB8yhqUtZxJr6ejO38qevY0s/goGlLGhDSbWQUmhUmj\n5jg+e3grmLygKT4zyV+ltumq0cqI8u8IUui6HD4w+PD6+bTrjbSA8nVWve1l\n4t0H\r\n=xVT1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/shape":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1","@material/elevation":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.40.1_1539032076177_0.6486085833458348","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/card","version":"0.41.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.41.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79f0b529da8a533d4220017ee3c71dd14c272622","tarball":"https://registry.npmjs.org/@material/card/-/card-0.41.0.tgz","fileCount":7,"integrity":"sha512-6/NIHuUZkftHoNS/l3JpROrpvI0TqYv4Xq9O1iRnxPmw2hwqvQ70LucE4+bJ+YzVomqYarV2KrtUUPrwSa90Lw==","signatures":[{"sig":"MEUCICqBLURevCDzi50aKlmuP7GLRJ8xrLZkvjmyAIq/XHSvAiEA8q6O0+Ysg0pqCXbBpO1g5F4SNttig9FLChXj6hbVUJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vtCRA9TVsSAnZWagAAd0oP/RZXIkW42uAqXe1EwQAX\njn65SiyVTZaOw/8udCy2AYVlow12tusQBd17PHd9w7wokAe9TZ0nnemGvka0\nANtmG8M6qqe+FdcdZBffVFzaHl6LnXKzeJQSJO0wm0RgzSkad8RgaoYGcgdM\nFw4n2AJ3DAPXInO5CYDjnrW5XQBxtceZYOs1VfQFVcObySURejwxO7+Laadw\n9AriqVqTl5l9EG4GDyKa/yHJC2gJTm0or55oU5VV2O0b4PgJB21esccPYfIQ\n46GXtia+d6078c9kLIfrO96ZV4HKZyjdde1mf//wVZ9whkdSRq6V/UP/oi6K\nHPkXGALvO1y1ATJeqjpoqI1fLBhwD5U3x21MX+Mks86fGxTXwlpTquuWKskS\nwZO00WxS96E+r5gwGIml8GtWE6vC0sieWNRbJn6aZiUXYwoMe+dRl4Zn0cES\n39qu7OhOFXwNRcQ/5NDGi3r3NAOTsSTL2HVHVujB9ZdEKYl/Dihj4koPf9iq\n1qjlTf68eSgPhsYY7OVi+fE2kBzLjPFbeGYkvF2EjMbSoYrcAug4wiP6RvCP\n9jL8IEO35PAarLJT/regWywKgl+ybP8OY0Ommvk9p1pveNePWAXk6BC9tJNT\nIco57RR39yX6nszbPb+wJT9HuxzaI9EyoOza6qW9kOwYyzZj/5Z5mkTDxAR8\nSUy9\r\n=VjSu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/elevation":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.41.0_1540844524937_0.5872026664303112","host":"s3://npm-registry-packages"}},"0.41.1":{"name":"@material/card","version":"0.41.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.41.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"962d282eb0a49c4539cb90efc916df45994a6ceb","tarball":"https://registry.npmjs.org/@material/card/-/card-0.41.1.tgz","fileCount":7,"integrity":"sha512-0L3BkkHK9qRXNh9MOK4XkCYHmZcqwLK5gACIWSLDOjEefmifBeahJeDJSYLVHS9KWl43glIGSrpNGjyXs19mCQ==","signatures":[{"sig":"MEUCIEEqXrBpb3oFqTRMWNoXlAB6tC4FAKk97rk2K4AFdy5dAiEA2kFmgkVTUtAimhyIiW8hbqdGIZjGcTsd1pHJUC8Er30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7HedCRA9TVsSAnZWagAAlfcP/R1zahMQCMBIlsWQHFeH\nA5/H4EQGF5aPHCIanxe0q8wqAgSMN59KAsP1Fbrj/8pr2tr+RStVWB3DHiYE\nTeOT9r72SdI8Sm1dWQbDMVJoMG6MRlYSYTErKAPKww1Dret5L+AWNfZvho++\nXRrK0Jkq7AusnfqS9I/efazVgvcnXMWtlpsm5d1Gn0QXCtozJGO9/9jntEpO\nchqEwbANnNH0a5O6aFC6TWifxjWMG1mFm0X0WnEJenvrPNzrj55r86gsjqBa\n/4FIZIuCjMYqdSrTy6TCtXGrNPRjk66ejxqepb/8B0mVF9CvpVatsrYHJkJf\n+g35oJm8OmMJlqRZqLaq84QYdATSQ9VjY8V6NKwH/xCilveJ2Go/N0erk7Nq\nagH5nppyANmB1qWC9YsDlbuVSCtF4s4QcIxF5VeW+fK4RmRGiYhrVDeoXxKL\ngd5uhsP48100bf4D5tnUEBlyEnAoeG1O8fdSApmpM51L4ddvMvgz3Nvd/vub\n92SowDki2pkLKH+AZeKE5pRotrKsps+ExnkYGbA6HnLyqWV7oVWAlnoSh8ZL\nkcLspL5c2GRkBC48E6a20JIxpOCCSg9aeD4WztxTZafm/dRUBl/YOr3Gq/xr\nupjyk+IqYgHywia+a1G1sEFloRPp+TQDPMqfB3kZVinB646VA5Q/5DoFCoMy\nPhQr\r\n=b+nR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.40.1","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/elevation":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.41.1_1542223772578_0.6567239085574095","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/card","version":"0.42.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.42.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8c4674167f15c8abd895524c74496c0e1e503c","tarball":"https://registry.npmjs.org/@material/card/-/card-0.42.0.tgz","fileCount":7,"integrity":"sha512-Aj37mG4HP8fVGtFywsJZuPhxHy6Fb4G59PVzdm7/Yz3VF47v6FMEaQ418kHg9K2qya4al6f4mYjipN6h9ZGfmw==","signatures":[{"sig":"MEUCIBVlZIpnTijNHckK/NLvYN1x6bMRxJcFMpsmNSVi4EuqAiEA9wq5otT3j50+XdtMEdyjgL0hPofFJia+qo9nBqcfZzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwW2CRA9TVsSAnZWagAAv00P/2TwwBtvSM4Cv8rt+sD4\ncpGfdVb7Kw0QEDJ7DPFd3dap3S/ELKJoXDyu1Xs5R71BpyAhH0tHFGdYW0qN\nYBxSg77F3C2BNi9IIgWji9+StGiUJMu1o1Nvuw6i73FP6Z0ftIDoBZUabiVW\nKGzbpq9x8It1n47yaQuWJws7oqgEZLFNRG2RS/OnQ5se/mAUz/X9O4H/t1C7\nUjMl1QQeEx2424oHGxPgBVQJnYrF3xnHVqlY3AZrQ8e4XIyBhrnKRNLf95IZ\ntgxo1KS83iUsInp1hsU/7JtTH+1LkVaqrT/vS+GtTRBYS4FQW74JeW0BP5g8\nAmPc2AgVwA6WYObj7x7AaVvXSV7UlFBq/8Pa13VuzD01f6+7IC61ZQfXWuYB\nEGHuJA41IPiTZd1NUhthrbeahOywKSyFASX33rsN7efzdtZ1FnR18BO1TOiL\nnYat7qSmAnOpGZUv9L+uLphdeQPSrmHdCh+sx/FLy9xpJqyW+fM/ETv5/Gpb\nlP6qaU0RR9wwawiW3xiYmthiWSpAy3FxymcP3GKkrI11ci2F6st+M36VjMxf\nYvDTGFQkSeNKX9a/nq3iMmunuohLeSG7YYo9rZn4F+7UxcnrgubxUvYum+Rb\nrT5qpJuhv+4LM360mDw2R9g5wDCdvhgQGg6JSELSavMngdLg/0mJf95KXEkI\nBr0n\r\n=T9Tp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0","@material/elevation":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.42.0_1543964085663_0.7163902832573026","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/card","version":"0.43.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.43.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70c01f45c31cff18651e7fdf61be7a409b3344ff","tarball":"https://registry.npmjs.org/@material/card/-/card-0.43.0.tgz","fileCount":9,"integrity":"sha512-uy0d7gtRWI3d1RDbzWqKnhvDH5iFv8myjd+UJNFGy076ZPZA5re+/RSP01Hc9IX+bDAQzAIDoVWLcFdPD7DpLg==","signatures":[{"sig":"MEYCIQCrpw1+2eNU+T8Ev1Uu4/Zp19STf36TWuyLeBPk4H9nOAIhAKL5288JIlgrztbZWdcrQvrG1xFrCMreD3QHomxoTea6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM601CRA9TVsSAnZWagAAuIkP/0rnUNKQdz27Vl/LNt0v\nrbzJ7k8jN2Mjd4V4XbfCIHou5SaaYt61w+EgzLzW/ljzK85Boj+s1Biz+lSJ\nbR8KMsvq8zDc18ivwv9qSC/nBvhjPKytOVAUkjniAkruobM5JVTkOs5BCnTz\nne/LQ8b1egPy+5kVmG2sVjVRcaBgVPGyrrIiGn5/BsLRrYUPcGCKIsdSwPM1\n6GplMON8+Ni8u0dEVx5hNFFqBq5Zfduc1ky4K0SN1c5N0bL2j5tQ56srDbia\nYC5VKRKlzrgIV6QVs2LOTWN0cfGrfQj4F9TkhXzyf2vEPXEfsXxYvDqeRLRs\nUqeiUhCk70K49Z9RCgzY3N5fbAm+evQyqX9mVbyLuCVupQouAuWC5IRRI5MH\nylSlaRd7g+NgUkcnQ74S2xqNUekvqxKHEsn5N572D9hu2kh4dcuhElMfWJDx\nTsMbicnuoFltbYynYUKTkhcjstpbeGUcNL4tZ0yePNO4P3bHRKn6hACnQdNQ\n2a+ik7HX30lmrtquvkrqHIaGwe917ZVCyRmEzy5JDOcwa5Ww+WK/rsS0ySha\nrr19AYCDz65nMjdpN4t/+dNhXGW1zSyWsH2koI6+/la3YAO8jYT+adcmE5gK\ntfsXY6Ckm4uWYsyse2mfCnK2K7W/k1SCb124ijLSCjRufILabdD7zukF/nvB\n/+va\r\n=+vpt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0","@material/elevation":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.43.0_1546890548995_0.609131362819463","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/card","version":"0.44.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e62050e3e77f525173a015119200055cd7b71bf0","tarball":"https://registry.npmjs.org/@material/card/-/card-0.44.0.tgz","fileCount":9,"integrity":"sha512-fUixXuh133bVp5c1gPIHreL5jwMJEeVIQf0E4xdxhkA+i4ku8fIAvIW62EuCmfJsXicv4q8NG3Ip6pCY+NW3ZA==","signatures":[{"sig":"MEUCICg6dZLzJsRkEUDH8bYJCWeHBnIdfA6P47gy2hLZSgcGAiEAuRsl9lz5FtY9xFLBQuBjyJkop9xS1gifLu31LRDJMpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIM3CRA9TVsSAnZWagAAAo0P/jULfEY/YcmXztmBWhmc\nmhuNiGsetenns+mVohEvNLlP5eF065p5sZMDpj+GzhgOfCvJTtQxlRgYHKfF\nMaanZCDydNjz8dA1dq1J9WzMQ4GzDn5srge3ESct9/eQ2um+ZaWDtmL2uD2w\n/k8hsvrPpEVJ34Xfn9klhHT/yu8KE2nepFo/1UI0nWsB64lpSY0Fo0oSsRn7\njBolgKBZASddq/ADOBrxE06a6bUBYfKtEMmY2QUcAsZ5WCTzseh8Ni9ear6d\n0X3fsKy2ycnSLAxx8YbBuMN5fHGSoIwwrpvcLshvvWlVz6zAZOvW+v+ksm7m\nlr3Z40nT66RUPQeOSLK4DplH2w2kiueyBxnwh4lNBrGLgooN3DVy2vGkRItP\n0SCpqodA3qFOX25xtq25/9cYdns4g0/m7uKXczoJogm0YQABG6y4pXmW2HJd\nktxgskOdbiNz7cz7TgiyYi6yjBf6MX58OIaUJQI19xajfH4lmhqdLwoH0Ccq\nE87pU2jLhkQhYZZV4xDsBPQimXZ0+tRBAya7mt43ICSoPCOsagv5skqPO2u0\njBbMwUQDVJi3xxYSRnQRNjWQbg2pIdx+A1+CSp2kfkwvysCBEM4LEqCbhX7w\nakVQd7MAKjLoG89/AzRaiPrYGASHScz065OVNXgLFxYX/lWJnpLzm3Oz2vqz\nDS4L\r\n=1IfE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0","@material/elevation":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.44.0_1549304630460_0.7674911059059284","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/card","version":"0.44.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@0.44.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e72efba79e716143d530c75ecf18216aaa3c7499","tarball":"https://registry.npmjs.org/@material/card/-/card-0.44.1.tgz","fileCount":9,"integrity":"sha512-SNun2DrzYMXTRfGUSTKkKRCO+2MIuRd+2j3FhjyBUDCaPDoqaHbDIK75vTSXlsE/xCXuJ4Uv4M/w0XS7RRHM0g==","signatures":[{"sig":"MEUCIA7GBbTB3h/HjpesIRgPN1IAxjloR3A6kkxpoiiFBR6JAiEA6G9PhCTASvclafg1mlgfwTLDVSHKpNCE8pIOF/94NY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsXCRA9TVsSAnZWagAAUMIQAIQXvJ7OWNLwAe4drzEk\nGdO3kWC5tcD0Z6DkDKF4/kgCZOfEU5mnje/8ZjwH/8vbk/Z1XC61+uSfLDEz\n52TL+LUtXGzMl7wsmSI7A3arj31AH91BnhQlg4pJOmu1S2MAiqNSHFgTIe6B\nxpIz5lNDFCODTAaB+3MebXC9N/0Fuc1S7U9iafqs3vcj/ANhCJsYOl9uJKkT\npznz3eyuSVw9MZ66UZyyagFbuBMwxM2J8WqZag0kWr3Enp0b0oETyM4TzWL/\nACaxB7NtDqy/gtqdwxIiIuMcVnwXaY4nzjPjbs5yNb3oltqxlhaTnmOpVDkj\nTU7D8SXrfx0V2jD18OAAlCwbAELwCOV2S4qqv+TYGdGXN6oOcIDiGChTt5ln\nUo84H6n3DQwZGSNVDkKAr8KFCTNJQRz0iQYpbBPvK86z8EeozuH06KiaBDfi\n3ATNywxAQp6+1dd0vYe0HPBElVN/BBpXsnyqnBR7nOeSNb7pPWjvO/3mWlfT\nL7OKp6RMNlQ9WHjD7KvJLWaMDOGotAg9h+m74wAHOMV6I7IGD0j+5bWbEn/m\nulRs2xWvKoEfhpghD2t7VTv4aUb4hJLoYMCvxoPzvTICzBci1pEONWsrR55N\n3qD1el4uVsGTq8qxReEWg+U8Sww/EDpVxa50xM3ZsiaAv15cFqyvKmugXFxc\n40IM\r\n=5et6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^0.44.1","@material/theme":"^0.43.0","@material/ripple":"^0.44.1","@material/elevation":"^0.44.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_0.44.1_1550617367236_0.8545103593528087","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/card","version":"1.0.0-0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@1.0.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0291d20f56f03446508f96aa370edc1d08ae2b0a","tarball":"https://registry.npmjs.org/@material/card/-/card-1.0.0-0.tgz","fileCount":9,"integrity":"sha512-XydyX+ayw++n8oC357eWtfxQ9GJLRVAa69SmgdyaIt1XDTaOk2VtHbYZh00tRblxMTky37txYZ2z3VqlxVC7Kw==","signatures":[{"sig":"MEQCICqukybUxAf4HimmF/TIYOe+aWjsiF26NbqdEDkXHIh5AiAEjDFna62IjWbj22d0xnxPF/kTvqChF3ZA/HeoGM2L+Q==","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\nwsFcBAEBCAAQBQJcdyRkCRA9TVsSAnZWagAAupQP/2fu1TF07TaYW7BjIIE1\nA2m7YUHf/GhBYsgilbFJVHHyciDkhnVzNcUOVCjnzvrYBsWjo9FjV2b1WD7r\nbCLQKOQ7ssDF6c+h9xWgd5PkCFj96HBFKVtyXDkv9ud5sxIT6oWca0ln0vv0\nvlr7KXLbhPJ1UAg6dkzkNWwXut1F8nWCECVmaaHi8udzGzBCnFNXMprLPm5/\nXDIgHlrQ2xSd9ap/rCfRTKwEWKqYh2ublPJqzo58JKjGvkClkpiaEFcX1+B2\nmQ1Sv6nq/w9t0aEorHU31ZrMpVrUErutbiS5E6lElz8Bs+eMiMnZgkKvN2JY\nxZpUGgLEMKzhkToeYFwJRyPXIR/qUDeKcNZWbqkKETjqBol6+d6aXx7DClts\nLNZM1A3jwUXaMuNSfLM1rxqtiibzdo8ZF5h5occkHl5YGaU5kl8eSxVT9agx\n84bmB833j0nWmOBUoFP9+rDlCLnxBF49MzFIKNe/70BdZ8rpgCSTm0wAQgNi\nN2sSwzOE9fsmVMJT21VKCB2Jv1Nnl6zvk9E1qRgFqXX+Q18Pbjw3voe3Obo4\nnEClGupNDmND3rU+VPna+FJrOhm29gySMwUDVlP9zqq9Nm80oWtQ34im9A9q\npVlapmxOBvWpNR4vZKiXhm8VQ8rUmdYQIO1VOOSiWGCiT6stDXpeurjdgDsv\nYRjU\r\n=bPof\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_1.0.0-0_1551311972125_0.2815234587660329","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/card","version":"1.0.0-1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@1.0.0-1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","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"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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":{},"_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"}},"1.0.0":{"name":"@material/card","version":"1.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@1.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a359ad1dab0c3caeec3750ac3fb5a105beba5a2","tarball":"https://registry.npmjs.org/@material/card/-/card-1.0.0.tgz","fileCount":9,"integrity":"sha512-GtTb7Ygv7wt7EjcQOj7/XN+gueD1UY8/gVxw+m3mBV/adgSo3u4NFDvVIWG4OMqtOepIp+3A7xZ+Z15X6q7xRQ==","signatures":[{"sig":"MEMCHxoCRvKloA/0S64FGrfl11QY7f5QYT1iZD1bn2b0Qd4CIF3GmDOTcjehJYsu6tFs9Nll9YybsJNqTkeudEqAYHkw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDa+CRA9TVsSAnZWagAAeuMP/3ac3bqjpLsWSybY+qlO\nDLz0vaoR3gJs80Mk/jSxqRhJccEwGhuEaAB1SaYUU/9K0ZfBNPHnnnau6Vk0\n63qckVVPv3aJm6UzVwurxuX7c0MzijeIATI/6lzCqNwzNOHNsHOSqzqDWzSG\n/hszjiPJi2464Ha/j7PZjYozVdvjfjIWT/kgIlTayexQxC06ic5N61vqE/4X\n/FEnbPAMEpbyMUZEox1gEE595c+F6DJ0TdKcolEaXMGVimoyjfOVN0YfQuCd\nzg1L9ujba3b69kFa0JisVCozNUWJKIfjLOKoNaN55Y2byKgB9PmwR+ukdhUq\nK8Y6d5c+d2/EQWmc0lkyDymDoyYvJNdf01ZTc13TvhW3ErSbc5HlWABHgzpC\nHXRVZJeGcIDpCvgcYLZ5PeSqopdHANR1HlUfGGBRq+Feul2wgVW+a/Eod+zK\n0qv675jvG/pAaW2Ksf+9V7lagCJ5ST+GkUcxF63SrfT4OzDY+HxLEoFmT3en\nS5Ljet9PkA1kTWzYwA8J7FINY+0KogllYn8njzWfHaVHqqBpmrMyz3LzHKaU\nwh4aGeBSK67W31uAIk2fRpfYAFQjmDiafmUl7SqiUHQ2/o2V1PteN9Sddh/d\nyysgNhRM9juq2mH65mWFTvYlGwOZpUal/FQ0ArRuZx2l+yDTsVfQ9+E0WqKw\nFrh0\r\n=pdDN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"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":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/elevation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_1.0.0_1551906493582_0.16057103429418218","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/card","version":"1.0.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@1.0.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"846def8c5f78bda6b5c4119257a66fc96dcf6026","tarball":"https://registry.npmjs.org/@material/card/-/card-1.0.1.tgz","fileCount":9,"integrity":"sha512-ePGhXIY/vETtE3o4LA8Vcm8w2QXMCqcoha2/MDiY+3MDa3Yl26tuvnaJa8D641xCMfQKd5rAhOrdTcb83sIiMA==","signatures":[{"sig":"MEUCIHERDlO2Ie9y4OQNLrvtmTOgb0H+jMEYwcYkp/Ei/AWwAiEA9V3Z1ecaZva4ucoowxxwZ2yu3KTeeivL/ej/NxzC1+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":139137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwXCRA9TVsSAnZWagAAmqQP/jk53GAA/UbgUoKzYGD0\nqYVHL45RiAGyA0bJ30Gphf8iL/qgnSnhLdi1C74AX//1cmaa101fBimyJeet\nEc1WSIsXEq40IHc5h1wkvpkK/RcI7LwrMDSmeO4yUdNWSGkV8vpTlCpAz+eB\nIhfeE5BQjb4vKGU3gXOeaPq7tbkSp5fFI7Y0xmBK0Sw8PkKQNKVleCSwNl5T\nLJh0HsrT7PzfuHIxrSWFhSionP4JG932uj/cG9RNlQB7QnRF/gT8gq024ELO\n/7Ak4gqjpPRyW92UlZivfOct8wd4q2gNqXrU2wWfZ4C7pt0zgL7lRARyBubs\n+TN5Vk6De4/aWC3fYjptMEagRsqKTgKBJg3UovmjqLA6CUBFo0gAI5SITn8m\ncxe+PyWzPDlc2Pr+P+GAMx6o+VFXpkCcip+cyjmEZ5U//x0HQV0hwoFLnBv+\nt12FPCg3+sWKZPOyXyRXcpGRB507TOYrDReiXmyETSNsBZm26s6wE4KYl5Zw\nJUH+ua0Fese95tNPZbIx0DDZbum4mj4qfp1mdgLEN9voF5F6kBvyesuxFvFn\n2+giaolViqKhzbhBqbKI6X7scnKCMu/3j7AM4f/JHhNo8d54o97KS5syguVE\nPKlN0GVjOZJmkH0ghTGspmdIWXEecXDBZ9XR4Sjv//O2Pr2S9nm8J4qgG/2B\nydD2\r\n=8kUQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.15.3","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/elevation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_1.0.1_1552342039203_0.7335682229198928","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/card","version":"1.1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@1.1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6e884079f6ae256884e06e3e1b5716c2ae14ab2","tarball":"https://registry.npmjs.org/@material/card/-/card-1.1.0.tgz","fileCount":9,"integrity":"sha512-ZuzMwnFZx0qMTiQK/QHoEClsOQ8TbfIpYm1N5gVvnGgbLF6xxoLD2zZFS9/l3eJxrDOxsrqqgxxfjGlJB5dFRg==","signatures":[{"sig":"MEYCIQDQNP2iySNcVCQMHtz84Rp/8JpDW0d0h3uK430s6iQQhwIhAJMEcygWlarV92gVwi9iazIiu4a5iXxZl7XpLYgMD/gI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzECRA9TVsSAnZWagAAH6oP/i8/fkjLfIldj4VM9wgf\n9avCKIIHCHfiaXnM1Lpfeb7pIOUxgcgc4wgCeBpAaJ8xziu680v1XYnwof/X\n8B3k+tZTUJHiyD8jpwDn5b7AAfUt4Ja9BLzb2uL2cI2S0OGbosAhOZVl8LFE\nWv0Aenk4ZFNQQ4hKkGyJxKxBlCioZ9Zx/IEDJI5pySEqrCbppeXBiTRBFkWc\n7AbTw7rm2/qXse7lW2kbYa7dNWc1RJjrAbpuya041pu1x5gZ6DZMOD5SGLfh\nu3xxubiucTXU+ZvwS8RgjjhPau4FRL+B7yaTlxCA00GS4CVveCVy2vZ8/OeK\nkRd8jm4+ezfRTZDLB5cXDjgSIxQ5JJ06S6KjCkgJ/C3I7nAIaVsvTyyDJnKm\nxTaZlu/Ymg3Csi+PJAoVIqgvLcUp80++IDGkdqb53zh9oMcT2qZjfeeZO5zK\nNynpP0xH0Tg+255SOkyPpnD2wL0T/InsDD4lHuYYl21drlPSF1QhiqWtmHz3\nhKbAbw1z+AEZDnX57w1oxoL8th7oXzP46lI5nmB3z26ZTaDDd+EPUjObbP4d\nTfTtqtl6y78ErPDhM72KZGpscMSb87hblRQ+PfcRncbNsFN5RBlFlR91wou7\n3WzuxoSFIViftAMvvpozxZKmIx8XDA/0XBR671o+H8VnEtDbSjCkcUJVpNm3\nIqtt\r\n=XEJ5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.15.3","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_1.1.0_1553628355219_0.5008446059122846","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/card","version":"1.1.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@1.1.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b9005ef931f125afb8b1a04d5dabf3a6b4e66a4","tarball":"https://registry.npmjs.org/@material/card/-/card-1.1.1.tgz","fileCount":9,"integrity":"sha512-gLG5TmeHszM700NcFcSvXQ4EGzLTVIclhCW8Sw4sKMGaklv3S498O8MpSRGZDkRrbisXNWQpsmCAxOcTXfwlAw==","signatures":[{"sig":"MEYCIQDCdVfy1ykwnuEvfZdPdDhALBR0m0bM2zNKvzZM71L5PAIhAIEzYevfFcXL/4NCv2TEq5jICcYkmuSdiL8MbDI+S8+K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uECRA9TVsSAnZWagAA6XIP/1qi6+vTz6rKBY2LZlJt\naC7aUEERQk40HLzj2yRTX9Rh3Y5OmHb+1YXjxaJpGquPhLF4pQtOVzjZNu0T\nAxTPFP3cHcCXAQZmvVGxbtGJebLuLi3MvYrLByhFZ83B80Ae8a8gYznODyul\n2DNo664ZEkgmJmTAx3TVP31eop1vulIqRxYVSDga/k3w9h6wrX5mZDW8cDuA\nNT0b6X7F7pK2dIG//aIwNmp41D5a6S27H86GF2h2cPC6C6dbywgsYiF8gO0n\nH4JRsW7bFIsCMYwKtu6Ypc5D8ecUu/4vFxT9A3aUE/7Y7aJqTh2BiHvR1zmt\n+E3usmr85rrUz7qeJecbf2QNFCV71FkwqsqUAjtTWvX7XLS7oALpOiWYPVNM\nBcHfkmNwWtMDQvY2euQX0DGQ8C8K1MewW0Tlec56q+1ceTYCrlNDMU095tRv\nsJIpeBz4vBE1LPc2Was6p+weQ5Gq665URdiBXQAo4G5i3CNBomvYFrAIwb/c\nLOUamkdmP3j+N6MZdIRCBwgFBdDarNsmXS1avK+HlbPPSSvH22LHiOUPSFg4\ngayoThu7WzlfSNDWcPIJMSXLJmYxjhcqhWIK76lAY2ZI/yv6hpMVGqKcy6zg\nfoTHrNiUU77E+xCVRk6voSr7wpsTAUir+tapyGZM0XaESkFrNHgniuL5UTC+\nQHVH\r\n=GfVX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_1.1.1_1554754435314_0.7272697110537498","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/card","version":"2.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@2.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11f337c5bc5dc68625ec75280cae061108600e8c","tarball":"https://registry.npmjs.org/@material/card/-/card-2.0.0.tgz","fileCount":9,"integrity":"sha512-2tOWdauiBSm1IAgeX2w796Fw9uZBKfBlW1dBJqdHm9aMcjxa99897g+K2DbPe+FzeQoqOAwrPULv+VwTVCJBTw==","signatures":[{"sig":"MEQCICzczecMDorx/6XeU5XN1CsNwrGuGs/qQOM71wIrksuNAiArM85mFT6FcsHv6SqipP79gOYMwdYEjxrrHnUZB3/33Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzb1CRA9TVsSAnZWagAAEMgP/2VH+lSA5GFVZiurRM8K\nqnGHGTi11xV6M57DOsyyiyB3etlhbSCjS4gvTdJkF6Pw/Kjspqe0BQ4aWwx9\nX5A4tNhiX7zC+EcgqKQZwuAwPuEAytujdop+ElKmqSzQDk3O6Gi+gj0BoAGq\nIIrFIqypAxHN839DzJGSzLV1WY/PNWaFVhmUv/ZJNhewSXUgF46QE7otwpzm\nTnKXsyvoDK8SfRrl1NH61Y9CnwGl3z/CjnnxMMyEAI9V3ERm7tTA5lcnJtCb\ntitQaWvpTuVFmSkAPDI9Tm6Jr72VOK0Th1qNxThS4sPVyWkHe8U8u6RVK9YM\n7FLmB0y/Pf4lMZVcXZtEZPfevnmwyQgCKmhxS1Om5Eri76xgORYq/3vAbDQ6\n62Dxa9KNTmJuwfzPWZ0nk8AbDmYF7EM5GqU9+HMhqulnEaGcjODkWMzf665R\nOyT7g/jRI8iymkMUNKvvbxH/s1QwjCV64WxsGldb3Eltqx+GsxjmvifApzRE\n/tLnwtmqKQSM2O6SQemNQG1YvCreg26kRuSblqwNfm3Tyf4FxGrkaRtqPs9p\nWkscGMxVTp8T0SS4onONjjBOFjIccMBeleo6KRgFbEAM51xEyq+pzMSeFqMM\n0117f6kVmYL9nbABnq19rQMwfGH9x8c0AeSmsWJY/PDA4lkYvTu6zkyo9336\n9Qhr\r\n=Z9fR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_2.0.0_1556559604651_0.010781318350489677","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/card","version":"2.1.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@2.1.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f15b59d2dff4c99b20eb014dbd70c22bd1a3bc6f","tarball":"https://registry.npmjs.org/@material/card/-/card-2.1.1.tgz","fileCount":9,"integrity":"sha512-LZ1nYncZOa7RNzo2Rp+yNvvhPdcbymTA+LHOXqU01c6KSKIfwhfK+oMV4qRKyUTrF1H83rdlGAXF69YISFr9+g==","signatures":[{"sig":"MEQCIDgkWolA97jjPQ1rcxeDk5BX3xG1EQ9PvzVfdYiyVT/AAiA0iMZckUs68Ley7dNxkvSxN3+UBuHEHMC36yAWrDSP5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bP4CRA9TVsSAnZWagAASAQQAJxi3Fhr8lETgxr0DuUK\nDY2H3hb+3jbtF/dPM4tj4JG/kslMy3gB8cb9TiEnAF06sUVZSXplo6zpGgeh\nL0hrmFD9pw+nhHIJBWoxxay5XEORlp1nFPIuiHUMHLS/6sQE5mGjuLYjzaCx\ntrV2YFfnnFXE7L/cSPguwRe1okJfV8+OmhpLUQoItESRYMiMdvatc2cJHJ+o\nPCGs2aWsrfoO42BPU+XS1qboIOXxS6DI2QTBkJKOl7py6lRSLTaVBDJ02Lw9\nnZ3oLmxGgEMzKu4Et+m/5pmz66UpkU0i57o+a0qWoXyp5mTqY2pLOKdq1OOu\n9V4tM1quemFy6Xjk+xrO9hNyn6/7Zw7wufWM8Q6leeLtwmGz2fKe9dOdYuVu\nk9f5QYJ1zZoCysFArVId+WZLcPu3IZHmcijW8u0Hhqg0Qbp5vQD5SW3x+2NZ\n4yaS4h59OF7PbwKqjnLs/MdTZS7/paSkrdIGxfLKbWQIxWZjlcocz/X0ICkR\ngp2ama+WUEdxyDf+jReKX1Tn/ZSl0i5AvB1HiwFjsWD/2O9hzxno4tFN+jBI\nHTOWHN1wt/8Tr+lqWjuQT/2WqdbT6+8uoI/7ZENX5Kai0qmyOcj8MjukaB8s\nWtoEL6XbbcYqK2Kh8gDz07CCHYZ5DkvUr/j2sYIuVQU9LxzATLrRasSZ5nLe\noOPV\r\n=9Ouf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_2.1.1_1557509111964_0.2037642527377821","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/card","version":"2.3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@2.3.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f59ac3b16d21d21af5747a530624f14622286c29","tarball":"https://registry.npmjs.org/@material/card/-/card-2.3.0.tgz","fileCount":9,"integrity":"sha512-udVIanyz3KhZ8IfZjX2Yg+YJxU+oYdP9RbCM3hl7l1aqvNr8WSAy/YZ60Ue54fuN+0CpXiNpz1J8GyDktUZKKg==","signatures":[{"sig":"MEYCIQCivMnOOcY/byy56EbgQHKAFmJwioXTW17dQHTDN2CfCAIhALzmulBt/0YNrlkew0jt/9sOutctUWS+Z9fPEApJMCdH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abjCRA9TVsSAnZWagAA2Y0P/3vjNt4E3kCH3tU+CnkE\n4Oigk3XozXwlnLZzWdErC6opKcwdMAVX7NlT3hN8q527YfjRYiY7tNV8ZJrr\nX2G6z/GEEpommdo8eZJ6aoOIhPJmtIBv9amGJczkSMHRFDvL0mTEQeJ1b+Qf\nUstl6mW5CRduC+cUlRlOMv89LeaXOCkmKxomFWHCtQgE/97cYAnnxATLIYTE\ny7oIeXg0O1noKfrYJFE8gSu1w67kwP1occMTBbQGoRC6BkHEEf/q+oQ26rU5\n3VyA469fsS7FHvsFAfAELvTEUqrvKi9iWd7gVWjjn+i1W/cnHdNz+u5GYCoR\nczpS2/aK6QFXPj+iZHYH9VD+qoiRcXACXVADU+rbG/8Ag1gI01/rf4nsixTK\n6K1RH7PuZp/Tu2G5HF3qKVFs+xm8AQ6uQ1ZxpcUJWR93/XFjKvVFFapBfPz8\ndjr1MXGhNzyMxY8iIWsG52jv43mS2wZwP0BvrhvsDz7S+ljVfrnP9iWp3A4j\n2V/TnAvX9TfIV7U+v2HTvng3rZ521sQcePd8rMtVOS5go5f/ekExeLx4gpsL\nlOIJWLOA1kNSpBLfSPWfapdvd830r2SwBaxPVKPGQsGAzqJ2ZazZP+Ua5y0w\nrgayKIVjm2yTIOw/KrbzTTaBwJwSvs+uKTyN9t15/EYOYU800pyH0X84zEy5\nwvHt\r\n=NYzk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_2.3.0_1559078626795_0.18908890518384913","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/card","version":"3.0.0-alpha.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@3.0.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","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"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"_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"}},"3.0.0-alpha.1":{"name":"@material/card","version":"3.0.0-alpha.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@3.0.0-alpha.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","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"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"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":{},"_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"}},"3.0.0":{"name":"@material/card","version":"3.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@3.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f33b2f1e41609c3d4b832a40b18ed28267a46bdf","tarball":"https://registry.npmjs.org/@material/card/-/card-3.0.0.tgz","fileCount":11,"integrity":"sha512-kheclfj5qUnT1ze/5PR9k6SxNzlukTKEp9069gvKBGhPZ58IoOOeKQ0JDiHTsgf96mEP9IoEpJh7A9vU8aGDfg==","signatures":[{"sig":"MEYCIQCqVIaWhOtHm+npPgrADkgeIKeaWG1ZlWYeBjtCohtrGwIhALR3juxGm2Z/fm57Al5WTsGRzxDJoulSgCGem5zXzN22","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/uCRA9TVsSAnZWagAA9Q4QAJGCsk0pzRcrlWU4HUgg\np9l5dLCSI2VkrkRAwsGxmc/eRvASxt8gVdJb191sr25C6vgTYhRDtW7YYpP9\ndkTPOW5mdtDK4TdbmxHQkMzWZq7b8NGcvakop25zBp73LhCbE3o2s5t9P7q4\nadmY3Bg2VWPKJKRhSKN8GS4TKtevJHNebfzMePKpdOiK8A+gNCczupjS7ksH\nbeupT0C2F6UeVtJK8LWBAwXMDioJvWgq4DlS6aqiTpDl0nBt2Tg3gYvvoGqA\n8DkePU4L3x6Z0Kl5HyvIOO6iFuW8E7Ioq+wVEfz7qvwy9ONzSj0F+CrCOloo\niMs6i30bA7VvofQJD/GDsy8agx/GKTgq+/pkpuIKhSKjoFhDg7xcZ0Bhc3MM\n7hb0grdkt/PVDA14TfbYonmc4+jKcOT/1YVZYydt1H1ZjDCwFAQJQ3zqepa8\nMR7c68HxQrmRkCx3fvJqdfFK5VJRtE8jDKF7wwWytQDOyVhabMchweNtGePB\nUNkAZC+4Zh4upPUkGaPVI9qeIFy4kv4HvBjBEf6S1EgyG6JU1+WdCda1y1u8\nOEv8T7HFQuIDs2v9SbVst29OK4+EWBRrphjBwEsTZ3zuKYve4Tyf/eruV5cg\nxE6tp/VirvqX49NU2fS43ulNVIPDtWsOvlx8f5LMRsDiuO/es9lrWs5rwtaT\n5FQz\r\n=A1wi\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/elevation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_3.0.0_1561501677709_0.3100338620460077","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/card","version":"3.1.0-alpha.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@3.1.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d837c18df8e0c61ec84372945220871263624be8","tarball":"https://registry.npmjs.org/@material/card/-/card-3.1.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-ssyv1YlAlenFPgC/d5AiZ+XNqG2rIrJdk6SGptR+XKX4y7MiPBuITFnZLMo77pipy2R4h6zEwb3B3g0SQvdfxg==","signatures":[{"sig":"MEQCIAhJp8oVbMS3lZ+xoIBDRDbN3VEKYYNls9HxCRUTXN4fAiB1cc65CTJCWojpiAN0mvloH77YVtRBfmJ3KvBNnKW4AA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEoCRA9TVsSAnZWagAAlPEP/38O2cO9fsXw2suxDpei\n5hYGw1YHspx+Dlx8MAu8+uAHgjKi1tS3Dbf/Lr1Uc4F1O1e+l3OeFlcsymeP\nMZZeOlB7ZNVqBuOlawT+ejnra5fQucOVhkJk0atocMw/nqH6n3S113rpUPw3\nWUf8M85kJ48QSMoHcVBLcrZJtsZxaK83oiy4x59fAw1V0b/Ljzv5w7dFUmsg\n5ErKPm/JO+dSj6rpQc78PHQ6VwARY5x7n25cBUEAB5yWcsKUgJB7Oy2O3Ow6\nOxE99GEDmJzPszidGV5ud54dHDqE0tafd08uMJ5IQfiuWJbTuaOJEXEAFC8h\n8aiETrnbR7UlbKvs/SqIIwNQm5IPHksqUsjY71im/5CnTpFrQACvcHpMcAaS\nqqj7IAnLUsi6m9CxUieIETYYXITRBddsntRBtXZdUghc01+pGPmvBDXX0NgE\nq1ltdamLKilEgpQONtACoF0pADBaNab6zLHxbRybWRbYaXM1sOD1WiCdCaCO\nYgHdtMHZOcJQEvqQpwMaO590TWcRkODqyKgLH3TdEqjEkOOHgWzIDs9t1WKC\nUcNX4EUEq3ljOVsmXgox0qZLg6MHs1qRb8/Bxq96L0Al8Ur9rpfg9A2RPzQQ\nX02cCOhdq3WjR1Lff/8lCVlaKDPmqaWBFEcI3DAc9D0MJmBkTvIILguC47a0\nNUBt\r\n=7Iiv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/elevation":"^3.1.0-alpha.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_3.1.0-alpha.0_1563283751879_0.2251930799122015","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/card","version":"3.1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@3.1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d26eb995cae9593de81ac2ae931b3ba351e6c37","tarball":"https://registry.npmjs.org/@material/card/-/card-3.1.0.tgz","fileCount":11,"integrity":"sha512-NOTr7wbBCOPzw3T2z5zNWJ3XTjmUONhHUJbUs24T1p2FywdgAyJ8a3F9kAcyNuKuITNTdky8/0gmmVv7uJYpUw==","signatures":[{"sig":"MEYCIQCQat2gHP+aJf+DKWR/CktNteJF6R4+mOx4cot6mNHXQgIhAMcVz9WysDHlkyxcxfxIReuZSrVI7sG9ZXo5kPhW8wKk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKGCRA9TVsSAnZWagAAa80P/1H56PH/Crllzpk2VF78\nZPoj3ZjL1AJ30RUOXdgQe4RGTZDpf8Na5M4R4WmZVYPqrqwMALgFZ/tauniS\n8ZuERpx2ffTZ/GW7SLZDJLh/xpeVNSTn16soiT4xOeoGJdO9cAUAJDl8oNvB\nKyJSbcRjtjpuyCB/mRKgJtPXcb5Ie0EAy2fgbBHFWfy5Ze3MYFoE3+NcLeYv\n4LPlRKZ/blKJBnyI0XEgnstaTWZRKExiUqNhqdtcbxwBL//bVpf1x0mTjWx2\nwyNqjmYduyIJTz8WZH5px3P3GrBq1INiroRUHODHdm8DRkRcmamJTOmG7h1b\nOi4NzK46YADjU3nxtqKSarMBWSu/lUITT+ic9KIzkd+7pNTlBUqLQWT/E/xs\ngmh3wg6lOZxRm0wXGCi6sSz4oHPsqJbDTLDpLwNxb4XR02uM0Q0K352OrRiZ\nyWYL95hw5RgAawEbYGdpTfop5qmuRllMGYCVKF7WpYX+eKKCeatv3E0vlllc\nFFYYyXSY6wYGZyk2DoICDLRs0TO067LB4id4cJvOgLlZMYTCF76hFo4Hsbps\nqGHkZk+Ijr0kIF0bB+5OoJmaQxihrV9Zq4vcpJt+vG99H8K5EmsU3Uer2UnL\nFgxFAkOmSnsVETofXEBASEzMJL+5qv0CugS4fqdWhjPATLMx98nhBouLHHV/\nTNg6\r\n=vacC\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/elevation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_3.1.0_1563832965399_0.7579329177781404","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/card","version":"4.0.0-alpha.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-alpha.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ce3a7228608ea4535e57f39891112d1d125fe4c","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-LPjXInuruDeQw/2iosUQXsUaSpaK47TS3y7YCtsaH/xleHOksnCRSEefM+ma05a+w5AK/nQjLYD0eo3ms+6HCg==","signatures":[{"sig":"MEUCIGTMebClBIc8K3EDaKJxis0FfFerOilyBIJdk1MsODFcAiEApYkFwPVElYUqtRtp8IQvjZpFTLYYe7sqRekquk7QdRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":146673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4LCRA9TVsSAnZWagAAXnEP/1kTWVs+uL5zYmiVHVye\nExAolKoPUrZKfRGazTRenNm/wXILCSTv2yhJWRHFF33K5vVoHKFd1Lju0hLx\ncPzm0pAy59/kn6ESmyL3Ra7yM9hsJuYaPFVje+DeHBA1gUT2OSwtFWHuCR6w\nEfsmzeqY7oXATzv9qX2RQHQhIn9d7sGOzcjV8u8yLDIQLrLHBHkoNQVP0uqs\nIwcrKgeZNwHBfkRVpVc3H66GPb7KZyZYSEvDI9ElDOhyZNz00pzDQF7qHytu\noERGU02R3fASaSSIBSDkZBQkKU8ZBE/zFAdJF+4yAM8U57rmYFshTt8IqGpJ\nbrUJGYv9vMEdw7osQKuTXLBLEn7BzgVbhF+c8VMsGcRCwKS5AXIazFx9uYsi\na1TBqGqPUoY1Q5lQefqL0/VRtKiTfbcapUnm3CZdu5rReZnEwrUAkv6SbTye\njr7HbCR1BKCNkVF34bVv6VUQtP1AwS1/OMFBK28rlmEkbFc07raKfQbjE+iq\nLL9wO5kBcUEKgQYn+YaVv3jg/9mR3iQwriJsgO7ZZGog5Z/s22+eVQ9v2MOH\nOXUQupEiZcolWVW029uOD3QUk+HlSARJJiOVnEVFLTgtoU974wt+fUEQJ7TE\nq9vuUEvPWxXaNDrJWy8sMm/3WMZAPAfo+nywGKmx7sYsi0hnONsFMhUQtiN3\nGOu3\r\n=SwYB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^4.0.0-alpha.0","@material/shape":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/elevation":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-alpha.0_1565212170367_0.6055185975135411","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/card","version":"4.0.0-canary.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99f84c6bc940a6a19493b015599ab946a452d1e3","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.0.tgz","fileCount":11,"integrity":"sha512-/y8nCfKHkFjECzR+rURcLPakayLTQyDsQp9dQ+XklDbXKHQz/fg9L+9GL0gm8uoNaZtCkh4qdouue+o0IjVmvg==","signatures":[{"sig":"MEQCICplaO7bnCnUPAeI9o+leqEZNzbSBF9l0mGTW8w+98GmAiBg7MpOoDmnS41q9+qxdZKU/k2ayE5X8jrRT3LPAL5A1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEjCRA9TVsSAnZWagAABIIP/1nhkxKzgxy9Aw38oPRh\nTwLDtky0Aa1qKTxb7yzXvT7LIlf6xZe5NfixS9dqth+k19nMcrCk0wnXdm+p\n6XgwF15BPvLx1GsrB/brsoB6d/244XdQF9WtP8i/B054SprqT9lYFOJIgjb3\n0yAL75ed9N50w+K+3D2VrUhVsqBfmF3i0cY52NKH7YPaL3j3ad3VHoHtbClb\n2+A6vxVUWI4wd/Y6C8wbEuWiS2gxPZLf/4zrGxWj6mWvYxn4LemnhUGf5/zE\nt4s99mrt+bDzVrQeyWECht4NQbQxYsyLyJqqFTMv5vfTx/fLPvZlaIZ+q2Qu\nAeInGR2Qs0xY198oujg8KMvCp052mYIzQqmFJwz2kF7Ja+91iSF7FcwboV+s\ncW1foq+9EUPjv6VCYTU3wxH6L22XppToXmXO0sJdIACoM0G8gQSc8dHXctm2\n6qJO8aZgAtmUCRIgNVVcvEQcVoTsVTBAftThbrbLS35l/0b7W4vWUzHAwVh8\nBkIt1qEa6YdRI6Pvap0z0XDVTo4dtsbHJfD/69hUB11qaMpDMii70G3aULWC\nHfjRJo5OqVRmxKwQAi90SQW/Z+pd8CAAetmvJ3clg+u6E3OhZ09P8OFXejUw\nffNzSHfoEbgXcCr9wP5bHoyI/dZeWZfee3uWj2DyteSwEEeN4swic4CirxCb\nQRMh\r\n=cyuT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^4.0.0-canary.0","@material/shape":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/elevation":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.0_1567658274640_0.33158178730615573","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/card","version":"4.0.0-canary.1","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55f477baa194f0330de78285905840a14a2b4663","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.1.tgz","fileCount":11,"integrity":"sha512-6OxHXyZ0f4R+L8WKrSNePr/ts6nVRzimQpOiGNOzfK86r0I1cmxjp/fG//vVpvhbZwCCdTFjTCVQGJofWvrDyA==","signatures":[{"sig":"MEUCIQD8IvZ4ierv7QQ5YL0aggOyDXZD/BlHi5/U4LL7aWlsmgIgLGWJ2HWExK1Ypf2Uc4Lx0dr75QV61bqTDi9Ib7GDl8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQiCRA9TVsSAnZWagAAXxIQAJmjhuwjejgQp/ZXGbrH\nUQztgPKgBDZ7aD2oXVjirVU5lAGlcYvAWoEQuAmIlNLpCojEBnGSYmObpzqN\n+5Bd0qt4ObbR9wfA+Zxbw5uzCKxHmJYkeFG2KlhLkS64YOwfj5CDySAahzHE\nv595zEVzlcqxtC1DEKqFpfolL4WRopCxzBUxU4R47o2+x2gSPV2OVtiy4Jpr\nK3/8EDPX9528tLGGIVNmy2+oTylUnotlMx8HVo2r984lY7NvHyTQpNHkumB5\nVO1eFa+UYlfLIwl151quWrfwMlaPX9BfvLFX6UPULx0CBBPXwtD+sIreCyDw\nuzjFte9pkCBTJyUSdbaFtpFZAM4H0CuZRM4GddlV4x60f4sdRCyMBHYiYD0J\nqCanQ8MlMuPc6o/D2rMA970lQnf+gOPqeb5vfh5h1ZUQNIrdomIwkLvLgajh\nyseGWJe+8t1hFwdf0xmMJjiW3o4B+p0uAON7nGnYzM5cgB5cP0hXlqGo2Y+y\n9SxuuuqWJx0aIOUYF/Y+1l2ebgbIagUO3eyCqw0LZwPLWSQcn3wrcnJ3h+Sn\n11+3keH9QLTTKeI8S8mnI1omi3otjPsLQ+8h5FfGpDamioCJoVrRFuUZBZ2K\nwxJhl3dFmVa1QqHv+/GE0Yawyss5PlHWZ/+z6tdX1tJ9R+UykT4lq5rgt+du\nucTo\r\n=X4Oc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^4.0.0-canary.1","@material/shape":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.1_1568060450085_0.28346994934974035","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/card","version":"3.2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b051298ec6d498617b1927022dceb9a331ca3c39","tarball":"https://registry.npmjs.org/@material/card/-/card-3.2.0.tgz","fileCount":11,"integrity":"sha512-pC9HHhdAXarRJZgKx+xa6G/WPjGp+HN6sOgWPC6Od+0yFuMilCEScGkaXKPOFRt5UwNjzSIBPXJVyP6lmfg1NQ==","signatures":[{"sig":"MEUCIQDT7XRQlzG9DRjDmyFtlu7TRtpZknkmj1/7l42p40b+1AIgbTeJOFjK2dgJhH7CZwNm+9/e+VqHvXFD2MPYxRl28po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5eCRA9TVsSAnZWagAAiukP/3BXjPz/gzRSAugbo08m\nSIItWHBaA6TjKMVU82zgG+BfL6m9QqNRn3bZac3RqmCBQ0zY9n7JWeCatThu\n2hISPy39pwe/Id+N6RdAoMUC3HxSAe2bUdjrmVi0Eky3Yt0W5El99qGMtZ0F\nG4X/iBZDBywffeB/Pp15AQ3U9MxMRapmcV2vCQL5GLMcCedzvqMziHtoNYAE\n4FIvPnKtU/U0Kgb2tQ/St4uiTNkol/v+2pEiOmLCoxNeLwXB4BCybCUNlZLE\n0zi2Y8drwaRj1ag9eY/xi0b4vSA5VlPx7RuH6xBGJYfQuOmLxJQ71zIVjT0T\ndqdP26SB+Fdr7qV14y+UtXJkoFQyS5qk0zPLGMuyDdjzdYZrfapeZ8/8NXLl\n5eUF0UPZ0rcJFon8OgvLfQvBsSC3LsEhsv+xvGIAn34X5ilBBpit9Enk/sxa\n8KZhHsSi1HoGAFGlyjdEf5OunDZcxOOVLh/07wRkq0scZszaWihUhiXJpRnw\nyJc4t9Xkn8C6QRecX7NR4tM1m3UakOmGxNBgiRvunlYgCAnr5ZCfq8MI8Z3X\nfM7VbPUIdVIlXWCIvV00vb403pwa7KgPiZHSflNwZYyRk36AoN5joq1wIcgb\nt7QU+pzQ7CZi/G1OD1qkZaKDzpYSOSH46LsKTRG1iB+9idbRmaGGE/+GrgCa\nvDq3\r\n=SnK+\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/rtl":"^3.2.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/elevation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_3.2.0_1568325213609_0.8986340513696578","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/card","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28ac8895512fa05472699dfebcb902a75ce91967","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.79d881baf.0.tgz","fileCount":11,"integrity":"sha512-VuRgrV0vV/gPz4VjZvXmNL+YAZmFlemCRZ1FsW2SyX48Ntww1jUv+SAjzQCwM13+EuXn+5MxYPmFszmfRYdCTg==","signatures":[{"sig":"MEUCIH4k+/THmXSSq1BC7iilnh4vFaYFLE/+qimEjV/Dwv9lAiEA1/G+yYRxEZPPm8OVjhJzaK+62zugJlaIjqp2NDXZBGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0xCRA9TVsSAnZWagAAogMP/0C2TLmtXY7hgnvFzspU\nFizvjcOOc7e1hwBRuh578ksWcZiSpZKQqGSsUL9M0Xz2hwum0Vak255GK/eR\nMIiTnuN/K2RMEMdr3f7+s3zAw1EqadpcxNEIrFWZUkmMjtQPe6hu7E25GEGq\nNUdcMtM6HQ9+Kl2JQ+T+7SyzQzRMMHQeRboRPzWeTtYf+jtorQtQqlXeRlFF\nNwe4NK4PlTXrsw8jZ6TFlohlJSYfYnriJ+WtroK/ZK0IM+idvMeoHxL1Ou4Z\nKQ5PzlVTGKsFaJCslTwujT4DO1KDcfhR2E1rdSAuWdlCdkSrcOyEEye7F91H\n99H0q5kiKEp38zGLLtSNSCd7VnOod2j+PLpsLR7tD+tkDTWX/LTSXut7tMt2\nE9ihnFj3arAiEuGPZWqJ7id5G/BA011Y1JWiw483WmgTCwySGJa/CI2B/BtI\nyWKLIIXjMse7bEIAl7stQDhfz+EwfSjM9mecELRuymCyUykVuih718BhpAuD\nqXYhUNgo13Qo+Nz6xKMXzUcXcdlX98xIz/M+dg37crVEr425cSuWvTnT0LxP\nE1X4fhmiYwsDcnhpy0J4Mp/VCSqjixu5eRCklScIx4yILss2VLhBk4r/HAQH\nWuZxQBOOeX9PmaQon4CZF7eakRfEBcKdequZJzFmlht5YDfGYlpLE4Z6daoQ\nnOh6\r\n=WlTC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/rtl":"^4.0.0-canary.79d881baf.0","@material/shape":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/elevation":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.79d881baf.0_1568341296907_0.0027361859538632682","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/card","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2e7b05339a05d8576970fe651fe55a6e50a14e","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.e851d4f40.0.tgz","fileCount":11,"integrity":"sha512-EWkiE2eZCD5qXQcUqzX6ENB58M9ta4G/6jgsQST6QGCrKv0KwvA2MfnZHs0tIzhNJPSM/gwFcqKXg7gPYKVhww==","signatures":[{"sig":"MEQCIARldY+foGjV6XvHwlmHp7cQBBQ3u62L7/B/nN77TgCeAiB3QavzPPa3JTSl4flYSuJwl+omoqdyfsBn31pqGxVLTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexX8CRA9TVsSAnZWagAArHIQAJn/1U+xODqAojG2HrTk\n+5UGTV0/5Gvu8KPrL3oN1kdHRiUeaK63s94TUaa7835hVtNOjgqzZUJVxxhW\n/qaQ9RLFwgT83KGLjaP/w96ywKra9X98P/hop4l4umYhMJYjmMYZXmr86sGM\n258a7PfX6ZZV4xAaic2GnbnEqKDlhTdAph1OLdhloJJlIzZyiG/06SDcHHop\nzPTmCvPwXHHDFN3wrrb4B+x33DLkkyz/AdiuAlxW5LdVvV3GzO/HpNcWLuRx\n120guHGxJseN0uejNbGRnLs5gv+dt8NKVFMjp1hgeYF134VNGgDsIh9dauA8\n0x3+jvWPT/jCwEU4u7ibMR0NRu1TdIjj9F7AB0TxdLf8eETyGHN5TaaC78r6\nqYT3t/4bqKN0uiTrpeLUUnIrQnNomKHQ93mMgR2yT2F1xLa2NfGbNudgankC\nUhkdattxJ+aXqLc/jNt29XETIJgStfhWa2QSB7oTjqgrHclqq1RGaaUHuZdw\nJzZkK+z64W5sbZmt8jMPGriizT1Gfu9s+eAf3QTTQ/CuhMFWYeFv3f4TZCgP\nMbn+0MjKAnS7I4kGyi6JxvudhZwgZ1BDisY+qb5mPVUfLfyKCdppT2yZrBkH\nJK3+0gf5R9YAE3YFWiruEGBbic5L2CKh41f201jKCE9JYZGLvIvwZsmX94DU\ne8dn\r\n=cFbY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/shape":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/elevation":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.e851d4f40.0_1568347644259_0.9372051303582687","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/card","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8ce636208f1567fef022a74daaac907172da929","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.905884690.0.tgz","fileCount":11,"integrity":"sha512-y0ipj270/17F+6z+VLUy49xmSCnkykaJp+hogkjLm9hwDkhsq9hG2A+7lMgnNRCdYaPlR7sr9ShtrYoE9F3o/w==","signatures":[{"sig":"MEYCIQCn+kKYlg0UXGh5ClGOQOj1YYP407Fx9k2J9zsPR6otggIhAMAEw6Q33xM6dZqKD785UmRhNHp4pTAnzeDJ9/qnpVv4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB8+CRA9TVsSAnZWagAAHaUP/i+U6H1cv4n8e30JadWl\nYSPAW3Yqc+07ymZ7ilkQqT0LmyvchBtgcxQPJ0+yVEiIN+rKIpx7NmbgE5Ve\nhA6PRXZNGuVopR2yyFMoX3F4QY//vl5P2EMZ0M6tEca3AF5PyNJ+vL9vkSAX\nS79+AIchRhkNP1Rt9Ad4mua7mav3O9WoLo8dpd6T9OGLOnxDdOj16bLfaxsJ\npsq/9Z1J13vBP2MIaSzPtzF7lKkzB5L/rFgqmUSibkIM8SYtdH9vGo6hMVTn\n6bTZcA3k011jAQYscqFwSJQbuu9XuQeg2luG1pqPq2hZ/xVNNcI9UM+GGF86\ntH+YK9JU4zbHM0mQATQscZUIji0ogyGSz3RA7wGlLtZ9pTueNfhBzk+mhFh3\nkBtZlV7mfPMLpc1mbW8pWs/BB9Cyy1mqYJwWYlfj2in2a6BPnJoG4I2hRXgy\nrqGnskWP62LIQNx/XGmAk20qNea401gjbrytb4dxzeuzmw/1cysW9hVMVFYP\noa4mjKpY8JGcoercc8C4S/nJPczWFJgGTF/c0cXx+49WN9Gx5AWJ4w01oSg9\nfsVrwF8O1/pxoxMq3fFs0MlZrd2mCpTRnhLAR+++hMR5yj3bZ//zcI3VXP+C\n9MizAz5d30PxRN40eEWi2ID/7rQxhXd8dIlVZq4S0VAIl67m21co5rbXDzZN\nrqby\r\n=CM74\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0-canary.905884690.0","@material/shape":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.905884690.0_1568677694006_0.37271690582114636","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/card","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8de6d2729d316a3262f082c849b6f2a77c5993c2","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.199534d61.0.tgz","fileCount":11,"integrity":"sha512-lU2Euc/QJeyESahZBDxDNDRFH5xrwACnOkrjRTnCRyzaJoIaRFI2bEqZYiARhe6LIrQoom722rLyFnAE3aVspw==","signatures":[{"sig":"MEQCIFlq8bNYKG7VB2U4uHHPXd+9SxXpuBMlya4QAbSeBGGdAiAr0M9jCh4gBLRha+4MXfJ3tAfw1f9WtA/EqlD2Oc1ObA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu1CRA9TVsSAnZWagAAT48P/1UQl0qwYlNEGaF2Muhe\nW7ujO5plWrqtC7jcwXyJajrd/Q4kyaw53Tca6y1mapNgn7g+DkgvxhytWwCH\nhB2zpCCAq0tKqxDofSIWxA8pwDDBUqw+ZyTmNO1YN5m61XcAhKIWVPxZ214I\nyMU3NkPj752zpwE+kUEtPnvxrH+xgECu3nAHBQ6/nD3rPHrjq4WL4BAjJ1fc\nkSlpUDlcP1dJND3/Nj+1h/uIEQr3EZ532A5HlbNYnjIj8XCBhotb+o3nB+Im\nNseNRC0ASq8/169rokyUVLG6V6Lbzol8oLIBUQ5DrHfCop6V67HQZ3YutDef\nr9A4quDnqxFYJwY2Vs20X7HVmQ4HtZLZrFjKFXvQTeJYdj+EPs8sXgrsnEFT\nV92u4XuMX+lRc44CfNWXg3VnwANnrNJdFJo00n8LLcfm4L1P1/dMBVvmMX5o\ne0yg8Vyv+ijvMd7ZHYd1dNXbKkKnUWSpj4cVPWxAfD7xMZpIkIBLzLaKX/gz\nyHDWFoDck3laGj4ZwN79yRCq0Fc2IxnRewaLsmwg2URGDrfg0Zyj/hQrUVzS\nCwfRco1zASvLtDfQF2GkIsg4ghyIXLTrUBDR0Mi3s68gOmx0h93muh5h87na\n0zOFokk4HUoZAj7CQAbbp01W1rHTn7WY+oadnNm+ZKMVp7c5/t6Kd9tsoBKr\n1BLi\r\n=WMef\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0-canary.199534d61.0","@material/shape":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.199534d61.0_1569610677227_0.6791573340362311","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/card","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e474c310dc82013a41cdfe5b4b49edf0c6fe2512","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":11,"integrity":"sha512-046m3i5a5WGTMLz4ePJ65Z8DacWg1Rw1StLndn6jkfZ3wjh8J/gNl+K/W62aM3/f+H65UXuPoAcZooiSKCcCww==","signatures":[{"sig":"MEUCIHQHN7JBTcQ+y9ruBzUEKBO3Mw8qBNnYLqUvH/X00wmfAiEAllkSECohrJE4b1wx9uPQdOFDgEsyXZwV8rVqYKDuufk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaPCRA9TVsSAnZWagAAl6MP/0WqQaVyP1TK6FI+AZcw\nUF0Gy8fSbnGPkkYe1HLLB6cRIpkNgURlwKK+4kMiIF5haShYy5c0H8r4nuYP\njt5VEs2ZzktjYeGV7ccRgaVG8QSU1WaFjQyec4IFhMSGvzuyCQnItUCPZhIT\nDnNJz013ZM3BUo4T812lvv5sYMvZ6GR2UPlfgXe+D4rvYz8qrlaXVAtUMHsc\nnz8tHYDy6gLYY7ZTgL4O5H6AKYQiLPRnXSNQ8SYcuNrwD8ewpDq/aLyBKKYR\nDjILn8grL0S/FgJV8fFTdutw+S+Laea33GkQRYXLwwJk8b7cG034kuBcAo7f\nHnb6zBPl0UZuYbYQObU0Ojd96GlCwOB5faNaBmEX+ZBmYAkcz9ZhuAsaSF6E\nEPmL6fO4zp5FzXBbMcy7dTUbgtGhgSUdUExVP9OPYn1Q0A14uSdU/FOmWBUa\nERPCZ7qYjIRzor2x6arxbzgJGGteKeZl0dA4T/wFvf9DBiKhGkWM2hSO63c1\n2YJkU6JsYVaGU0t1eyyTFDvDrr+eP6Z/UOqnF7Au3ZVz7yC5t837Nzu57AcL\n/19ZTcv+tHrCcMPe7KLEPpnwc/L/OmYe24Nlvy9LNfzRiRTD3R3EnCQziw5M\nC4q6dt4Elxyv4a76aDTYUAqyQKFIQw3h43++1meZ/dBlGW5cxUfSLmePynwd\nTO7J\r\n=x09k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/shape":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.22d7ad2fb.0_1571165839104_0.40626640017198934","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/card","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49926a0f2d06acf9dac76992c3291ab8e96a5b06","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.735147131.0.tgz","fileCount":11,"integrity":"sha512-XQMVBRSdgVJL+wZvouGwG63F1A4tmzl8/ONt3nKKo1/qHx4cXcmnKR9gTgswh7oiYSSEhgODJ76OBvALe9iByA==","signatures":[{"sig":"MEUCIH0lI28/b+7pfaEiULN5cDhc4Sqm+6cOXFbjmUOkJVMAAiEA5dtWaLWxbqjR/sv7MgTJg4Aq+mp/9JLtv7usZcxvvZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEeCRA9TVsSAnZWagAAf7MQAJlqC5VBJVsx5nHtcS4q\nnpbcT/UgOJgIpc1u4ZL6WKt1wdlSjngY6PPbM1DkLKKaR01DL93A5MmqvXMV\n8miCUpdnry6lHEEp/hswzeXwoqHEF+zBTDfJmfvpw75ZLAA+4X3Fcb5m66Jj\nh8NVhD0k+FpO2EGauoIq3eIPMVYgge77cnUjpMi0roahQqBimFm7pHYZ1hWi\nVtn7+ptjouQzKKMTDc0+L529el30CENvEjRTidYnzIB34w3hN+qa7No92x30\nRLmlhRI66A/2qunkwQh4M4R0xN/tzRigI0jPPjRzZ9gInJ/RqXMX9j0R5BJu\nzP9PckcjGHOHfL6zwcQ/YyWVd4yznHH+waxNPqg1txqOFQw9PCwvpZk1GMcq\n3T9XMBKsP5tI5tc0kTt6R4lu16CX4LLha87YgcZF3gZGpjYhE1N5LGbj2UDr\nEAkgIa7myIf16y/mlVk4YyuYMAkQXTPIVpC+pQhRMAZA3Dt4YWzmv6/Y8oV0\n4+ATsNZoGTTrNmNVXzLKcP7sQtzGdEHK3eSh+OwZbmV3j4kT54PcnfJy4pKk\nJ2r94B46fcWhLqfQx6N607tWCW33ODWL/Qlc47AbMPSaTrBsUX3oikccTtVx\nhDlXjzKVSWqHzqPkowLnO/l8W5ASjulFCASrS5SWvIEOY3gjBikWQWyBOqZK\nCCn2\r\n=Nsad\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.735147131.0","@material/shape":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.735147131.0_1571189022417_0.5049488716077961","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/card","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c489869cf51de0e4ed6556c419090ed1b2db8d6","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.062ade5c0.0.tgz","fileCount":11,"integrity":"sha512-kXxG1BYHJmIPqtifgPMcqPV3IwEqelg5rTDMaxMfbXCFJf2CnaokCGse1rhGFchKcCj2p9FM1mFAOi0hxJKAYw==","signatures":[{"sig":"MEQCIFUrRU6hML76UrC8Jj6o2YBBlhfT/hTiWN8FTczolRAbAiAbgqM00TUK5Q/Q9agS5UKmKH7XIpgHeRO58c94qfl81Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp712CRA9TVsSAnZWagAA/l0P/2kCjCVlkjOV3kxRE5Hh\nLcXQywItehemYsuBrpxF1cKolOT19CylYitk3Du/aXdsrUyETHDKdrS1j7R8\nc7wU0BEzmGCQIzgoqFBH9q+JIr7FCtPs69VwoGofAMrI1uIZZHJDhXC0L+A9\nH5zwSjy+6VrlHW+Biwb0BUjkhiq5YBlxeX/QkEG/bdYYfFZm8UcaRnftIY/N\nkNs9W3SibqNM7q2iQ9DacFIKLLY/cigXX2hABkgW7XvbzO1FXOE0MrxTh/rI\nMSY+XSogZfrAUd5+A+dhDELxiw/OiF5BOH16btnenB8UIe6CaugUT+y3hK1S\nChxpqbbTiIaQTrzDVH6WXoAaWEcB+om8g4OgrnNV2faoe4mMmQfBbxqzkc/e\nflWUYoIaXsi3u4qSED33tIgGTKsV3Xc7agzjxY1PfNAc9lnLcZoFYnUg0WpO\njSAzu2++3o2fmwi3X8sLcQ+AG+ZZ/Ruv5Goz1ctwkyliBkB/OBAYv+SshUMA\nN1sBIsDvLzRxm7Kt52C7dhrf0XZOvxtfkga3Zvjn5k1gWCL6bAiDuScWtmBl\nUgZu74W+WniYAZ21c7Ut11NsEpH4/tZ4dB0ZKtWDFCVEgnOxIYlBMfjzfAQL\ns1ysIx+Ck7/s7TecOVpx0FgEu0u3C4cpRFIUaXs1xQjxPH+qD7pf3e8U/OhG\nRSEQ\r\n=Dtmm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.062ade5c0.0","@material/shape":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.062ade5c0.0_1571274102160_0.21179944936365525","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/card","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5af53084d1b46f2f19e604fe1979f0e1d664f1b0","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.774ad4f8.0.tgz","fileCount":11,"integrity":"sha512-zRJ6R7lLQq6GZZh6wXTE8sHj/IqKXIbJri+8D7lOT6eUaiU9nh5+pfVz5aYQXib+KtCQWOw9eo4HWbd4ZZ0lUQ==","signatures":[{"sig":"MEQCIHfIT8wrJc673mEdTcHxaMPNwE1cwP3E57ikGROqCJoKAiBPzEoWvnjUn6cAzEzA5LWo0qm/RN0O5dXtqvH7NGRFIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+haCRA9TVsSAnZWagAAGhgP/R2TxGAGJpcgtHbBMpoy\nA+SNPgThP8uAzyxMGOPpjX5q7eSjd7Tu+YF+LjakKmagtQxRQBANdkSWilpe\nDCgTz4fStkCrzJIpRH0jxFNrTyXmqfhmVFwAXRby0Zlja3Roj3M5FfIHirK4\ntFUtStSmDGoV6Ng971KZi8ZWVoplQXqAP50szKAePBYJCZTpyq4Z7Zingwkx\n8NKouIGeDzLxLLSG1Ru8ykVE4IKk/q+fpS1B5+U889WW0c0btYqsJDWqhxnf\nv+JflwmrUJg8ecJv9yBmrM9sQ1Cf1JVfYlBQMwvzauji4tR/M/Ozwlya4ulK\nbwzHLkPwjDUpGQTkJRCl0j9Ek/le5q6DyHQNH9MD4MvWMR2VkYcIeM6j2h8V\n+Hot3H8FcifUmLBm+ANakpsemw47nCvMe6B0SXKB132NmB2X+B/ICd2p+pXs\nS5ji5qs7Cc6nNrOMt/60imcjgHCKP5y0rBtVT9pRGRgW2h5R68K/bUEBiASY\nmmypdSibh1l7mgh/o3efEGtbKZTILwjWh3YNF1oM5MzbQ/6wCQz2wUTXz1Mo\nQIPx4x3PxdZ5brArcX+4ubyh38gZJFYAgj1eF0C6PmfeDJOpcg+tCJMfGCVk\n6piDfY82/2O/vf8DndJROUbSB+fz6KYcF+2+eLKDjf6mUAUGz3As77Tnhpfa\nnEbC\r\n=MBzj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.774ad4f8.0","@material/shape":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.774ad4f8.0_1571285082009_0.009997580337741008","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/card","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f6e407b581366e4cf8d54ae2d93fbdfbc97e9f","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.5916d18c.0.tgz","fileCount":11,"integrity":"sha512-3hmOUmjHxQkFQFyI2/8iCOcbNwyG5kuKJizLo73FL0VeItDt1NEntDNYdXtv1zpSGDAdBPw8rPDcBhb3rETXpA==","signatures":[{"sig":"MEUCIA+JUxPxYkhqgq01N19eOF3QIpcfER1EWczJbCVVs8S7AiEAl6JGq8Yusin9LAM6jMP/zF4Yij+axFN64nE1eBLefu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvSCRA9TVsSAnZWagAAwe8P/RRFYSCkwTATPDikv4hH\nBKaJz0RLqEZ1drL3Sj6WFaNPsSqB41M0iHJXk39zwJL4xSdV8+yhOxG/kUBx\nu685D+dhgYCrjWKPtozIhewfIXRP91fXmjrO1dI/1VByJr6fBL+/miM+3p8y\nrpTDAb4bB31oJH6oQRwwJNp5te9P7okvzXNtU9kjdThk9rnRNVFI2Cle0WL/\nQEDey+OEwKfllxU5yP3K9P/d04XPFqrOvuNijfmjZuMKQ/Ofu+X5oE3vo85q\n4lS1du5BzbNEtkyKDjQlQlrw8Bh67TjS+iAhGB9rq3+XFgPAIaVJ2LwK7NvT\nB+N2ejPJKii3X7QZTwFq/Dkh6KjWzMzUYfCuM3GVjO9nufaJ9NELDfMQAmQI\ngvoNDv5sxNd04GHaOZmaLiNmMxvRp4+hc/71wjdczCT/99T1bE9F/Ra8SvCu\nY3zI6sO9xuPLJ9HeuSVn7SokqpoyYOQy/xsvNzfxA1v4uPsR+6RLCDvwCDpG\nYJM6mgliT7dOivTBGuLWJysgj9w+ySXYv3VBhL1zjDbEeC0baC9mU+pzHdFV\nSMbfw1wRpBsPtgwttqTk3ai4Eb3V6KZTwGxInw6luAGskSk7rVnDJXgNsgnG\nDIAEti8271xygHCgOow/btg0LxCmIAG1D7vOOt3CkYh419WjIeFMC58Xr9hJ\nxfPu\r\n=a9F3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"4.0.0-canary.5916d18c.0","@material/shape":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.5916d18c.0_1571429330160_0.8400833760418562","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/card","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fc49fc6579d56aeafd4b94a2d9a79ec325aa8f5","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.d4141c95.0.tgz","fileCount":11,"integrity":"sha512-76m/Y4P8a1Z0ValUIkmGsmej3kCPeHZyvCghPF5VUj0m/9NNfqQzF5CckG7MCToCsJNJVYJ0mTApc4dfye5sfg==","signatures":[{"sig":"MEQCICYYFZ9HxlTvEPnjbLjBHKkPsEaiFqk8sxA7UypGEVIJAiBlnDpSNALv0zXtSv2IBjXx0UA8BycUi0G775ld7LvIBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCPCRA9TVsSAnZWagAA8YYQAJOmsHppj8T4WZTYPdtD\nlo/xgwKIbVnmCR5yzKXTHZBsHfd3k76vlqt6VeEwvw+yLHkV8sH3wZafaez0\npz3aNDGpjEcML6f03zU0Q7GrImmi+KhMdzMJs5XHz3pSzIKTjnqal08dRb92\n9E+UXAh+dxNUJcpAFRC5OGu0el1fvhchwFoWsPr72Y1fLORxl7qjj0HyuIU+\n3OL/1l8KhtRniyNfPEQTgYxoLLjGrk9q8pEqDzoLTNPXCBAHVoH1k+uE4+Uc\naRjyLTLibZib/TZc6OK4NgIjKein89YXVRopWbR9/JmLi/43u+sDjV71hedK\nGkY4yuy4CYU2BC6Ws7nMqelZX/WWwQv0QShYSYNFCl8XVLjhi91AJLSL/AuS\nMAS9svK2ZTl6tOTfExbE7D22J7tkjB5psNT9Rrbp65KEsSLeGjEWaEDar2cX\nQtmE+0GmmUvL1iV0SnBJhH/L8VmI7Sxvd65RcGQi6tty5kDJhcm+zfbjpOc3\nmazKVSiS1ZCuZAxoguMa0Wt33/TBOT923t6mRtqu/chjOO8W2NJnLN0HbQ/T\n67DKpWkJVuNRuEyV9bjSgBQI5mCVSR18tcx+xygzDIRLXiBRqwcFxB6fznk2\nxF9IRV9U+nrI55hMIfgoer1FvDzEn56i0yUe9LSwyPd9Hpgx2yEfjJshX7o7\nnOxO\r\n=4T/U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.d4141c95.0","@material/shape":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.d4141c95.0_1571881103251_0.7741957571036828","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/card","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9919267b9b5f5bed42c58e5f861cfafd3006f8c3","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.2b878b3e.0.tgz","fileCount":11,"integrity":"sha512-mMCemoQ9zRpXUzJqnwRspW5SHmH96BlCxBAjN+UPUjBzo/8sBHH37TLT/iZbKbT55CGPTaAGshQi+DrkmhsdAg==","signatures":[{"sig":"MEYCIQCcWa0Z8ktNOmQD21M9yVjuyo2eGK6/J6s++9x03mS76gIhAOR0G+b1MjnIPlTcNK3kKRFH3UerAV0+5oB+d0D4miek","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmuCRA9TVsSAnZWagAAycsP/jJB5EogqH+je3xc2fvQ\n894i2prPQEuyjLRpR+Caw7vjU7F4UM+GEqaFoilaHuYK2/c1/uKrESrjG8r5\ngnABe5s3g+7k/86iQgHWHLNnsy8pX5cxQfDOegeLdFSGNukArsm4Ut44Zjhq\na2U5sAd6r4gdlPtCTwAst1YSIL24X11vSPV22AtNYKe87u8IqwfRsYOEX4X3\nf7FDtKKxyNATd7Tbo0OuzhgG1HaLyIwIt4jTKlzafn/QRvQB8XfDv+drlUOo\nokcrUh4+MX1GpWLSeUtVyC4mwiRCtbNTSK1+dTrug9h530T67Lw7wkeJFMk6\n9RGT1YnowWG5Tvi0xDZeiD2fkqIdtywhVIfVNc4KFyN2VJmR1KElppGZNxXt\nkuG+QUt2H+p7WV0pj+t4NvwUyr79p9g5d2bAEMr+Hy3UrRONGtoOCG4C1T6i\nyLVn+sLfwqPt3zqIzL5khc74tgC53iyVqJMax/FLmGDT8GO6raSBkDzeOgOx\n4sjs/0tYB00U+Z4ZYJ4chgLUOTzjiQnA2xQiNcOU343Ebun4qjhA3/L4LSy3\noqz1sa+YLFmkSbM/xtFw1JVOEK8FQ/8d9ExDVWFtqhiW3WPLZ7+zhf4u9Rm1\nh0gn+bGIfRL/oTsw5l86Po4baIdPFjeeMfhaVe6AAMInWFuxf0z639s3Fkna\nXeTu\r\n=xBPY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.2b878b3e.0","@material/shape":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.2b878b3e.0_1571969454435_0.13229069353501544","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/card","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"532aa63a4aeea30db7cecfe8bdb39ee6e77e9188","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.b06c0efe.0.tgz","fileCount":11,"integrity":"sha512-fv52pbvqnePOZWmTUHzTEfCX5CVCEvGFY4DIewb8KCJP3T6GQsB+Mh2gPXeCG39y9/WG5FkRF6/SsuN22CB71g==","signatures":[{"sig":"MEUCIQCcwpTa9UXr3VhVAwGHeFLF6DiF9rQzrB+vW0F7QTEUgQIgZNZyLr5u+fJOhKL72NufYSQFSRDFfHrXv8v6qz1REL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LXCRA9TVsSAnZWagAAUxcP/j9vMtHUV2FFrrkY6ckB\npcie/RAC0/v3JNJI6TcpievDasy6sGgFbgfS3CiF9+ONWdhSmFhha4FxaHSh\ns/8NqbbXTE/cPFp1Cypap1nXixtlv7x08aMjzUvEx9nigF399zTGXXtd9rnL\nE/0FkPQCmpXfa76Tk+jYTJMMjxO/8VP6SAQGoX7yQuN1AZISK0G+Nw9bqyeq\nBDosw1NamVE3QT5t5pbt89FkEDKmhyG5Ic8HMk7fK2f1bvLSrXUQQpRJj7a1\nMLh9cX3xlh4MNu9dKFnCx5lxNoLaSoPTYDz6LY8CEf4eOk1aDQ8WdV1dpwHp\njr+AbZf/8qzxdeIog3MZYL4X8EOk8TJYu0LvBv3Vf9V23Si/aTFHeV9LD59M\n6cr6vgtntmcaXlgJV7tSwRnzpOi/olTR8QJ32F02UFjsaZUSYM2hPIOpBXbQ\nEHVYQE3VUegIHBAZnequbJKiJUYZ3w8Gx2vnncN6d4Vci/G4NjGkWMypR3/N\n+PtMje1W14REwzStqjVEGlU6PuYIU8ywmeUcXsNYqeqchvqAMPhxjkRIxM4j\nMpQzlTBHIQmHxjytGFEmMwECRDSVewlZEPJgP1rVIpq4FpVJJzvrCugucZkO\nkHeIq2m4VXizpnDjmUiNLLK/g6Qy7FYqeq+UajZdAjvGwfbM9J1Mkb18hg3t\nnQy4\r\n=gBD/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.b06c0efe.0","@material/shape":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.b06c0efe.0_1572053718704_0.6491960837863642","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/card","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfa33eb74c396cf0666ecdbcc464097020659813","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.01628efa.0.tgz","fileCount":11,"integrity":"sha512-UcroUMTHiSDkygC03DWfRNHiVzQjjGSdWMHb+W4p3QHP+tb6LVpoxneJkXjzZKCnzISSId/igIeqjbnmITV/Rg==","signatures":[{"sig":"MEMCIEOIxwMKksRKHPsGckcUoyKEtNPkWqLyk3+eKthJ7zrSAh9dmSsEHBPFZlm3Yy/kGc37VmF5j3FB3oikrca2dYBY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HCCRA9TVsSAnZWagAAw2IP/R0y1ev80hSwhYy7pwlY\nPcynWAgjXLa/qwe3TyjlcAueOHnnAbCr8k6ViB3REunVUQxIIHRT2i2WHiaV\nSHKe5p+LbZT/1p3h82YBlCmp85yBWU6q06i9QysTGt4hskGTP11QRkp0jIoy\nkPxD7b34qheIaJ8o6ydxtfyfAdOT8y7INifsBNd3yia1frd6GPUBOtYCB4s8\nGDjiLEqNr5q6kNsc+4X11VetVtTgGs5k4zSf08GoX90BUSiZcTkYZw9jzbAI\nu6UnhKXEMH0v+PivEWJWKqfR+m6QHqBbD0/NsRRYd4g+vz3IbF6Gi3EkkL+0\nR/uk0dfjl7ZZOQL2I9kU3E1KRDbzGOxrnuUla7LKQdleqkZJcbjvjUaB2wh2\nOMeM8byeJC0CaT36zCfK8285gtIUcHZIsPPIiMp5lImrtiqGCujjR8E9snA+\nP09mbzC6R3uqgo6R3DGIDX5Um3Lh4eQtypjZg/58UuWdMJd1gTWncf9JO1Am\nD8UEbsnezxJge6LO1yYOzj/0WyOuH7+zkauqgcsbwxj0IRH6GTgvSqUDjj1b\nHcZvrbK3x6gX9vUG8MRClvjmIk4pV8a/fYraaZV6oBfG7Z2kk4S3Bl90s9fs\n6MJGVnpIyYn7WyP1DqBKWWT4fLrpHwe8vzM4mYTYwgadl85FP+Hc+8iOyZyF\nevIl\r\n=ly7z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.01628efa.0","@material/shape":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.01628efa.0_1572307394645_0.29847123298790756","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/card","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c64a6d0fe9fbca52806606870aad6fc2b69a611c","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.b5c6d66b.0.tgz","fileCount":11,"integrity":"sha512-n/rv3nsr3aLwrm2hMBY4bt06GWptVXkMbOxjvEB0HhrIuQfbJAdhacyxltJUkWlTIuYhqGPTa7Svcc/vH5q+gA==","signatures":[{"sig":"MEYCIQCe+41x9of4ce4KCn6n7YDeB/6TWXANC6SsPI7u87WSnAIhAPLAat4t71e5vpHX+b+i+TIHwJ6No/52gRtVv2kJRseL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1vCRA9TVsSAnZWagAAXokP/3yctrxORf8pA26vwAb3\nkTO355eXw+ff3L/KzwjP4vpqUMYYeatRMIyGpVZ5QYOzm5Z7JCLogfh9eHmT\ndO1W+Q12dHi22govX+BQcQar1kDFje3b9Zcr9HGEBO4766DDd/lwIxWnk8rS\nhog4wHgQ+u5QXfEmCXnHzN70xAM5xagC+0DZe8DsP0sciyxJK+Bee7srmmT+\nuW/0K+bXHMQnVNRABWdXOkxMHNpjzUpsYnKuz8b2f+140a5TojC4dCUOvksZ\nSrD0G2KAP6fYAbQzjw47QvQgTnYG/0WGTQtmsLx2DNfiM8AOcAxyxrv71AAJ\nTBt1CjBOCsD1OdQ7Lo3lCQGRUgYS+HRYn+/adcScR2Xc8D3N5KzxsHC9IxgO\ndLcFB1raA0pWeVuxluuK60IW6BlVXsA44zVbWDF1OrDQaNZT5lFuJvYNl0Y9\nRniiAH9me2iylQZjBsLiGv8/HDr8FTEhOiF2Un4YcI+vCKn5VCSIuIOhX/gB\nnNL6856wYQLeZLIkiDSWlFEY48FuKo5u0UHX0oT6qib99ENWt+HlRrvcEpzF\n4+28e4Gb2C8BRWbkMTfLMz7GwZXoj7pSYhZG/7HR+yeB4S3eFGA2ar4i6zP4\nVR3Y+w97NrY5dVrXmVtZmCuXQ4IRyCF4bw+CGY23sDBGOGGzNQ2k8HLtag/P\nbwFa\r\n=dy8r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/shape":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.b5c6d66b.0_1572371821712_0.0021543250419113757","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/card","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"727c60612be979cbac49fc94df2e8e9952b940ea","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.cdf858ea.0.tgz","fileCount":11,"integrity":"sha512-LRzbQosM62+Pzp1b2+f5Zyh2OyO85KUc19xSAR24eZXm1C/ggA/QPg+qhOQVHXgQYMAlw71RCTQeRY4nr7y9lQ==","signatures":[{"sig":"MEUCIQC1NJwoIFJ9VxMEg/PVpKsWnUJxO2w8jOM+ohRDNJ33ZwIgVVp5myvPvSvWbs45a95Ld4wTgHJrrANqfwRSIGyCzpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJpCRA9TVsSAnZWagAAnaYQAJs5KwBCkg9PV9PznHhF\nmBctULKFmjCpd+8GYhLk6MTrczqt0xnJQOqjACY3Eb06tpKR59kfjAMGvuMA\nenxFI+PGaUDEUZNp/qd+PVT2HkncXeMLtjEIIW4bBbZKVQ7tXFW5NkSL2vPF\nQnLWUqbAwq5UqVy+DvbQT+65k2Avlo6dAUJV47gqpq6UKphASWZPYG489c9c\nMfRN5fqcx75f9jorZ06qFUp3hGT/oaoxmxhVwweGeuxzBcmi5Bq3Qy3aBjKj\nLvOfAfvtrfIGB4SECbEWIlZfI7THlVN+f6lC4iK6O00bpM6YgX0+6J30mlZM\nLZwyRzUxRJ797oeEnOSPovBypTdzwHViveWhQ+XReZGbjM6E/E8erLAsfpWp\nepTu74XtUJniqY2Bei1SDQos4+QVvhQT+ycyOBnuOJ/9rIrbmwDxJTtzSXgN\nFrhmyN4gJ1b30pK9z+qWVDa2i6Li0CwrlB8GVv2vUzVep81Lxt1+LswuxmXo\nlhuD6fDPfKd0XpXZcheqJ3LFKdhs2b1NDB89/uQHF9rqTU0w5/RiY/chdGCM\nQU0e2AuniaMR9ADtti4iNV6KMmdHVEaMa1ch2BLDti1oNNwW1f3WidIpLVOZ\n3OS9KN2/JOOYYu3fyUPa+S4CUFMeaYJGuGnaonL12bz4CDU4wOyiWfKOw7gY\ncFEU\r\n=orDX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.cdf858ea.0","@material/shape":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.cdf858ea.0_1572631144736_0.3956318106834753","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/card","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bf018dabb8b2dbf607d76178138d22a559bf409","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.719b57e1.0.tgz","fileCount":11,"integrity":"sha512-pnWwEXRgA6bpLnp1F0av0YX07U5br8J4q8TpFJOKBhHtqHlou3plWjIfbo2w305oUjANnmwSRF65euHheFs9yQ==","signatures":[{"sig":"MEUCIQDQZktFvBxeYDaMRvPh+Y8/Z7zzmF7BkjrINut59eTJzAIgbeSPQViWbGTZ8pg/uWVHs9ByCadwkvfUGgB/BnepIj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8oCRA9TVsSAnZWagAA/YkP/3UpEWfpChDHqXAJbaJ+\nhlHHohlIbp+iCIHSAXPXiQrn/8xEMVKLhb9dr9mwG+Esm36xYLx7d6vxpMtc\nDcSE7jSkYZjShnXON4Fhf7P/VUhBjnaEdknC8v9PEelab2JN7CuqetYNazuY\n0C5IHSqWxvipr8jaqP2aFO3Jpwp+zgAg1c8edSSRnMplTmy/3g4LLczNSNZ3\nclM/PyV2sUBZo58rypNqWCYG3jjJM/bOH1CuIjrbFiw/hd1zdm88lem2Y83x\nt2fgEgNYzv1lso3lYKBbKJMrhzUCQj/so9uxdah1vN5A1B2eZTGy/XzpOkRC\nh+U93IGjgFACU61R2caJk5xKqbQ/fH1otjNlb+BObii+4Bo90OpmGMK0qQ27\nS5dmoEBobKwsx5p6EKdWqJGVfO0Pq5SKFdGULVGs1IGEwzVMkkNHRFTrLg95\nuwQNKkf5hN89R99tqtl+0/KvB4mWXjvcgo72JHCDeGmFqbi7RcCRXrJ/9yih\nMluY9T4fWe2y52ozWhrfJ0S3NXEkafKMGSQstj4QLOHcE1EN+InXJgOpHehn\n5+CFZ9jWICNObuhOJgOYlXhVS05FI7/2Jv/ZYEHpMST6ebD4lVwNjChlcyf7\nciikY4OMeS3dPYtxLnmSVaC1mwAZ/7o6f2veP7Xw0tX1ZaH2onB4aX1F8Q3T\nBxDc\r\n=45gG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.719b57e1.0","@material/shape":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.719b57e1.0_1572638504073_0.9876061065233068","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/card","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98a7b2c934801bf910a898837ea8f03e33df6ad6","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.97cbbdc2.0.tgz","fileCount":11,"integrity":"sha512-8FtThoaBYihx2Uo2rwH6wKQrFreVE5Jana//3xsZyn/mAtRggzujFF3TFAqkocKcZYW7fAIAEK4i8uu0Fqg55g==","signatures":[{"sig":"MEYCIQCl2Ijqm98UNEDDWQjEvDZsq8HhFFzyMnSjhuksPX4juwIhANM6q1H/TzQzuxdKzR/KUrGtBaB8hoBMho8ewqM3tD5V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWkCRA9TVsSAnZWagAAAMkP/3swLOBzo9wUDOlKMtPO\nBfa9+r4ZMi+sNcrinF1uiHwhbvC/4/E159y/YjPkZs62iuo1vOKSt/YYBJTr\n1B7VpNlMfWC/GSuVWmLoyMOeK2ea/QuiVBY+YBFcA52blbv7ySp1161j05Fe\npe4QItdZOIhqk7UVNUaQBxeYH9tEOORfnYngg/3LKF/+SfAV5wQ1IRbcrlXk\nNXaVy7b2UxZhMhCIrRRxUBRQdtOfCdK7Pe3hh+gnbTRkQwEx3DBrexaGpqTg\nhkmPPCA8DvHGGEEK/zvl6gBy4phYr4EbVK8dfxh7awfy1BbRNZbqp804gtU5\nKvktVGQ6hbOwzZzuf3FJesgcg4WvFJlwlxjJftqnQ45sgj6S/rtcDAt5cHbs\nAQDuxOonKovVAiQH+ErL8N4n6dBHLEx3ga+In0hoG0in57qh21zPs8TifK01\nIrzrmgDPvtfZ/Kxe3mrf5rfosZBfEa+HWozXRjGGg2jdTcx344bBhfEeYRDS\n/q7wuVjfGhjAumMv2nsFjv1GNRD2/xIA1JWBtMT1th9bndmyXe0bK8TcSocx\ncqN/f2o2z3mbdJb8YbpirkG1f3Zz2MtudJggjm/c7FHz9LkKW+Kei5CbE9XY\nezLd8C+qQ3hvJFW2bsE67utYGxAS89kI3/i4rS7BAUN79ssAtWJY1Eu3qEGm\np/5h\r\n=IGXQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/shape":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.97cbbdc2.0_1572640163912_0.5631704055363509","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/card","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d99bf658e024720bae99a68e20264826796fa9f","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.8e36b3b7.0.tgz","fileCount":11,"integrity":"sha512-kuHLjE5OaW77UOBB0tTh+IcaOJFxJkUcaMf2HwCSaAMSjJg189q6xsJQTnfqfkFOq30js3yAyxCMr8Jz2FB+tg==","signatures":[{"sig":"MEYCIQDCQun9hTk0n8OEihIHnX2ee2AZtewcSbgguDPJ4/zvagIhAJID/IuSE2QLM28kdZKZVqYP8lNDLi6mKoB/V77C7vk6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0wCRA9TVsSAnZWagAA4kUP/jyo48zKZ9JTYvFjGqvR\nGff1giyV8dy94rHyhaGAoJ5yoGdF1loebEKw+z4t1K6ZN068Uv7tApWyGQdI\nK7GhmEaU1VghXJ57YPveHDu8qc+xfk9ypqgi8lYXirbJjf4BTsOgKQjLWR8Q\nY5FUeD/zlug/OQPIUW32o+CZrMYKwpI3Kgcw62C9inc04iR27on71gXKtYTg\n4oS3AvrQ2oCVODnzKb4eS2YZx3hpFV4WnGRmFYHDXZfBoc7ZfWWORN2fbMZ9\nKfS2xOEoawDJvWWb2jBWYMjrbKlRPtHDT3C8OsPFOW8X0kSs5DE+5fEjhbQT\niReHiyxzB4TV4A/yWkV4IJ8mMSpuLxL+79+WcM0fdomKrlgSMa60AG2W0XQF\n4ygLKHvWOuWa/Ku0gKxITlBkbLWcOE651P9kC25xyvV2/MFVOHsP0zdRgov3\nabvhH9PXtuUC6HNO6iSzuCeJWiKaMZ9H5SGEDNQI+2G/TAI6HfbxwBtqvhCP\nTh77qXxOIXyAIhYejl9uweZe+/uYpfwBpB8mDBTUMS7300H04EZnV7SEI1Uu\nHrELmKYdjnJb6Ee5MqEAOuaLVuxytD8Qi616uXMVNfzXX+vK0ifp21jZnrj0\nivGAOlN7bSSxeRRJRgQVIgiTvgg5JiCcoYjAnFJTR54+HiRtw3/iUpR438FV\nbqaQ\r\n=KLPZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/shape":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.8e36b3b7.0_1572642095789_0.6703107748887902","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/card","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b45a1862232c079a144dfca404efd563fb5cfd6","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0-canary.62d3a09b.0.tgz","fileCount":11,"integrity":"sha512-lYdvWR6MCNYW9AilvReAmRpUboM0MpS5hpDZxOxGpiSHvMMbd29ys7qjSOXjQ5JLkncXNsoHm3X7Q6Gy1F3mog==","signatures":[{"sig":"MEUCID3j626l3OMmS7cXPmsNOHtqDYAmPPzSfkkDyyBzGjZEAiEA59kMiiUier8sUSmPn0QUY8ybT4YjrVoVya1P9HQzbNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9iCRA9TVsSAnZWagAABLoP/Ax3BtH+iAv/PPxzbDUP\nYPomhuttxcEvE89Q8Il05eBvC20TS2N+pdEbAx7RPNJzzDneBbjNWk9gyGwT\nyoIvTS+W0p/vudK4FDrhYSv/sWLM+tTvNbDAI2wZhCjgtqVtPbLS9C4/6BEB\nm7slcY+R1OrL1IH89mn1NsM3Q/QOShpuNRwYl6yja2LOkNzVtI+EFjisuBsq\nv6gN4yXWLyu52HqMGOdq16pJHoHLHVzU4r2cHfMnnAnEuQhG1JhZ9lxBpcuz\nDpwpYajQCKv64xIme2vT6ZO4qp+i4vjUbEGtCdYi710R9nwRf1ecgZNc+XzK\ntMZMlb+n5UcGaQ6LorH5oYHoBl2DmyLKP70MFYX/JMs936G9NoYZzcO9QMH5\nvqbW9Z+lfgpgpFOTUdgHh77NZDN+DqC0nWpPMbJEeM/ORMGaKLmpqwnGLk99\ncDfhcMtaB7WmG7OpFVZlOhvihGOAKQpR38XrFRVbzBUBPIVK4d9qsF+AXoYJ\ndiuSX3smq5uK38SHml5ceRDhQuVAG74jBENcf8J9SDOIBs4yqQZXCW2DcidP\nUP/WlbeVegJOEAfB7HjZ1JVmT2WvA9/1C/39P8B5kESQlbV7JH/WVFe+Jfgd\nYxDEjaa0Gf8GkWAqnVebAb1G674hpSeqTrwj3WkCIAXI0wLEguYRXFFu2WmW\nZZG6\r\n=6x/q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"4.0.0-canary.62d3a09b.0","@material/shape":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_4.0.0-canary.62d3a09b.0_1572642657599_0.21428423259035156","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/card","version":"4.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0356602f0b3eed37594e3f7e8874aad484d9b948","tarball":"https://registry.npmjs.org/@material/card/-/card-4.0.0.tgz","fileCount":11,"integrity":"sha512-+7qD6pko5/vRNLTX99P2uaLMO1/CcSjgoQgoDKsDEAL/TDxxDib9d9Rf3JD0b8waE+7mDELS98Gt8vHzD8mvnQ==","signatures":[{"sig":"MEQCICcLQslEooMpi9JmQ7MbT6wnH38OG/NnuRf6gspwQEYyAiBZJRQDjoqXg6ePlx2t+3OxVp2OKehviX5yBkZGoYqu5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcblCRA9TVsSAnZWagAAOc4QAIv+vD6qMzoMIN++oTxX\n/yMl2GQMQIbyVoZFHboCaeGnGYi4wbtzx4sb6XgdZlyYWqCgyxb9n32swQEj\nCrDQxEDZOswO9ufzJRQJmlqp3hcRXwaOuOvFRkoD574T7x8DNffi39ZuPW2l\n6ICrr/Hq6SJJP/aBGVAmMfojV0A+kTWwaVQnlS6GqLNlPQpKYyZX2NbKgdQW\n/7/ef2VR327AH3Q2MbjqBlpYNYvwz751IK1q9smYqQda9SeguxLP4qczAW5k\nMHDrimIuY/39lwNIOmaAymKWU53peGGAt+CGNlakBetuNaHEERagRzCeyXCt\nu/ylmIdEGpCnr1oz2TIeQ2UB3qkRaQbKEtzI5pt7mXXWiIr3Soxt7fLsAjg/\n5owjHNEz9DrsGig7pZQPDKjDAGZmR4D79bVMGs3htwmyiGeKrKHkqYqmulLz\nO1/iNaqb726hzUI2dQ/ZJE0py/HTNzCOYf0UWYwehBjjzOCVi6ABEbrjem4l\nQpET3JcQ14Gk6xrMFM7y+nLexBEMUcQNg49+RY01qgwpJAn9HtMxxPCN2ths\ncxsftTT57GRswVmuXR6xVsH/lqSAw8KaC4/oCcGyZpD5Ha3eEVXrPXHksuEG\nTwcyNjvEN1n4CKhNtLn8KH1WRg+Jp0VJRoM5DHR3M6ukitZ8Ox5pJHQsM3wJ\nNbVs\r\n=zM+I\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"^4.0.0","@material/shape":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/elevation":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_4.0.0_1572718308570_0.790949778076339","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/card","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b2fe895db2f025fdc180b73689fa106bade2c9e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b5eb51e94.0.tgz","fileCount":11,"integrity":"sha512-HS3u142vYhDhnOpepILwtYYn0aI8BIQ5mEHoS4rut/nVzrv7zbsbgpsZ2oFHoIlAdrihs8IpufnsoRjTopU9og==","signatures":[{"sig":"MEYCIQD2nV8FJt8fnXontMcQF5hDsIj/s62OhkEnnhtj3r+zKgIhAO7PL6oDHlbM6aZVyOITW3eY0Ss4JJRbSy3aV2sClXRc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGORCRA9TVsSAnZWagAAUvYQAIfL2MFfgueHKr56Ms3+\nLvvEM5LYthq1/TJpci5XVEtqWU4GnaIiGwv7KCPBSO/sSG2O6NyeENd2GeOf\nCJp81AAIFDJcCmC0mYM7w1yP2hev/53ewoAY17dZGHGaj/1UXTWlUarIXcqO\nwHPLaB518RV4xwQjKz3Mosr/5ctN4TwxVaTxHho01TP3js5kNtEwTXrNQC+H\nxGxKyNjQ9PhiAmJvDvAKYVQyZgvTI0mgIHbaMaXDoGj+4ITOYaZOz1AHkaKV\n/e/nQ/aFn7ra0wWuYPOvD/X9UqRW4AVj/2LuYLcALCfR7L3VO+HXwCQMInpS\nWmGxlQnZKvJQBpQz2KeejpL5oERdotjQjcCXBv5Brm2t862SWxkd5cPm4/hX\ncR+ZJzlHEaWZ/P5ZPrgK629MgA+9ug2FWMSfU6Hl3m7S1e073wfrEaMX/UZ7\n6hqxl5T6JvMmNgitJaeK0g1y7Rh/MKPqbpUBrK1kEKJjxSmXoqPW3qm5SyKE\nWAODGi97eU60aZbu3uDldsyQeJ7vchFqXz0gryDhk7CAPdcvWv+5ErpySPbf\nWYjZ/xaRpDSSQGps21tX9LAq6ORjXZTOEhkZTjE7u7VEtw3lFPCZmFbWGaRB\nPpDKRLu8WN8bKt8RMaa5xQC47zbuVOZn9ybqxG++zie1ym4iy/Ipx4F3M4WH\nMtT7\r\n=cAWc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/shape":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/elevation":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b5eb51e94.0_1573151632729_0.08449738882482372","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/card","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d06bb4cff1a11344c6eb8b297b42510c23f2acc","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.58500806e.0.tgz","fileCount":11,"integrity":"sha512-iCyjE/BzHgbGHyjmWecD/kqduix9Z/ogmW7ZfKKvAVSMmtmb8GJw2toDhlLqLQ8LsuZ/Lblo5uKIUv3bpg9vTQ==","signatures":[{"sig":"MEQCIFRFGvGAar99u7VzLI+nHguAhBpHLhj878sG4lbRLmC/AiA9MbYM6ZcTyvfAKpim1Zh2Pi7TtBL9qeWiNIZCHrL5Sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtdCRA9TVsSAnZWagAA/uMP/jr3H8ctmTF9G1HWL0cZ\ncd0KMVuGfMUsHVTm/6lrlAql5c9m2LXgZxpX1IdloXgo/G6F849L2aVEc0Ft\nTji8pVLOQZnTv8E95Tu+1D742Qajjr/coC0CWpdlRafN5eeMKI+6GHl93PUM\nYqS/sbqd+E4qSbaMVg1ISyDEi8D5jq93SnTsbQIoDLE4qXZunkiozUWefEeS\n8Uv8wT//f4guZrxe3qnxpO6KHP7vAXNGSPOyLFVsm6z/RxwqHIZUrP8nmJ5p\nso0KSPJZ2Bl1VHer7xC9JVFwiOM1NAajeT1XHwsRopaZiQzPNU6t0Xdz0QmY\njrZhg9uEEgFISoyVRX1ead8snwZwUaPovpX2T8wgWxsE4gMiebqljfIAgmO4\nWaFfgA6Vs3EA4DXefLWJ8wcgaRKaj5CUJu8KrifApIAH3Xb/gsHOf+JwyZjH\ngkryCeBTHux2z3aySn7VYRQTkVy4CipPRDuVW1VUd18cBeaQwu15TlRaIEhJ\nZSGefXPyvzxJ3XPKmt2j6uV/4Pw88s/Dv9rVYJBR5oyf20MFCDrbqR0o6YXU\n7nCSYC9h4wRKKG1vb8e07lR9ZeaZzSKYqoc83UtIg7m2yDluBTaCTrT2oHvD\ndBjD5wtBA7+JCmf7D72+lH8Tlq1Non9kkOPOPdRwHyMpAukGMJrdvaXDGb1Z\nZ/CV\r\n=MhEA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.58500806e.0","@material/shape":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/elevation":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.58500806e.0_1573227357421_0.3758257159344791","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/card","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ad9ee35fb57cfd5abc6b5ecf25813a76dbaa84","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.66299b646.0.tgz","fileCount":11,"integrity":"sha512-4Ysw1DnkJTKKINjgPqBNIXW2YNKQNWpEQocUwHKl99pIkN4ZZT0BOs48iXgbAMUns4Cu1eylQdPRmA/JVexjJA==","signatures":[{"sig":"MEQCIEauPIw42Kdc2ly4IMsyWPB4V78N5w6jDcASrOUqVIVbAiAQBgxjDiaTOgeCSH7wlECmJTouKtunJiEa+vH9tuvlJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEyCRA9TVsSAnZWagAAC18P/3Zi5+6ikSDD9Ay+UyTO\n6FasOpSlacFN9u5BbZFKrmqJYxmPh9ih5kcNKuKoH5sjbGuutaLqeTFPW1xY\nyFU4HuayvkHmHqVpND+d0kq1cYklZjqr9u250lrZVZIqM05QlSJ9Se+sW/Yo\no7g6SAlmNedyBFg/7GJ9tQWjDYxDS1qoSmVuszEVDVf7r2cFHNMtues0i2QR\nfViQWQ/P5zmFNVvVibdCGaYoO8p1YLzeMskxKLcoDx8Acoa6ZtoONe37HDZX\nfWlh84rSnV47TGVvazzYXpCp1U0E8EuBUhek7P6qpj2lPz6XZmWYKHPpzcyK\nGfKfoAKMGXCNFH+Ht9XeYV8dCmMfoDgkVmKUaVZI/Vtzqo3CfdfgmmZLR9oZ\n43Dia9y+P9ukaTZymzskkWCjWxw1lzciCvnxZFCuBXqJgmDl/sUsqaDpXWTT\njate4M7eKV9oV7Mn8sFlKHW9Bfxrj4KMQAU35YpjiDCjJBjlDPofDndWIRYE\nAFgVXBOF2U+kfmcR+co8wj6a29h7MRhsZSfQIJynvWHB9lQl860RTIjYmGbg\n/10e2AE+gHiaX5/8tCVCmSfbT2HOUASf9ycRiijg60wjt2xbEv/79N0U+WJu\npMt7DXuAf9u/jWaEmJQF/OXp3cr0VQn6J+BaN8T9eaqt+3A6oXOpKQrzlUmF\nZepj\r\n=iFXf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.66299b646.0","@material/shape":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/elevation":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.66299b646.0_1573245234549_0.5980967192455313","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/card","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a9c53e13b5d32ccadb9a12115ad4b809bf2ae0","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.821871e04.0.tgz","fileCount":11,"integrity":"sha512-9J3stvkpd6DE2Q3ShFnFuC3ebjk2bHgb+UyKpJMnaUwUIjgC/mPmvdHzsEFgt5FxXURidTlssl319mt1+owqWw==","signatures":[{"sig":"MEYCIQDUhB+EEbFZTmGoPq9F4dtCXs6jBTqQwEORvA/Sp+gwdgIhAPnr9ypHkdqE3Vq24IGPOLhqyzNK4IGy3Uqb4y/GnHrM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd33CRA9TVsSAnZWagAACvgQAJs48j+onZy79tWQuYPy\nQRo9qpY8ZxuHI09/tWEHBy8ayeTDPga1eXqSiuXW/tftk9gxdylQ7akGt92g\nq4mNozRIudOyqm7pphSRgj2IpzGfvxkvKY9Jt7XE7b/lcORuFwsrNWBkIeb0\nqPHtmprbO8sG/fTLuk3Ym/B5dlcJ51Lu1gFUFFTlZx8pGPyvcQ1X5/++dbJS\n/OmIzRigdFQ3FlOS+7VYEnxdHGeb7gPwuJ0ywEuNP2Jph+qxy4+75sKMgshX\ne8AWJ9EhoHmuN6NfOfNhcJr2h/rwCpHwnsZxt1eAynCmjlib8hcqT5xgQvhJ\ndBvyAZKRmMwvjUFxqmfC4wnfcZL/AQAAueJaXba4dkr5Rb+UNWqiYjlHdigz\naKTUp0+JBQpOxBPBGFK6Qy15RSz7jHd8UWD+KpXdu76bwkOLEYSd5oT67l0I\n0j033PPzXB84MrPKx3BRvLw4BOv7AUvXPjRxDvVwSVtzFHd40gfC1uhVbXk9\nbm2Pzj61s5JO9TK6l7+AtnA9gZF1VQCdnkueFBBo3lvCqOuRCrkbCh0QTsxn\nOvqKopX99Ipml6QFOI3GjTgjMrFN3HZiGHZpW42C/HcIEn3jbEaYnUItent1\nQdvnngoEvARUSkPBSG1lgiHo0c8Vww2jni3xybiUuzTLj8/j/yy/jrR2J0gy\nmYEX\r\n=pOl3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.821871e04.0","@material/shape":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/elevation":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.821871e04.0_1573248503417_0.3218981129935621","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/card","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57174b146e76383fcb7653e1e5aad8ce6cb0fe5b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.491fddc31.0.tgz","fileCount":11,"integrity":"sha512-MxZsQiQbIhKphLCnd9JVixIdYI5KIeTZX5xltwsgqWo4OoEsn7BBsNJL1XuysMnK0mgq+NkC9Kw+hDLHk/ZlEQ==","signatures":[{"sig":"MEQCIBA5JmMOXXQxivu2mVAIJ70gaI7q24ZyGskSYYY9O1buAiBNcoQlf2bh19cJzUcBddi20szG9LCGZnRAor4B0C3t1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecdCRA9TVsSAnZWagAAtPYP/jlnyGaF+Bj6BggkWlAb\nEp7izzjbJ+mYt+ZJ6MjQ/NG2vYC43HLwyE457M7ujg6kShoAL+Xg+8jYHSIK\n3Ng2eKq0VEHP3dbKrEfjcfgh4jr2XF/oBYEPTtNOrZ90QyyF/VWqA4zmSuTe\nkQa4ZUv/8qRMMX7puSW4Dl6QBtXQPBmg5KuLlJkHlDU9cB1CbrnHsLYpP67d\n3j+yOed5PXs8DlL+g0tT2/Oy6DqSQOPPQEN/nLl5r+WIF+uIhHg5HTz8QrYd\nJ1z0g735bMzF/9Xi5r7vXCbBN1UZsUX21/xCmL/obWgbbN0jBgTMTURPOB76\n1rRxrfm7RgOYMlGqvFCOIdaNm8nhhtTi+VAac2iBLw2xxJ+MNuqqzockowkN\nvjw3jrgAANW5+/e8Rd2aJjQ+7pLRrPHbuY+6cPSTMheJTfIB3opc2L70d9DF\nkgSNP9wZurw1QL3RNhKM+1Gil0AvkXVCCr7eMIPy+hyOrPidKwshCSqbqSDU\nf/7wHpnLH/f6+d7u/6D/j2CLIneA1bqc1iN/0gztOxi8C0zdmkYCvUsgP5E7\nxPOE4BDG89ekbpMinByvDAsgxtYe7WJVE4K5oWMkmd8TlQvNfeNubzNPVgL5\niJ/rzLsEz4AvPFdaQg+dov1TREPqFbVcdY/iDm5DqJZlN6STWRyVY2AdhJ9w\n5qwp\r\n=pYRh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.491fddc31.0","@material/shape":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/elevation":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.491fddc31.0_1573250845507_0.9344492238626718","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/card","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b05c8be36ed6e965435b0e90f48af631cb5b4f24","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b0cecf145.0.tgz","fileCount":11,"integrity":"sha512-mcWR41Ddr5tDs2m2dFOWTJ/pMejZsqNtxTMvvURxmx/QvlXNXVtK4Qrh5FsMyJ2bfDtiWj4Hd41AH6hMHIKFvg==","signatures":[{"sig":"MEUCIF+go+b4LcN3FjKl1a8+3aoHs3kmobomKKx8btg2EfsnAiEAkZhbSqZ2tc3gioD8VoWUzNOLt0DJanRYDuCQe3y3kpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwibCRA9TVsSAnZWagAApQ0P/A/a09Et658y3+Qn+BDq\nKDdOaza5sCbG9YW5eqRIZOkVs6bb2wtFX95Irz/eoa3VorRozaX8T9n1X6hr\nDZVWYXrgnLJeJHx1HGepanazEwe2A2LrUwcO+BlhBPcJ3bHV8zMpIpLjpmyB\nWDdVQ9hmst3SjsXl2qZPpEOa0bYN/4iVWUkbaPw5DyYA2PCjxBl5ZtVH9iz5\nWI1r4xXTJk54i/vhLjSS/tCKL/WnVewxO/ZFJaJ0gHBBpFo/mNCsYi/Pij2V\ntrFaOT68yBszjCV/RrtdTsSwBfQWZqOrGllvGJnr2hOQ2RCer8ifHfPYw8En\nd9kQBmFpQQRbs6m4JoRqTj9YwGChTxsm4wOg3jAhUtxQ0do0UArJCO3YwN9Z\n1f30gQoo3iecL0RwOgTuwHbvHADSqyAvU1YzF4fQ78DdVkn0oV+2u1DtD7WA\nIV7w5lBLRhcaN9oQxKTRIgcnf1ARju0MgH2t/ytVdxtej73APwszze+qol1T\nph380fc7a75MpSfTc78mbcsA0ccFgOguLfLYtYZbaOGKIQw8UrvuvWZ4TixN\n4Kx9FwUatmk8npQUDFMyFusYIvu99ZypUF/SHdZkhNGPzw74aneL13rVs6Dj\n+bQH5wIymktcpJ/UU3nV6fHrYMDN+3RlH5dfSE6t7xE9l5NR2BpqaFKmYCKz\nkvJ+\r\n=S7PJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b0cecf145.0","@material/shape":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/elevation":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b0cecf145.0_1573324954672_0.6504951207121492","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/card","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a79c20eb8d515f365e648e150967c8349c60fc","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":11,"integrity":"sha512-nWQU3V+AChBbX74qdpF1SPi4IvB9vblugzFteGMaK2G282Nkuxl08+An/ICIvm7/otFpX2hIW2ZxWqSeUfMgyQ==","signatures":[{"sig":"MEUCIQDwMzQXHzn/LpDAyEC0M1j94n0pvW4ePLVqdR3jC8wiVAIgJb8cOJAnPRK8Kp/SHz+aHidqFL8RoQCg/L0T3wzCsHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBSCRA9TVsSAnZWagAA4YUP/1y+i5kDQ9H+/9ByOFnQ\neIFyMwi/RM+6n237XwzVD7umSzu5YRKA7YQ/LtXO0OG0GorEvwwPEXNweqL6\nYyZBUBtVTRy4x06i7yjzOBy8AdV6Db4+dCbuYpJzPHQdmq8WHFNEQV7SODAM\nxk17nyika56Gh1MQB/GUqWmwBr3TObg5l8Mq5iVLGp1iwuSh+GHKPyl/KcqT\nHpZrw7vf/32xdRqiG4+R3r1u6jMcMmFOJlqUGEovIirgu6dwpzgG3wrVxcTM\njMq4feLrHn6tOg44A+IK+VjGrRB4mcYHcKJyzbGhQDg7E7B9bZ+UBRhHYrAz\njozN0YgkRCvfs7LpT6TpfRa13Ijnvow86qLIUXfm1KAWaY5Pggi3p5a9Ckxw\nccKGr8BNMjybYpqkF7D7K9IMV2gCnWxqr6c8QS/+kfuC/pf7ohl54eshnpP/\nnD8N+tiCudyWsW4YiikBMZaTOM0yUlTxTQwFiTG4nVJqRNj6Woek/hcZumUE\nWZxXxUPxCCeP7hHLsQBZozsQVbkhp/vpPHy/IOytwPOnry1vU8zszpOfSmB1\nNC3dHZwsFQMlGEi6fgx6pPLNbNUD205O6Yq2vRtRgPjwb1W18q2XQRshEudK\nIaCCXXAwwUv6UDMVM0iweAR4m8ZdGHsVi5lahvh8hVKTqq55DoEPTrys879Y\nwbXc\r\n=YJ8M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/shape":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/elevation":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.afe0dd1bc.0_1573486674545_0.29327852325124093","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/card","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"997bb09532ff700a4c182300f8b1bddc8cc11881","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":11,"integrity":"sha512-iY2d83OeHEPDmYNCmeQ0TyDmVgnvQ5HfkU26Ke4iFARSDQbRK9bNgopX4fqnHa4Nu2qTxQJ/BWp86eChRTyoNA==","signatures":[{"sig":"MEYCIQDxYhnfwg6jfBqIIj4c1DSY9G1HxXzV2hX7eFnJn3fByAIhAJDVMapBeDl7LQlbE2kgddk9+zehZo+lBPyilTc8+OqH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXm9CRA9TVsSAnZWagAA+OgP/jKER0seS9wq4U19IVbY\ntvRsYRJL4cVuiCkVpha5QbvJcAue3oA7tj7Qdgk2+gO+THsYnIQqO0TEtoRA\nkhjZRit44gj+HmgLQPlaF8cFr4069ZBD9A5Y8cnq9NVtEuy1gB39bObKxTic\ndW1NPK+fWtBfga7vjcr6WBBqsgzymZOpU978sG7fUF92V9Os71ssHFjsZBCM\nQrM+DcMuCIyfE18+kkQAyXdzuTRGCxvy8nX4a/dzXRpNCKkg9H4vg9XiJ70/\nMR60MvqspAQoGTChxDE7HvJaqG8hj4rcmLE59e49ORTr4fH3mtchINZJe84F\nBgaGFAEpOaYgFCw3BKXJVhVK1NAZ+uXiF1IOYa4y52y73fwiM++VnJytvpWt\nzadB2pwl3fghOzJUPq1eu6pxfyaVm4IaLM+OlIubGM5yGwqt1gI+YlfvT4ri\nV44E2LERKlXYcmUvjWuNImXhueEl0p5CJO96/s0lvc6NJ3m2lKI37CzrIqO8\nQ3Kt1Y1JJiJIqLwCKCPab9OtIaHq3Q0IvJ145QhHsfFtHQiAPTXZa7GKeiPz\n/cm3vpZ4YPFxJUWJ7PWOLRe+w3KK/Jd1zUhWKoOLiDyKqexRxARTjw22sLcZ\niNuttzacMGWEp5YWIcHTKn8E23wynLXarkWBE/SIaZSRKfIYw9d8zd+agLXk\nlEg7\r\n=yJsz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/shape":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/elevation":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b4cfdc40b.0_1573747132839_0.8775381731289877","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/card","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d67f49da0ac680bc7f39a3115bd6ae90473d329a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.525989b5d.0.tgz","fileCount":11,"integrity":"sha512-5HrJV2jjC+F9LpiSxVixdX1UVQERQKrUjAAIu1ZYaw5ubOaw3//rSObMuLN5lXyFjJVE/t3DisDlFHoqJtN9aw==","signatures":[{"sig":"MEUCIG0CRG5w+8LxGnHZbQLWrt5nrAQ+VEYPagTfSkJhfO+gAiEAouNJnSDTa4Yqv+16djUcreXQDFUiq4d1OJGjDUeaQyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeO1CRA9TVsSAnZWagAAseoP/idj7kMAtkLH81i1ydhg\n8o4CfAMDcT9CHovJQUKIygHjpgxegZGEzd+I+dlJ3P+zAZjrR0w+VtqN7+Uj\noRpnIrMpZ0tad8pZshznuZ2aARE3fnvtieyXfO1nlyf+mxOjDHtnq22azESx\nEOmr8T7NlvtBQ9zctP0j0gbp6C1GYobEW7ly7i/FXGXtNVTcbWxT9o1iJkED\nB2FYnT4fvyc6MWwV6qGuqSmUV2aXvK95e85FIzk9/rjUBlK6N+w3q4NswcNb\nnm0C8deUJ7H++WwW76fALYs66snSyjIEFIrT1m0b1dY77sw1QzYCRgUoJwMu\nTKPNxFPLvwNppSj8yvh1AvaqIn/vyY6MjBtKLeodh8I6J/3LgWJO+wdHUUuo\nnb4j+DLd+Ih6mJlRJlTOLvGAGGYcvVN4UCKrRtGqI66qPMxXKvCseDdYXFzH\na/cJEVApkoj3GKtU1RwzymQdaR3G7B2ysT38twLmpdcyWbc+fRVEEvSQvotv\nQk5a7j9dlB6d8yR12le/SowQVQgdO1ga0q0US51sLID1WwffkfJuc/9DJ7B6\n3Gh7qnH4/J2f/HU0VrMrP0uvbcpL056xcxP0qEvKCA9iKlTrzY0TGxuHzYvG\n4m7vMJ4CbcF522G/IahoiIuouvX+hiSFI8giLpLo49NlDS4bZg2Bj0i2CMjb\nUSKT\r\n=gYzA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.525989b5d.0","@material/shape":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/elevation":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.525989b5d.0_1573774261473_0.8663380218447994","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/card","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"705257fd644177df366eb4521fa20e3aca851afd","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7084b403a.0.tgz","fileCount":11,"integrity":"sha512-iXm2R+XwdUD7HhvMiOqc+eddzCiK+Fpyyk+2x6Ur2mCPsJ4XkWyMWppG8mAyHL9BbJQrjKv3E5XxM8sBxhS74A==","signatures":[{"sig":"MEUCIH9L4YwkIjX989wQUVgSfUPlG5bBol7kKNAMulAX/sbcAiEApxxfh/N/7i1wsXmt/mpRkQpTSwI7hgaXSQJVz8fDif8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfn/CRA9TVsSAnZWagAAel4QAIa03/kivzAYQaDD/y1I\nqvJGdhk8P6KIML0rhRd4YUzgQubuS3NywSUP+VIkNkvgLdiiyYfo2K5uFzAO\n/6kUicsmA1aTt5J8cTS2ahB7bswHOk+irKaNaATnkikXOxXZbc5NnLEfvnuk\naFvAdldizbywdDLP2Dl4u4wXa6mF9OL123LSzspOdVdjDLF5dqk9mM1eZqd0\n3Fwm/ozJgUZgONuErG106ILWr7ZhoBdYO9+4chbsNuCzGPM4I0X3q7wOF3oD\nevnDDj/8atP0HDKCyHcrVCcuMOP43QG/hstLeHSzfYdgeeOfMV2IXTdyYj2o\n1a9kh3gMXq0zL5sJh7mOP9njN+KXTRnPd9YcPEdPv/ilJsZ69kfn/c3d4syN\nI4G49FXtwDTpaAnaPlB5o5wo5a8p3y9K9FGXHEhyWqIQUJzcUUBbTe/r77py\neGuCgCa2LmiPNHEMI5YqvsMie00EZQRTLOINP/wXc69qud1MH0LzWo2uuGEk\nQLzYPP3VYJ+sB0J3EKEOW+KVct/nlkcnC1hAH7WbNXknI7wM+U7kiZ5/0OWH\nrsadt7+YF0EEXKV73KfF3Sb3K79P9dDG4c5pTdX9rfPw9o5J/xXKjVjQagRI\nfjG3905x6E+ICxskXaJYyIGIRfBoqfiFNBd3K0iealG6qwJPuISbztYgboXb\nWixt\r\n=VGzo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.7084b403a.0","@material/shape":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/elevation":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7084b403a.0_1573779966558_0.9613780119266873","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/card","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"151371e78e30101307588d7dcdd48c8a3c5767f7","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.3cbee6dac.0.tgz","fileCount":11,"integrity":"sha512-NvZCI+IgA7Vxufbm+fwYgJzmQx7bIiC7/V5qbDYktxtgR8JubqLfsQ7PJFtCvLwcypPcnX4cB3Hd0DsMcC/u2w==","signatures":[{"sig":"MEUCIQDhc6fqmQCr8udUlVwz681sNammYSdfdlhAEAA4rMEs8gIgIA6SI2vWzHYXb8qWULOPdLW11OJbEGRpwRz5zTpxgKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeeCRA9TVsSAnZWagAAh2IP/RDiKqmhTLyn6dwYs9Gs\nHqXbKPrpzlCpGPbcXuwLX7xnEKd3b0hR9WBet5gpdh4/A929DyOeLWoWHsjy\n2/Xz5IDl1hYBJD1xkc5cd6yxG8NT8x5xwlXEpTT+yIA51Lb0ZsuZcvVNKhdN\nARBhd13Lzq+ZIkZZYRCsjBWB+vYk0N+OEkgmwoaO4nSdn8G5ovVpuI4HnNgA\noV6JEPxO6VkY0BSBGQpNoA0O6OC09bl2SvpA/+ijhZZj1WVRWjn6Fl+QDYCG\nEi+8zM7+Tc8hv0+WxljbBdnrEwkzrwoiF3sBqDoBCf7WNf6s4cM1bGCsixxl\neJhSZR+jeJbqaccTYbXVX0xuhecFGRoi7TvQR5zGtnGvWM0+fcGScdIx+seR\n3Ab71ib0wKKd6qE8KKmquY2g4CaxlG26Yt9s58D0+Jxow+5uF0YQAa3KMXhI\nNPJOGcXgQHClKrUH4ZqyLzu5TgwXyx+NJ91SZssLguxKK8nSURgqcrq4ytIX\nyrVk6SGae/WlDnwfjaGuG9G9ustSG9F91byF+oGegSXTRv7wfgvTSYR30Lrb\niRW6YbQjZA5dDpsEuyH/4nHbTyC0VcGF8HMJYqFk4q+B8oN+pZg9VM+F/1Nl\no9M/6UDitpFY1g1OEsuVugm3dKvdZSSyfom34Ynk0AeTOq31jjURasGMf4sZ\nHbiE\r\n=JCej\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/shape":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/elevation":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.3cbee6dac.0_1573857182224_0.9669973472145166","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/card","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9511d3f6f3fb9d90d0bdcfcbee9d2177de3d36ef","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.591a6ad44.0.tgz","fileCount":11,"integrity":"sha512-urf1vB4n8zEm2lRMSPWIrpDaEvE4VLkToJ5xCR1rodbXqXkZNmqMbc3HV+IOYfoYVc9uszwD07ITN6rtVu54cw==","signatures":[{"sig":"MEUCIQCK8EzvumdA8B0we3RSTny47JHEcb7joUljCRYh04y+/QIgT1gVF2Mrpxil+0UrCcBGTerIq/lIAt80gP4tTaNUgdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3eCRA9TVsSAnZWagAA5jwQAIHEzCUobm6qE5q9hO+3\nNgcXP6e3GyA2iuyAI7rH9EWyy0oWtHO8u3IH72GPxv+uoOCRxjwDoJZg2/96\nq8zMqYv1jefuiTxizRNRzWV+pbMiHqD9gdMN5TTvu5ipOTEemhzFze4hH9Ft\ngjY7KEa8ojtPSrH6N8yTRVsOPCc5XX2eecLka25hzLfaeb9sVUKOljYidzIh\n6jxdogBuYgXFxPrByMm6xALG+E2/JdiRPCrqaRqakEbzUNHAvBDb8a+Qw24T\nOCZlOaKKn9sp5OjrW/oj975jw4BykhhqXUILtycBTL2T5TKbx2eUg86jBMzB\nBtY6AyRiXmHgamwMsT7qXWykw0bJ0vaiADsWBxRx7UJhj7Pr9Sy+1q027N3u\nXfZrKJBg8OhFJvfRwY9tSuSzl30l3digkZJ8J/BGv1iHhqVhKtmSuEHbpjcp\nkioIUktV9NYuT6cHw8sTorlv0j9i2GfqyiJhlzkB3+8gGYRpJR5cwbEwueyR\nO6sG4umFUs8L8rTtA9zIwXjOVg8iyZ69p1VwVeuKwQk/xvGDPoTd2WHyEw4s\nkR0k8ALl4sjrJAdgr8aY6L/XWUroZiAqNkBrE0FDMZR/96xZzQuZn/Ig9Nv9\nfStO4hsZeEytlMS5nnvdoTZ3N88odEliy5pyROcZr3W0uDGKHUVsC15n/MAF\nD5P7\r\n=/oXv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.591a6ad44.0","@material/shape":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/elevation":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.591a6ad44.0_1574120925680_0.8206524679099536","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/card","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"997ce88c5f39e55450e85941c2c0bb0ee2894808","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5729943ba.0.tgz","fileCount":11,"integrity":"sha512-P2lnr7c2jKQx3rw+qB/gCvXHh7tmx00urpMbwV54AW7gEA81Ntzp8i/69ADBl78c2tvcMYbi2A0wqBQULPEPcQ==","signatures":[{"sig":"MEUCIQC6uYTg4Sdq1m3Ix6c0wr7q19ebTN2lSovsMW2fb9kPFAIgBd/l5JO7ih826oM4vhMeMzrUqtst9YrFWJnTimdt3Nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzpCRA9TVsSAnZWagAAfUIP+gMC7pQpR2Enrw+KHphD\nJGDGUWM5XfyqMvbvZ/cRHuXksAAcC644t67G77hsgk/Fs2BXu6iIYwNUYHVg\nBJ9KdPYVzB6qvPpoMf3BwFQ/JFJ7ZsPW26YGekR4HRo643R5zEZ+5p+gvNdo\nhI4vrIkSLSynfUnSyVqbXpgPpoBrpCW1hbiAVcbJSrFaQldKYN/70X9QoT87\nR3dbdwwzZcQkcFmj+jAJCIrra2pu1wLe7h3VEpxHY93KkTCK6pl6+RJsM1Z3\n/wFSHmfWPCa65KFZo/TPgHFeAbIHEkXELgJe6iwbWjR405zJi4Kh0OfeFLBB\nhWLcGzAGXvZgvPx68B5ugAMneF0aogsXml0h/UuEf9qQc5PVJOiHSf6d6M+w\n4Gv9i9i5y/0eGMuCJu5aTws7vYjoAdNDNaQsxaIKkEC+ja4DSc2lCSY+KntQ\nqTLoGg/1eApUShLLmnIBi5hxZ9PUwvzRXEGlY62G5PZjSKSqTY2KmEBmkL97\nWcezU2rmjSAiatRQpRBTsG2QTMY1+JpGeml5e7DnPvdzjsL8c+IoVXpPFEss\nhbqOSuZROTjsXdxb8DhlXwS9ZwM7tfj96G5kQEMS5NO3jXh8jIa/tD9dCdiW\nJinHn36zltC7nwKWCO+YG6VEOg18X/jeZCqaLJ1Doz/Y+D09qVlEJ3zB0rVg\n781i\r\n=iZSr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.5729943ba.0","@material/shape":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/elevation":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5729943ba.0_1574227177052_0.9246984390445145","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/card","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52607a28c0b05156a79981110ad838798ff8b971","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.e89750dc7.0.tgz","fileCount":11,"integrity":"sha512-Qe1TlaNm0zyjS6rIumY4FIJ8Elr6p0r8u7gfIxHErlJVmuCKuQSolq8q866BTFl4I//lOIviXKOqqPcTVf0ClQ==","signatures":[{"sig":"MEUCICdx0DsdfXNg8YQeXPJR1+tWfbFpKWmwFqWHhjukHz/zAiEAmzw1fNN0/bIVQPPjwe2qXbt2SsykqkmqQlbFoVFwXFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dr4CRA9TVsSAnZWagAAxYcQAJGQ6t+YloXSIrE6MSR9\nha6Dq6y5dWqbuw+a8lUj4Awkjjm5MyRvao+GN0Plp4MWhukbtJIEk8r2LAIC\nlNqFgdSRIPznAz6517ZCROilVblUoSNkj+80ChJQPThOvxMJn4gOmgCtX58s\nLt/SnCrpOQLa6zc05/hWfMGdgvoPNuV9qi0Nrt3AfrzyPEoBGM47Rwl3ZjWx\nMro3rWWJpLrCSRrKFxxLCvEcKOiQJ+nlOXf74KAvb+U6dz+HFTLdWmyoFRBA\nv/rVkD6C56gWMOhRFw1Kgrlic6Odg3iR0NiBdYccYYG274Q9bXfWC2UKx9+6\nfvWDg13NBJQoxcYTFdLDa3optSDFva2aGEbAKW+7THBpS1GzFOiZVksti2Bm\nLB7mx3GclVvqpfPJnQWIRazTZFNKERZ1PkWW3L8SM5Xg/gPTnWUdkcqh3IoP\nb7r1Y19GMPEpUTdjRyJMGMxBlxf7k94dpaI6VtqvwpQd7X4OkAEmqJ5GHFAP\ne8u33bm5tWAaE2gcPvPy6yp91nwCGoLDVFutgbmXcwSvq9k5B3hCGwpU1EUW\nFBs2xOTc5ueMhcJsPrswY4jRXH3hQ44POorDmxDR2FemRFjxDrHRkpAu0/5y\n/Xr+K3Rai6jVEQPZ4VXj57tB7F6j7/xd9Ud5py/qmXnnXmJ7pcWiAHY46qHi\n/Ze2\r\n=XR+v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.e89750dc7.0","@material/shape":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/elevation":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.e89750dc7.0_1574820599662_0.586088367335148","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/card","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8094139f87c309e954649b9b137c0558160e90d","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.3e560b33a.0.tgz","fileCount":11,"integrity":"sha512-5J1/Czcyjnjc2QoQxF6nq/MdfDX+2ml+B388xELu+FAZ+FXY70wwvBrL4c4XCtlPpPm6eQASjzFTpFdgaUEBuA==","signatures":[{"sig":"MEUCIC/UtO6pp6QZp+5u9Pj1eP+cvO62f5a3TPVz2firZz0LAiEA6BoNepFnMEOffkCi0zOarzWcXibkhSvi1PB+Ki45oNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsnCRA9TVsSAnZWagAATd4P/jPgSg72oc7w7zOUQ+w6\nfZTLweFAP+z6n6Qc/Y+6ENu2VvWw58Ncv9t7JF+zL4W5dlGrabjZyWX3vNim\nAe7KyeqhS38U4DaQC2ApOua3aH/TCwpRwHgXdnij8T0CRvXkZHVIo75f1Z2i\nHUYi11nKyqbQUZ7wXj1gMS80KjijEkMnNi4ZAsSokopEK/s89k+QE3w27b8A\nr6/XiTZgWKXSFkEuZUrQFN4fYRayH9CQfkQUJ6kZBamawA9IvdEtCkfIqDr+\neu4zuSQJZjndHfWGvnz1jnJ8X04bJvi0mgfbanQ4a1UaF0cOGvSX2wpA8eVL\nBKpN6ndueKxAInXbUXeTdliHhjJv+Fwsq5p06SB7tJ1C3kA97duvWCtjmc40\nTYdGwM9GXRyVo+FjHmnHG/G1ZHQxns7Pi3dfLrddwy6oCnkIlObtKlQ0NFBM\nMWvvqDvKqlm7XD6t1zvee8LOEfjmxuuuzfVttT9SLG3zVMDEhnqhD+zspyv9\nN4/tjmfMpJohNAHbckRI9OX2jof8cIU6R/TwyTLxKJAKXbXam8yYF5CC2P+s\n9xkj6ZlGFPHj1UpgW8J+hg4OLzOt8xUddplhyS4kNs1nWCZ6uQ0rzemAszL0\nyL9RHJdJljIL1dml/Ea6QFLTER73OJOBZ+lX4NzCI5ku34NozadIkiD6GGtT\nsAPz\r\n=o7Zb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.3e560b33a.0","@material/shape":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/elevation":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.3e560b33a.0_1574820646801_0.9850185658989616","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/card","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bccbb1eea27572721b5731ddb709d8297539bf0","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":11,"integrity":"sha512-7wOff8PaKEi/LT8ZpHUQrVfjs39MbbZuFfAt7xNwwunKDg+cepJmFcmAk+R6pEqLtxcOzFlYj8thQ6HDH2DOIA==","signatures":[{"sig":"MEQCIDawOJZ5dYTK59FajG9yk3UO8nXE1HDs20w3t0CtwHB6AiBSmrsWbe6qFFwPRP0OPDlzaWwfzjX1p0bZed1Awfuyjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ds+CRA9TVsSAnZWagAA0vsP/13ORQXY5B7UDbBXShN/\nX2b8pvL7Z0daYtZ33P+1gJmA2KBWTdB/ww75oJMXQ39B1+io4ogRuCQUkNvy\nliF4CnjLqCcIaskAuQnJ41T8W4lJCajbYj0xbSOCeSielromvWS71dZKtwJC\num7D0BemSQH8jLKZ+3q7kQtFcsJVnd/yZZHAWjgjgFhpc5hpXDRdyG1izA1a\nRlbcmPnM8I8X7VUl7uHSoInZ8M2pGfSpUu5wu5EWxY2ZEeQjrqPeOgemHu4y\nJn8erb2/gKLoOUNiiQeiamRGStARG7+qwKg9o9XVC6kLm6oU/Mc6pnit0r5I\nmShja/9Lse4wcKcIP/53o9LfIuQSbMu96M3vX0xQF61ZkYqaY50fzHSdIOkZ\ngjxPnhXokcDAIk6HVZcNqJBZAxGevU/qnjMZgvQJOPB19GQ/RJwfaMEqt4NI\nlLk8llb0vsWkBr0cUhc0plx6umqN7uUqmZeOXxtWL66+5kf5Yi1RtpMTTazD\n4Khmb/VmRPB2BwUyW4uOHNtrosVlRiVnqsm0uEJzMmeODV4065PxoFrn/4dx\ndbLVHlN6XAIzz8l3J/X8CTgiA61Kv6+eevYjFhUrJlLotKu/klUn+vtplqhB\nXEYwV38f9XY8YeGX2co5UGQms4gbUWbzGNrXH8LfKWq3zi4uutGt06S5rZxD\nIrTm\r\n=63IL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/shape":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7fd17ce5e.0_1574820669608_0.9508079827841851","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/card","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42b65656dbd9af398bfe3630d4aa280d68467b2a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ec729683b.0.tgz","fileCount":11,"integrity":"sha512-T5NNKA/rB8OSoHINi0Ys9OYAdOuFBL6LcOOH/db3nzqsy1YG3aHF/CxfybORN2LNTWPLIaxOgJ9GZcpEA7SYew==","signatures":[{"sig":"MEUCIQD5PzAs7dSDFFfWi2Nvi+dnM8HKs/w3VJBMpNst0dbehgIgSHKTqLwMQ6KALgRbzetU7E0CmOUZ7aPKG34MdrLQp5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxnCRA9TVsSAnZWagAAXOcP/iQB0YxQxF6ChPldpCWD\nLEZ5KOg73ZCMclo0E30EcVA6/WJERNAkO4tYiwIHOrShZP91ImAYqs/cofOk\nLhrLwP7UiSMLmJdQcUra8krq1X8vU1qHKO+z4wxnaaqFWjfcUDktzuf388/8\n4H6dVXF5PdddYF7TDQ0AQRl92EduFvIKZl97n9zkN95azCuA/biabegbBqPA\nh9iv3qtIlnd1ub1TYDga3InR2VR+nVzmw2qxWMqWK28hyXNslFYSkbO7lpNf\nIVgtW4ReXem+J/+TV2flpDKnAz8rPB0YIJm9aQ3S6JGUeZe3jWiWxKuP+Etb\ni4PYdfybEQHZ9zDTRnleC9GwTsjMk6HXIEMTHxdAuBmXrMYemiFViP3khAYJ\noR4wdwnEZ/I3hjlkFaROWas9ZM8lOdfRbBn67Ga14lWE/UAHolQlcB5WhXWD\nmpIIkrl65BeRhwmIYW813+UtJ3PBM41wDTi/vYdAxIsUGO5cvjrSCM43NtmG\nC7pI+tGIFHfwPMi18V9Q2NiondCJbkxRPAzhVd5RqrqeQ2J1tPkSE7y9+Y13\nfv3xqo5N7+KNTwmOSo2Re1fzNsM1Qld9FO7wVzmaKZVUE8jR59RMw52ZHdhn\nUMCm7v3nSYel5u+OfefLIg9Q2nSF3j2QkjdjsIWQvYDaB2jMQENxZItSyB5A\nqKsb\r\n=LcXj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.ec729683b.0","@material/shape":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ec729683b.0_1574870118631_0.1616981073731092","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/card","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eff52faaca2d87c10a94ea74f6fc8c80406ea49e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":11,"integrity":"sha512-f9wtEluetWp+GML+0QKiFA7QI2tgyG1dlPQbLnx2NTN2XVLQ4Zgb6Ez2EeyWMuAKUKJraWGKq/+v2cQex6in4Q==","signatures":[{"sig":"MEUCIQDSY9CskGuhUlV+cPXK3EQwAbZjVB1OyvCAn0paXv8qrAIgU1zM+zEb297dLrIkGM7uqwyhUQa3oSntByw2VG169wc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suqCRA9TVsSAnZWagAAz38P/RwvRbYAZ2Tm7YK5sKfW\noPozFiDmhK56B8oN2wYXJT3mHjrwIpOL0YGBCLCJlGGB3DyMRYzOqKmGa4vn\n2vvO290AtZnYGU2gJwFa7DueB5s5eIecrjILW0XUHl2dSBgqh+osnFfQ7XkY\nh68dV3vLAiXdFYfNjYhr+FHGH0sjJ9mnoEeh0LZvCfybOV6sTUMYePquKWVt\nUNK2E44lyyxgMt8hYpEyWoSJ8NPJw6pHJkg8fpcspe+3GpNnBC5ejRjsz4Bc\nz31ZUwcfXaQI9yrV54SdTsJIy2ugzGv/UnxKZM7bGQjwmBGV0CfifZZ/C+cL\nwY/sv3k86tH69eYxejIS2CBexX7FYryLNZq6OksLuvkBm0ZLb9xK7nNcRe9e\nZaUrJWk4l6Er/P8PjrRfC/8sjWk1edSWIRrc57MtCAZha9VCGqpxJzT6D8RV\n0dNjqvZ0WaW2Cjc62/8ghvm678tsio5KSvVK6KcaBe9Jg8I4VIQ3UhoaaRns\nnCRYArAXaQ93K3jHMFOiX8MCa3YA53WiH9fTeyD5XbxjhmOyFPUL9EhojZXn\nqz/9Xz06Dd0Ur96gjbUKv8KtebOAiJgefbvCsVBcW13zkpoKhG96hDWd2q8c\nKRmwFUFVfdAAofQ5Eup+QWNC96omwhzGcFvU4iRzz/3rk+Skr9Hfvj0Jhdbk\nZ7Js\r\n=oslA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/shape":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b8bc4a26e.0_1574882218031_0.48635765288125365","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/card","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45eb5dfb3815bf6effcea5d39cd666409fb385f3","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.f978109c3.0.tgz","fileCount":11,"integrity":"sha512-Ni6YkTow2KXx/eOoQvuZBQEq4Iq2RGbmeSPHrMPa6Pqb9u3ysD70ItYLNEj3zS/zOab3xIvsOBztdGsg3fFf2A==","signatures":[{"sig":"MEYCIQCdLAopBpaK4k6bdfpNmMJ5vMTJqk0VYtBL7XEVdskrsgIhAL6f1TvPIn2jYYRwIxA5XDYteiHHqpduZ+AevWI8eTzV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTdCRA9TVsSAnZWagAAJeUP/Ah1dPjXPMMC6smdJrrG\nOLZsom1QU0uioev12MqwtqZNRA8dNV8ksWbradseNut4qDub246oMHh4Sz6p\nwSeFy89gWnnzaPvaYzIBgREGzED3RnZ/SxCrekvTc9cOxsmA1le9lpDKufQ9\nuc49wOSLnglBef2KnhflS5Gat56UWnZlkAlu6Us2j59opJwd2N/flWSbrUPI\noWboc3tTXw8M4kdsrmXt1ilArgS7LLCRQLYiYZB8KRoFskI0H+IAgKiWHZE3\nhfB064HZ7sBVDQ7xSU5uGj/FQFxamfSPbIMpM4s2gy9fgkXG9ixBEsXjS0h/\nKsfOht6HbKRzVsYXiG2fioc5f3oiksxZo/wL9gj+4X7DB/wBJ5LXF4jgaNQH\n4j0ma6kGl2JAll4ATkW57LJH9Qxvxcpg6lEL5uAAn6Wvk92akt1mkNTFdlWZ\nY5TbPsQf4AmvZSsNB5fYlYW2RTsHxVr15VWrvLoh9pXUOXWmAsfrcZMD+LFP\n3jpIfMVOi1LjQyKqcDzIPMfNM0pjMSzoJexE3kXKLFm4S88QZozKcuj516Xj\nsIuQ69bisbvx0BQrZ1s9NcAYCXczuNTRHcVejqujjJTmqVawza9smNJc5JUF\nrHUcJc+mPagWL8E0v8OW4ICg+1VaxONL0/jqHeztHQRfn4teaM0txg6r161x\n+flB\r\n=jiFJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.f978109c3.0","@material/shape":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.f978109c3.0_1575306461358_0.30820164014366","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/card","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7da8e37f66b791946cc13acb28c867727046f82e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ad9dfe706.0.tgz","fileCount":11,"integrity":"sha512-hT1C+UUt3MvZ/OpJHUYkMuKtmT9CsZWJy6b4bOMm8wE4//vq50RV73AdxPWCtkCDnzAvEZRIjPuIL/dWM7yxpw==","signatures":[{"sig":"MEQCIGtJMsSKigjviwwN2d+8VJOSBz4BEORytd59Nk5t20khAiA7Xo+39sYgtfoD8QwMuWbVAWxfQxRWWuMqcvypBmzkMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u04CRA9TVsSAnZWagAAaBoQAKPNNiMG30ORFhAAvW0e\nrGFkznAXWPWBKd6BVQ5yIYsGGIqKrE5l5Y5nIn1F96a9UAwFYDIOT2lNCDpE\nl83LC3Gm/EJ9IqZmdccgVs+we1sbeIqWkTKoV+p+BrnAz9EAl+rVRKcS9yBy\nT+1Ojhf/oXoTUiL7Xe59f6ARj+gVNKYdx3uxCuFl8NLmxaR4Pu7ofdUfqfGe\nIPkOx9pYBpuBLe7NLUi2dEujk/0g6Y+KxR/kdl2Djps/PbJ9TIyBRSJ2Li+n\npfrgUKSjjRj/MVyQV5tQ+p9cpIk687f2rzJXPjAr40S20zj7V5XDxAWOUOQa\n8eWsJ+QuBumMlc0RA3Gvif8aWWEIvVinEfs3a19lSVH6fV6ggbzq3zoOLqU1\nhUAXcLjg0s4xvwyYhFIaEkUdscJ7suMF8GxYbAgUiIpsKZq587AwkR1QJ7MP\nuS2J9NOgfCtCSo6XZ4X7oQfl0W77Bub4xavFd1KjRKrqFt4RmyEYn5oQkxXC\nHaO0Jrg+enJaNJhXJ9Dg7+smAijKoa3CMgwrVGno7TqS/onsWvHbmaECoaK9\n97M91Fd/faI9cBwdiPiQcj+voXpGczTqr8gtEreNQ/2Zd3T4Oi/LU7y65TVK\n+BbtfiFmO0D1U2uCZeffKPScpirImQ0POAAs65mQuhAIvmQxBZZ+/iOeKups\nzajj\r\n=aQRp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/shape":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ad9dfe706.0_1575415096478_0.31803825542677","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/card","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f918681dd92e0713809cc63a842351c262ad6c1","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5e45d77f3.0.tgz","fileCount":11,"integrity":"sha512-XiCKSYx3/URNaoj/jH9DejUaR2/yWvwbqrVCMMMMRdT8uU4m6UvQCITo+4ZmsfDb7KIudpYI1Mdi1v5aMRuisw==","signatures":[{"sig":"MEYCIQCzmF8dHcjs/jgbwk7hMjl4u1wGq8yiUfQXmp04ltxHMwIhAJr0u685lviyPbIfZaAR0/hHptWl10OAbNTLPn4UgdMp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2jCRA9TVsSAnZWagAAlHkP/A2GDk+zo4LOrVszdBy+\nWOQzn4w7dPwAsj5x+v7IbnTEErG47AH8s5kCjL+SzLkM7xeo4/x+w1xnY3g+\nKinL7WwH8V3Pb5Lpep0IpGZQW9xSTqoUIrz5I594WQYlCz3Fvl3yRglYgGfr\nXBhm0wkkaerNTWv05qUm03jDFF0BtcaYtBBN83CX5tg8mGDeDPK9GRf/xVkZ\nAKVFjuU21RnGP7O7umYYcm8WJlErdr7Pp6SmoQt81Txla+zmzQSDLrDF4/cE\nhrHpSMpnX/pDrG2xGC8+wNoXLiNOMcZc06cvaWcCzMdjlUhvPt5UlFduUDVg\nZ+5PGCPEL5FQl5fEpd9lLdzC3NahK+/potPYCxNtUw6364kiJ67gPXeLQfKu\ns8cqUGFdL1HUSXy0l6E2RGeoZVcd/aKANqGwHJ6CZyt4sUeOkdkJQoKCcev6\nIrbykQEUhCSDIHarEESBCYx240Op9ExnCbN37iCvAGKURsmnJzTgTDPeSqfp\nAT7fcbR3H00J4KyhbdldYgWGX/yYbcNWDPeaMWZervYOlBzFkbiK9qPw+DTw\npPcr5ksz60sANnvSZBR2i+DzRKTMIDt8iAfvtGORMQT557DzTgKq270MmtNp\nTOFWSeLu2wcwtyTuQW464+kUfLDgv3lbnSRTGCXle9V7SDjrLClng33McO0v\nsFmG\r\n=FdKd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/shape":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5e45d77f3.0_1575415201051_0.33060365227205746","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/card","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"717ba188c1942a9d21406de8ae4e7343f17c0bb1","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":11,"integrity":"sha512-kKdgKC/a74AaTq14WZBD4GCGfPn0o3wYZaWfonUvU/H9XBXNZqjWCnr/aDDIt5XX/nEJWrna2I5j+NZJ9zT8vQ==","signatures":[{"sig":"MEUCIBUZi3wriEllldhI03aMu+DTxeKA8b+obGPIE+MOZHCTAiEA10khXYB48YvysyUoFbL0H75RVs6PZMc0bdOcWemtPK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3FCRA9TVsSAnZWagAA5PQQAIc1c8w3xxaJVskfVyfs\n5H2RntK1NnLjLB2JYe7QziWGK0RigHtAOBb1oxS1UuPMW57oWRf8zO4L4yGY\nf4OdXNEZlgN+lEYk5iYXD5cR1DgWnc/b3Z55n++gxE0GzD0Fa/3XnxduPTLf\nTYUxg1A0wMCaKz8go13uXEo5jGRpH//JhMVRmM3PRDT1758xABku0rcYwPwt\nKDg97fa26+ikTpER+iGgLFQBSsc9ZeC432mu7YcJz+pRgXXAoAPey+IKDCPv\nijOa1T7I5pekCo3iqZJzLnAx40Wtry1jXgUXoGAO1voyTPLO1XcBbY5rb9lu\nH2WksBUTchj+tABFl+GyM9d+BmnuCqxTgzDMDLc9afnbTngdZNMHSk4rpNuk\nX3jjbsYgfQSTfL6Q/+EZ/gCX8jqUIEJve956gkPNOLnNSJd4W2hIrT467eCV\nV3L9XhzV0re8aR9MPFgiWrRGFEftDQNLuTM6KFLmDo7cKP2sGJ5568Neo/9k\n8uQ1+jcTHoj5tMc+a06Z47St37xnKxtxo0TWIHd1w3XIfIgsBnc0RT0Sjw8m\nQgaFznR6rvXIgKZI5nhTeDcC9adbJVWEDYYestWGaaWG+/+jXzrHAP8tPPfS\nU58hCGmaIdQDcn8W5cPfLOGpCR5tJxYKMBKBxDk4qdoMYYwuYjsSNr7kjNK3\nmJRK\r\n=GWAQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/shape":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d10e8cdf3.0_1575415237369_0.3745742822370248","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/card","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ed986e7b3983991cfaad546cf45c10719552034","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":11,"integrity":"sha512-OxgRbOogb2Sg5vhWQAEEjtZaRIu6Ma79rjRgE6P+9Ok/01eldelMSBaT06fRidTpOD3UTvD5LRiPVC0Z/Bmejw==","signatures":[{"sig":"MEUCIQCmykf2URcYOa3wg4fcEQcmvyBDo+8VW9HIQxvV9fzOAgIgPH34W8B9aitf7G93CWdMOJCZ6/yj7Fbz8qNeVyYtSiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":147725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXjCRA9TVsSAnZWagAAEfYQAKRJ9pTvrwwkzOH1tB2r\n8p2fZwtwjC5u0G/baMiz7YZ6440yiZm9QmKYv8iFwfbAUybpb69yy3+oyFi9\nL/fwBGqB4sTWIt/frR1WgxRMceUbwbZQWntdVixWbr09nXCyA9+ITrGn1iLA\nCFHVppGFSGj+cWtU9CKS+GLPG22X4sfWAZEzA5hFCIHwh4+gzuG7xwh5Oz4Q\nngOVCaNhyz1HD3hagpXypqpw/nU1M9K8TkTsGwjStxPcXf1ojYh63gefQuuT\n2X9nq0ge31X31qn1yoCVYFYet95RIbkn88iEq1Lb/8jRHDYUxqoLVitykMf9\n9NwisosqhYsgHzyiyeq5alkS1I0XYCDU/XKU65nvonhBEjPgD828l60c6DbD\nNpiU7mkYE4bazGhPWIp9giG8zH8srYbnTjaMRV8ogtmLZXSJDtrAh8YXB2Q4\nNnKbtWpFjfxN3W/ciOObd31ImFwpa8nZrnYOjDGlJCfbNRQmSWieeSdUwEOr\n/Znj7sfhAiSCi2wFuvAFuq0H6atciEKck5h5sRR1xGRyxPn0amgreaVc6aqS\nAudy8n14Rsu/cQCvPQW+z8srB8VimA/Q8GuohYbSuwI3KxijNL/ZOniXIZPQ\nYALcR5II22HDA8VCGklP5iFb7avzRKXXISXcPha5z9HC8TsCxiRnMLEXkeKb\nD9Ki\r\n=Ib/v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/shape":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a5dbd8a2a.0_1575417315569_0.4216225266877103","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/card","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1032cb593fa344b4a3b1c9c8b3c2dd09b5411d3","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ba879b68b.0.tgz","fileCount":11,"integrity":"sha512-dFYJez1fby64cYuBZ8jXzr/ZkJZc7m9e0f0ifBis16KLTbDgjk7V6paI7IoNG51UEN8mCoRwdc3GR7C2qU8Z4A==","signatures":[{"sig":"MEUCIQCorgZAPVHBR1y+dydNr8CANOC3x+E0Xsa5WtMfPjAWwgIgQe14FLAzmfxoES3keu969KUuYvDDKKVfxth0ZTqJqTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWhCRA9TVsSAnZWagAAEA0P/jsYCDcd4Eg+94KbxNNn\njhiv/knsZ0KjYSBJTdKWn5ao6oFNMGqYFRWxsJC6saaxO3rgeaana1YFzDQQ\nKsh8ylbig9vOrH6ED0GYo/oG/n14ggwUxbpOoiE8HQYK14z23n4TeNcbB/4R\n+Pl23QsWK1A13X+ZgvIqx3R+HOnEXXwCrWEfhFeNTO8OMpzL7m0eA4yE3vmE\noKP+IRRObRs0cWneRxa3vK8KuJq+H6Zyk+6SwGGD0+qO/IbeugzCH22fNbsB\nrCM5IOuLXxVkqnHUuPZjGkCCKcaJ188RUXh/Q75QiU9BQm/QxtC0HCz3/RyU\npZfo3HdbzN2IkvdRCtXIvKbcJHlccOKtXAjopX48TjSFOSjh/uZsvDY6uqGG\n1+HNiJKkeR3ls9iE+HCrh86fx8S3x0oJAojCon6vmN9inA1aZxx5330fwuiK\nPV7MolvBDaTCqYPtyP4zuy1j/mGfxJbhahDZCEWvIw5hKcY4VGSpQfICn4ar\nVgTmi6sMIHue/emgYDWrDF7DCJwxOPHUc+qiBnMiW/AlhbBFL1Qu/F5oQbG8\n49t2iqejgqGLPEE+waaI6aXXELv//OH6OPCJGHKSIlbNYsNLpPnfjP77PPYx\nXPmq/azo9Wia+ITfORQLe500D2IqdpU3lK3ux7cEncaAUfIP+f0JeKo6XLjn\nc+dL\r\n=t7os\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.ba879b68b.0","@material/shape":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ba879b68b.0_1575490977032_0.02047489120941237","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/card","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc26f1ec376d8268ad69edebea0efdd8859baac6","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.aa0eba489.0.tgz","fileCount":11,"integrity":"sha512-FZGTxTqlWpduDTLaGOPoDkbuz8fJ3frB/R9cL7N7As+hOFFRpT7gJfyZyV0WqZU/HWkCGgFZog3caGre0erqTQ==","signatures":[{"sig":"MEYCIQCUVz3dwK79wbNwUlUFMHC/yEjhvlj9sMYuzPbWpc36PwIhAPdlMixxrjOtnD5BU5A+1BjI6IdbgAPZe7cxHKGUbQBG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bX4CRA9TVsSAnZWagAAuXQP/j0Xlbf9+2ffvcVQHcXj\nW2Hg3OKJhaGa1zeDAM5PPz21gWNxorHEwEt82L5HQEYgj8YHUGUWz/LuIOmD\nWD1BJRCl8seN5dx58PAvfJy+G1mAb4Bxgk9F4myqlfiTkumjyQZ3DxfEaEcN\n6//dhKQC2YJio2fBzB1itMGm7UmGr8AZ4ZujQO3OOaMDhazccHfl/YF+8iDf\nXiw/W6JixQ69Zr+0RK44WW+UuPuHP3iXvyWKoTDwpf7iwGHKV6UqdmEcYLrg\nJJZdUFxcsQK0YZkTEUh8EhZGQYULuQQV9PUPv9Y3oef1/9tp168Z1KJta8Zn\nbU55Sdl6eUzZnte6fKRckz6f9B4DJfV/UWwclWeu9RQtJVSNOeVEjmfJKi7w\nJOcTteb7eCSluN/s8KtAwgJSAeHng8ny3mPjU0IGUiwStPkzlGEAartEy2Vf\nI4wNfHbwubLFBdBk2+ZHRejfgB0ISgQtOSK6ihbofbnxBhmjfCU185VLrvTO\nClUBTj3ePCofATEdQJR3u6wSvl3MaM0PnIH5yTPtyYfxHP4z/DOeSpf+YPvn\npdrACDHKb3KuUCUvJlRRXGJ3Tkg/nBj0YhbsAeakNcql2N6P667pA9T4HGCX\nqXimGv1+1vDcAEMm5SuBcmexUOYq6kMGAaguNstrrzMV4dxPRk8vuOrRHYgg\nCOAB\r\n=5aZ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.aa0eba489.0","@material/shape":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.aa0eba489.0_1575597560013_0.230391131992425","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/card","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5461888a85c0cc45b89203ae404738cbdd08f4e9","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.cb7b71a86.0.tgz","fileCount":11,"integrity":"sha512-6dhgPwQWKuqAIJNekdCWqTpBF/HscEf9hjylHNHdwHLlhwnIU4megLYlpBbSodi0TyGRJ+yqy2SFZby+71ANjQ==","signatures":[{"sig":"MEUCIQCuyN8b04xfTyo4QnUZZfJVUKUt4WGEG8Cs/4Vubl4tfQIgI51w/f9qgyaqWoIJVNk11IIL8Z/cWJsdTxB4QwT0lQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqWCRA9TVsSAnZWagAA7XgP/0Ow7V++uSySuXtIX3Ek\nKSd6144cT1uSABvtwGGJGR6douzTvu0F19HFSGTLl9k+gMCu7fisCV6s7fGj\n8+jrpZNhUUa+bu6cAEIW1aUH7fCVbAzDdSD9FNMgf1M54ii9DBn1IUBx/B8O\nypVMKBzCXwjrk900khmSaxTbSPvuz3GLSDIsd32Nn+KwSTwB4rfS14TFyonL\nZJnJ3OPWDE33RMQ3JfMQSIZplGZ2BOmOp2+Sz5yBgcZ7r7swg4w83Fj08NWB\n0VXYABQ+FrLIXZrkjQhvAi5TC5fPQOjuVJrKT49ah5gGj4IYB5/EgsUvhLKu\n5Jd6sMPVezEzt37am0GqaAXMx/yw5tNYFEFm9513DfbkPjUyPuYdItUfKOqP\nsMIqhig1n7sLcTBXxw1Q6uty4Pv6qE2iEUEOixre2URq6C/GNbq1MZlgt19t\noSzu8qU7x/9hN/hVibHH0YKt3+GtqforQ2kSrx8quptffQGZqSCgg+FYyeP0\ngDEAiRuzFkAoScAbzUJfQ8nFTsbd1pa/ji1gmbnzoOs6KO7lVfemF6C0fx5Y\nzuouoyyYZlgRh59PaiNyhzxSlxlRkn3pX19aI6c7OYCYMbzjnQ2XXvwupX9N\nB9CcHIcd5YDXyglJnUJ09j6K/lLcEMtNSm3kb1nmAgN9QySdpZgbPfzRcXq1\nF7ev\r\n=Dxrc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/shape":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.cb7b71a86.0_1575676566313_0.7316553734270286","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/card","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4f996f1ea1195d38da639afff6f826b0e5b9966","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.50f110a6c.0.tgz","fileCount":11,"integrity":"sha512-yxpky4QMfj/yaGtRFhr3+f2DDKUanHl+q3iyY0MxhGTDLrtT46h5Ye4KCc3TULP7i9u6rLtTAS8LGhUjUgE/fw==","signatures":[{"sig":"MEUCIQC+hOg68IiwU1IXAjrjM8LQSngHAzH3RLe2RXo5zqdCFQIgZD9D8vwAF2PQxcqIoJ4INPnz7C3NO4cMHJCae8OXFbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788GCRA9TVsSAnZWagAACfEQAIQGcRAhp4zjOQyJFiBb\nr255qTKZY2b9vLq/Kuq9O5Mw+amjgpSkRY03U4a94S9eH8sNqWaFjh/6vobR\naScWxVKVbeC9hGSzl5dcYqeKh7DGmTTRXrdS+xBSdwxD1x/SpJpTvcAp3CLO\n/B96xs1Fcl/hFhy2WQxtYixLle+FNULzAdJ1eZFNUvzfyvOFjJSfSSuln3rv\nYQnqIed3kIbqNMZ7Fg0gPwudTm5qT1ejVPPmQtccl4jdd08jSKTbSai23k+/\n3rEDmcoKXtWzsNxJ7nhIepOO1B+hMaNasxl1Kiwcd7B9sROiQIwiPh3glYCW\nlqxPv+BcdJ7/7ktl/7ZFA7PQnX3Ir6PQYMQFVZEcvKq/Ye2hiuuYBvFT37im\nwAWZEwc3/mPv5FJJd+oakePybKZErFsFgBhFcE08piQ9U/pQF56spHWIKHz6\nScSbjA5x3e9m97hk4IwGKDLjQJo3rlAwzKq5rVnb6uA3B64bSBGr7mlMKoTa\nEsQQsENpNdy0zoc1vnedVohq3J+bDnraO/s6TduCGQlC9+Q0luo95zWLdIrM\nOnbpJ7raIU9I5EJTfnKVOado8fuVSdFMIxVoBGJqbzr0NToF23rjUDxS8CvN\n9dU22Z5ZaqyOP6NyUK7faC5daTBxeYGT2/7c2psu8DMnrnjG8EgG09kALuUY\nTgeC\r\n=1aoT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.50f110a6c.0","@material/shape":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.50f110a6c.0_1575997190575_0.5521027768246047","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/card","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34e21ed1463325094a10974a899bb5701a76f301","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.878a08b7c.0.tgz","fileCount":11,"integrity":"sha512-8S6B5aBfoaOoKAH7HPft35JTFh5Ltg+2HpeQHAqvFC9b12yDo587wpRiJKnRNxYIZlNGBVxczPRWrRgpaJpK3g==","signatures":[{"sig":"MEUCIQDBjVmU++iWVdj63+9D7Yzb7t4s++D9MNc/SVBu3/uW3AIgFtmvteDaglu73RtL8K+MKEMTj1H5zAKTzFpLgsohezs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6hCRA9TVsSAnZWagAAnn8P+wSNbFTz0Whx6XiHRBxv\nYrvyMFsMy/P0wi76DOlCDyoNLHZ5+9RsJE+oSTWrqkk++eo70xjNbvShhkwT\nR7DhiRb1rxcmjtOfzCC315e8h1OdCRroMTN8khttYl5BFECEqypiDTUTNHo9\nvM8XDlNyzvunb55h7Tl2u3b77SQdFGkqJhRMibuaMyLE64GOjFzxoRQyEPYT\nvcue+nKfwCUayWnRw8JA+hwFSXLlADgaoYeMz0s3oitB2+gQFEQ6TU/i/rpM\nqSgXX6rHgmQZwfvSYle3BqJ4EsaXeoUBV5pg0uEglv1uJo1ocbdoEszh53oU\nhBcYNjaO/o3ELRdCqyh+C5n2VY1I3j6MVynPr2nFnsJFGKPEPlKcJQvh5BwK\nRYnMIbu9bmBXjykIpstscT90ZVq0ibnysl3vVVJReUSYVEhk7lX3261DIX0G\n6YEyn8bI4xRHFMSfZhX0cavMr0xFKLTO1sV5b7rGFg0sq9w3PCGAf9F9pYQr\nzCKrsVsVjAXkGEQj9go6kd9xcaJpIT1VXlBctXTDOXzmtetNR9x9Yl/kuNPZ\neS//eu+VK2ccN36FQUsyuxTPVPDSMd1Q7jhkSkHO23MJJrr24iw+2x3yh72E\nYE2jjigTyhRDwcvydXKeVhk4NUsWYNk9qLeJzg5DrR9d2RXvvk3RJEF28MME\nEneQ\r\n=jj1k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.878a08b7c.0","@material/shape":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.878a08b7c.0_1576095392869_0.03532805207782097","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/card","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd084cd1e45a2e2e8f9c8fcae0298ea248787141","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.397905b4e.0.tgz","fileCount":11,"integrity":"sha512-w1vrnMGEPr8Im/zZJ730d+sI/y2dlUcsBPA017oMw4TXBUlzlNmgB5OJTcZ1thEBqFLiKi4wWa//nXyCYxytmw==","signatures":[{"sig":"MEYCIQCSD4FNuNTKZiBteBj29z0NJMyvnMnfZpRw7aCoGnUDnAIhAPDNVd1CIL5PN8kbVUZ/7zQ07VH8UlV5qC7xc8VorRSX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apCCRA9TVsSAnZWagAAT4gP/3c0DGzfzJCUr0PYwWR8\nzQorkb+HrJT+olMopaA991QEeCjExqFRetE8GMUNlZ2cmvhyutYXL994xKrf\nvVRTQNHd+QmrGfweRDMNGDsBbcFh0Za+Tkng31f9sSMnw8T50P9QLxki8dbr\nO+iHfLJ40a2w0NqGiGDhYwvWSMKwULG5n33JSKvICqbxFHcP4uosDy3Jxos8\n/fUHbV82pMqysmQfeLrCR6hrSRIiAbZaIXk4RpJ6IAr78L0bRe5Ae12hgcOf\nohmObKlBwYG7ShrmWs07wEb+Gc5WyKqpxpjkZ1vAAY1HbOGm3iO1NF1PDg4h\n1hzSVuLZnERG8KWDNe5LW9btbSMFZiDOJTGj4s77Wd+4lWsmwCw6zimzSVSG\nLfxWg/giZhSJSZTiKW75bNl1izWa22PX6ojbX63rBkZBY0EmLkJvaAjdB+Pi\nBR6kigOR6O838y9KxGc3S5mKndwAhQumdYtRtHu5gU1m/rGk7QyXOXoh5pki\nVbFzQ8qg6gPALOhiZEpoxUThMavYK+/fywRHEvJKpsLNxmqifQYupUKV82JQ\nrGmqx/tuBRT0jk3/qcO4r/Lc/8KmoKf1VPRDQeSfxgGvtxhcn9wLZV1lNxZR\nMQOnOMnNbjqUXJ50ZmgitZ7HR213B6LXcOMyOpUpLzUtArfTi0wncvVhJM3s\niBC/\r\n=P8pR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.397905b4e.0","@material/shape":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.397905b4e.0_1576118850219_0.1039035307663776","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/card","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f521b34bac61f91b1818867802a2379095001c89","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":11,"integrity":"sha512-JWMVKVBoosc0DMvwYx7VnOCvVELEcvXO97qOJE2kG96edhzKwodc55VGUyorqdrRb4aVrcn18ClZ3mERu7mEcQ==","signatures":[{"sig":"MEUCIF2Mup53CPxDjFHXN8Kpz/Zyqv/7QhgP5W2zPpG5O/iMAiEA5+Ds4e0lO8HwfNu2kjl16b6Cry1XG05dvP2zUxflnAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4TCRA9TVsSAnZWagAA0xAP/RCwbmTmKH+m2q5zBVrj\npWcRAYYM7IjDCbKKVJJF0ZdMuC+S0h+qciKvykPLxObswhT/cPeh+wOk5TKu\nEvEGG6b0PnkxxI+gdEsl0eV0xJoVeZPfp8nq9ocqbg/qwfVkU2C1gH0BODXK\nvTO0OrwsUPDkkc1L2DU0eW1641FyB3L/cxQgNVLuKc3N0/YF6Ky46DEVxeW5\nwEI6PiT+vCZ4QkVpqxnhMy4LAmVUF6kKdPg1ammVQaRer3qmkUnvWf07QXtr\nl44/wDxTVNau/xChW6c0o9asQQnO4PwwXUXtPscUEY/GLh6B+Vb2fUZbDXL/\nXdE4X8iQTK8wu+5iR5C/l44aUJO7qnKSjO1oIwrYy0apihNWutTqIu/oZ0Tu\nKbX+wekugTjobSz8JOnqtX+pcX+53qYKgodfW0mUKTb9vz+4uz1iuZFvOky3\nWkMs+g3JvJd2sREcE0ZgIO73NYm9KwWsIYCxOiuk/01efBZUcCPWaisk2fc2\nDov8R870JO0YqLAk3RIavk9t+ey2Nh5sAwFlOBOfLv/c0PGdk6xGdYqJJlsA\nOmTBUvZrv0chKthe7rujERhusuHEtFlMoLOjoIvUwxvjvqRzRa30nIRlsfSy\nnSRhvF+tOX/OmxJLP8vms089wzPlyykDiVAyG36Thz3gfVjw/tlUzSsp7oLx\nIfpt\r\n=vEcp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/shape":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.1fbf5bd1d.0_1576177170717_0.017518329137924837","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/card","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2d0fe05bedab8b3ca77dbd79172acd8fb441121","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b723dfa78.0.tgz","fileCount":11,"integrity":"sha512-8w+y4oU12DuE36TnrUtJ3BYu84eg2x+XxXbaAoWj+ExgNS9+WHzlUcRNCg+8hBWlx2LfDqzsLEUOnZvo/qNXaQ==","signatures":[{"sig":"MEUCIBzi3nnQv8ktFA9mlMtDQmvLN9ecOUQEM7robEzT1CuUAiEAuJkPvMGfdkIRCDw58j+ba1En/P40YZ2/oZb6armQqwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6jCRA9TVsSAnZWagAAExUP/0Dx8i4GOOi1xMLTbbcg\naisbVfiSRp9qI2SIdg7ZG0510j9TCIBOJhA6mDsjOFWQSiqqFax3Wgq41rct\nkahWNPK0mS4rlejBHiVjKutbABbfh4vqrUDv2aHi//RC+I4e0eNmA6NK8AGz\neems/lH9Us5PssC/keLtHLgmChHNYQzLDJ0fZlKClx/feSOFbSsOtW2slREK\n0SQZmF7HyO2vGkOjtePl9qc/rv9PZNbGEwdRuuIe6DvhQnWRFFqkJyzkDQpi\nJyDunRBxEdcFHiowZ/9M0H/8alHsnhL11kx2GqrtnUTGdS53OftwSX/sOsj0\nlaNEr0nbq3QuT4zv8KXPyaVyqxLZHNNI2JBQtjfvKfoMPC0gUafR8tKFfyrI\nrX44RjxCFzMzO0B8tYPI+kYG3sy/2HF1UfzFq5c/pynuPHNcjMi/SL3Z2vl9\ndC8bol/GRPLkhH+igYsCHYUAyW9MzkN6CA06NgkbMJbpt+1xrw+UsJJlOULD\nMHa8yEYdDnEF/wbw2Xb5DCZI+ViDleFPiqB5dxxJfPQBBusj0tpVvk6r9aOz\nSghmPJtkmkhHRvCP5gLKUzANFg4Kx2eQ2i7kWAwDLHsBltCbBRCstsjhAiw9\n4K9IVaV5dRa0s25eCegTKymOe4FZKMiBHURdwnehd3/YrffYBEpjlBsEJ28j\nYHCk\r\n=d6KU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.b723dfa78.0","@material/shape":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b723dfa78.0_1576181411184_0.6832934327648092","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/card","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76d3a484ebc0d97f2a12e19ad24792c2829474f1","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.1c494e567.0.tgz","fileCount":11,"integrity":"sha512-Tn1UTUK8hMMHwlyE75nT8pit86M/a5yHCansO17gPaCDYjT29rpu9wHje5CwxKua64Bbi37S7fPiJ02TA3ZFbg==","signatures":[{"sig":"MEUCIAoaZwknAt/zlZoECRG/66cHHZlwWM3iBu5GaNjdopI/AiEAgpnCKIOkBq9tPp3cOokKOZfmK5Mpgq0q3LhaTmL+SRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8hCRA9TVsSAnZWagAAVHoQAIy/+PxNA3F5jzoW1HU1\nAtOuVN38/5Joc2O/Oj1RpCoOMYjjUPkgsoFx+AO6cnMuHal69qdqC7iwcwqc\ngX5k9y/K1UxPEh2zIYXdHyWd9QKEmABl84FS6YGp/8bsyfjrLvSUUTpiJtZS\nkga4zNvFG2603VXoSw98TFQ3NCwAs7UkE802g7+qdgdR0pCT0/w0YRI3cL6D\n7qsxEVDdR4GskthhH3AZfYkAduuaEnwMD4Ld3gSiAbWAwHc+0f6yZKiIZwim\nialkVG3ZdmcrTisPx1+GOYB7fC9zkQTWZ2Lj8D3rCOQvZ7hDefz02YSQoLu6\npTJgkJDClRRnlyPBnH8yLM6VZ7rJ2c6VJ65wEzVptrYOIgREWiFXy5JEK/FL\ndWYx2jNfcpZg1Bjyjrx9U2ZKpd4uECK6cgsh2w2Eg+pok/mspyOL8LUhCwmW\nqvJ7xjbe/WT1Jyu9C7dbLSOzHQJYJU++y5uVCkzrtgCpHIR3Oo9vXCG9SOXV\n0tLg66pwLdKBzG524ehYo0WqULzRXpJw05KN82gTCa9Nt4yjD5OtHwoLKzFt\nYecxUFfL7gxnS+F0NRV9v6UVYjSeBID1VzVdn7C3sJ/dKawNGevsM6BUJoG9\neQkkiM4yapzSwN4VV/VDso8cT/2ADPaCyLCto8BVRHUv0l/Q1Qk0eDMndOYw\nQ20L\r\n=3J/O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.1c494e567.0","@material/shape":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.1c494e567.0_1576193824758_0.7070349719049627","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/card","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cac57e64e20d28c555249aca632242e7612623b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c9e98a125.0.tgz","fileCount":11,"integrity":"sha512-PYu3ngCzUL90gLAy5Keul686FGJjO5a8p27GrMKdLEz9H31dKH72keUnBGjSsHpjM0GaAAcNV0fEKrP+wFgiAA==","signatures":[{"sig":"MEYCIQCMudWyBGxxjHHQp/kt3U/yBIiAzee1oKth5sWP2utKnQIhAI/J0oQEGSfGsMWog0sfXyKOS9FWtB5pZkAmxSkZbhSu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoGCRA9TVsSAnZWagAATMoQAJ60/B80pIHW5f/sHlDU\na6KA0rjLCyvbz7EO4U5E0L/Ek9IqoU76xBkth2F1MGfKSww4GltzHw82Jgnx\nD1IRaYMcPCRtsDeOHoE92TsVHw9OE4J7s1afUSn14vhMMAOWi0a1WMdDrWvE\nNyFfHSU/BiTOf3OfCiOtACMH8z1RfIO31oxXRBa4w+l+Kv322/HUp7tlhnyz\nvRToQFjyZgttwKKQb3Qt7yzU/2U8vuuEZIyI7q4D/SOTXkYj5uz6Hw1QAdjs\npbYA18cyeNWP4I0thIABz1AHjfQGCsZqumB/De1jNiUyZqh7bP1lHYstbseA\nBUDAixZf1pAlFmkXCEdDvQC5hVslQ0kyehl12OBGIo0cEiFT6gaa9kXwTasK\nMJfz77/F538nE8On3XuXt1Gp9PJYDbkcEYjObAFDz1zNSwKc809SIJYnbV5u\nKwVplnwnLKSJ9LjMWRfhqMp5clJX4iMiAe5PwfNgAB8RT5p2pQ5DvfGhb27w\nWCGfNq+SgHsV6bZJy9HOI93ECBsLTkAMhSKncy/BU+UbCzDiWD6Dl5CBww3k\nNGVSzUWTFL74r8PWOIyMWXT+MnNdvyKmMos2aZYAW5nFdJ3t+p6S1e16R0cc\nP/AlYsxmDXqzKtCfhAPI/PkUXXWDN10QYMZk/6kFSRxvbFkoWkG3abvqdCpm\n5lDK\r\n=Lh7d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/rtl":"5.0.0-canary.c9e98a125.0","@material/shape":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c9e98a125.0_1576606213940_0.9480005190909082","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/card","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96f60730afd0989e4dda2d2c95778a0385440d2b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":11,"integrity":"sha512-rm4yX6z+Iu364W2ZWBrNpUsGUQIKvU81hk0Nd/YFIrJVBcEirMjpsHs3T5aa6pozOWggpNg032jbL3ZjASOSuA==","signatures":[{"sig":"MEYCIQDuXOYPccilxYp2pONZOF/fiXzwqgbs32fDZLjiRp1WMQIhALi3mFXtRQfR04h07xrW7wRqVfu7rARRgGltIAwSm3HM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Ve8CRA9TVsSAnZWagAAYFQP/2IbMPNa9Fl7DXn8QH6z\nfCjSoxy/Xq90QDf2TBH3UsItKUthRrvKrhP+sBp1uNqYCnzaZUAfXfinDIKR\nFXDxckhCRxh/Dt9wxguWSybFbXlbtxIvvfBY7mSezi2gxye8U/ZyEopKVXMz\nfs/XfsRlvAqcsi1WkB0QXfBhbAMUO+dAQUTxHlAAjZt/rLM6DgbKt9iomJlH\n27+Dw+9c8NLLTY7kCzzp2zb3H8BqKh2K6teTwt7zveZLQ/1SofNKZIr6S+qc\niNgbq3PDyOH+X9qZPm9K0Uvh+JtrycMF9FYtgQDLarh3asLpd3SiR6EmQNFJ\nv+OYoDKqwz4D6pxanLBc0B+bFo9C4w4IkE/fBr9ulQJHQF5j0ju8MyDYZLE+\n59/piJLP37ioXQje32KTNaaAsIeAM3djQwuHLWBIqqYth79jv3mTQsiFaHb3\nnpfO95ceEn0YD55QXg00lVlY1PqZdEehw7JGcynyLHvxS/Ao4x4mz+Dj5YHY\nHmLAo3QISY2QQl924hKS5FpL925b0jDN3eu6GJ6C149r6hVwqLTIL6zVZcDe\nVAoIr/RP2u1V9xJKUH0Uece6STgPuWQnz/7s07YRvdexFzZp5sliPjdCuG53\nuPlgTOLmDlSNQQAa03O6YIUbGgIhoFMa2S6eEEqKn8GpzO6bTff06X7zZ4p+\nKTIx\r\n=RIkM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/shape":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5ffe8f7e3.0_1576622012018_0.2823707614251143","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/card","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"421ff8831bae65a8493dfa2b457b19efd121dccc","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.47949b08e.0.tgz","fileCount":11,"integrity":"sha512-lI4YVTL6UGOYRXdhYj6UolsGsw5Xluadz6M8n9xxb2bCAdfYvAeu+l5qvC4YaTPGQDrEfdEL1GfcwsERIN8OYA==","signatures":[{"sig":"MEYCIQDrd3CwjlQYrmf/rc8n1fq04lfvXya5CbUNo9a6HSDIUgIhAIk1MKwQwhg8983iYxmfeTRvVCuXCLHAdpJRpnY+hiHo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mShCRA9TVsSAnZWagAA5p4QAJ0sDwVVXln0+qSAAn7K\nm0h4/Lw4P9FGe4fnLUGfVSJp3pEa6CYDbjzPsGE3fyevoIdwf4DBm6U5ZKvJ\nwpw6ms9V5rXzjN8ARiQiQT7tPAZtjGmP3RK4mbZeRkhdn52+o1/aKogsirxE\nNlYYpVHpi2KzVIgSG7EGKfZby/IWc+OI7btjUpjPyDmKweXmmEAK3iorETfY\n6MxQPQGIMi2kGCn2nEfJtrsCJFg9JNTEhbsFYrbfw2DXHjDhW4j4KTXf05VC\ny2kqR5GTeDAlzJUMiBrsyqqv35CfnJk7pH+1i+Aok+oq5IxWuxv71K7DiRvv\njQUlpUf+uT51J/Q0ztbfmqPYd4rGSoi2mipu5Vy+Hzq6kpV8cG5LT3p9PDsw\nohkVS8JDEIw24r+w4/fj/1kiC9cwAyeaU3CVc0fCwUPkKK3DM+TRkB70fFup\n+REPyciluituKeWCyiA/BDS32/I39UoaR43PAXRpAkQVNv1nlJP5MeJewAL9\nU+xFWPCeLuKx9ZwsK3GMgTqlsxkxj8ztjHQZz2xk8FDwzOtDDWA9uVh+TjwL\nBaV6cWES6J/lAi0lfTXl4VD290xr989YHYR9r165foqToK6IvWFE/Xchufl4\ncmy2Ss0YwJzjYCxQTCHG1vEw1tuN6JoTrof2LXsh9QKhE7KzcwLRHBiSToHG\nhAkx\r\n=Jfxr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.47949b08e.0","@material/shape":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.47949b08e.0_1576690848570_0.6908761575409343","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/card","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7636ec9b4878c06b257c2feacc55940104a05c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b240bcc1b.0.tgz","fileCount":11,"integrity":"sha512-JzgaSEHKGRaQKbHhZemX12ho7qwahvy1IvkWJtXCVREsktErP90B91mqNdAXx0lIsNe48bFlhxYCq6z+dpvdaw==","signatures":[{"sig":"MEYCIQDr0fNwTcdVLlTIUbgjlQCnbiVZJ/TwgVNQWDyCkKeqAQIhANvDiaNRJfEeIqcidJE+F9/1pyaiGfAter7np2j5A8P7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ns1CRA9TVsSAnZWagAATLIP/AuFOFiQYcNLl5iWo0kG\n08P3i8OQirycKvfevoLGIfVlO+ONKuXTxsb0Vkl9l/NFiug5dv2Hy76oMcAF\nOYNfVbOoGrovufYFTk7n76Bgr9+xkIGjjK/ia6XEbAlycsZiWk3fVcm+Rz/l\nu8hIPpwwi9OEI1jJv1dgSlw50cLjUXNCPLJnwlwckw8AsmuhQayNSuzdQA/7\nZPEn97X9tZ8p50JzeIZ1kJdlAKdU0J4sQoXhbQevRW+/HoonHL+hehTpugZ5\n4BnqWtPTEUtlvH2ervRyV83IuD0fGp+rFkbgy43ACd5KgX/DgyW3wJI3NaJk\nw3FdZKKS8mbtufzwT2NjqJauwXbYoTYfoNI8eN7quNdWBKUXdgcIEC+PkdS+\nNXHnPCpSrAGUQBvJ3Wo0FsWs7YSdTbPMp59K0NN0ilh1ogdd1BRq3cHGD+oV\nggSlqEwF1jda3/LegrscFEfKxF5FF4Xz6CdVoZyJy2rZJKI2KGwQQVwXtoSe\nxRicowH53St0FZVCb8sc7wRwGifSHFhhml+vCftnJwzo2mDSGcYOcsC6wGge\nxkCj/u+yDg3FHmTPuqM/2Xf8JmuG16BBNMAo7hExNRiT0xaFu46XZcpLLNdo\nUjNK8QUGXZKT0omJYCnVeBbWwEdain0vKzylCxEzMEla3nMl1YBLNT5M0CQi\nV6Nd\r\n=223p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/shape":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b240bcc1b.0_1576696629219_0.2925895218007948","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/card","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"253647a73b73e7ccb55b40c828c6b3385bfe1357","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.391674a26.0.tgz","fileCount":11,"integrity":"sha512-/jxiyqU2A/apFUcfS6pZ1cq5WWm+dXQJ08VHXlIxmH82aH9p3/AlJtx3fzFZIfckgIaxW/3gZnMlz6PnM7iOQA==","signatures":[{"sig":"MEUCIHHdME/R5BXe275ZDzQW1dtGBCUwh57G+1p49esKVxkjAiEAws1PfO+jsr1YQB0XSuSAsMbhv0C3WMLidnCHgNrkvB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntCCRA9TVsSAnZWagAAN74P/1I3lvsGC+KvgTVt3p3R\nPx80ULA9TtIUuhFco3EkgxgzXGVFRDS6w6DtBzYI1y52ey+QACcK2R70F0b9\nGbF7V6jb82aB9fbM3J8mVBpxqTqrCapp3Ah1W5quSIYzsFckW6z8oFbBGgUi\nKPZf0TUr1OfGDR0wqX2dVUqx0hIhtuUBPQNFncQObcghtZeC7Z9Pr/GrGuyq\nyfghQ4wrmt/eyID9YQ8aIUm/FkVNehQAR1wCorH8t9W4cCG99E3utR75WoJD\nOpqGOScKN86x+T8y6YwggVFhZ5IkQaFgEhWf2CSkhiooNnMQhuPB/LoeVrN7\nzmfDkSeJGhMYNozYGOIeNJryt68J5AtwYrSVcX/YoAWr5BgEnGpCG7L39xVK\nVG3qEuH4KXpczIjosviybjYXjRPyVg4hwr9C2supUbPrVML4P+xXeDihERzY\nyEEEL9DwadjFUZOrd2SG+yfMpUpDpCVPAWV4ye98D72gdfQqhy8k95zrsj1m\nr/uUkNozzTSMojrHyN3jTkgK9y4/bC8IzLEQJiIJiu7PgsMJPfdyyPQVkZtR\nbkJ5B/j+b5iIRFnQVoSZOYGsDO7QIJ3vb2zTu0BSs22zBYYKVSf6XUHklwp4\nqTpLcoj8H0ddQSnYwvY6tlYYzMTb4AKW+f+BCaEnR2AmWotZ4qnni6jrnIQf\n3KhN\r\n=hsHM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.391674a26.0","@material/shape":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.391674a26.0_1576696642116_0.6006213911136897","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/card","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30f962afcd973166132d9bad4f97dad33ff14177","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c4837746c.0.tgz","fileCount":11,"integrity":"sha512-L8FDW1IG90vpWcF8p7bUKt/MIdfY40/d7arrxed0PaMaTqbmUKebKkUJv8RlsrJfGjx2iZzaX0DUU9tFgTEOew==","signatures":[{"sig":"MEYCIQCtTlvEzlwsmyKNEoPhvZG0VA4zmuw+pGbOjqD+818xWAIhANKoJRpoZsa6JJDa5KOZM5tmje3CiRwgtZezuuymupPo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n99CRA9TVsSAnZWagAA8cwP/0mgTTSjp1N8R27HR85b\nHQ4am25r7JoNGAM02DoGTX67qEQe9Za0rGwUxMb6QTT1cAmeAJjrCfKqNwAG\nuOeTuGfagtPY1xcxsd+IwmM/sugInirvEWmJX5v2TbD4eHJFSLbVyKSBoeei\niAbe4KryqWLlRNwPhmq8K2iK6+Ui2d4MGf1zy3dygfqUqjZPVNgXzXr9gjPf\n9CoV9SR3MPutieprH5fXwvhyWIct2LqplYT5QRm4iZEGSD0zU3/PLmKvUlB8\noCv6u96L7HXKRih3uzwNcKaKa9I1WKiA2eXemsNFJG43fuelQ56Rqp3n5YD2\nTHwivNBy3GL3Na8W5XNh46q+Wf5xjcexr7D4ZGWpFY6YbCSOf/DTjRVslwNk\nDHcOdlmilKoU7JTXE0wNOZunxbd+hFusaP81KTPsNBHAOi6LsCNZH3HimvCQ\nQCe5/JAu3TlIOYicUoNLI9qEfQkILEZA7nJTYRyuIqUiGUUpdoOYfDiT7prb\ndFpPv3Z60FduijIX8QHslk68giWsBtHaAGCfjPh85iMOI/KzHyzM8nTbgXEJ\nUR+ttsPzfHTmhxbb3zDjkdlMNZP+nrx3fSygd1v0lSOUFrFuBM1ZM02awXnC\n0gf6BjLEaiBZ3Rm523iAzBEKlgmKpc2Z2XTF9oA0VtBRR3Azq7jkRdVs8hSx\ndWeL\r\n=DoBt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c4837746c.0","@material/shape":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c4837746c.0_1576697724988_0.4254052824065062","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/card","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98055e4e9e3a0355607a54f7eb1c9a4e472c1463","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.e41a70425.0.tgz","fileCount":11,"integrity":"sha512-+lba3cFTq3ZISM04+XAxrOFOlySDtF4NMNTvYU+QJO8LpH2whTCGDnRACeFM1kZmibOoSL1/1hT3kHLXifyfHQ==","signatures":[{"sig":"MEYCIQDHlb5UyC98UWH+OPvl+Wm5wVBqimjIQtrKM1kjO4Gn4gIhAJq0Zr+fL17VxyfTcqjAt3bRPdPrOE+3NheKbNHoWCF2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQ9CRA9TVsSAnZWagAAl5IP/3UOGDUooutEw/0E8+Ot\ndk7MSKtn8vRtQWzbffzj8iQJ54p3nG+4/xyos9mpGRZVmmDDvxMQynKLkODx\nyeEAGHfjWgbopT3AuTooFGIKKZzalA4PPSS1pjAVIM/2vYBhVeNDlYspwtgb\nxVNl3Dciq7/OzFwe/mKNC2tD75uTopZft7AdlnlqMbtaO3Poee0ewZ6Vtjxu\nugxkIlGJE+YFk34j8xQOe5NWpmZJm32OMliNfzAaUwjQsF67hLw6tuleTxfU\ni4/GKs6g7dX1vztSjyHMHCIEd1Y8jNnvdyXIIhX2DtJfD09tawJzl0X7D0JW\nLbwkX9fhQ+FClDnVf6nbylXWscyh5BNwKUavEMX4NtLdr1VuzyMogHqZBlNr\nWsUyDYWqjo/AwzR7P7fl1an35WTRuikOStVJLp9PZYSUaGXJLOXCRc8chWUc\nLOFFkw4HZLY+NufGtQxEBlEOQwY9uz+1raHUO+ISZCWf9Ga9Ur70lVgaubhw\nWV6CbjpRfGlQBg1zn0ZbdQyvkTf3qhKjzaZnt426VO7w5gTO00pVJmC2OQa4\n3pKxuDM8rYKPw49fXazwA0KgZbobW8b8f40T44MrrpaTWdReyuHDnFwhJNiK\nx7mf7HcEZGrecmN3dlEnODkUeBZxdPLzgMJ5ndOZ9+Wu2/bVXTgq2VOmR9KW\n2Uzc\r\n=jKIq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.e41a70425.0","@material/shape":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.e41a70425.0_1576711229257_0.4759406048358974","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/card","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c930022808809f173c028b8cfa8040c9aaff7fce","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.bac43eb43.0.tgz","fileCount":11,"integrity":"sha512-nHAL0sp5+GA5Mi06FIeOqs2aqQrcJ16h7zGNUv2b4RypZQiWLuzzbp+qulRT6wCOQUJppUZhNAB42oJcWLFF3g==","signatures":[{"sig":"MEUCICzOe7V9BRvInVtg5CCgt315hjVEi5N/zZ0+BQ4XwgmcAiEA6kRBIj6klWTUayMSc5REG3zXEeZn+sBDc8kHoZijQzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUiCRA9TVsSAnZWagAAz1oP/3HldtRXgJgU5f6OuH1X\n3WZWkolAzPD3+YoyNxfYft9A+DUPtXQDxo3QhPveJ8PCs1YTCHxhYXHRJMVI\nS8lrdPn7Vyj53zySp+q42k62bThBs1MTfvjA9D0rVOeoJ1hCr1PbgJ3YsRfo\nkjSmQNrz82IGqjMq+T2075STGaZgt/B2lUytmWg6NhTIH3aE+eXCy+EQUTv4\nRy1KoK+Tm8wnevvgk+whju1VRxrlT5M1GZjD6iuTFGXAIg9IRrE5cLn3DiT5\nNsrlNV1g0NuiDXG/bz7uOaLeiL7bZJybfSbnKcLZtGdea7/oH3HZFdqTDyPI\nu5zFTzHb1DF7bOiQovlzZNj/WklwDEMcAnE/FmB89mVWdcriu04qT4+WSlwb\nBU4Bm62OmaqSBQxO0ZVeOmfoz0Yhgdt2QhMNfrNiYDcK3loitTLaJRriocYB\nR5WkKU5dMPe72XOX0hsk2HgzO4ju5V9O4o4eF2INBSPcFUPEUVoAC4RCemoo\nFtgQu0j2u9K3LrGSUrZ5/BdBL+M56Dqzk9R0fiV45L7bE5jLiPeIr9hhQbKj\n8Kl9YivmtJzxd5awKGLKFJIHciIGlPpBohg9LENSusqt7bD8ZhND7OABwrmq\nReMIqdTtQeGKzhUwn+Tsb64rLLZzca/ryyDOmiU+joypzn5UzZxGjINZeHyc\nBjvB\r\n=zpJ4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.bac43eb43.0","@material/shape":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.bac43eb43.0_1576711457876_0.3117553213070694","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/card","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98453fec059187c63c723c9ff31ee84702b6bdff","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.2e491de55.0.tgz","fileCount":11,"integrity":"sha512-pPcSyWft9j38v71ud6gx/1toiRPjdpYHOQj6OYunXjBdCAP/0v5Bim0o2hcJ/dEpC4iLLF5DgkBhwZTiSeKtWQ==","signatures":[{"sig":"MEYCIQC9a3aYYJgt32VH2J2vz00DNs3FcIpDG1FVY1ianP933AIhANpNLFGR20fNUKRTftaTyjSDxo8NPxCKcJPIdJxgAXH5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XeCRA9TVsSAnZWagAACyMP+wZZSKbJRF5cy53hix9Z\nX0KBuTRqoh+SY6ADqJdJ3ZhWB07dLaV+BtcVl9YqoV9LxdKzZjjbwmeC+MxX\nZIgWQDfNbg2dLD9E53wKLwGNk/ia7DyzzUjv4mkjfY8znclqm8l/ZrF8eVCx\nOXfiG49tATsIhrP47JCc8c8MwShFXFTrFQC/AlcRI8qemVKQNYnElTKYp0MH\nGLA1DZUJ7tNyg6v5Oel9fgRMZ02x/2rwoHh2NgxZvcTiPVzGT5PcLlLN1QLx\nszqjfNTRH7Y6Sf5sRhl4aR+1Eyij8pFJht55NtgMSeZ7zE8czY6eimfXqxNh\n9PNzOlkmy/YknMYajdMjc747mUvOBpf1+qiGHGqGmU6aTR8s0NJHgyVhrhuO\nUfASJH/IB/u0PAdqK9qoVmDkHQc9lszFJiyxmBbuN4noAhuYFctC8z31zTSR\nQ+1pruK+cudmlLfb82aUbEyh3XOazlwRXEWozKGx3/GP7HMyNT8BxPAh0kXQ\nHfaLhI9RwKYMdu71o/HaQiW2IW7lRY2qjrF22EYsbkrOrOV/k/HnAyv2xSt4\nWXgjZB/rqahZReeVHcNNuxfnV4855ghDmxnxW8/z/nMVNCys/6yCnwNGY2iP\nzFDJ3dXeIOLXNa95v9OaKOOoqtfM6e2iTU5d+HisC5ztBq57ZGZk1dW6WyLv\nloPW\r\n=jnGZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.2e491de55.0","@material/shape":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.2e491de55.0_1576752606039_0.8075832275329127","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/card","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d4fa9f2e89bf794f655f2369fc756cf286e095","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ae101c144.0.tgz","fileCount":11,"integrity":"sha512-47tLJGC0FZERUkxVq6amdLELFy+iDDUq7E5IpqhO92Ns6gDJXp3uUWTCsYEfHQbmjLrBCAeNFCLwWRKF7Z4w7A==","signatures":[{"sig":"MEUCIQCs8LD1l11lAu8J0pgfJoDqgd9uGXis7zF+0LOFH7KHvAIgESs0YcdYwHDYyQvQCOU+7OZaOyDMcRRc0YsZbA4vJk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RlCRA9TVsSAnZWagAAJJIP/ju14TMkLUNXnEjM4n8s\n1KFYtdmV9kRR3PShNxLzPO35eJn9GG+yqxWahjnM05Riy92FNAETgNCsqhWo\n6u/KliInx/V2fQXcQKi4Cq3gTsVfJ20UVRalZFcfuPqPDNj9x6F2o9vQ+WXY\nfKw1pefwQGV3b480HWo+2Za6AuOX0WUMNvt+Dcdty9jfzDNb5lz97BwzFyHg\nBn0p5+me8/svuu0X5/5XayIhDFjW4lIcKzXKFwhMXP3qxvtmAaH2uqRZhbhZ\n/cGmdu2pJPYrBQCo7kFatFA5XwIAIcJ1yGgkLRpxWCn2QaK0qm7MpQuFsOt1\nBOM7SI+loOcYiYvmDXSZhR8uw1efUmoDm/XjbAdY8ixQE+R5G2695tVgMNzO\ngELBMZ6RDD9pmRHDu62tvp5IjTnKsKfn4RWxDw6OT2gHj3QoSECFeyNs2oEd\nOGE133nq2uKXEQPWTBoZFfk1SQw25MpR78DtCbb4DWmp7P/VTQ+mWVR9noTb\ndBsnbmaBrK0ikiCeJr6c265pZjwYGHDZSOXrrn3XaH+pNip6h5BG1PvtbaLW\ntn0LsMSliYLoJTFDh7v/EeiZ5nHgncAFuaQoMLBH+td7jr0HBT6k7zB/LKuI\npVFXpP+qZOban9nRJFHrwtYfewBp5smycksj4vB6LiXKWHK3MfweZsj3mXLK\nucf3\r\n=V3co\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ae101c144.0","@material/shape":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ae101c144.0_1576772709115_0.6061897701982606","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/card","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f87300486f33c22ca121bae314175b3374993b5b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a51c31f26.0.tgz","fileCount":11,"integrity":"sha512-hFriuO8phlQJ7JEwUwVigDbiS66LQ6+SoLdVFTDbKPEliTLxhZ8hDMuPAPz9M+QbR3fsqOAdVUYxDk23hXxIgg==","signatures":[{"sig":"MEUCIQCTllkPcVw0OFv1FQTEojUAAqYX9eWn/z7jRv/zb2omEQIgb+OqfSwe0lMFXc2BYLgecQ+h1vVtNAdnyRTtzb51nks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/5CRA9TVsSAnZWagAAFUIP/3RAQmIBtvaw+DFzE+QZ\nY/0Ggeu2d4ODyldusBoUE+ODgW+f2JAY7vk02pP+lDZwSzoFMLYe5P/A5SYo\n5RBGIGVQAjXi/MUIAn416E8RI71J61AWqws29/Zh3tTETpRaVDtx0OkKWli5\naeI7eqM6PJvba9BBOy3jfrVYY2s32vF5FM948MuD9GGKM2b63nvd3/wRENws\nE87nxSkWPVzapB07HoxvlwcK21Ayv2MU/1SPdXxy6xV0m0WboiknR1E2wYNF\n9ZwqhnlJBkh/CZcH44rsiOp79p4eP911rBpCFkGrKqHgzd74Wy+Rpu5WOKgG\nDZKxpE8kKulmGbqk1s6Mo+D7d1rHaYm/xAia5EKhdbqf1YOkDuWHWquHjAIY\nILMa288zqTfu1aBJltbQyIWrDQB7/u0FNW16dPv7hBYjmUfBV5ZeXJe5H0r7\nvmWiv627GgGdQuQkxJ4S5i+PTB+nrEh/D6zmTwzXTL4x4Hu9V/UNm15AII4f\nxm7ht8w37YEKd+zz3K3aSo0y9tmAtfEiInxpBOVJogBgzdKhr677HtUMfOKg\nbEenFoUeywJiC0UT90KTyaeJWPV77Jd4P58fmS6auUJNB8aKtfGSbU0abq1v\n2YfNiWUGRe2Aon+9E/Ey8fnEy+zMivAJIZgMcdj4V5/SnQioVwqyGA/dYg1h\n8r87\r\n=VQa/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a51c31f26.0","@material/shape":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a51c31f26.0_1576775673357_0.4363132929783031","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/card","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb1128c400466447ebcc133c7396bd00368d437f","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.21fc4e13b.0.tgz","fileCount":11,"integrity":"sha512-+KVT513zaazImqgXXD+PQX9azX8DTM6sG/f3QadDs7FXH2o0hNAsdLvD16I1jnjIa2O0xdFwXdyOGNfdgl7xlQ==","signatures":[{"sig":"MEYCIQC2cKCL0vVOEfQas6xMYRqOjcP41X/SXd3fDJPF3xP5ywIhAMkb9CfBQz5wRDvxga84bqlG7R1qpfzmV0P/nlySuXDs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++s4CRA9TVsSAnZWagAA+roQAIeCGbuMLyFlUbELS1AH\nMKYQTNSjQyF469wwGYDiozWSXdnb2NMf2+O+dCzyeK/WoO2Fonu9tmVksFRL\nUPQdatWdz6oOWvNe5URYJ7eEyBUcmEw7osObOv6PprX9TnJV5RcWhBDYjcf4\nEwuqSa2eOqawqjuRY353gt2DsaXqxZ5ZCtIXNcMmPXITe5JnJABGrypVIS0H\ngOO9BEo2XnUS8aVzuOZSrFjnhX90ziI6JvGMPNWp64i+3s76AC7UKm9eeX10\nB8zmlPuO4+QSyXQFN8fdUT9DC0BoAcDYL5Wag4WBFljlw0hkv98zn4Ywsx9A\nWM/EABL+YyMVKjdTSBbDAPQB7L5wUhngCEhVRp7godvwYWZy/gvyximI6H8o\npLZix0cu/u/Dle1vpypNBQ+RXR0u/fOYBlYYVDskLTT9OKzRMxHdntJ9MGWP\nqvpT14+YmEw2NeYGC0gvJ0053qEodpP/dzskcXlDr6thiwQvjM53e5ymvl8H\nvXccP1erhuN7eDDeVu4Bn8U72x5fevjXI2b+u9kaQMeGcxbbLTwRCQ1XJcjW\nHanPaLcMSADbVk9yfHAeTKeTbNOWVQPmZJRmaj79CR7R6YZVtlK0Zut0DFN0\nSbNqwPZseYl2dkXR5Y9CjU3NuG1n9etClN4w7F6IR5AFmfgcFVNpxRyyPCub\n5Cqs\r\n=2rzA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/shape":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.21fc4e13b.0_1576790840561_0.11382068860076133","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/card","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c44c83460e813f534c5e2f5c522227aaca734df","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":11,"integrity":"sha512-dseKMgfp2K0f55xzS7wa/YkSmP0vmkCHeGIo60NO4RbLG+OQlnU5Dxs56/klb8teXyPeQdmoWd+7dDlR/hBZNA==","signatures":[{"sig":"MEQCIDiwYUYqciKEznAEpQZV5IHiO+SDBsv9kL7kVr9oUC3KAiARZv5eWov0g/EMteeLi1mwTp2PzxcWrxkqkHelJlczkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iUCRA9TVsSAnZWagAAu9gQAKELeNFEULsySDQcO1Lw\nAfZS2TFeqnzwKRp8qbcQRAjKog2ku4IASqOF9/8DDXcd8wR22n1aHmuYqxVU\n3DifrCEMzxPf6dYeWe4a8S7eKMOjhW8jTaOanyDlSGV8nvMhv9dfE/35V/Il\nmXbIaaKcyCjdg1Z/tQ3S7oZCMFFh5P/wgyaJUjGODnlpGgouMi+khqVbP0gH\nuXCzGbmwaaG/kNL5rBPOdmHjCgg0qP9dKEBvXLGzlwIhu3W2q7ucw2XFFiua\nlfH8NXicisnVFytB+gjcxFgif23+Yeprg2eJzQyFZSTyXFUgeK1LzP3kV1+H\n72ndsanX5v2/l8c24HXLLb8Tt/Bzbp59ZLAAhsHiKZ05uM6jyIZMZZoDjrqN\nDW5tiwDGTSwdu5oTnJblLA8r2WCYGNOVs0fs63xMhoUcPUZXRQYRNmNaYxIF\nzqpHd7EVhDt3YE8qc8r4X3K6eTwzPAXSwbmtG80JX4BeZ7MvOlmSlv5w9eGZ\niAS+Z2pPakBDPf75SjPqqVvBptU6JinONIdZtPQiFoI+JN0YNeJ5ybNHv6KN\npqLhCu/896XyolOHP2yd6SyJ8Sy9LEswXiQ7JgcIvchkBQKYX9m6uzvo2ySd\nTXR/Wz6bySfjrmvnZeSug4ZHdcwXsTH4JxJMLPl72w6/X0bXW3WMs7aPD3Y+\n7gFl\r\n=cvCy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/shape":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d2ae6e17d.0_1576794260422_0.25905772334946864","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/card","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bb9cae00386bb061652ab71cc0bbb02c907ccc3","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ba30399ad.0.tgz","fileCount":11,"integrity":"sha512-7+kNPe+VG9cXtTFQEh7f4sw8ZPu+PmM50qI7H/nDMEJSv8AxTdjH3B2AqxaSc2CoGoYPG/qVPiKV5kliw2+vYg==","signatures":[{"sig":"MEUCIQCR+M7FXUDDpDdBML2ynHZzDptiYEOsY1AFbchyzWtyBAIgUgKzdvS1UovDEqgvoCVgbpJV+LTghnL9nbGDloQRbwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9lCRA9TVsSAnZWagAATNsQAIXnXo4STEk9DD0d/B5c\ncf+o4RBxffXMy/fzjE8OmedJdhrIanHoABMvLziJir3+rQ9JeVmvoroqcrre\nEDsV/C79lUOrPguMV6Xbegi7O/mh9q3VsJjWxIbi06F5bVucrBbqyFkYmEdZ\nx2WPsN9+DvfTGdJ4+KCHBEUqoT/cFpGCs7nRZ12FvBkrX1eOXOdcutU9mJyk\nyeJObzYBxL9YMF/+k771UHXx1RUkeallswH3I2hUB7LjM8XDDNMqG8epzhH+\n8c1iNZycTOhbjldpbKfXLoOrnlGkZJtUnh1tWUfX9kwRDSEA/YNPXCNW+Yz0\n0IH0OlR6+ri0oPcoIkpLpv48Qv965OSYBZN/eB62bRMSk3CVAFx6+1aKvlNm\nY7lLIZukATf8PnwSM/id60JQOe2zF/gZJCAKDcw7sMRc5ch/ncRfpywRdQuA\n609XnGmsh2QGZfLAtgkU7N49S7/puYY/N5lqLAxAsFd10s9PpMemNaAPF9dj\n6u4Y/xUKmR+oKmGt49Zc3HYycgqx+5cdw3k8yJvFqbO4mXlMHobhm7aJEHwV\n7DQYjIN0WD1UNyaLP1Nb2NW/r8s5y0n7CH+gNeHqpqUmx2GsSldIyORvCzYt\nHyJyzkiGjY+/L5c/65kFLOSP0aAFuG7PH7XHB54U89rMscv1FuXq36nLSoHQ\nSCgt\r\n=WN22\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ba30399ad.0","@material/shape":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ba30399ad.0_1576804196860_0.3927823557632546","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/card","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"733467e70c80bbd407116fdbd81d8c7ff171d64e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a08ccec35.0.tgz","fileCount":11,"integrity":"sha512-yNqcbZNvvsRLkFtxYz/2VWU48pBdjNRjtwmWKIiKBJ/ENKaj/Ow152bXYjKjPN1A5hGbEq7Ytcv1InhuGVykPw==","signatures":[{"sig":"MEUCIDRhsACy7Oc+RLvZL+CeM3Om2NBtlruqRMTBoiyZrDiBAiEA/fTcrbudQ5lpWtXeodweUc2swg1iqLggCQXsH8OUyF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjCCRA9TVsSAnZWagAAtr4P/31RxdJ5TKqeEgPTdzJY\nrEq3v/eLBwGhczHguUgqGa/YvckupHGkorDqE58W+vRaTuak6W+g5STFH6+m\n1BZbQYylT8J1TnFFYau3DHVSvcUdFQ1Kh73qkpzSh8Uxir6hN7MH4lnO9NMb\nyefMR3Xq2L228t4DyXRttOejfSL4LkB36DVSkMHpt/1IrL7nycQPtKaKRyEL\n6wLFOXyfF0SPgmmYSHYlx1SrBBKOcprF46So6Q4UaZRVLzQNkol8ViMymAcB\n2Z2e6o7mfps3ZadwdzrDKiWMoCrW8DzAjdhO3a3+HVdfBP/q6yiJkOJCaU9H\n7BerqwdsZSzzKG8bhBYmSgueAlECc39ji+VuSZywWI/quYIspLRGOhZhHbx/\nsuCNCShhfZ3f2sZvaDnrvLvbc9cxiFRMDqrXdFq5qNW2DnNrf+MPa64GCV9Z\n1+6xIaNeSBiKUf2MDzQv+cjqXSulCPsGUdf0Z5M09R1aHwXl6i+3ZM4u3dFk\n/3YvGLgEsUWz+72J4gG0WrYe3Md92wWgsLmNZQP6KBIiYDZTLGZDwCbt1cLl\nO0rplObpTEQgMgVwLaCxS3hurLJj1F40wI+s1xTSQt38Z2kCD77h0CJrS6mz\nXzJ85UP9wjzbYG/y6DQ0phzR783jFw1zPt06XssudiIZqfMpGQvnSPY0M9+I\n+nEk\r\n=cKlK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a08ccec35.0","@material/shape":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a08ccec35.0_1576884418401_0.8676572114740915","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/card","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e4d844dc8513589d2ee42576f494764193a968f","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a2f75105e.0.tgz","fileCount":11,"integrity":"sha512-evQ9b9PgclW5l83kMOnbVscDivOcQW+mxfKgOfYKfn4e5NqDJHumUjltDaI9nWGhYGvM5n0h/5e1Xspf+n4kAw==","signatures":[{"sig":"MEQCIC9nBSRTat/YN0Bai94Q8JtJ/qKsk8F37mfApjl9M5pEAiBwdaAQFpKbjdGodJ1q6PnOUVo+e4FVraxRk4wZ9rw5Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnuCRA9TVsSAnZWagAAvegP/25SJOzH65Uymk8pqueU\nPkkbqRr5u4Orjf8uqW8Khdcq93ZVpssn32P6vf5De54/em84jzP09wd/jEmW\nHpGFbKdl6/2m0kiuApHtbaEI63F5K/y7jG2GrtSHjGdPRBlf5k8TG4WbqKSo\nTnx6TmVVnNqWSz7JvrCnITdIb5q3UezrhThR067JGiVS59dP4YVaOJE5fMeB\nHENns5rFH8bn9Mn+27cLLx0NORZUwj1UPI541VRFIYzm1T5JKdjDLcZ6kf6B\nYsmmXMa2s6QgBx7+8Q6VQ59i3lBrH7WEkc8gj4vV/XQzxwXhS7oc8Gfritn6\nfz69j7cDHoMWTEQJwVvllGteIBzSP58T2npuPxauycVQ4IPAUV+0p+cM/Pvk\nNOMClUcvXziVva/CTD+F4m244L73FM4j4wILG27nw/9621zWT3FIqYxTbSY3\nD0AylGVIbE+3c7q8C2TruqJEvk87YlVa8HHMMkcHNTM/0SWXGZM554LqaPRF\nvCpKjGT1D8T6QBPxzIDLM42/Mel/P+5m2WCyxrh+C1lPgj8sxIc2jxD4WiTB\nXL7tVkxPJEqE5w66zmtsswEdPFWYVdRzuDi6EM8H3yVlp/Zm3K73xgH6l8Ko\nIag0eiPsX6I68QidEQT+8WKz4yiaHOjwyc8FFEpMdNNBg5RpwPuy7vIkhOFk\nsRg9\r\n=JnBD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a2f75105e.0","@material/shape":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a2f75105e.0_1577130477892_0.35224009009491897","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/card","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad6a23ce22896644d2cea1f1c579398cb1c8bc2a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c054a24c7.0.tgz","fileCount":11,"integrity":"sha512-wpGCkJQ2bRAfY0ksNunE8DHH5aaUfwIcMuijrjPh8ZVQJSHmcBbYTrzCMH+lk+atYHD6LQ+cC/hg2NDNGO5e5w==","signatures":[{"sig":"MEQCIAk4guyDzqMDmONVt7zVLuS68OaB8yjHbAZ8tl5ktdE5AiAV6IgzC/MftNMbbdsk3i0k9qiZv49qmMOsUcLsXp7jqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaYCRA9TVsSAnZWagAAtH4P/1SdA+7glypTznu2I/Q3\nP0K0YItclQcOfp7oSeIJF6Ub0tshjzrnUwNhzNWrICnzxh2qgtTLNQimmaLN\neTO28nuIyv2nE6Nhx79A21RiqYT2D/WsTYwUpKIycwtmE1Y9k/+halE6//ZA\noI3sth1eKDYnAlXhsfjA9xoMrBkdBcdkItAOEPTmxtRhMOGcvZzJzGv+D+ie\npim14fBZZCdDrtT/SP4n/3X7Ew623JyxnoFzgQceZTOSr8KzPbg600PudXhp\n5vMiTVmMq1+kL4hdLTzN7N9C94QOVhK5bA39XkLDLyiCG9m4VaNQp57ruK2K\npuNGDLoYLcUHzG52OZp7sw2BDhmfB3hns5kJ5CVFbc+32ACubENaS5CbYjJh\nq+oSwkJ/icUQV8KmuvDL2RhRfakKyhXMqdJm55aWxGnA993ttVpil9kU2RQY\nFNvhszZH1+yDrrQ0c6aTqTpyb+cJxqyyCyS262/AfoOExTUN6N0BoK3wQF8N\nDlj6YPo2ljOpECmqZWaBqP6If8jkLsm+FcGbeOKA6ysNX5dDAEBN8KUKADYf\nYsrRoVt4zkhwRx62yZ6WZr+FUxdkrMnIJtlBbIdiMmimEveOgt4quPZygBlr\nEiL+TQ/czCrf2/Uo2x/T9ZWVVKrXdbm1Q1pZznPvlc393K5QGyoRvqbQw74V\nnApO\r\n=/da0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c054a24c7.0","@material/shape":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c054a24c7.0_1577137816230_0.6666560668290253","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/card","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80347f74bd5e93cbe13835a97b5d2db39c347a12","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c6808c51c.0.tgz","fileCount":11,"integrity":"sha512-tzA2G3vMxNM4idhZfpyhRMdcZg2xtlGxeZfo/hXKTSmvXs5lM80gsKY0q8Qh3kx7FwP2PuQy3UwJMDA6Gxf8CQ==","signatures":[{"sig":"MEQCIFIYgjja/AgTEgqYsTXxlke38VepmK9VoLg7T/Mtf4MrAiB8yMpYXqfH3VWakHOT1cuxpUlphCp2htvLEIaAn67TxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATepCRA9TVsSAnZWagAAwfEQAJvgGaFqMy35t+0Txipl\ntew3XTFapLrFUWYpMK8hNsuqOE1eCIj6cU+00U2es5CdjCDX4U37Aar7zadP\nCgOV9NjAZRDFterRZFmgi49Xw6BCiI1JFjlY02nXc7daFJqcIQ7z5VxHHHCT\nxXPIMKq7I+B24l8d4TeAP7d8cISQ3RKN8fTmG2d3k4XzTcwhxPUN2abkxJ79\nM49Z22OHfhW14ByaO45NK22O33XoPjv89d5PF4eNPZilmIhBprT3YXohUO6z\nz1tliPSWduh0T9YHr085iIK9wxGrbUFuolPyhrWTQIZw/m6XVqmMAhyyrZ15\nQ7o4TxD2916Fh7nSdkguiSRQH3R6s5tcj3VkZeLCxRFTGWDzH/slpuYAE3y1\n7rMufvUOzbYMP61KrmqncNsF/k4MfMswvc8ntg1hg4chg4jxz30TRJI3FpHb\nWJYt3lyyQLEiENEP7Kh1xC5BdGahHQyXnuTlpa83QKrz8xmr5+UuaD0/x+SC\nPbNp4hrzREMlXaPaL2hOKxK7/WQUuhj0SvrgjUPadKMeAgCznf34Kb+29jC7\nGWuWahLS0dcWVavCo1Idwwvpnky2CNHKI6yIGSWGaMCcj2DVHHVCmpbFRIZT\nACQjbrqf0boj1qdE9VZ/HgPVyQD5bYD0vYfBuTwSWmeGAMBp/SJMSMR7k/NB\nA9or\r\n=F03V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c6808c51c.0","@material/shape":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c6808c51c.0_1577138088786_0.1753774726493702","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/card","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3732eb74b30f8570e314b77e1a67c76401faea3c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7bce9cf77.0.tgz","fileCount":11,"integrity":"sha512-AHg/KlIiTXq4Lw7Nk5nOI76YOb/FAW+3xDhsIPLEdyKxgdrKIzZrFOUWgUiOKNufKhgyNbfd47XEvth6H6OdQQ==","signatures":[{"sig":"MEYCIQD/192f1h/xEiAY3Qu8mjneZWe9RrvNp/EcRdgCwvxz8QIhAMWRbw6FPPwfoEBZhQqcLXIs/LupNw42Qe5ECfS6JNND","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/iCRA9TVsSAnZWagAA70EP/jD7e3xVBzYUXYF0qGXe\nVqULxseznBdDQcyL46p06AXLHVibVtMcm4F9kqNdXTAfRFnc0GRYUbt9Mn5r\nXzl44QjnDGqLLRKmzOgcG4e9Xuncez67no8t1nrRmVnXA4Bg0kX2v6Vh+Hxj\n+nqzmPKo+EqGVpSwk8OfEpF5AmVmpeA68jMYV6DPoaRbW6pvNIxpb9/Huw1B\nxC1zET+MTwF6qZeEW0KrZk1W50nN7O9eHpBKtI2AYylDREOyB9+jFtShwmoh\nzQJkjbfY7u3CDcbSjLCuZFcnG9Q55E5JjJHuJndFQNcv6mi0I0PA3Bc8q8Zo\nkHByBvQKby32JyZr3XbDjuIDI0SoR88xkdmDHfvB9qHZEv9wunMPn3Mr9cxz\nnu2pfzfhOlKDlGCAW/v41y376y6Q8wiwW5eLt3Lwey5qBH5Odt9rRbu6OeVw\nTTVLnl6tFYxDZgJR3RSqpxE6erp81KpMuAAP68WuyjYQaQ1RvP8ChreBghT5\nyVx4oGlPLUEavAmooLocYqfvYD9EwWOEXueH/H/dZZumvwUZoNcbZ4Qo7Kwh\nPnhyRkD0NU+cyvcfs96KKtUSkNjaQuWPeo8zVcG6RrXgcAb/IOK2TmaA2q7w\n+kH6TiuOCWnODr3r/WuGoutK8LFV+SL3NUzfB73Zw1emkdeeuHZqlrcRTLcZ\namrq\r\n=2JXL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/shape":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7bce9cf77.0_1577385953925_0.9135487104564317","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/card","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e646742a6f010e0776150d286cad95b8549c276","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c92f038c3.0.tgz","fileCount":11,"integrity":"sha512-aFRmzhuKhsPKvZtlt70u+bYy0PMT5Uq3HHw/V+FuMMBnxGL+zAuaTLK/FC5OFsBfOC+YVrfhzpI87AIH46Wvzw==","signatures":[{"sig":"MEUCIEMyNT9CgpSGI6V6OkRvqzGKzRim+l+vji2Lv0rfhNpCAiEA8NlTNeJmRu6PPlYNNgmy70GjAHxKaEkPL/g2gA6lPmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQuCRA9TVsSAnZWagAAgFwP/1m9LXacWHYnf5tarNyI\nkgtA3a4k4LQIrml1qH92oFkDbk7k+3BXvijv2Op4sr2yDPGrbVAUthYPCD8u\neuZdQbg/E2tT3Zwz+pLCDt2a7r3dAuIHnI8JzHD/vhlbKjCTVSITUJodWgH1\np4GbWCXft1IOVlCIZ11oanQMa4dhnAYBvIAsWW8La8nFidtH6EFivCdIfXZ0\nJlCk0Z2G0jiLJBegDhJOwxYHbeSO5GmGWR5d6NwkK9dIKlrqDLsyyJgUI6ka\nTvxyiHfYWy/dcAUMI2GN3UEjxpehKQgf97wR1o0YFmalxDcPIjXhH/btaWPt\nwaSQzWAgZuLAU4N38xsdIXIyTRCc/Qn5CZW8dxi5lbjQJxyl/pr6Fg6XCzQ+\nOfWg0vNXO2HpQzceKtarOkXhhCcdbPMwAvGi0JRyE0CdfwgWpTkMo5x+d4aa\nKSI/f3Yeg48kcUAGsMy+12w9GI18Hqz+B4KuSf8aeRBumVHRqgxaA2p2aUgt\n/43RGCIUKH3tsynGSX8m5zg5hUmch+o542TWDrsghfEqCuVqa3gbJU3Dzvsu\ntIKX8emtAfn7PW+pVuAVXJp3h5/yGe6sm3zGpTKaFrYQFaeEnWJ5T86W41V0\n+aakByTxI2G1iljQW3YJs5jsUx2yI5lJihY1IURHzC9NJ2/l/T+nh88sU+qA\nM6ln\r\n=NuQC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c92f038c3.0","@material/shape":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c92f038c3.0_1577743406261_0.013930250968640978","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/card","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1275bd517aa322d4cddb473873613ffc8ade69f","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.1f1ac7558.0.tgz","fileCount":11,"integrity":"sha512-R4mSi/Vk4zV6HIrlov6JfLocqyYCVa76l49vnAuE8O+u8SBdLW4l51j8isQN53duZrQaynZflgL9ifrpskgstA==","signatures":[{"sig":"MEUCIQDg9zuKZ/KJdE2luYt726OM9hV0myvorTeumLhe63aiLwIgSSH25qv6wQdt8zqqbtT2rB6T0mC4xviKA05hik3/Qyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlh7CRA9TVsSAnZWagAA5coP/jg69yIJWL/nEA+P2oTQ\nG5KPvoz9esQsUYECa0/7fwCAg/MSqDwwRxSW32Y3LZeQbd/2rWwRwdxyqWDm\nWxwgcn5caxMC0I6BoMu+E4E2xbeMMQ3FAZlmANxXcT37qoK0e+JfNfECShdJ\nPbU5bVKlGj2Igpl2zTOBE37yGsGUH8Gmb8fcSmMC0jNDl2VLbYvN6QBtQtrD\nTPOitab41v3sh4HPtWqQRWZO3iEhOudYw5l1d9Jynoll2GCiNGnSJJ8897Zp\nATMqCZzec6vMKOxeEF3klixxkszAik6ixWq10oIUmhO7W2TklrwGZQBTRHc0\nPNL1J8ldxiHtqIssX88QUwvDtlDRLWe4hIoxGMa+UeCPZ+nt4Ys9Tmtye0Sb\ns23oQ/4tCB82ETeTn1DmX6y5HWcEMEbA2LE90LAP0nomOFL3n8Ea6oCu5Fuq\nXXrk2nXMKNblUOe8WcKyeInwxvj9kgAmN4o+/ZM4tKhxNW5pgcUonY7viO19\nBde4VnuP/LCe2xuaevQ72nb2nzOs013pZAxCZwWKnktfI7Yhg5ZhcEY0Bzko\nL5Y7uMsuhpl1AAQxLZd2IgXlgAPPfm+GCKFo6Y5OzlHzFzAGqqgzITQHtBZg\ndKcGO2QFWGvxYXsT5OGPeoHBwK8M1+4tI0mruu96hM54mvwaCMHLLp9baxbN\n8Ga2\r\n=uKzn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/shape":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.1f1ac7558.0_1577998459131_0.5833699004652861","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/card","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cfce12c7287c01f4120fed6f1236793d2c9e621","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ec26e799c.0.tgz","fileCount":11,"integrity":"sha512-2b/bs8adPsSPOo2q+tVl5TtpYwZHXGfBZVTzNC/w3CmDjZG7PwUpCzYl95ZF9Hy22CwTtxrfYb9UI8K+j3HShg==","signatures":[{"sig":"MEUCIEGW1xibSUnqo2JM6obwxBieQgNf3sNQuXi9hT9d3Q0nAiEAm3hkk+sIYaFPxdUb9ooaVsnIkkzo25YFE98UvpKxgCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPKCRA9TVsSAnZWagAArEIP/i9zQBaX6i0jbFOhWoxh\nlAryBs6ZQaIDB0A+I/NYQLYDNyH7r4Ikm/CY31Cjcdso6Z7UhhsFPRcLv520\nUhLzKhWRdRkkxEXFNfT10dhkIe9WlnTVI/IBEDQvTZ19A9mT+werU+O6LcIP\nih/3lQ4GqvTLAe/p0g6ilnLS+C6zPUldUDE5pFMx1pksk2s3dRqW73Twn3kG\nqdeOJ8hfcG04qYpVdJFOagZSaJWcTUYvdJLHjK3/jY4C5eRYt/pPMreUiK2R\nacetFI/lh0+wI9O3kde89h9YzJGnwixbIbCToSBpkLaRWoqwJO8EpeZT3QCz\n/AGyDNj8+erVxsBGd+em9IgD4ipoReW8UC+kn/DIEGRnUKSMoL6V10gLbnzF\n5d6h+0AJpiP7fJF4h69QC6LiwFzu3BMvWE0Xp3YyormX5V8YjW+XBSCzN6Ng\n1j/YDzlPnviVroKrQQfjJC2KLiAdn3drUbb/t1EFqHCuH/YVIOnWcIqmoao0\nq+mOzgR87X3vMvbecl1tFZnRsZ/uyXUmBRdwh2sM7ZY1LsttlVfAD0JmM3Ze\nZooq7opHAruiE08au1Oulji8acswdTKa4MH3CKixUSOMB/j6GnIbJrIMYouW\nTmL1j2RVYXFEFYnNs7/tdyK71Etvfk1X8xI11WBd3Sn6/x77467gS9mZWF8k\nJH6F\r\n=N8xX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ec26e799c.0","@material/shape":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ec26e799c.0_1578001354286_0.7272897543987211","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/card","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccee9babbaa244761ffb8dce8d985d3834cdd8f9","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.0a40ced40.0.tgz","fileCount":11,"integrity":"sha512-kMJtkJRz2tvUXs/WwefOI0DE/+POhwFQSAAKurIS9dP8Y7YcL4JiQudkmJ5D6Pi0svh9mCpr8AlMAJsI1zA1Uw==","signatures":[{"sig":"MEUCICkiSQVuu+Dor4xuHjOIN58HyjN3M58wGruSRIfa/aSSAiEAiI+0pnV4rwNjKG48zzVm39bbMlPOhGWHhw6XIuAopfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VWCRA9TVsSAnZWagAAAgIP/287woDOFT5F83kE3Qzm\nDImbXKYz7m6FRHtPTTfrU/eFoPVHB2kbf+9Wexdn6CTHDj4MVd2cmAAtk6gp\nDFpcNsMLYLV3xlvaq6gcX3v9UXNg7hX1opCMrvjqKLkzLV1mOdx33B2kSbx/\ndWA3QtIFlm7WgbyhbSHpA6xIhyDw0Q/jEgrHeLtuSnirt4etq66OpIsfY9EW\neUMWmj92Y+hszBzAURpe6YzWfF4E7uYzgdjmwqaCCDDc7FnOMmis9F8rvSfx\ncNKofA1rprWler3ZQ01aZVCmUXdzt6+f1dfXj3CnGMXt6Jsxf7py2vKVPKJJ\nVexuWsojHJBHUUKmO4NdvQs3sENJ4uOb6FeH9e4xExLIfflOE0wMkBOK4z0S\nyuGTtdJ+Y/nqrlOzBj4bv5RKpCpWyMJ+dICnJAC2DVH4cMPHR6oUP15A8BOc\ncMokFUMoP7pGF8Ir+v0PvICTW1XBPTETvf5OQLUK6R6hSm16zHvIYuKKR/12\nvaUJVDF/reE5zPmd5HHrHR+h9FyTo1PxWe/vgdVtC0x7oX0mWbRqXAFnCES4\nWzY6NheXvPELJw4mOTgw21xRRwpJXaLP0LeyQAk+97A93kwLo+2uxLnWVUIA\nPKtPR34IU6LNoPLCaz2MA7YyxJ9hgog7tHKxyKQL4V+JwgwvFYZi8NwYzPgo\nPwiR\r\n=bfWJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.0a40ced40.0","@material/shape":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.0a40ced40.0_1578071381906_0.2421641224348261","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/card","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2edbc16731cdaafb03eab4a2fdfc2534f89c271a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.3adf84899.0.tgz","fileCount":11,"integrity":"sha512-BKYOMKHPuDJT46oPX0CJ3Vm/BRJzxCkQF/nNQlmqrnBVLHyfsKcLvJbFdrAfkmSem5U7UcQuW7j5lAR3f2Qoyw==","signatures":[{"sig":"MEUCIQCVR0P3JEfELrCB1ZmWKkFx85IwYazb1EGSPBzDnd4ZwQIgIw+parKaBQY/Ny8qz/MNfl6KN1EYjpavGw3XhCgbvuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZtCRA9TVsSAnZWagAA7s0P/jrgmD1/2Mc5WKKX1iSM\nr8Ew5sIuZSn6IUcontDdMxglsdyRKtfckcabNHvahSmWd6E/LpQ2l/7yor/n\nKSvxQ1y/xGGRmKo9qwCIU4wat6vPt6zsXw7lZoExghJda52YISd70YAXiR1+\nwJG+B57/GFpvlgbHxoj1GGq0aof8AI6pyppKQ0jJ8h+uBdhqan/n53V0c8jg\ns/u2/hbFqLvLKsMmMZUrhj/XRIOq4+G0iTyIzSo0pxyUZue3Rp/yvyNA0r1n\nZpdYBuT4JGDKlkAfi3laNkwMSQlEnBAEZQtt38nAYHMcCnKINvU3lToErEzc\nr8/GNMyJimX/u8hgDNoc+VuFGOiXz1Cl87j+j7Goj5kC05wZgUDeXtldcBxC\n7gvnruz9/2DEDNEhdiz0HJt0We18/6dPQ2oaYpNS4tC056ogIAvjqrYNPqkX\nxfM/A5xFg1bJbnvAXsrlY6f+aqs+kdGXBrzci593msZvljD6j9+9W9LUPXa+\nl5PeHB0o286jxRUOV1h0t/QfNWTHDbXI3+HOIgwce5vc2VXmxVrnOYIuls+a\nVYyh7zO/6zaSdmo7zlW4EKdOfevZ8k8v8PCu7qVdSyoNy7LXgPQUQIWW5Ze1\nZBfVLnKMGZZjbK5GY9DGY2MUvxBYg0uf9qCWAsTg1HFxBeETMgmgDktoWecX\nxjDF\r\n=WSa6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.3adf84899.0","@material/shape":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.3adf84899.0_1578075756982_0.14875690070730285","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/card","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72e07cc0774d2290f766e0e6fa8b9b4b2eab4c6","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.0d42ee650.0.tgz","fileCount":11,"integrity":"sha512-yGNtNc5TvkX6cjD8FyyiBkIHP4Bb+EqAFJ4C1O6XBdVSokmlxhtoby/EWvvPFTHntBuAnSCSsDOOcImmXd+jtQ==","signatures":[{"sig":"MEUCIQCGPSgHbXeTmZg6DsA+aKJizv9LsRQ2R6ubJ1HH/FM1VgIgFSpgRxNL4/zGgTXypYQZmPImUVPwcOPneOFvPh0FwKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QICRA9TVsSAnZWagAAhnAQAJHFO8RBi1/RmWuf83fG\nNy+tZF81b4+PjZhb3AYViLHaIRuBp+Ko0GzsGaIuEueAAct/CnOyQmIb8jX/\nFSnvxkh9lvOPsx1trc2oxp1E1fBPQjVkPbCOoacbzkXb8W3B8HmYFS+bKEvK\n+HVkQromXzXm5D78B8+69rSawkw+KiV+E0wKvhFUMNUc0CVU87L+8Oncvs+I\no0ZR8e6cs9p0e1iwDiGqeKXO0gpIOU1jqXTvpIHjGP7a28VSDHUgsp1OoqQY\nqBMaZWgXUyj0bP8lpix7EGV4dX0DeEEY2rp++LJq8Kf5Pzk0iTdZ4pfuddje\nfLuQAco8RtxC1u2sOVjjoadmUmJFZuz6dz89nOwFz3ZQFCB9s5NweE+GVeZN\nrOD+S9aAKtEnZkh3S9Jy/x6qHQaiUhn5BGxBlpM5pjYzIvA/vqUHjhrNv2kk\nH2CwLIvepIKguTda6gHb4pu60fhgeo/N/3l8ziipJ3mdV+3wr+/MHu4maeqY\npisP3pMLXPuGM6ZQ6WX64MUZGS5QnvgfvrmciHyk/zcRRqAqu/Zx7MmCgx+R\n5FyV4pT0ktJIhw9W8dXPUSQ/X0VHIuNpMngaMoi7xndbMEPoEgID1TcB5zon\nBZ4ynEoF5fSt6mty82opWsdfzNeikTVqnUHEqObjQgotkNTMPE/PhcaNo2Md\nM1XS\r\n=D00p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.0d42ee650.0","@material/shape":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.0d42ee650.0_1578087431552_0.5941043813968403","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/card","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e104b9b4dab3b1f54ab4497e2a138eb8d9970ea","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.847dd1ada.0.tgz","fileCount":11,"integrity":"sha512-y3GfDKeuFqm3Wz+2NiPe/MkJ2YDrgZtCaVDjked62Qz5RWtNTqTUoYOQtKHk/kZtow01fYfVuMEQ6qp1wlsAYQ==","signatures":[{"sig":"MEUCIGAou+gRAM8e5+2TENEmMg//5C+EbOjo52/HwZC5Ok/RAiEA0Qo8C/W7aeIzfyxQnzyo/eyIhlCm354RMHaELS7/gZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nmCRA9TVsSAnZWagAAB38P/0R3E2MvimHtZYPDjFjR\nlGTFzXqw346dlHCOIiYmLfxLmgloEU0yRTio711lUSEyJYQiA5rRVxMkqARk\nzxQAJKS6REJTULBH0j0GgcB3w9RbYkN/ezuUq17C7xsoefTsJch2Y2MABOtL\nF+gBBw74O2C1kaF3TZTeaPf7yvpCE7UsrSXRRNHHWPPQNnv2V21Kkmj1GIYg\nrJ7ozSdfFKp3Igq5QGbO73CMdIOrh6nNYW6ghdmDOtcOlKAjZeLNEsnRl/QU\nsMXKozu4yWwxX4H2wswoFPrBzUIISlttTbTO9bts7c25m2KwH4ezo7bG38ue\n716zGFxemMVOLYFX0vwWUWIrrsgtYC98TT64Gq6CiuccZYEyWoto5efLaT2U\n/aLyq0hnt97k9WBidC/GH3C1IwSM2J0xQezERYHszxpxb8gEKaQXtZL9W1Mn\nJeXcnnOZAa5H8yv0XeB1/iicw2uexVBv+cL+oqTCR4V3zVxMwzK9QBger4+X\nxvI2MVqycgzZnjOUxGYjBc7ti2btFlk9/jdSmnrKcw0daFzD7lf4tPLnrPfk\nxWhlVl0vD+mtFdkQKQ7/q6focctl2S6NkFyU6jslnd9NOtrGpC1DdnxIV0uv\nbmqaspk5RhvesdZHR5tPTGHwjHz4KaBSzINmxocpnCCa+2v3+/dECsMr9i/A\nQ8bx\r\n=sMa/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.847dd1ada.0","@material/shape":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.847dd1ada.0_1578338790116_0.9846182107219468","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/card","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"775a1f8870f8a5df600fa512e995182b6788b088","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.39df7e5df.0.tgz","fileCount":11,"integrity":"sha512-pHkdZO9xVMZ31J/3hDNIZgazoSp6mmwO/SGLmz90ExvP4shGwqTuAJWPCsvPAW5c1BQAhAZFlMem0K+M7pIMBA==","signatures":[{"sig":"MEUCIQDtCvRfQUuKxe2pVQsQu13euj9ydTVg0dLBn01RA861OAIgFyKN1MBKQuQ7k/BHUDCrpDm+vTLo/61mWKgWBq0K1co=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cRCRA9TVsSAnZWagAA+7YP/32l2j3CX4khA0A4aiuB\nD+1CLr3Jq7q9OQNbwTmjYscYVTjjMjV4cxId7x+iAIGIr2ER7dGuCSpVKw/N\nWMLI9BzjnVMvqWFwITbcJsQmVmplB+RzDLg6b2eTEkB68uoVtzvEcSWeXBPI\nGhL1kXXXyBzy4Hhg2pnAjMiYwrv1nKts3CaOBvQ4zhGnkYbY2Gkstz1mwHjL\nDNVasO6/XyIuS5E8p6Xaxpvr1tQRyjPj040kwMBnkadFA5DJVOFCvRcuWZBY\nlksXxYgUgBlivbugkyrvyvUafLKjMivFA8iLtfXBjgqjk2tEeADVL/WjWtaH\nrzEEtpnoXbVAstnTnogyJ98bu97ia8GcPH9ug8pKQRCOYQ2eV6ysTVoA75V4\n+hvRTVWEAl3tY9Vy5JZsYDjpE9r1o6rK9eDV5FfUeGe9YzCP7CR2g52N6Zuk\nsto3J4lirr3cUcVKdqdifE+Kpb+C/8zdDa4XlnDyafYMYUmoS2NG1dnul/uI\nCP/I3WmoSxx6UKnCa9VGQZ1oogc7ldbA1lwbfm7tzXu5UaOTEWwReTPcJfiZ\nMZRIvqef7wCVQNrospNpq1XYcXaAlpD6M9F57SzYAZ/9Ievr1F+QFtXoRZkk\nmisgsvrsjqvrawLQZxbgNqdDIV12IyCqIYdSqZ6MX9e6Rf1+wKrhH9h7mIlH\nVATL\r\n=1NEg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.39df7e5df.0","@material/shape":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.39df7e5df.0_1578358545062_0.07188690636250494","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/card","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5e2fdcc15acb590caa96cc2225f2b61d34ea1bd","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.f1a2581ab.0.tgz","fileCount":11,"integrity":"sha512-Prvbdjremo5cqOU/wupY0HDFpV2AjbmhApZ8Yg4923yDjHbelFEa3DTmntnQ6oUIXfCx/ipZ3EwHG6urogSCSA==","signatures":[{"sig":"MEUCIQDbROiRCs847OaoGzVviXpHHinm/qcdzZKd25ai2arNqAIgOT5R++8d1fDRr4sqwfN9prThu3DG73S7PccEvY0estM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzrCRA9TVsSAnZWagAAY6kP/2XGoLR6qfXhrN28+kY7\nWvgi30GbS6iP4vf6NNLBe32FOxpC3njXp+6QSbNQ+1zlWfc1I3mUdcc2ZSvv\nrOWXc3ubYY8G+5HQeOqtprdtihB2VSWOaPEzKdNuF82ZphKgQ60zmBb1bLiV\ntNgwEShVOohTf1waieWzpBujVC1atB8vEOwwhew+mo+JeZGSWamGn3w9JH1z\nGUbNNZattd5r/Vof91FWKxWbLFmLjKrcBC3KbJ2vhaQ8Q1qyJ4Znw/5GG0ic\n3qRdznNLVzF71hXwt9kKYwVp6QTb3N43UZibaCwi6/S3WCdf3YVmQMq0bcil\nC/X8iOfDGg0Gvy0KGwLH4UVm86x3e7YxQiW97sOeXoLASXmi7pTq05MJ4Zju\nCQpBfZ+LtnQjedW9g39VNWwtWFK/cp/2HXxIZaFWzgIgHGYfqMKuqsG+JYg9\nZp3zh9MafWuMULo725AuhhlMSF6Tl2DAxI4sLmcHImnlARRF3uulPvzUZbf2\nZEip/zXVnPh29hpNwCu70tawf1OzGUb/nvxWa8/GdwscNl8qnOZfjaHNbfSh\nt6OZI6BJMLUybA3PeoCWZs73tsNUcnFOf/cVyMoU+Km2UPdQ4PiUTopq2TuB\nux9og9L2hkCMEhYa++ArCD4eJU5Son4lgdHTA6pCjf4keTH66XRXj/+brZgH\nRYeb\r\n=knHB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/shape":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.f1a2581ab.0_1578409194570_0.22817415153558507","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/card","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f6925c246e02b2f87ba420f288bb22b32c227ce","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7c7ddf347.0.tgz","fileCount":11,"integrity":"sha512-hgDZuUzPtoTPhuYCLX/YOcWxmdbUjO/5M6drgooWfwNwEPVoyZM/kJpO9OuLS3m5Mvqh7CtQkZFugHvaxuHYdQ==","signatures":[{"sig":"MEQCIFndIDLZyk1wFVuCnqvD5vFrGMkme65HakLT5b3n/0PVAiAormAQMpbKBe9atuVaEBJpUlWo3Vv+OYOISHJJG937qQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKDGCRA9TVsSAnZWagAAUSwQAIdOAFVyYPZnZuL5tHjW\nkDUAFoWYdJaLhFHiiD31tAUIGQWBhnEOFpFgDMS+PAzU8I5UVf0FVaBDvyAo\nlv3LmosIcdsCqHJ9jppRuT9wqTBT2FEM5gHNttzF4uJokjSt5ml7uHv0hhys\nFkk2fegmC27PUt5Vixnz6BK6sTnbbw9Xqk4HwwlmhtAdWy7QJi1j7lF7pDtb\nlRTdfXlL+9amsRkJLEDRL0tbhFjqUPhR+ijrV9mQOdcI+uAoU1BV/3INAVP3\njKWO7UFc50MvqdvyZw2B2UgJpb2//nwLaSKKyF/mwL8NQaW419MuUTxEZYok\nC4Ov0gJup9tllYNHNqpmLco7OCrA9EpI2sC8O0oN1KeOUAMQh0yDhbE+DZo2\nfNSbWdbPnJe2VzWI/s1A9sVjVNwB6NurC2/Nl3Qxzk3zIappxmzjrcWj1fK7\ncZMAwt2imwC/KQz6bnd6NoR0sMfA4AIr9USzl54bMTlWydhHjYVH0Y2uzsDl\nyV33M2mxsrC6K6T1yO4ixOhTat8fKj7yQwBbpD+WVFxQ/cDEIA4M9u58u02a\nz9cUAk6bcS7BoBfgrPd4GlXe3lESQ5AcylyNDu2a9aAGxid3z6/PqD5Phvg7\n1m3P+41AwmGdlCEut1/YiWHtW3hxUvTuCh4URaGOF25nyCcFrdnW1QVSppa5\n7V/g\r\n=C5Wj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/shape":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7c7ddf347.0_1578410181437_0.4715347570726378","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/card","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e4b5cc8b30faf03a518853aa74178a763342f2e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":11,"integrity":"sha512-tg+Ext1gAX9xKrz44CWBpzxdfwfU7FzogDTJEW/S3Mox6mjj/Aw9PuIy3HPJ2gce84kfhUlNIJVIZbyJa9+WMQ==","signatures":[{"sig":"MEUCIQCvtsPtAmcCDdb8QQoU7wDdpfmk6DC/Iw0WI6fWFev5gwIgHc3UkkQch6tSG3oV3wkjUHfyuFti03nSCj6mf/DmavE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmRCRA9TVsSAnZWagAADugP/j8vWIlMh4glvzy4jlWi\nYxqx8QuSoSas2z2afrsET9LHMtZzjeuBSyg9Qirwmx1sqlvgyS2syjfzazht\nSkm0GbuGJ1tVydSviGzuD70yOzEIh1UgNHsLSOIf7o007u4YgG5iy9r9f+CF\nEjKU3KufRO+hckxDlpT1OwC95LAwn4ZqyInvKtzYvO10WMS9GSS25UEL13BD\noUjO2UgrfLZyGd6KyMI5wUy1yHQk+qcTSHyLtdYkv0dPqCsPnxnbuI5O3TpV\nwEIi5RVqSlQH+8QOSV6qEsdLbNXP8B0sDYCgpw6KG8/hHFx1gSxfsLwSE3ng\n0vs3D1cdIwIi8iCia22fA/opCwkalNGpWMRSKqY16Ih/U0yHlWG2zTB/sEEs\nq/Iald+emLUnA+1b19a7K4IRPyxxXy26pgFOfMV1ymOl3Y3qL3fTNpGjQkgj\nFky6e0F6ErT//Jb73H2a9evbshOWbdQY1cEF9Lvhxt/IvpCpjG4kYdGL+AjQ\nyRswyXpLOImhjPWx88UWxQUX07ZJft4hSfL+63FVGgnps30JLyHWvPKTGReM\n1UIv4i7dQhQr2yb71+spLrbD9wQejK9Adt4aTVve9SIZP4MEgScDipLEmNaY\nlendfOu0bGVUcQtKzvHyo0oBtgPcSqBbw1bNcSZbCIAXK8+G6nh6NhESHqGN\njN1/\r\n=+K6i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/shape":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a1c84d4b5.0_1578420624810_0.7901802944085001","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/card","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"132243bf97c1c2dfb514548d3c34fa8a01346367","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ec9f16578.0.tgz","fileCount":11,"integrity":"sha512-U3akZpyTaKpKDr5yQ6OqGh39vYHMzBcLLYz6fCd1Q5Q5j7xNiFYGxQQbpelnEjXhAwufBv7v6AZ5JwyPwDF8nA==","signatures":[{"sig":"MEQCIDSqWeCzHb29lGkb0N0iO2BvpGtklUW++VburePkcabvAiBk4G95dWj1iSTfzf17cJLuD2cXY9NB+OWhPnGmfTMLOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6ACRA9TVsSAnZWagAAbZsP/2wmqvMg/9+Xu7FwwwDh\nr56JQSTExULivQfmXIXrtBYFDtH+cb1FRvlzAqRtnumH/Qm4UUkK5JaASzC+\njGbbJL9fbApC6F4id7spPrnqqnAOcvIvWpgBBRpoVisOsMZg85i6YfFqQbB6\ncL5OmVFRIPnGyXO+wsTg3+YaABfWTLr8QoCcqTItexWV+GfZUDRY8lQ9viZG\nx3yzFY0dWnlCXdYA/slUb0Si0+807Y7CoKyfoLUnQixLhP/CsGwV4hfBs2pf\nDrMHgHZy7njVDZ37wlruBi3jEa1Qc8WBfZdvsx4sqFfUmriNevXt3RRg7ZW5\nup2t2G/fNWymW1t6kput2EgXuQA1pa9tDF8ZrK9pQy+SNjVMAGLtmgYdEve/\nOkT4O34pIxNWbBLZj0fmnQ6PfNdolnwHduXcfLErYgT+FaDpR+W9HTzH8XpJ\ngC0rDNSggsTnM13xxDxTcpwKCW9rwDknqSCRuODd5HWrYIn9bVF5H5/Yd9r0\nQhq/liqPTYwK+mf0Hb029ynNCczzp9C/ZFz7IxN0gu7kp+D+OHDYIYtniuMn\nNhaCfOqG8y6jaiR8o86gInV/VA8LQ5K/8+1mCTG3X1hk9YVf5kiIPlAtrRlY\n7XKG9a4XgKteKdeUhTzE6sCGmYvtFBbJlWXeFOYdlAOqa/EgWkldq3PuGxN8\n7Kl6\r\n=FaG+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.ec9f16578.0","@material/shape":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ec9f16578.0_1578425984011_0.6371419120782178","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/card","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70a5218f84b7f7b19561715ac7c3da2304b9e267","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b602226ce.0.tgz","fileCount":11,"integrity":"sha512-oJ905+PCiCk3+awwqrd/ahKPUqpubmZWJPjdv8P1X5aERP3pwy4XOQASHZntLxivp1sigAKmDTE6mH0yEix6BQ==","signatures":[{"sig":"MEQCIFdA11mO9dOjKpupchUQbpisFEp4YQ6cmyhnI/02XVqSAiBo+A5oVxXKsXycS4qOg5enAXCLYOB1seYeeSZkG9DgJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObfCRA9TVsSAnZWagAATTEP/1Mj87IN93ZI/udiM44u\nm0bU/I/chmaE/Ti8wX6XvhZizVv1uHliJZpajYLubtkGNK6fJI18ttjQ5cWB\nISfsqlqwHpe8rT4+dMfZ9X+AYYI5H8EuVfaATidLhmTMGooNKBASXGF/GQ+k\n0bLieMA0OV9ZuuhxZG0tqIDkFQNRMFA512EKT8IPJ6Bpyl48Izy6A4Q6JaGi\npL6ODus4OiVsBsat6Y3l5KJdWhUQZcyBLMhJYHdEgY3iCSQ+vak/qgUqQeqR\n9xbYsn0RN0jfS5EJLPp8wduH/8raXDdSIBwZ/Eiz4f37tR5tX6+sT73G+8b9\n2yceFGczlTcawlD0ySDcBEfIczvobj46i6SNnoNNxayKJ1oaKrf2H4n5qZDP\nVqYFafYXf4ZhdYf9hNwUEwAegTYg0e1NE19X2jVPeX+zHGRJlPUEh0gV5fKz\nTZ4Jrtldqy81GKFOpYfcr7sy8JA/jjVmmPCqQ41avpKoiMZScRB4hH54XMAL\ni/pAN+lRZKqMRMZr5NcRUjzU9Qf4asqGkZrZi+04S3muSx28in5/w5eVHVUd\nuj+nBNfqk1sq/JHs7KSAwQb/75s6xhIBihDT5xZYjmBFo+eeVhUwpAyboIHt\neOdiRituFI0w7lSmC3X+y8PGuBZPLaKAtNyfNs/uTQjswQ4SugjRkyEnxFTN\nTpOi\r\n=Rtz7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.b602226ce.0","@material/shape":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b602226ce.0_1578428126819_0.8520193651455046","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/card","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7197c1629f8547037b016ee3946134b84e3999","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":11,"integrity":"sha512-NtyYuy04UdoIMhbVw6gotvNymsfwXQqHKAMw5ZAoK0xwq03bH+D2nzxQmRtXdkriQPUmq1Z52gdaGrLlTpZUNQ==","signatures":[{"sig":"MEUCIEzxyPAnLerk4gCbOLpSwQDaHm5GtwuumGTQCp/eYadHAiEAv3c91dGNJN3MBcoW+kx0llKxxZdBxF6KQWEYbiOdvyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPd3CRA9TVsSAnZWagAAHEUP/0xkeK94p54URajO2oL6\nqrhS5nyH5QTohHcLD0wj8ZGT030LO8hf4Tx0GIGnVL276mwc9EqtSgqys4fK\nw0ZW/dm+Q2PMwV3BKBGTxInJQjGRM3hNyHp6P1nv/eOqgvsK5KkMLXrPN3QT\na1ROTMgev1hewS0YnNNDDxnLjcndTnFCMp/IrRASw2GytN7OH189eJ7BEHwM\naGhg6/3EKR3rdPBToO3OdHs5bc0P/6yukJiNFSceb1483n6uTBg4wWKEeEZx\n7MBoMyQv9XLMW+bY9rYVq/lBhD2PVxmQWBUZ6eoLVhuuYTnvP+ZwvAtsqgxg\nqLyuhROmoRvGc7eUpAKNTU2w5fMvReWV0H/aZg7WcDlVD5Jqoe41qeY9q5Yj\nE6R9z3p2Y3XxSzXESUKzS+jhRH1wT6jJTup64uYoQtkLPTePoE1Eyc4npEpl\niyLE2nycviRMsPoGsEKb04R2yJaNNgoFMrXq8yVaOM8Gsyo4NmwyBi6vq0c/\n8CRXlJNJgzZ8nkVYSrha4qCifWey3x+7TODsN4BWriiIL9KQQpbqOXigj1P1\nteA0P8jMRtv+dfqoe8En8Zn051glqMI9qhdNrQFFHmUNYa9Vo0Vxj6y/yCgQ\nfOA7E4sdfMnpeRP0IJqQAly/7OIJEYMvNx0pztJarRghL+XHia0TkanCEi4W\ndmjd\r\n=HITq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/shape":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b2d2dc08c.0_1578432375149_0.016213368321297716","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/card","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a93fac5511c3f1dc24e0531d6bfcaef5c6fb3d2","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.61f2d7580.0.tgz","fileCount":11,"integrity":"sha512-No/ewY/UpTv3roV/NW9WaUDLwAKxzbzcAgX3p0lsGmdlzmPo4yHKOG7iqLhZY0darLBhvdsdSspxuvhmGa7uQg==","signatures":[{"sig":"MEYCIQC+Gj0a4e5PwI1Lf/PJ+UBeNVlPgmjVaH/Q4FbIy0fDLAIhAJMo/jJAbrY5l6Ne5MoAr3QQibGP0uUJGASGJwIoeqPO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqnCRA9TVsSAnZWagAAapMP/0Cz7QCuxloaoiZvNeSf\n+7B3zshylzqxSEfxsFXFuLrAc3FiRLKxJQcb4DrveReUpViCt9IuggFyVpUu\nnE/0kyB86gUud45AiBUkKOJ6WKPsQcf78OzUC01qPBg/mJ0jj/7pXzUTSZ4H\nUCCdpE2OSWVo/L88SIXE68JqoRIr9eidydsjzYq4spxrLE9470dYNXOLDrua\nzP0DG8sxi7HcODzTZJhbZu8NxZ/kdiqVHVxyfuh5DQC6lhLT7Qresv2xv/g5\nQ+x1ElgH38Amkl5JbFsF99nX6bw1jLAkz33cUcYNOtKfQQEOcqa/U3+N8zE1\nnyvtTAUFqF5uQxPu3JbG8fWCEz7BOboMmsw+cz1DUKQgO3fxl0BzWF0o8ffO\nj4I/ttyuye7nT1AQxlW6XrVrNbxNp0OwTLXHq3y1WpsEtxe/w0GuVE7HxPzK\n+7bQZATsi0/LNr/9Sxgc3e/QkDA1IkQeNcGVcbuX+QKKlW9xIIisPXehd6cc\nVTq+lwantl0qlh88pgxYwIXil2WNznEz0fPXutA6spDQ0fjWXldBGixN72Nm\nMhvjfufdHWwJ3QoboquiUfPFjQI400GCWHN4DoSqX/wyHSYd5/8oiV9iPUe8\n1ICqFv0awAvYfvxVoM+DEX91NV3dLV9dSsr7Ka9mj6vP7At4SbWWv82Q0oA9\nDmVi\r\n=yaeZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.61f2d7580.0","@material/shape":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.61f2d7580.0_1578433190563_0.40910813948430347","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/card","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5be582d489da23ec263d3761d02ff280b65d1ae","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d1be53a2e.0.tgz","fileCount":11,"integrity":"sha512-eInjJS9qExL2mNvtzt5CwVCIO1N6XdIwTrm3o1j8+BndvHuDMF1HGv4RwFGZI2CiFldhZm4cVnh+NawnpjLyDg==","signatures":[{"sig":"MEUCIQD9eI/DVJJnUHi3ht4ONZdda7AdyNqo/AEAAZ5xykr/igIgOyZuJtc8kBHWOiR7zfa0buwzXhO0+1XBfG97BijgeQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNuCRA9TVsSAnZWagAAmWUP/jjP6mXacYL5evJffqRf\nOeqtWCArShUI97HKrsZnKLtpMQBrvfCTi2xCDibl8R0Jnw+lo01H8NHYWGKr\n0ROh5wjv545GU4lE+aozbV9DKKU13e8PdfXEtbwLkRWSssh4mvTD5O0sozPw\nSaFtu1/cYbILH341/JCEGhYwTbjVICG1R8pVj8/DV3lPNov4ygxyFZRTgomA\n2ZKtjGAiuk1cEf83MHgv24gDkrLxsnwhvlQ7af1g7z2vwqIY6r//gXXTNq2v\noyP/70PANA/TqPQcMLQSsSpr3TcsC9sbp3lZ236B8yS2NG5FdaEL5z8jJpAV\nB5G7qX0q4fky0u7th32c0Kls6Y3dX+XEGs5Pp0YHA8cmDnqaHzE3wyAAjK+3\nrewwA1Qds+C/5d6/oRBclhJArOjct1h8QhjGmuqCjare+E79t2GoyK+Fx0Ha\n+7EfH5egTMFg2ralfpt5e/cGi+4Sr+a0NUHhqpdsXq3wA3SLrJ74xih8nesN\ncqcuTApDzSNNR5UTQ4Pf4LXMJzq1TnrLiyik6jT9dMB6r5G5T4iXo903AjCY\ncfTvgEe9YQ8dkpjc5o4GsGxU0dT03ngzARZ7nsIaMu+A+iAADRR2YQSe8ir0\nqYWAkJy9r6fE5ARzJOkd80Eo1JBV0eS95NdHtxj6zRm/u8HAbsnPFH+JXwly\nkZ1u\r\n=GGDE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/shape":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d1be53a2e.0_1578435437655_0.9372231405692932","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/card","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"143d894bfc7663c3cd0161954dff9766b2454b3e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.9b0d06e32.0.tgz","fileCount":11,"integrity":"sha512-QlO3rfmDGC9uKMNU6j4uYd/c/PwJN8D6eEUiaGoJRV58uAT7nVx5X8PPKPTKabDKFOADKCf71nX+/NYFhH0JiA==","signatures":[{"sig":"MEYCIQCYD0/QfV0upfrykZJbCQjZo9gpYeSxflxB88QbsQhPDgIhAKRwg2ypi7kZlhe7qADhxY4qhCBDbd6YXm8lnaLkNJKg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPxCRA9TVsSAnZWagAA2/8P/1gl3CcHl+YWZyMR0tge\nS92x6a5cQBANcd0RslRNUKIR6+9qdATGSRQuvHMyNQcdj8e/aWFsJSCaGFOU\nSglGhr4M3xlJjOBfSeSkyF9zwPHxz+NK0Qgbld2wP3xjBuTfKf/JngpeNcwd\nJUHcJckkJ2jLQPMso/Is/rW8MeBX29mcVATk4tbxjq5zemUy56XZPeJEjTRc\ngAe1shA5hBMIOH2WlzAcTuMHAXLRXkAwpkXkP8eoSNAZqbs5giObpT2+3z04\nPCoMIKzHeouUw9PwgrG7DXBzT19hWrw4LanKTmqnb5iT0oMck0oh2tzEUxqt\nlLcsau8sak2uTiIE2OGaDeC72cp5g7upkR9gWFS6gsIp3Id3BJh8mW1FIK5U\n29ceFECK+YCogh8RNJJNuzm3PHFHZn04uSfu4mageJnSpjUjEuaVN6e8gu0E\n21HKd5f6Coz3OCUUsz3ZG8/LVowU/8Z0zvLZai3dIStni06watQCuKBqgP6a\n7iF+dASesj29FESFyT6Pt7oOvTprhwLtxYUEn2e58kmlLOOcedt9y6IM95H9\nQnPmt8RYuroTUdhWsbIMJPdJ2HLC0ZcUDcV4Xeejlc1xn0xGc7mMxhgbQmeD\nmxFsQNPnfc6stehsP5fVuZjXiYeBAGung+AexQqlZKu3sz4A7ErAxi1QiGgO\nnvNL\r\n=WJP3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/shape":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.9b0d06e32.0_1578435569034_0.7564394715076832","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/card","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bd41063efdbb6dcab2252ba66032dc8bbfab711","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.730c807a0.0.tgz","fileCount":11,"integrity":"sha512-Y2EdnVusJQmrc34Ny0+qXQYwa2DTI0J22q5TX+ePO+pQta/Z+USEqKpp48AVtk4uGkMToKe4ypiaNsWU8fW7Tg==","signatures":[{"sig":"MEUCIQDEv/R34mBUI9u1h8ZInYq0qkgzHjcSUiiicvopnTKBBgIgLhmFgX4nB+oW8HWFHIzgF14j59PyIATYfCm/NIGZsp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRPCRA9TVsSAnZWagAAvUIQAKMF0jFOORPhjaGM99qg\nWiT2uBL9Y6XXlkXHEHqXfRpgzpsB5djf0kFzVurns6qLKpNuuhciJHtwR4ra\n8ZddPUcbDqTwH8vXlK33fnQ13hPkQbiu3N8YhPNYVCUF1uWqnJlkj+tNDeR5\nTHA1BT887x1QywLkVvsmu43jXMGqavkJoNhzliC0iA1QyP73J9pPTqlyRw+W\nPgXrmP6+Vt8uSgkEwk6y6H+tvShlkv4YKy6LoEcMCmFuKlKPnBGmM1UvxmYa\nAuJ3V6Jf2il/h5x8VNKi6g/CbBYCgeJgEj/Fph/FfcKXplCYaU5ku90erm9e\nEuR0DArnd16OIklOcZi+5lAkZPfG7ni3ADlKAO/I+OLBuAFyX5GUvBgxOYoU\nvScl9pgjlWHVclKQFitk+vaXICqUEtBpmnsO8GoZEaKlgRVKF6QHZN4j6wHd\nN/EQHW3M/oCZ6pEkfdBgnF+Q4HHP5t/0l+bh56ewtER8SSDJ1kMwaVQvBEjr\nE59df+uIDfu8RTY2m8vtcjop2shTbXa+lHsS7sSJCRqiT2reack/PBKItvB8\nvLFKFEW80Lu2JOaajp5wUz9P0oYYijFT8PLue1CF0cIKPqpX+322mmAyXEAR\nvhtuMUH6DbS/oF5HS6Gjy12sQdrBawvItQgf7ED+DK4TG3bEh4ko4m4cAux9\nZnQ4\r\n=bfji\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.730c807a0.0","@material/shape":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.730c807a0.0_1578435663487_0.8668038727316751","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/card","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec97e3a896d6eefa076e72bfad7f3f5bb2f0551b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.2213152cd.0.tgz","fileCount":11,"integrity":"sha512-7Np9YwEvbMXoz9qwj6h5QkbLsjhHMmDNT2EvgUJu07+EtrgmwVasjZicFf5s4vQrm38s3UysvxtgeDQpxvvLCg==","signatures":[{"sig":"MEYCIQCNK1zwdMxrzuvbf3w7vnMCYpSeVHBmYfjvYcwcB+weUgIhAKEfnflNsjl6FQbvMoi48cglT6JzgALJ7GpDg7I/fZUp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/PCRA9TVsSAnZWagAAIU0P/2Pk9Ihu8u6kPhtZ3Z8G\n1XlmztjOXoenE4AY71LXNvrBj0kdRpDWUk9Td0eRzUiXR3ACEuhuoiERRGjj\n/6aMOxNdjyg8vYqakH02GBTbCt+uVSjZWlSPTBhRPPFVKotcVMcKXTPXAVav\n42pvAsN6WUCpIp0vIrsR3GCrmuGZ+deNr33zBQLBovKL0TmIrWTtaJiAYUnM\nwfuqLF6QLvkii+wRGH0O1VyzZjYfJ1mGm16U9bDCDYmaCMt1ZipLQCYmL/H8\nsTXyltVnJdl1hXASdcJeflYPGtipr2HFxFvunc35TTtZ1fsWT3kOBy/i+T4N\nbJpISfP2a/T0GP8EMf7CYTKykehjpFPdIlZPjyP9e/g6IePyiFb9AW/amc05\ncZpwbDfgA52qYrAlxZGyyLH4Y+6zUxaswpifD16prvINKB0RgGVFD/fyQPul\nvcbNwcOsRVQTXt2KmfMpoEXUxvI2lxyiyCQoobc+n8gUvlaTXR6OijsplggG\n8K4Z0/KPtc5AJcVeWE2C0IzWX5FknOTO6Pc7hRh1n7N7EMBk9C4P5hsnH9F1\nduNXoJWWT7GFzD2hJ6032HvEZ2L/vNnnBAwQD/b83UCYE57ft2jzHMR6KL0S\nhKqhEOoWoSDHp8jVk4tDWfDbgf4+uLcaxjFMHlLUjZoZ/RkFkqG2/eJK32a9\n/iCv\r\n=GZKs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.2213152cd.0","@material/shape":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.2213152cd.0_1578504143078_0.9567502748567347","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/card","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e69940c01fb333cae30056b331f168e588b78016","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5750f7169.0.tgz","fileCount":11,"integrity":"sha512-rLtxXuiu3k8Ra4GCl8/t63MvgOholVJatRZYko6MCvjw2VeF6jdW6fv3mMA+wVCriL/Gsg+rrSZgFNi/aRAJzA==","signatures":[{"sig":"MEQCIHnM0ySB7yB/mV9g5OTXruFJZI0TKE4ebjSxTp9bzVtjAiBSotKzK4CBoJ8RoLhM7iMlU2oAclgmXUKHqAxLLil9zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfyCRA9TVsSAnZWagAAG5wP/2bbP/9OEIS9qoV+Nig4\nlORSrjd0gfi5zZC2zZrmpha8XfcBrbNpQQ1wYbkIuZHoewCfyMEY7veX/Mjz\njrSHGHKCmR2yuQx1De9/bHylpGBa3rfHu0TIBzEdSfVdsuT2XBvdK5ECDyB/\nTK1s+p0J9tJWCvQ4KH6XVB6BZNeKx/3fC8C5xHajX+DqICyhcbgtNt75oCMp\noJoS/lyWr3e4hFfIduxmbi4LgHIknGVR4yjYUBiky8q/49FfUB6UHPSUeFho\nX1f3ejE6lxoaJGWhF5Vk6teuReE0AT9K9W+Nhgdd4N36ZMObSHWlVq19Dsm7\n2DwDOJErPPJnRoWZywVu0Bs28FjY0DnxN6oZDTKyZSkI8LAWuijoeatHrVvu\nWG42zZGNRrh8K4xJQwUBmQy64ItMK2s+LRuue4LzT+m7duiGuJfD+fTTgpJ/\nXC5HwhuEx6A95L6dsKo9l3G456vELdT0dyukld0pfzS+7fRTs3XO43uPOfnu\nS8fDYBfb1C9nj+SJx0F74SDdOuMGv/kDVK7XzOnh96hWuvWzviBRa4QDRFrJ\nmelp1ooyO2WPMSrSyMrPmCNjACICt9cLcP8iEidzmGulTQ+KuUvj/biDTLlF\nS2Tp5nAbg1LdpF1KvTXydxrpTn+arjzi7UHiM9juLuMVUQE4VKnFYjg1+54G\nB3cI\r\n=mGMQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5750f7169.0","@material/shape":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5750f7169.0_1578506226198_0.052489719612015096","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/card","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f3d74fb7716b5e57399b7920de756067a33715b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.f7abc7a43.0.tgz","fileCount":11,"integrity":"sha512-JCIZ1goL4MLgw5L172FkMTC0Vyr5OfqLNNjlCdUyp3lHOzFdqd22V70SFbRPkZu8/O5ypZpNald+b1+W2FY5ng==","signatures":[{"sig":"MEQCIEpxXXuvU8Mmoa3xuK7A7d0oToRWLzP1npouh4dILyW0AiA9Liayk+IHrfls+g6B9tZI4zmMrhMqm1U2WYe03BAw8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8wCRA9TVsSAnZWagAAc+oP/im6mC6gBfXbN5ShjruH\nfsbfsci51sOdjjKliUTeb+nQwvJcRl1HjhxU21IzGSVAqttdsyca7b6ZpfPz\nUoe/QvE0KKjifFb6v9We0VeiDdPuxm3q1j09SYPOhpbltACxQI6CidgRvjpD\n5zj59lQpsrX90ghApgHiLe1zf5ElW2rpc/BX/0kKkP9zFQpPB10Rw7lynfXd\nRnL4ga/tQsyB9C/Cm1K8WG+HWWShKFODURrOYyPTsbjHFkBScED1kjxBtf0K\nsN84oa60Q/s8xAhU/yThpEqa0WTQPEaS9D65TZxadBpaHkAfuDZfikPt+1Xf\nSKe1GJ+Eg54iQ3VSLZRBr+b+/2eWtCOZ4nROkUJRBFYGo0y785EUCE83SKtV\nvk0alV09h59IwzbhYrBDV9IKCHwCld1yRU+FWpFFxAmS8yeSzd4sapTu8JFy\n11IDoUzuMyEU7Uk62ELUNhkzayJsbQid2HWXMddiWt0cJL2cW3+KieN+QjVm\n8/gmp8cXUKgmJONHQWuYK7SYa2dsBCp1sdti9pf8p/gKQbGNo4SAzic6Z3ay\nk1Naj4G5owXMp/RMpknxIcTJa9lAGioqzxbnJKYA+2AQ1SmJa3vC7benzSIc\nmWZ7NIJyiMVUnMXCtabhvh8P2L2sYhctsCxq2N9CImeAlehHlF8JZSc3Tl2l\n8MAh\r\n=XYix\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/shape":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.f7abc7a43.0_1578508079969_0.742755311265626","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/card","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f52b2d4ea987abfe4f55f1f0d88ffce8b9f2372","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.bf7b4a061.0.tgz","fileCount":11,"integrity":"sha512-2zX9094RMvUm5qbZ7mDsnxZzCxTEPwoqmq5NQhCf7TQAtOAHDbX52NOWcmadBBA4JudoPVXYn4b6XVy0CHxTKg==","signatures":[{"sig":"MEUCIDfqQqKCdOOB7WXMHaaiiz9UNSrIbsN037xpdOIlQ6HsAiEAldRMiUTe9WY5eCsAoXwRP3Q2rGGvJW4wAa8RxUqdnLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJlCRA9TVsSAnZWagAAOOsP/j1vmjxgOq2qyN98g8Er\nDUQcHiUEygOpnivZzJ7FqqBBzEocUmYZte+AX4cGu1AoTKAEOXUr6Dp4Lyo5\nCnFFFNzAmpndhbOQ/8LrxJShbe+ysbAXoK6pR3th66VCMhfPLnHZ6U/c7owF\nw0qwY6q3pWtE3gw+5io3P5CeAovGaHD9sa1u4AlfVGFM2gLDQCo/Q1huq0ar\npDom0Bx/gBKpgQUKHcZE2fPXY4hciykjZtOnmWwmAv+VGWB44EC/K7mseKCT\nE3EssA+QywXhoWtiEPgxV+sCucsDSl1cfwAZSvc2oCtzdcoYwTiILBGqoX9Y\nO6DGz2+p6ZLwBZikuhVy4/vNHUvCF1WcYQULUPqQjXOnsif8oc53yeOwNkz3\nwhuwZ+ZZ2SohbWn9mrmwPKj0NdbP/RFSV8IXm5mVg3202ZFIJNBzsFFOnHZD\nJAlD0v6CozNy9ZQzV5quRJC06lv1zhgcBPx+PLR+V50YV/h0gU29nSgwduNp\ndv5CoIB2ysnbbH8Lp9QcAZ1cWQEKjAVr7DhQtFdXjwIfqyPW9thYf/JiEyw+\nJjvRgtCUn/CndiX91De73deyKGp6yT+SQj4QBPZWsX650+cVWmz8dxmeweZ+\nzkTo3ceqXf+gfKRUXa9Ke6p3ZBfj6DdaeCwCw2St7BgxeXRas+Vtzs6jKeD/\nvY4R\r\n=vmpt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/shape":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.bf7b4a061.0_1578508901160_0.7534566301466621","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/card","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8647369e211a0a99b110972007dec02ce68fafef","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.784fa7903.0.tgz","fileCount":11,"integrity":"sha512-7slV7WE3nVpqlIp+zf/A05EH7t5fAJ5sdfA1WkCB9o80dGn+LSvwbUOKRD/rtbSLQOds2He2c9Dk4MJIx5MrXA==","signatures":[{"sig":"MEYCIQCpH841XTQSerwctU0V5QzwEDs2vkxPd5/ux8Inhm4chwIhAOpLhTrxswAf0GQbS/hwR1Ei7H+C3CZM1wI1HoO21Fqx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiklCRA9TVsSAnZWagAA/MIP/1sECHEFuIF9wefQCk6T\n3T/ZZ2x34T8ezruPhoYMPykDsToOa23c/y6IHOU3k5x/1XaY6J7UQUG+cMLM\nJPDYd6ceqwzqrhp6sXoCg9z19fWWml2YyMqpGIqcl9WiCzKLwvQjv18TMKO5\n3hStNIcaf/oBAmIJY1+Y2DF9QYToXZsvjPu6zJ3p6B5ZlN50VamSerj4+RH9\n1YU1ahEYP+++A9cKhopvjO9INBUD5mIjWNgo0rFl/df8PTeLLHEaAQ0nZRQM\nKK0+8+zyfPsD05ndnOgmZ5mP7qx9Y4Xj9eJZrzD+kGI8jO6tjlphhQwt+o1F\nJAKln6dalOU2t9YbpL++dDqWlB2WKS9mIrgkjk4y36mTG/9Q7Fpt/iqEIhks\nOpyrINqBZmDOd+MB9oDhAyGZCspdatoRBitBnn1oVGZ4VzJGrBYJ5n0MmGpw\nqKVk4nJ9Ms8/5O5jdjcTvbnGgGV7omi/y8YFtRfDO8BbsNsW21pQyTv7NnWC\n4+bdZegtv+5dvdfj867qPMoARMiE1dKx5pQDyQp3rVlr+ZSi6rWGI9t3RQSg\nvX5A4+NJ4IzjxKZ+Lh60uTwCG5hk6EERpN0sTRS5gIgqsvrn+4yn9XWOywua\nPikMu6QJLAh0oWcplLRpYM2JLSfaSaxUg6tOANuTL9ASKx+Zf/WzG7sVisMh\n6WGw\r\n=rYE1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.784fa7903.0","@material/shape":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.784fa7903.0_1578510628919_0.8585178547649266","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/card","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c876b8d2b3a8e4d1d37595faa9d92185aa7f192","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.823c050ba.0.tgz","fileCount":11,"integrity":"sha512-y9b1tThzI9y3gp6XyLGbr2kTmiWnzehLMydU0qBn9JQofeTS1VksWmtyo0eAZQZE6zY3OgUTDWtHxjp2v2vUqg==","signatures":[{"sig":"MEQCIFTM55CNYo8meF0Thmv1rPj0mwrvlJsPjRZtCRdc+ncqAiAo1D23syX7BmHCZps5MPODUbRmaLDq1EZW9xt9NIFfug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdRCRA9TVsSAnZWagAAtvgP/3IXCod8UVx4f7xrq99L\nAvvmj+JhqsnSwTULDSJOI5diDbDytiRF5D9BuaNccK9HNXASkXPhWVBhN4fS\nd/EOd1A53umbf6QA+5DpTbMqCIcR6S1M5xFPQ34GHYh3Nk3xpfmYC3CaRfWQ\nayvyN/e1DLJmv8R6n0bfzjHpeDzPLjT0LnTK1dj5Zp0mf9ua08TgX7UcUx6X\nUQazIA89Mr/XLeG6DvVsftdz0JTWSkHlHDDrJs4eK3EoDKCwujNOEsXnLImg\nvFr0qF7kRimxnJk+QsWUO+Ab32+w2qiSdhGYJsWPBUjFtu+AXJgMVpC+4T1a\nvTX1/wmEHLCkFY5nHLdZozqi4gTx0O0t8KkYo8xCplIXy02ZsaeekW0lhhL7\nbF+HHD2eahe+AqD71b2blo21ggRuKDCS+hbFEutTL8RBGNkbaDVONn5og3H7\n6yo35MVVTgkoLw7MdBgQ0BUXkL+Ai+wUapfoY6ymVyBCyipPVjafMOz2ilyC\njlY7gVQiIEJRpY7B8MC1vLTq9wD1OYvwQhNT2v5ZgqaWLsYrnjNiFz9SX5TB\n3D8ug6Rvv3jI91k+1K11bw/r3EiqgzycZuUvVw0CtkvIZhyHivuSmhJBpadj\nnDhlbKudgVmS4e48DlHbL8GbXJRV8fgVyo3wrlQ+OE06RlMjRygmGPCvpzf6\nIC90\r\n=LdF0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.823c050ba.0","@material/shape":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.823c050ba.0_1578514256644_0.6175603543283283","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/card","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64ea26c4ccb7d329c10d8b43527b3b199cc1f88","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.70c708dee.0.tgz","fileCount":11,"integrity":"sha512-DztZ4Pfeow+oM35doVx8dEEX1/DHUtLlzURIvXh4JJvQZ2NfG+vahrIM0X+hyU8YdnSmnq6f2CUjYU+4wIOaYA==","signatures":[{"sig":"MEUCIQDvCAdNmCsYocskWASkv3PVfcY/iVeu0jlXO86Zs9XRUAIgF3HblzSe9j5PL1TcIYoma/NBPLKPXQN7yhpmwWuWll4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjoECRA9TVsSAnZWagAAUzEP/3EhJXj6flYFiLPBh/6P\na3o/LMbZsJ8XqKI7gwTO4e8ubONsJ6F3SdSaXTUfeoghuOvLkDoxDOoR0RKt\nZeFQrsMtz8rbSggELrqaT5lVwPSDnjzjp2de+bCkOj7Fb/5+XzVXxfE3TXe7\nE1Ns8nDXXX9iw4gOcYK5PITI4ZKrQ/QNFyqkzLCgeU5Pl9r5DUnaScq3aOl+\naKObVW1KQYXYMJg7VJTQ03alG/TiiYF9qou5kQO0YIFLK4inGibjy6txpsHl\njBpim2PNf7B2Gc+i0NWBW23kX/C0Q+DrF/h8aO6G9MZhuXJJwxSOMoHakAV/\n+0HYqa5X9xWWHXfx1gC5TM8PBHM7jZ9DEA1gJ0u1UOQeittYIhfx64EYVAfL\nkGj/BjQlkbX0KMI0wami/3stypxTTDmNJxAj/AnVxrZnmiHuTQlMqOV5VWDi\n/aOzKW2jHscHXbKTHHoelEzo+CxnN+CtKBn5WkF+gyyyJ320kgSR9/+GZquQ\nmpTCcH2lC1tH03P9zuOpeMRHoTsxFlBn9G+U9AdMmNozuh8HSwG6aXgiawWT\n9O8f5TX5YYJnJzP6CjQ6B/8w/u5IWCZpgwJtWRXSRIXbwO458AR4O/4IcpYI\nnmMeesYthKToycif1WTyDY0AAca2P3R5MEGObSbBd8jkhi6ZnDCKHSuwBrNh\nsRPw\r\n=QVa1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.70c708dee.0","@material/shape":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.70c708dee.0_1578514948493_0.5270735776345195","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/card","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ea37da341f0b0796070b8504daf088926d3e412","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":11,"integrity":"sha512-J2ui8cAOUXfEDAvLHuey8HiR+W/bheo6aWqTqvvkCQ7OH2d2yvZbSK9b4OgqYasuO5YvHGJzIU8Vai9544xfGw==","signatures":[{"sig":"MEUCIQCuO5RNYpBD1k/CwP3Gxt8vIr35m36Avj0xI7VUItV7uAIgJyowgsyG/d965t9vhY2aTM4bLEIdCKlYkr34GCwc5sk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzZCRA9TVsSAnZWagAAcCsQAJPlwZDTMgz+9IsgwHn+\nZBXhi2zZMw+zPBF34LX97LXzqN9Fi2FaSzmykcLdzvPeLbwulALFa6V9nkt/\n8QXOo0EEJGGldyZcpxN+IEzFgTruJrTtc7uCALVsDh55jj4cDaqeUA4mVuVD\nl/Gh7zeFmHMBNEaYFaaFIIth666qZXuwQsuLjQJ2+4rqWFgvc9JtVquJd81k\nKohapPUIbIo1FKFmXJCo6JjlZy/Ap+Vlphss+KZqHiZWugeCjJAiJIv7CF4j\n41h7mZ4d9JUxEIEX/XaOcmRAuDRAIa+mfzz4erqOJjRJwexdQ4hfHnoSmYx9\ncBFjFj0ZYXOfS1lwRa8rMUtq8Dydzro4TpOtD+yEVc2ErtkmC9kdIp4auUA1\n2O5rUMJjRdMDxTFdiCRr0d59NeqyyhE6ft+qy/ZtAswTUBVH/ITjhSWhSnfN\n5jI2lnb97Hn9y///V1KjgYmMa2ZoY4IqqdPLMB+moLeNLKqJeu4oLGhRkSsE\nxtIYW5hxIMGOcEXbC8JOgKB4geu54XFFcNfVSO5HvMXV5HbBpEiO6xnLgtox\nZYgNNKFa7h13FukA6N2k9iTTi7YUGZ9MLqMvU/JK5/QSZOxbiI+CGb25kY/q\ncFLA+oNLOYeaj4ltgZolN9ELDxO9iWx9EEh6YVRJcURLcAQZN4qiAHOLd+6N\ngEgf\r\n=srPD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/shape":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5ed9d13d0.0_1578519769335_0.455469946862886","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/card","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aa45bacf892fc6529e8b6459da7ffc9e4453767","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.4819cc7e5.0.tgz","fileCount":11,"integrity":"sha512-Yy0Ltw+lccvY07jaRcv7FjQaOSOvjLd9t9huG/RpfvJT6N/ItSb8OitG7/l2Aiuyh4tcnHRGVcyFzGRx660xNw==","signatures":[{"sig":"MEQCIGjGOqk5s1NiAWximfmDqqBS4TKU5kcrP8Dv0mIIwIRyAiBepKKFE+k4EZz4SwEOKkqbAzKLdpvEpdKWjp+UJMOC1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCCCRA9TVsSAnZWagAAg78P/0K/oAKYUvJqbU/SHvcu\nVkt64Lh/PEzsyV76pSuDEXelz3eTbGPnBGscXMvnT3Jk2OLvmBpGTfL1kt47\nEi5KJ/8R79iFmkBf64tLm8Oq5SB8A+U8dkk6mshQGnx3pjeJtW/DWIO1XRhr\n1dQp7NPMYsVRM6lbI+jMidDVN0xlJXCroO5snBagL76ZPltzXiv5Rp3+Qu+t\nkxxi2KNVGAtB02Gs+ePOKd0tE9wzlhGuhd1D4KNc0uXd/GlfrT1sIh1++0br\nTpE9vV5/kCx0LRvRPD2J099fB8iVYCD95Y1FkUGR3Whmjk3CC/IrF4Zb38A8\nLqK667FzI01PfSHBCkD8+d6mr9SjqHno7xR3PiPrRn2Wm5/kz5JMzZx2k0i+\nKPf00AWAGZdGYUXkSIRgQxwZGTdHzOEvihaMhaKvDyG2UBe/7S717YR0rk9R\nWYN8JpRz6+pXtnrA1pCZ7K7HdtWIlqU3PkP5jeauZCL4uV3SAxHWmjTXwsH2\nBs1tJm2x0dZYR7ky9/uqTeZB/mQhz5FKjKa8Ppk9lv1qWtlykBVaI0J3FCuc\nHuXK8fXifX09RnyqB+L2Fi/zIIVVqh63eFOIZWqDMr/MaHN+qcAJjB5hkReK\n6HKj4+UyntadCDUu/acndSQQgvEZ7t0WFMDfsrdHGDjdKw5dlDnMf7/6EOTJ\ngNOK\r\n=dJOi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/shape":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.4819cc7e5.0_1578520706303_0.00044050049701849225","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/card","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f0dcbbf9e7ee8d0c81a9f1b6ee49301424cb289","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":11,"integrity":"sha512-NBOPLkFAkEjANi55LPCAkG8ij/yVOcAl3N4XpGt0fwXsmgTjzG9A4y19XnCDnbC7FLdZUrpeeGnBt14RmnOUqw==","signatures":[{"sig":"MEUCIEQ64rICDMuCSaPUG9b3vXmHohNHA5OGt2vMxFZUGOZDAiEApaO/PmPUtyCiHPmJL6PFWsA3mxJApUYjW3f1QI3oTrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlS4CRA9TVsSAnZWagAAwDgP/jD9YmJI9c42YQ2Pslsk\nVESisWCkxRicOGLPj35pxVxeDa9prRU3tuT3cOsUmNj6cBAR4iOXEAzHL6Mq\nnhqrjZa8kQxkF5sliykVsOIAzwYzt7rKqupqaszi5i9uiGTDxQGWU6t4zLkF\ndnsB0CQRfmzUpFgT8mPS+2PzFk7MGIBpAcxKddY9B0MB4A6ICwQ16iwEhZEb\nexCAjTkgNckoT2hhx0NSV567vnNhkxFAZMrgPjlvX/ak5QN8eJHxdGx8Vo/L\nhoLhwLgnFb5m6gmQpU4qzyj0V9e+HboqlNnH6zOe2FoQwLhpVilIcBwsZdza\ntQtF8MjrfqZxlFbZedZ5rbkroVOhQWSWA2G08pA6FQbLBoYVkTqrauNqZiWk\nh5aOYeND9v/+AYhiAHrBN+Q0mgmYhZtqOkICkii3Aoza4PfzcAjN1fFWWmrR\nZ1nCFQu87ICULFsCK4MF6jSBkbnQ7mW5x5vp8AFb81CflCG+bH9CJ62FOVwe\nDFm9LQpUSFzOUph1qKRchNM5fjHiJCHpKwZ+x/tHPRjy/gOsFlD+lg+UeC23\npW4lzaWPTGybFEt4DzWGukXRV03f7sf4puuMYG984wsrKLMT3HBfX7QtEp1e\n9QViBV1lpqXkgr0KXISCUidoRq/f8O1v4XI4o2vq2qNGHgCUxfSHN9tMyGfe\nv4in\r\n=9pxb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/shape":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.fe3ffd2c3.0_1578521783579_0.8105246909783201","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/card","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d375dec4b972844a3913d3274f2f7a82ca843359","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c0e850090.0.tgz","fileCount":11,"integrity":"sha512-5Uk8kXPXxHsiVq6ytT0ujojL32KuVT/oMgewiFUBx/7fYaDnAs98Xv8gA3chZLTUjwb5x7Cb0kpMZJIu7Gtbzg==","signatures":[{"sig":"MEQCIElLzukgD8gjFuxPgS+NEPnXir51E4yVg6+F1J9T7VgOAiA+zXrEgPZ1HIlqu8I4SoBeY4g4TQo8jzmtodBhRGsa5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZZCRA9TVsSAnZWagAAnG8P/R9Fgbg0zMlOBYJe3Mfh\nBOAcXknATcWu7tfieFEIqUIfx4qXVPfWZFTpPCiCeRRjK6HY0wDFNleJbAjJ\nbV+W/CQitJodn9ann7x5QRZzambJUKDJnq89ffpynkLna65xG3ymdapwFSZB\no59ZGwXbLDyGM7BNksQgjH7SoUSJPht0PQupuJEgpGOF12hJCDNBdUP2yz/z\na2DjlsIx/YkuKuXfJYn+K/jx4eHAON+zisck+FBjLep+fdwpGYIeE1KBdWBL\nmsg5L7NS0cylaZk7LybNgVDkkQ9t4MQchRzeqFtKDD2CyKDGzkaDuAtYSclI\noMqkdyDnD5o2kpi3pB2YGXMKwYik5PyuT7KLg+EImiAdIGveZQ8Vcxy/2hBX\ng/eGWaY0AEl0MKjD+8NZxj/fgBU50IQZ1hSLMOFBQ0yo9A3dLLKs7VBUnzk/\nJtR4FSf31TUoIwJJSRv8s2JEcxuQKQeZgqNQ9BwN2v56QerjtSbl2UD5St4R\nRnpEG5vz9dLcqUT54PwBrYItbGJzVR3FXK2Lm9fQMJSf17XLBBcXdQQMkUbL\nt7l3MG0VbqyANiOVqdQiVylDTLzcijD4OSBJeMz8Zt3lMBnQXKf6OqRMLx5N\n3chrAl8VFy00xjyzVRO75GT8ZlWaJ6SicZn9PpPHmas9zgC5ozMgOrLrzZIC\nEb+Q\r\n=5ZlN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.c0e850090.0","@material/shape":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c0e850090.0_1578522201114_0.21066104862403723","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/card","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c4b8206041d54b03ea725dd7f5da37a5c67b01","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.615f86f38.0.tgz","fileCount":11,"integrity":"sha512-4LA8IToxRsEgrdhC7QXKFU5xNlG36xM/dRV+vWkM8pBX6v82VKo/oCRbYDYDrXDgT4PQyHz9obmajqhDTKTYGQ==","signatures":[{"sig":"MEYCIQC5I9iV+F0rTyNaZmS0IgY2uYJjJ4xMIO/ZT7akTJPPiwIhAOaFQHD1cnhiu36A1jTPheCVxIxmaF0hYgVNbiqi6oBd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpcCRA9TVsSAnZWagAAnvoP/joxv8AHFFRk5HYlUHHY\nTsE57qQm/5XYbyCegoD19g71t7LG+Hf8DmgYOqW7l/9XkOPkL7eLqHeM/0ln\nCDjkVttUCU+yffQw1bMtIROi7534hWnz1X1LRF+t8hrtEY+t9vzQb5z+Q0f5\nMH91gf3NNb53EftB2giUI7R2iixEC0tHiR0+gA/4GoGxROIXJ5cd6vL4MXst\n+N8A77IT9J/qfKILN/Uohh5juoNSCbomJJIZGBDEWFzOPSWy13OxwNjUwEY6\nLhGvcJQYGoTyVxpRFnGimkVehepVcARint+3Tz/zG/iwHXiqIcbX52DyrNib\nAOlj7HAierR8W7PADPJiYmeOBpwEh/OY/w819eDV8mXKwo3zj4u3h3zrjshe\n+s20fmvdIPDG85IX0jR+oXwvt9hQcVjkuhd0S3fyWClkT4lAME7qlGqw2QKK\nz9K3cyC2YkkFhr/SiSwPfE6zYd7rl5QeD06C2DgxOWhzmJ4vXpbjVnTR6huZ\nt3P5DpqsxKJN5ioDaDSOlMbNo83b5RyWD45UCmpilhJr8xSQ87RGInaWQkpN\nsI50q4eTr5keteTAxth9PleYg922z7TlAaJEEitVPAsXQ1GjvdR8BvobcY6a\nHCuCBAFZKHbjvb3Nl86laYwDI5fgGzOZRbA5ULmuHGLXmPxPDc0BoyyCmTyc\nmQyE\r\n=GI1L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.615f86f38.0","@material/shape":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.615f86f38.0_1578523227455_0.2244803288765096","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/card","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d88acaba73396a4105084a92b174ab84434619c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.1eb032637.0.tgz","fileCount":11,"integrity":"sha512-MUdKnUuKReXaEk7JU7U9seSia6hnWkDAjR1gNOSVeFk2E6ULNXRpjoprusvcc8XqfUgjtqAy4vzO5fOkoWu3vQ==","signatures":[{"sig":"MEUCIQDlQUXiQtrvKeHprWGTI4/CXDlttHdS3nk4j32vxDjEWAIgA4KGbHOK4QzkUXcJ6UwrKOLmKZo0DZS3WEAVUOPP1J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl75CRA9TVsSAnZWagAALQ0P/RbN3xV1K/u25JGDppxE\n0T06W7wuziAXvhId8hKxA8tmXVoXogPhS4aK6/N7bQUqdL8AgkaGsZ87XYYW\nBa96/PeHiRIuOb/91dFTv6lN8T//uq3gyGjSRcJEHPt89ayW1bfQMr8CYMAn\nZlsEMwLYMEKFDm8XKeHoJ+AnuCX1w28JZhxKNw4bVx3dWxbnY6YarhUh5QKl\nfVdkhXq9ttng/FD7ikc6XI+fs4ZInyPO1Ivxq5hoOwvWSDJQ+oYJoOsgCqZJ\nZ2uhFMCwbGt6mlHNNdyiJROeudHIW40lKYBiif7zPQB3mXuenoYBhNJP8IHM\npwqHJMpH5EnimMzT5NRzFZaJ8QZtgmHAnTKidsWNhgNIqWiHnR5uOSxIkZzF\nBIgZDovzt0T8why5IqKPX/u9qLDtHrLv6FXQa2ZOrDUXgO8mBL2V35uNZPRf\nush/tbVVBxb0NJizPh6Q3FR4LbMUciUC2yi8XvcxTxKLHjv6iz6lzfqLcG7y\nmd/w6d1NR0FdZqlxX8tZhU+O/ZMsA++btFttXSEoOMAmXZGtH+hp6IfJY59S\n2v5zsXNWkkfLkSJ5GW2YldIiRoD9P4nu+F1Ihj/uUNHIWiQwDhzMfPjFFTKT\nLYPOlxLm9u8bo0zfP8Vw12RkhVCmhjAoGpsi/ulWwnVYEsd+AvDwqH71hgLC\nCj2l\r\n=jJK7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.1eb032637.0","@material/shape":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.1eb032637.0_1578524408361_0.537038656394599","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/card","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9d55aa266cf39030ef868ae175dba9bf2f07807","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":11,"integrity":"sha512-kC0/1eQk0kOcjQsbT5GDSOG1Hn//0s7rRp/jH99rAbg/kZFfJ511hOWrLgyQcS1ybWCvPRi2Fheznefehjw/jQ==","signatures":[{"sig":"MEQCIHRROIsVmgw6nfNv1G5aJOareW4b/ARuKM5EfV6a4HkkAiB0Jf+cruaN1KXnkOJI1yrOeYROJDKd6yYo1vZcp3QFig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8vCRA9TVsSAnZWagAAFW0P/i1ScOM9gKScYPL93YZ6\njX8nlHxb4BWi+7Ofr3Nk8NfZtUnoNGk9vCzA4/88JpNuHB0kFTx0PpD7oNx7\nQEXs3zGxlBUsxH3OiX+vVEUflSvhIK3QTQiwaWEqwIvneXcUFL1wOxZGhGCf\n3zOD2eNZ56sAxil1c8J/kwWJS15kKZ6BN7raTJkMS6BjF6Hd52kGBima1jcN\ncKMkJfLSVOY3EFziGS3tPDj7fn5rEBU2un21U1UNvtkkJswoDV2p50BleedV\n1p9kW1ziQs5xLJMOhUe+IDNU6gc+N9gPuD14OAeZjtvAQwtlqCw66w2x94s6\nODPNWnqvoHB1q/XZwJg2U2tYwwmynqNUNfyASUpwSASTu7hmGZ329f6mtOGA\nFeo1yH0OKPtYcXjjqiRVKihjmlk2xz6/OF33bVZgkan1+Xgb2HIJTniYgPXO\nDc9eTgA/NiFdE87Wlnwhv3Y01mM7EMI/VBCtO2HZt56+9MbqNy85WWiiqMkF\nzh7XiNx30GL1Zh9py5VsSpS70iAlMmn7Tzn69cMo7hsWdR3GNLpnMbHX142J\nsowDmS4qyzSPBg4FqKmsjoyZGk9Vz0diAby6UuU2MvC/cu/3egQ/0i5BiHz7\n/cNJOYnJbf2mTEs1sXHFV9pAXszVqq6zbQSjwpfHfr+jff/Y9lb104I9tf+t\nTr7n\r\n=RggW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/shape":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5bc5ebfea.0_1578524462785_0.22461216640520854","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/card","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b390a9f5f5415ab878df719973d10046ef87488a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.1112b8def.0.tgz","fileCount":11,"integrity":"sha512-m5ntCZD2MipvE60nDatwROKwBVk/iyZddEcsPPMbJOjEJnX+85+9z+1WezbljLipG4r/ojYe1S3kqYGuew7x4g==","signatures":[{"sig":"MEYCIQD3th02D37n2jB3K4uUIy1qVjuJkd1DXcOm+gQOkYGY4gIhAPgGckIXW3tYiE5Yl9u6Ry9Y1oYlFdK7L0+cBMmroAIG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TUCRA9TVsSAnZWagAA9z4QAJRZwHZ5CaN0psDCMNcn\nhNZ+KPb1inYfRVIqmyhyeoU63VIgI1Omxk4kgnIwqgI/XZhgSjhMPbGnHRwD\nsWP+hzcKkuMmG6b2G8ApUHXp23ihm8ZSJAPqBmLL9+UQ7lp6Gx0cl2sVwc2o\nWE26Q+KU1Kc85e+nvWLnKoFTHPd28ooM5YCrRHfpQhteDm9FKRMYWdCmMH36\nCVRiCrvKrnqxGmIkUp1ZIjvsDLNomvGPBIUSs4X9GoUxKHaDGwtukWyk/nEj\nwQyRAuSH2eRB3IE3nEJxGtasw4C3UhsoE7embRvFuHQicnJa+dAjbEeb7Mxg\nL2Ebzu5l52jTp/JnlPpm81heqd/9ImZSQ1TJp+Wq62Y0ER9BCCcW2kZvzvAy\nK2PvABhfhL81xMlT5yVJMfocS97LIzkByjIl4c9xCaErrSX0ggK6EKvO0Ry0\n0NtkbwbNTztpkjWFw2tuiRHgyCfBLHQNQv59cAj2pJ4fuC5WHrZUgBx1CcuA\nfQLdWjKIM/ZwaPPjUGIhQdPetELGE35vNydfg/4PegCIyq/1Lq2sCEyKLbo6\nuIaMSa0KJWD9hD+LsJ/Aq2+fkEdVuNENpn21tdr+tKVpjEFY6iII2J1o15HA\n/XR4nPW+E4hf45YiH7y4uScjvWig1x6cadBzz7Gn83V90gsKgaBrUqJPu1d6\nNlux\r\n=ZCVR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.1112b8def.0","@material/shape":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.1112b8def.0_1578607827674_0.7153925793667129","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/card","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20a4203d1cdea3499d9a3a96430240a553c3c4e4","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.aab102017.0.tgz","fileCount":11,"integrity":"sha512-DS6YIbzAYtZDvvaUd7j/S3mNNW8uS9PCU7fV1/jmeRnd1nZ/UjI9se34bhYLoJXLyAyyJg81Q1L0N8do4iwLxg==","signatures":[{"sig":"MEQCIF7vdIog0tIiX277f7NrlwiHH9DTAEZSfShYUQRfiFtuAiB09lA/KNUjCAtZOgRthOyqUj78tZcSgFx4ynMLgbhh6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FvCRA9TVsSAnZWagAA4r0QAIFGSzPVfb8L42oWnXpU\nLLTny5Td1zEHf4tUoKyAX7iJZD/0H135/CCS282/+DCUWroZdhM6u6R/cBA8\n5uKTKVtXutdPeo+HEu8i4UrqbbcguU8YH60TKUSiVMHQVHTpPuvOXBmRl6dZ\nmjnPJqPfuPOWyUSgAlKzwmegxHub/R8E7cn1A4ze1vPdpvQ5rBo+Tnt1CBYp\nrovs0OS+f+6OEaB4SsnXEXuU+PVnYnie0sBbY6K3VTu/GFFU3SaWY4qbQ+5I\nE3ozjC1DZaT5RhRJT6ASkId22iTz+tqbZjOe/F66xM/GZ6F56qYYc3h7ygtv\n66mtX6sBUN1zFGPMiIi2CVgL1S9xKcY1W8tLmAsX/z6q4kqYW2cO1+sSvYC4\nPU57jchcscW7x3/Zo0z0Ut3KKp2UchwM+g/Gmd0zWAZrU2Xn1NlcSd/ftlcy\n9AQ30Qg85yZU5aJVLkXdnK/8pTIh22nEM+RiQqWFg0mG4WXmjDzWR8ObuBuS\notE5MmkjXjH+rCvBXJbM4AJ1cdBLUkD7Ywro1E3Zwn/Xfw9gEY30Ba8T8Wit\nnCRissjv08Wib8FZnHGdEAOuxMpzWcXkjr1o8E5hTvH2QspdWWJeiWo0iS5Y\nquPgq8ljojCWXBqqA5V+dI9hqe/f/bD35Gaq5lik110xee5nXmvhxIcDM3ST\npfJW\r\n=s172\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.aab102017.0","@material/shape":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.aab102017.0_1578615150925_0.8999670094921701","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/card","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999797f880236f95ca9d8a5d2e9a026b81d58ef1","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.426913342.0.tgz","fileCount":11,"integrity":"sha512-BnS6uO4HV9h+Xcm9+h9hsxKX38D8X4YkgGZAFQwTnb7JGmgXByAcpyVL2zOFHMbc/RQj6DmkKDEtDs+fOoYmgg==","signatures":[{"sig":"MEUCID+BDDTXOxLZNGBl0W9bWCZ5b55peTQFeFqCFy+Kld+oAiEAjlskrMS3cULpr1Fz+w6Jsn5qHNSBjQGbxkwuQzTGdWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9b2CRA9TVsSAnZWagAAsboP/0y/PGinK86tSexDu/8f\ngvtrJmqxy0h/yLmdF3NlbAN3R3jirvbXIzC9SRC1eFEZtJWlKnypiQ+uydJq\nPK0VTPEbODemVC0dv3dVSx6Cghx48EJ0szmJvSYztArzxDi1ZWHWUhtdCpHP\nkvqgbfGU0EPY5gslrL1kKCligNg1oqGdAmopOxiOGgAXy14/rkaO5G1/Z+KV\ntPZyiU8ms8BPJiaYIA7IknFJwC5EXbC7QGIitrpX8vmNrk6KUl7tUw2d1xD9\ncx4alVQgNsNUbxz2NPKOpYIEAln5hrO8gtiEJUQNKgn3QYflH3n5E3QkTGSH\nXNOvnm4G5x8hwkiW08M+pgpq2yrgKyOWBQC3/D+nMOhqpD5V5Y9rJA2GG5Ai\nd/5uOt5rr02sUIw3XaYXWdou2GaYlkP6O7Ki+qhcEhjsM7jNBWmL3dPBZ/uL\nrtpLq627WQt3nB7z/MeGpyWBX362bN4bw3t5+gTnZkblZOXolViot5jOmbld\nVT7qxVEZRRq5jGg1/NydeS11FJ6MFKymLcvlwXcjrV5+Urg/uisB/w29c2bB\nREZGc2txzCyjZ/4P40zx5JqVFXSPKIBb7dDJL61H8rdNjbxnaKnvCVACP/0c\nwiwIqnjLthEU/W1wTgtpYMRTsXHYhoy2mjlC804aXQF5r8yqmjX54kjnA6bW\n95sz\r\n=lVyS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.426913342.0","@material/shape":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.426913342.0_1578620661902_0.8239767195505314","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/card","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bd63d994c9c7007a4b3a3d5f776003e1aacca2a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d4ea9a706.0.tgz","fileCount":11,"integrity":"sha512-IQadUxlmaiA9nU+kTzeB6Vo/Abx9uHJ02oyNYGWMN2ZDpgD/rRXAJwDNqoQRVluuFTTH+5EwoL7+MRWpETotZA==","signatures":[{"sig":"MEUCIQD/vW4vEGmBjIfuSwrxmTxYJxrlvzAvJAHgLZKz08uuKwIgO8PDthNdllkeGPgOJ49T01X6VZtr4T4YVpsEvMEGvHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLONCRA9TVsSAnZWagAATOMQAJerYFXM86WIJcS2rIG2\nOKg6cZaHTAxCZgn3ZV+c/6ptQMi47s17szZ1aXiQTXcjTRqsL7XhMaW6bDOM\nIfZidDF+VglxYpEEyNF7iHSsvSWsZ18XCxNvtdkuoiAO5m8ZOxPDrFxTU1Hr\nh+DhQ3HJtw+asvjcJOgMiV4Nj/tGqOzqABh3zYZVE4U/tOGc8yH2eT0bm/B/\nnLegcqVxFPuDPHAhlfan7MbLxDPMiSFfFGq7qFMc5r/d53w+DlsNCiOGl04W\nIUYqFWxSTn/gZDmJVF66zhD7zXlWkrYCkMeXLSEaWcMPLI4jytn9faJq90bp\nStj8Vqej1bj2z453kicXEvOgJgMImZ929FHQWB9ojohUOhZudi0+9XK2lP3n\nXeO4uvEo6bQjakW1Tr5DBKPVbJh75fqp4ut2YFmUwEE9r79bPUSrBJH3rmhv\nH7Rn1yJG22Ld/JV6z0hVR45uMDnZJw09UAbaWPb16J5z57AQuhX2W+C5mEHb\n8Va7iSEMhvpR+oGVFH8G02QWjVw+E9qILDU25qQn17iA7AOQo3wy5WMI9Uo/\nzK2e3L4c7DpsWdJLNievXNBac2CNuKvNu2r0QhBk10G/NQZHzLE2voEIi5eG\nz9Ic/BMuE8+3AfbmADm/e3H8YAJ4jhoCFauBepJWrK54yK/vCbmL6iK+rBU2\n+bnh\r\n=8WTW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/shape":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d4ea9a706.0_1578677133134_0.6269906256789011","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/card","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"432c6562b2a53e88b13b55f456c711a3628e611c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7d4ee2996.0.tgz","fileCount":11,"integrity":"sha512-r5h9867p+JXv2Yx1OUnXjJcIbICLjANCtXPNd72M4f5/B2hRoXYUTBfovSxz6BGYZpygoOkyYLkYRz/Xceglog==","signatures":[{"sig":"MEYCIQCprd7pVC/+Rp/r3sbdfGS0YKVRrhBzYRC7Ufcc/agqdQIhAKaGzvZLnmfKvaWpQbpir9GtY1oiraEH2jltwt0JysX0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrxCRA9TVsSAnZWagAAle0P/0PZ9jvI08Gg2Gp6POjy\nH/ilriggN9ie9pBEPqLLTggompX4FIevtHALT3rJR015nzEbuWPnm7FvwgDp\nSnoM5+2ZeMoiuXtVWQFs/wG2/Jzk4pR7z1lwcDl8eagSy3KKJD/Kx6A+lAvh\n8H6D4OYldiOBL7h19jw5lWIbPGO76LsWo2kfHSd8VJhHEqQZCghu1yytON1Q\nuDYhun22oY/z2Rfal0DDd5132sB/jSZ4iw4qJXqFMXBR55EKWM2PBj09LE+2\n5VHuq6GLmLKCIa2A83uLIERg+E9Grnr1C43ryaxz/drYkqieMbsBkdg0NTzI\nYHTEQWiqFEjBBmRUX7zbXH88DuA5xF03D2arEMilKEbNyTsbbdOmjJydVepX\nng2ZPVDt/SC5ZhRNslprRjtc4NFieluhiPZEbu8pL6zYOgbAvF0RJlKlA2wq\nSafwAo5X5zekaoHjFht5PPZLzVc03ee1e61dPRXqyioRmC20fcrt83oh2N1x\nBCmA2z3hwpsx3EV4qR97qKMlLaDWv3592MW+scCPXqmVGlKacQWpbQnmt1Wr\nJC42X8iQDnOl4fhfmx9rzHz5/EmXDplmcErDO1pFrn6SW1v9Iq2MTxq0oM4i\nat/i92Quu6nVH1tX7cbw2C2P6pZujC7Evaio8tmBpy5b99ByVvJv2aSbA7rv\n7TlV\r\n=+2BG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/shape":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7d4ee2996.0_1578679024749_0.31376856503394657","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/card","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78d309e416283891b3c9244439e11523e252da90","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.981ec9b6f.0.tgz","fileCount":11,"integrity":"sha512-MK3DlQIfCPtd70q43LNUBEHsL7iPz9PFVjAtgJVJrn4jE+E533hzdYzRmFK8mKPaUgFx1lhQF71Yr2pfn63B7Q==","signatures":[{"sig":"MEYCIQCkCo9QB3mobEmb1U4ZBuAin8S8oAK5Sro7i+T6WZG3DwIhALIpqaMU9+2aFXc7xA9lpj1t3c6H8L4QF2aqbTvKVPiv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNAKCRA9TVsSAnZWagAAzHkQAIDphrz/k2mag4s5rmdM\nwtcRPtaPDgNIwDVAKMK9P6EzRVmpqyBHQmYVrPJDRbOsnj0/1xn35Z1Nfqzi\nRApakd2SFdQEImCMAEqwY1AQYNlQu9+QuB1knTTaWjWqBkWic5uE8sKb5R0w\n3agw+HWrfdLG8q2xRgh8d8pC/H4VXN6f/7LF1H8TVpQ6YOVxATmcRjtohO8g\nkJ+6HKZHJtT7cEMPWjceQTAb/TRPm0FgEnVKh/Xbk6+2fUaUmtmrm7jz+2T3\n7XcZ7b7ewNw+8QjUwz7+Rjhece5/IFyNm9A6XDHwxOSgyFASGTdU8IDEQ8+i\nIbAVIs+lOu0xUOQnn5R9oXxr3D6QOcRbaoXxL1B6eh8LB47MDfXSfyWlFU9y\nH9pMXt3B5qT4ZS9Cyi1GBQDyO5AetPwR8OxEu4aWZUxqWGteLgQn6AeiMK/z\napP9lxx179F62mMa+loc7Yb0k6XhtR3mwMKCzHob72X0sWII1xfFa08bWHpe\nN2ksyCo79Ce91D5O5QDRI5Z0YpVl7LNV2A9idoysbT9E9zXixfRZ57xTeQSU\nUFh0ko2GMcn+Vw7Bf1K7BBt1BrZwjVHK1uyKWw6V04U2eqQ3kECC7DrxmAak\nmWPaBgaFZ1688tQv18ifIN0SyIplj4mGwFJIkoyNN3K3wM1YCzFBpeiBGD2P\nRDQj\r\n=Wxdu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/shape":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.981ec9b6f.0_1578684426103_0.6162670165877153","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/card","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eab960f0a9780b98c7867d42c8a8279e3c352f91","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.737da83fc.0.tgz","fileCount":11,"integrity":"sha512-r8RFtzJMgX5t3PKg5L/tYZ5fcFTqRJ5NFgSXTrgxHW/OhgJ22ZIG1QQ4CEUMeAXxRgYZLwjYaaNUYYT4rr5TYw==","signatures":[{"sig":"MEUCIBBdBZNS1ATHIb+Q5r91/bUn5CKwxdaeDmQPQVVcJyanAiEAw7U15VqF6c9xWf3ysPuO4OvzSvxtAi4iOJQYYhspBEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpECRA9TVsSAnZWagAAIPUP/3XPc4RbgYoa7hDNQbz7\nbz5iX4/N7hACKgkLBjLl6ZA1CxUjs5UMLLeHf11qq/bFXPc1yz33CG7h1U2I\nRRPNoJzxDm3Gw8nXGzVJzD+hRCWa0wko9s8ipPZ78xj81dBLGFp+MUQHqFn2\nxAtpoe35mn1bU8pSVQw3FkKa92ZCMXeWEiDy21Kx7qQATftyqXrXz+5hjp7Q\nbJ4FS8Y4vdhmlQM2ADBFveKOl2rOAIBk4CkA4CtCh6J1M4HVbxumIOWaWKB8\nvJ5N6Z6I99usvB31a1o00uPJzAdtZEURux7gGpmgOwMH02IcqloGWHfbVN/C\nEmSy2PnRt2l8DfUgDrusIzTf5Vi3HvRFGh8T0YtP1u0j7RYuPeg4VIXFz/3a\nFRMi9j7nIlOKBr8a+norg3wYoj62pK3IYVzx4brkD8uba2RWq6d5TpC1whnz\nrx82Fjx86mmwG3zicYdWyKJ+TsYVMKc7rJ96UGXRqQAZJqXJaNIexsHfR3Zi\ndFx8DG3BxjmCdxDQg9Nblw0dA6ayZHFUD4fi5jystLI75LbvlusRGPJ/fdxH\ndN7eNDUsnDkV275u7t4OKPL1kbXBKzOwADoSOpbWrk1jVdatzS1UQW+IESdT\nKUSUz5dj9IjyS8XFXdCsOJl/TLXD83VHq1mBPbD6s6zXnRY7xdKN3E6UHnj5\nI5rJ\r\n=k275\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.737da83fc.0","@material/shape":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.737da83fc.0_1578691140230_0.7875945139933427","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/card","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"372272e1b0152eb1f6d3f7340a8bcaa4e7205fd1","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.aca8e6c18.0.tgz","fileCount":11,"integrity":"sha512-vc6FpwBotRBEM65TT/N3kogmmQfhIr2B52d3uOiUxxBG+r+/NE4pCJ3jQcJ4jNk34STf//+S0Hq3/BOX9c3+Wg==","signatures":[{"sig":"MEQCIFDQxeXBbP48+MjvyR7HRvNrQLrp2JjMLzyfmiBoA8AkAiAy1LqawqwYwTVIe390paYy2VWZGIVtCyg31eX5gHx2Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXMCRA9TVsSAnZWagAApiUQAJpaD2X3EQkUjr4g2ubu\na18rgptfviTwDroxVCrynRV2Pv1O+FhC8OaI3t4RMPCCvK+4633f72v28DK3\ns2rKP4yDaEHDBwxib+PVcLogUDAXFqiv+Yrrsg/+DSxSWlAUrilcJhnDaiy4\npZxzLT6jqnPK8yMn+f4LFlbU1w/4yaNlaQ/z4uNFl+PuhZj6VGFEQKv7lfOj\n0WQ7pqY9uWpXivyvaawkdI71+guX15DpOz/bNwwH2hyrPKZKRNjKvZmYoMIs\nnvxPQddF+s6iztubjsZJrDOms69RXjW7fQhAKi2Hn4scOqHYRAkmZ/uAu9I+\nnUGw+xp7KApvKElk8CS8aqTJhC3A46YpPXr3sCLAsn3nY52H/ytIi9wB/1ou\n9knMNgMaKR1Mav7abd7yCHn6mwFGPA1kXlrvo7BQu/g4ugKE667Yq1N4W6Uv\nhcg+/Jr/JKTstovaad9AX81V/c9DmXpnMIFjINu0NPfZUm5Qi1tFMukpmSI1\negtGRrCc74Rh40MRRMXuz5pFz5YavGeA3lsji43go1rQe4g3d9JKNx37lzAa\nI680Qb/Z38atCbkSzUDSHZfJ4XPQ27SqgbppjI1XvvTj60SP4AEgYfpxwbzC\nJFHocCz6gg4nLYSOfh0jT9ehlUj/zfTth1E3FcIFsxLcsVeifYUZgOgalDMF\nRmt3\r\n=v4yd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/shape":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.aca8e6c18.0_1578943947808_0.9807878219873261","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/card","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f63b6f8f248c960584610a8ef7d705bbae296a0","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c38d84e21.0.tgz","fileCount":11,"integrity":"sha512-V7tgv3ocO7qqKLHpTn0ndzDXLM8KvjbATlFjvwvJJn/uL1PpjW8Wqw5Ro3UgCIXVOBSFqJIDGkzT5NIP356lYA==","signatures":[{"sig":"MEMCIH0PzbanxH6iQH2lfSiditYw/mJLkrQaSYIGjFo2m3x/Ah98NU2tIfysr9y8XsX4kKTng9LIBlLVQ+ZUqa5IW7Ga","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuYCRA9TVsSAnZWagAAYBIP/jLC4gvbpR81XPryMMUh\nVTT64OHlf2C/UpxtETw90oueapTM5lr1cMFFAWKbd6Zr69uStIgJMiNOeBbn\n3crzZEN9Sp4z2cm1GIUe6fwvTZA+ClnhDN/1OMqROv8XZinDolKc4ovKipjH\n8Rv2NqpdXYNaC88IKkVXBR3Njz2HaI/GFa7Nz9Zzjanx1QTNHD0uRPsj/l3T\nwEuabJWdl8Uaj4sWFMa74XQYKtn9INwVKFqF/zzihdZyTEy1qCNTqoEyHFYU\nvMFO+fz6t9klt34hQzAGvEZYzmR8bXVozmXcfI+kJkQ1mPHa4gQXuJQQrSNk\nNegcAlggDD0A4PyjS4yewImTJ1ynwNtNgq9uFiuTsW8dAm6iVLAOzTnNN/SJ\n2CKOKFWUfzVWsZXjpXINKdMfG674ImdRn3drvvnvliU18sW4J5ezTJ03nAIv\n7svOtmkt2fnyNmZQLhMMk2GbtunxZSh2N618E1nlI/su+8UcAdrYchNPjD4h\nJO+2CuSgTk3l/7ZzOvVDesSlV+E3QNNw+4fjb67tK3fhfBNQmzZ12c86Zfgp\neGKgFWTV+Mg05XwmKGGhnSwc+dm2M6U9yjSJxVkUQ3iAtvV8TXqkABpn3LRb\nIRJXIZPCr9HS8BHme5azVDUxtDJTx5ZNB3C4dJhtJo3m+5N3Cs1LUc2+L0pr\nNaNo\r\n=vHLa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.c38d84e21.0","@material/shape":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c38d84e21.0_1578953624196_0.4641504467906832","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/card","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea4bf9d8704d445f49b715f009eeb57ee32b49d2","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a4db5fbad.0.tgz","fileCount":11,"integrity":"sha512-zNj8n7yUupV/YrovkhsFIakAiwlVq70cZqxX30B0Isv7WYtVAXT79xpsR/r9SFHg9yhNKsYbIeLG/eK8256yug==","signatures":[{"sig":"MEUCIQCBdyTizpwugVpUl+ALVbOjQVQymTGwJGLse0F5/rXrSwIgDjId0glTdU69lZhBJMoPCWWouxkwN0ovQHaDA1jt/OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":150060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRECRA9TVsSAnZWagAAugkQAJLRPfsYSJUt8VzQnTdA\n24WjbfosB1ohJ4l/CVE25Bo55Vp1uepjK3+F5MBIhCE2R1XkZkLM7hnXsU0d\nUXcL6DyoCHVz6idHep4QfAYgKdfI871XYbBmohTPbTdXbUpI/uZfwudGDVBd\nFBh3pWdw6pwZot/oN33x/ovomRYdSOa0PiimAHYIUuWnqUhwmljSaSe8MRxf\nkUlf00gmWbqntnfDGXk+quN1++tlbgPNqJ5FN/vdRwcnLdy2Y4FkJRG9ptMP\nf4QPY9NCSdW2g+bmJUq7StFuqij7au2sTlmTHdF5uVvRidYck56xjemYO0RL\n4YwXMHty/b05COXxW76eXfT6lE3pjl6tWHcQZmK3ZlmyZo7z+ZYC/0w5ci91\nldKjvij6h0hJVa+tp3bFdSaG7N3VWh7dS68AnxvQE6EhTZ4RxYiHrVKbLe95\neIup7lV0YDKP6W6YfWzREM1HOKHa4oInirvbkj/ogjZ+77HDlTnSWO9CEeet\nM/Rr3fpBV4WV6prn70EFuMRkg5NoaTogrIKndcEZxWE6ljqyzvKbmOLW5EEx\nljuRfNL06OBdf+5D0mzcJOEop7actJsgxVeuznXb/gz0seDgH+eIx9CYVTdy\njI08T/tkfLf9LwlkhJfG4zZmeVP6VIJPzozLdUGyN8FtcB/Uaajmcf5uC127\nLQdr\r\n=Uvs+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/shape":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a4db5fbad.0_1578968131837_0.641561670144654","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/card","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f2948bddf28129009c2538fba62b487b5c2f255","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.faa9af310.0.tgz","fileCount":14,"integrity":"sha512-4Fga6VtIFk/rpEkyHcgjkOVYv5t8Z8pWzUDa5G89LMFNCs48xMhgR1MT3wk/oykbgFUybtnKfbkTOMAVx8Vbbg==","signatures":[{"sig":"MEYCIQD2n2hBxyheDTvSMo8lVCzmlw2hXR1q2dDuCTx22ZI58QIhAPSL65pmbZmxWXSd9t9jd1KA9P7VTyrtcz674q2iBSIq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHtCRA9TVsSAnZWagAAcAoP/1QioFX1PJY8QCPYbF+6\nJ7cvPVLruIdzkpxerANg1exqXrEQems2gcWcgJF5SSPzf7AYxNgh8lBg8YDW\n69avIphdvhT9dhZw8vFdaStzK66XSoB/S+glafhB+GCwBbe7QWSTOM0TCm/v\nXH1qvO3DnP0FrgdjgLHIOcujMdQuSGd8OPrVuNHePsaKziCEGU4LI3uvH9tY\nVsgCuxxi/K/sRU/ms7aUtvEyHU5GVrSTg4AmbaTf4LuMslCnmQTac/xbXG/Q\nNkvqZchqPSqrkzXAWtuQ+f5ve2hJki64P5KndaNxzHMt6B2/ueC9RrzCK5Jk\nSvOFNiRvR/GIE6aSsMYXjWXQwA2qWkPIYnf7QG5k4LEsM3/m+WlJMcgq0BvN\nrZTf9vDNB4iIwvZZuSi+p4dWiqeObqV1w9vVLb/LBDxzAPp7YOd56JTnvQXM\nKm2MfjzZy7bCEovSVJCL9Uz0JHEP4yV2pzdIfeNUJKE4PsuNBLUKJD5X6Geu\n4bmI3VrveFO8+vrRf9keTxOpfsXHNqriwCVAEWVdNzuRtpVXuyHKnrAFaykS\nt1NhkA+QJW2nRf2Zb1VtOVGhXqdFD56RFBdb680mTfhwrdmqsjmwwoQMEtoH\n/F2+3qb+muy13DOWNhxzGppa+XuETxI7HJAG0yKMzzvWJosq0GR1eo4rZqk1\n1SNx\r\n=Cxxh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.faa9af310.0","@material/shape":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.faa9af310.0_1579020780961_0.025512621307585137","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/card","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49f98603e60ac0990337f91fb4096f4cef7557a2","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.60354c577.0.tgz","fileCount":14,"integrity":"sha512-kURcEEowVK6YxQHhyFd+WSk6PGHEU0botQh613nTipZzdaJ9In/DEEQG3cKsB0QuBy+S+7RjrqglbvgnJe91cw==","signatures":[{"sig":"MEUCIQCxrrirhwwqLYhojEKoQuba4qd2kz+XsWOG5kcOB9dH3wIgdFuc22Y8dBUQaTT2y93m9dmeNoxDqumpP1KUKwDWliA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSvCRA9TVsSAnZWagAAuzcP/0dU+WvtGHR/EN9FMcqz\nSgef0mu0X3pGFUwzy6yD2LygSrLskMQTLZbvEGwqKW8EIxsAR63YPgqaLnBB\nvbPzJt9ym2d+57qLtvRnvOoIm9KYPRKWL/BVJ+3GYvKlfLMIwjRj9dAAwjCo\nFlyr8Btbf/Yz+2zzXdH4w7C6VxNza8uC16clMnYqOfx4fvDqc5ikAVeHWPXj\njSRe1cbrcRbsgF3bzxAIJWwmlgp3B0680T2QaetXQnOCjvtxCXnUmlEbkFCH\nFkbxOOIZecrwsWQJL+PBrHHfmp9TPicpndh5h7t85lXoVwgvv+8+D2QgQMTP\njDKHdWowIH1ZSsI11kyqMqTsFk6r4fdoDXMrQTxDwjNuUG8wfp6sXKysncWD\nncpX9Zi7/1G8HzmHyCXKAs7UK5hfDT5nbTkdh77zjXut1bA55ZqHRcBl8Hp1\nc4R2ycTcoYIwfE1IsQN7v8k1DzhIK6FH+ybfozYUYAKAAXWvfCqvD9yP8z3B\nToL1S8nZYr6kgmXr0FaQalfQ/yCjfQL+xHfAYM1j58SaMzhkVUmfWUm70BdB\ny/DE6hdYodv64XulFuId5p2sExmxhhnFkrv5i8bK3HmEF1JXCgSbo5Ru3V7+\nsdlHH29Ti8rN46uPuvY4m30CU+eVbF5LJgmyri4oQepGOt8OjLmtDOSCixGF\ny0o0\r\n=A4Yo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.60354c577.0","@material/shape":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.60354c577.0_1579041967209_0.1757833996792013","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/card","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"563dc6c45241c2e220b85cf0db7bbdbab4a2ef8e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d07c78daa.0.tgz","fileCount":14,"integrity":"sha512-NZlJpG+9micnI+l3wG4VmnGeui3LuytXrKVNhIUgNOnXYGCbgMLc+fLLWKEvz+GwAWig7Wv9b8UAQqWntEWHOg==","signatures":[{"sig":"MEQCIBJ6drhCQvojx4VL1BQDHMPxvCdKrwEjvKKGuAzUfwBJAiB05Lqq1Y506+i+tLhRgCe1WbGI9gcDSo2CKuJghNNFjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEUCRA9TVsSAnZWagAAfZIP/3aJ1Wx+Eo2dhVW98AQd\nW3/X57e4Wkd6CqY6msRVv6AW+VebYQZnvM8gE+2cTWukw6a1QnkvPqp7qq/f\nwQN8om7ZyZeh7y4YXY6t7m1VfaIib+dqeyMv+JLMYJpS9iEE4QcSYzs5ogyB\nsEwxjkVZYe4Etw7UH8ii326V3M9HI4yMhBtuoyxBPfajKdeodMyWg3DjIXCA\n1dy6XXn5rPHE/Wtx8Lumxubd0HTvDOqe/L6S2aY+X5SzxkONe5xEiBUp2/PQ\npZp+5OnRfu7fK3/Rlrz0ZBTj5wcclgID0nfZ0ZvQeG0c6cbGJxh2RKq8KZq0\npvXh6BENJ5K1m8C2Oxj8CUt6NYI9F3mI4tI44ds0/HFoNw5Quq+QhipxUbAL\nQ2VJ4QDNq5o0K1veZ5TKbGyuOSmX4FKJcpdWPTStBaetpr2lM/keFveNUl7V\n+y3/Gu3UpjTAlwakgT6geMiIN9CbjnoXcJIy2gy02yhNFj9MwP8PIYFdQizD\nH48XcIDbJkZ+ZhHzknAEMs8EyMKIz8rBL07IWGTyqXQ0k4ZZR9PJLFcv5M+p\n+sRBfuMQ+1iNEW3hSptdyVZUhpuuKOLv2hDcDg5pCF5CJf/gvc9Z5S1GTYm+\nYgotzYzzb6FY4Glnr8ZscWJuiYoTAoPcqYxl2uZhYPGjFPku04EpHlyfOqcf\nQLVE\r\n=jJJg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d07c78daa.0","@material/shape":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d07c78daa.0_1579045139852_0.5738993284393195","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/card","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9320bf78581717a08a3213c07f6f81fd48c1d1a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":14,"integrity":"sha512-aPakBfSwr/iQy/AWvDik/jHu1UinvQcQLeAaMODcJiCjEZSms6gxx9rpLCgTsK/Spso5fZ0xNMPL6uV3SY+vuQ==","signatures":[{"sig":"MEQCIEWaNdOoSEyiBTOrdPfmwlwTrdei44MxKyZ3Xd6/En73AiBMKjnLj/br6P3x8EDDQxWb9nm2++1SveGjz232EgeabQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4xCRA9TVsSAnZWagAAAmwP/3LLW4DsCHZ9uklwWnr/\n9cA1i/qpdO/WNLtf6Yn2H1tfuU/LKGQNn8gpyRjhAKOk1KOAfA2jPbmrgbDi\nhSPKDntWksWbdrqO3LTD9/4eCg8mvXQOYnjUcbAL9m3hmtmMeBVQphz4c8p8\nWSueECDGjphR9fDsZ3t/0bFvviwc/Djzak0FEsmYj+bgzbJ/12TzHAF93iXH\ndlGiB2BKdzstdVrcwkP3E8LuUa87igDVOVxlvRXvOO0oNcLaN6M3iSJvrYu6\nSSyZE2IGsc60mj1qJqyxhqPWl3fPP8G4vHuLUZRDW00/dhOs2AeQ+76mZRag\n97SHstJ863TWGaBZPQwXaSV+xXYWeTSX29cJkjz/UzOa4IFsf9jn5OqOEPlK\nALb7hDXz978GiCEfhfn42pFfwYrFFJVc80awalvZzAFOW/4dIzh6FbZmBbTX\nqWa4v5eMjIMlvYpKi+eK3OKuAxBK7pTBJpOEEF6/9hlsDSQKM9h2dsf+L7yI\nOe/XZ1BVsdo/wP/9dmTMvH4TWJ2+dFB9XF+ydwswR4Gfo6Oqyz/xiWCiC4U2\ny/Iy1wK2OHCRJ61dp80i1AQQNZj75woUwZgyROzoLhfMzEBmomqapk7wDPYB\nbSZCBePvGdloywTA2FkQ8bLHdU0he2xJqcdlQgqlGW5ADlo0PxWhhSAhnfwi\nQgn5\r\n=6iIv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/shape":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.8ddd5c6dc.0_1579052592642_0.14275730964189615","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/card","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"481c5bd45e5fff2eda3e1fb9fa0acbef68c86035","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a9511d870.0.tgz","fileCount":14,"integrity":"sha512-pM/S64ec7LWs8VaXInjjmCWYkLbtNjeAqlIsDuKUGOn8t3qzuAd05pgjUJiujDFyRJXOanMrNoO6fl7qNmNL7w==","signatures":[{"sig":"MEYCIQC7IfiugpcXgYq/AH8JX+V1RFVTw3gygAaldeQ4GLecGAIhAInyN4meZMfraFiQudFkK0JDYc0lTPPieYcmNKYf4WhZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OnCRA9TVsSAnZWagAAPagQAIGnuCr32gMAra4hRGHk\nt3zoir6XHf9LhFJeC8kdTANs46y/OnWg2u9aV22V9n+Z1Z4iOII3Wgiu87q6\nEE7rtCqoq0dm7oNHj19rXI0Gy9sf7vx6y0XgZv0I5gqNKLfdpCYAOqsdyn5G\n5TdCNKx0XnpiG0lZfVWId9xsf6uaV4rr/WrXf8rMphLGHpA6DFi9vXyWz8YR\nlb8TApUw4JXsT4DOvRgOvPYdDIhds2cH8G5yWx2iUOHr4pxGw/jMBEfLLTjo\n2IhL4+hr+RPddFYaEt3Ty8936giBcJ1m1ig3H/1NmWV32ZnF9NTQsu0MadLd\nPbnXNAdZSF9UzwbRYorENtLNBaMGsjFPN3TJ4aABtXF7Nm7GmWJvGTnxTCD+\nP6yWsgbv59VtFDDXUW/pRrIAGJiQRDSHqVPsQ9tDBiF3HWnKkDwJCY67Xace\nP0b+7OphcsUjrPnXuGu6fwXuXZ1OdV2LhSipEttxwmyxluhFA2tBGBKPkNUE\ntzDNxyK7OvQH1YQRmm37ITE4A2y2kjU5/8P0kulD2nHPi4TAsrDtsJQdQVyN\nLQxWdiznvylr2I818kn8vxr5vn75bq/3bur3qLuYP9Nh7Q3sg3C2fftiwAy/\nu7C/HCzYj9G2swiygnFTGwbgIj0xNJT5dsdlXAFnpGq+QEcd7TtrSqlMiIWr\nZAq2\r\n=rS0K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a9511d870.0","@material/shape":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a9511d870.0_1579115430849_0.09781495921909933","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/card","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de6dcf0ebe19941f88fb7b871f31067d44590186","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7c8583c4c.0.tgz","fileCount":14,"integrity":"sha512-L4BjTiivclmmbmAOcKsSZm66cUyMrFZ4m4yq9BxNA6180j/dhJhh/4h5JL4iT2papJUvsU959SKm/vewTLC46w==","signatures":[{"sig":"MEUCIQCb8vV0v3djBRSnG5tI6ebACQumvj2UaXT2fs2sCg6n5AIgSbgltSWoYav0mG6zjT36/LI4FeBhfnPUCm3WFH7h3jQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5auCRA9TVsSAnZWagAADIwP/1NCobXdh4HQ97JJq6vw\nw91ECEpcf5DPr8YEd7M/sUiCu7u0UarNftuKWZBfcMUaDoHSskAjA9rD1yxR\nbuVW6wS9yMZueO81Srg1vj2ovQgSeAvI/vGqTUWtT9SabHiwuflM5M/lIq/v\nQUyQj4TICntTsb18SHS6U59E8z6hcN35re8CBHMiDHi0ZUcrkD9hu0bXk5ab\nporEWdjnWHvgkDuAYkWf00i/uSqREmHIRj+UmNfrlxXw3fI/au6tkKBYvqpm\nB++W7zlJbsUUFObxYwBQTF1fudRrR+EJtI4QSlb5mj6qw2aCxswCHFrHDlio\nzq0VGvUjeZDYFPUAUkvYNfSRSBzPfgygxZ9SRvoyEywnXRuLgbWURnqxIp1s\n4wM/ot9KT1HOYt9q1ijFOifXOdJIPrT6uxGBKN3MtKVMlz3OmRYXC8yEOWB5\nXO3dBbLkNcLR/kWCaGbNjjoYA94yf5fdcbqi28mtevUFmV+HgTfgbu4sh2wx\nuNmLLQa+yWksWVLlEazCksFuRCLP89PO1MN7+oekRqMFH2imKsfvhpFeA2ry\n/CEaJ5AHeBdv3EjjTbPX1ospB4ckK3yat4O2+f/grriyalXA+5M9FFGqih1K\nYnGG/dT+/OoLVPngPq3rsaoEZByN5Z96QKwy+ym5XVlKiH49geHwTZL/oDIi\nAeM5\r\n=ksmI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/shape":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7c8583c4c.0_1579128493774_0.7012186212340761","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/card","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"635627d5e2470404323e4b34535c7f06495870d1","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5d4b82bac.0.tgz","fileCount":14,"integrity":"sha512-agrsfhMPq3q4mpkQu7Ekrnq9XfSbP/rAI0qc79ue3VAW+Udf3BiM2QuZ+eBOYMtU9wSz7PqonLq7StPXdeSuYA==","signatures":[{"sig":"MEUCIHfPmkGsoN7TYGNGqNsNpCjB6uJl0LBP/ygMBZ35TVxXAiEAsbnlYkUKhh/hyLPoGUbUkZat8WyPRF5246xSoEmXl0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5a/CRA9TVsSAnZWagAAyxIP/1v20IhXi9fSYf9XVVxi\nPlOuVUmMkZI/zURc5CD8gVtSUrvwwJcEj9bCtpWc0aILHqbLoF7cCFRRrttH\nYWM0nw3b184HXdWplCVLN0n3vVvX3+sA0izTOBJN79IWWb/2uA0QaHRluM+u\nRGd7zunTLk0nmTKhKU2odqevbDJ82PaGnX4mOfQvsclGXYYeuSMwccOKmfDv\nPixZAZqw/PQrZy5JQroCkve/yyXWhJc723M2CuN50TUoPYw5DsLkbz2CGpOx\nVSwqPNnEboBEAOPFn9wef02g9VO+BmODRypfcPXC+QjGWn7oEviY3RXkBQ5H\n7b+xyqGQkDdlSocqCIjMWOIt4waxFUA/PmqTuTVl5JgU3BBQifstWTa95cAR\nzclEXMRrJ84oH/G9sds56s0jxl8FhE++ScBnl3vfWwgZqloOyTwQzAeTLb4y\nGjHzERRFjihIIeBo6htt/2kuCE59FBJ4UkUfgE1E9ikX3q6s+DiYqCLnhgCg\nSrWK9T2AxsBfSuP7+0DDytjD9JJdTDD1dEK8pTyh3AeGyeFe8Uug2Ti2h7Nm\nuI4P18xFQSx+tNb4txXSllZUqIfng3bP0DeL7Pyyh6y9MN4NFNxmiQSjbjMC\nEU1SwUQwiDItLNWH0bqol3QgZrxHLs20Hvv78dTNmiqPXrmSAE7+ibsJmYCs\nILZK\r\n=+q1u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/shape":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5d4b82bac.0_1579128511263_0.5830949475727114","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/card","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65763f32444d1302c79e652f140f5b337dac9aaa","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.57d0186e4.0.tgz","fileCount":14,"integrity":"sha512-ZKMrzCdZTKT301ePblcKiO9rIRhFxEVPPeQULAWZnlse77nMHBsSqD+zBbUylmdB6MgRDNXHPUmLBBeZ1gDkLA==","signatures":[{"sig":"MEUCIAby7nnTspM6C9clxGvJG+Tcqt4L4AOTp4A61WMy6mU1AiEAgyr1H7MCqcXLMbQVst7AGQ2p+EziHlmPkHreLWMxskQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjGCRA9TVsSAnZWagAAtxsP+wWiKiz+aXFoaDei+X3k\ndmNo4J8QJ+1EMiHd5j3uCnS3ITazPeUEpW6uAAXDKjRsjnZ2rTD0/6wyH2aG\nazMol+OYHl+d9T/L6fdpwXj2OBSfmMWVvhyFnddidu23GbEnTUy3aeqCNUd4\n2qcClkmpm6atvZXFJtvw11rNbUcRJWBUi0sMK1a0Nc2aGmlGQ2Fc03jKgOFY\niENk4mmxW4M4MvpLLq8+/V7YQfXTl8QsAEDAf0nGfemXkiFCjopvdojDXwgZ\n7kJIH/lpx3yar0fPI6a2hkdzSMhEduPbEmEcF6dzjZup+oaEhk9Nowbson1U\nfztSNBvLkTdnohLVma1gWdV3fNHvzkITcncDVNDGsZjcw+46kw20sumZzbYz\ndQQoZzriXmuItkt+V0LbxYapqeKqKud2rhBPL6WXw1ESiixLzGofRtYzGFPJ\nhXxIYF1/EgRXfgph4uuCUeaW7NP3tkSosfEwtra7+obpeXzz2u9ZZNSrdskM\nCEWR8oDRYk1Lo2WnnQyM5bsF+6aLQ8Q1fI40G3DivfGIs31Sqe8S9rauEQAi\nXhczBn7dpbHYTb9bBpXZH1gN1ga18m8g//7OlIkW2geBqS4oDSMGIZZqNzW1\na20tk1tkkRyH1qp4n9EhO6dBFgpB4IGjNdNwmSrHO5BrR7FZ1uo/68PbwjuS\nTm68\r\n=34RF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.57d0186e4.0","@material/shape":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.57d0186e4.0_1579198661886_0.1088852219976657","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/card","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50c45191eb0a5825df65ee9c146fd6cee7a68020","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.071a6ab70.0.tgz","fileCount":14,"integrity":"sha512-k0hWp5LHRVwvbmdzGl6Fo2wxCC+ROd4PCWJKjueOZy5f19OM+vlzElBK1agw+7iGTTWDcE5/g8Sun/C9FX8XjA==","signatures":[{"sig":"MEYCIQDTvrirVIfMWSVUO3+FLWkTdIFD9sM1arnEXDXvOOYhqAIhAMbe8UgIKQoFUu+I+5Z2Wo6kJlDsPnIm0IdJtm+TU3Am","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpFCRA9TVsSAnZWagAA8DQP/074lDnRQDwbrUE1SXMI\nRHNr4v8QrNFwMPzuQlJ2IUr/mBpvjM2ALlTXokH8Erp7bQQttwkv0+1YyQkO\nFAuycH8/lawAGW6GJEdsXciUQ1lHrPq/R1yYzyLlaiAKgygMmjVOtNRFyxXB\nXKZDnH1V/hq5xcxxg49eZ6XNZo2Sv08eksGaXELFEidNOlfyNf9yOJU1gUvo\nqBkIbSQbDUgWcSoKE33QqqnG0931byRSHgJJPCvavw2PDOJy5CFL0txkcJx1\nHe4kHyzsLFQi0SCey87874ORItIzoRTwwLu35ufFPGHE1i/ZJlN5j9RKWEUG\nHLh6I2kakWg2MhFZ3rawshwuHJDKCm6QYAuRyqXrLegp1WWsyrQ0OteZibzu\n4HDW9yOLLv+4ycXwSxsylMCbqqG/EqvD99N85Ogr3ANkE+EnT63mfUfnwK4a\n1eKfQQBK1rRV/I/WBTpEZi9bn/rCvkHStsDWC4HKm2nQ/Vh5n3OvwWGZNTZ5\nJ05p1svBXBegYuGcvrqClzFd4ZCXhgkA24vwSDmP1fXsg0TpjBzjbwRswEtt\nbb/cQimBEOxyv5kTRJm+ABavRZvv2aGRy0cbb8qRNNiccagJes6Q68rxOp9Z\n2Ot1NcpAIsCzdnDBeM/+tL5TUhG0dz2+0ud5ld1YeLDligk0b8QBmip9xFvJ\nMdxE\r\n=oq9Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.071a6ab70.0","@material/shape":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.071a6ab70.0_1579199045149_0.5022963499215392","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/card","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cfe978b26f02a94afc0adda4dee239d7ec39bff","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.22e0cb618.0.tgz","fileCount":14,"integrity":"sha512-0CSmRLfgY9qugBq8H1XpQ4xm5KeidmuSgI9aZTJ88WzC2JwGinvLFND/8zvTzr+eDTO0M5PWY3pMZRRX9PnHOg==","signatures":[{"sig":"MEYCIQD8sxgKmOgZYX5jIIodfSuFQ5iWYZR3eB96d+i0/4jWaAIhANizS3zY34z+tm+sbM1eMYzbRDXViYVw7LlIpWR5H8Pa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+tCRA9TVsSAnZWagAAzZUP/iDoCBKMctZ/eBwQPYpO\npDAupCNwm7zFNUM29VH+veuWimByTqWxqpaOG8zUOPlM4oPw6iTpmkcvZmII\nr3sNGqDvApX1EdsFUpElybup+CfI3DsdQtDlrGDlDg3nrg6ge41dMBDUtLrf\nH5ofW0bd34AIoQjlC1T2qfNWEQRO5APZV5qO4oKhJ4Xrl1j/c5UbwHwSeOFm\nsFVRA18Q/PfRb7nxqU548DpOi6yTtK9/b2DtKOofG66XaCGWShFmbiPZrWri\ndSsFcmCYtGnhya7drJUj/yVMTfzp9oy9S+DLqmTuH85cm6emnvLf2XEzlkdI\n0rgeDiUPLxNGBQ+gyk/b0wAvy2rW20CJH0C233VxDazY2HHHwVOpFsoH7+yh\nweW5VtGk/K1tajuPabannl/b6RHjYyGnDi0315Im1NZhYzriBaR3pZSM2z5f\nDlIWngRFB4aRjTH7+y+YDuBWqWljcp+3g134GskINxn+AaNKJ4DoAOljf7Td\nrM4zysZMTo10oaftoLYmbM6ICpLWSijKhqeBXnJKw01EmOqgVhd4pIgt5RaO\nDJBDiwkhLcYYEfQdbk8WJnOmoMruB9Aa1Vk6/z9Rc4MeUSmXVtuOL66lfuQK\nIrZoJGPKGA57zWu1CyFOit/giMUSl9NnZ2v2Iisx1jKcALUb0QWh0cpuQNl1\n9/YJ\r\n=6P+6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.22e0cb618.0","@material/shape":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.22e0cb618.0_1579200429081_0.32313625928897927","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/card","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f04f913d7869eb81984dfd870da8417cbd3a825c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.f16f15b8f.0.tgz","fileCount":14,"integrity":"sha512-3u8W3igZ31iaLan5+UrC6Kczb6tTggUQCkOCYQlD0fj13H7L6pNDO/kmgLUv+3C2L0GSjlXTMc8hUbF99cj/FA==","signatures":[{"sig":"MEUCIFZL8bi574FQw4us76ZpjuPshqI+aJ3n2QLzM+ARAQeNAiEAipJ3rXxmZgDfmbwAD6WyQGsVtCTV44eHZvmoS2O53y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqxCRA9TVsSAnZWagAAB2wP+wfZHfLD6QP0eTfYM/Em\n97piauwtBbXLVhJMbEROx4qoWGIsH/ULz5358EJdwLq+LnBloJsGSN4s5E7s\nW8uGk8fXbnuWAwPFxRfpLFBnUF1H+iNyz95PG1ht9Ewy5fzDu4+P3UHw+psK\nzEa1B49Y3XFamPxoA6TLuzMh+qt+41/HuObBDzDo34jcvT25b1FQieSjZgvI\njFRsQvDBAgtV8EceFKIUXpF7sWQ6awvCxCS1nvq1QNNHIvjNTXK54Ps8y5lG\nv6xkaWbQu0hh+brR8pBAMN6YyJV6F/aYJ6MruTrrDwQuZ4Am4qDJzKFlCC9D\ncceYZjAonA9+qOdRooTL8fAANWOkxaBmxvegiZBb8tjpw0vqlbClKqoHsI3V\npi7aflRmbTYLgjpHTXUVeX3wG+cqnThNajoWE4SYfHXDDZa5OKaJNFijrb26\nmBAXul2MDLr1ix00Xlx1LL1bOu2k47/FiWh1/Ly3ZhDoZIzp3Mu0QkUn1Z5G\nUU4WIE6IipTu1hs1+cyqMQ9ediDZ7CIhrid4nIteDD689d2g0YEg9iNB25ln\nu2eoXulnYb67GcqZB/QyEHrDU0wJVv4TqVfu0IcpuZWRhLTw+x4H7fGDGcQq\nv3wyGwlFNKRjRxvgl5CAREmHNXINBUpYGr96mZd4/FCqBYRA5ijCuD67+ppL\nNio5\r\n=By9D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/shape":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.f16f15b8f.0_1579219632717_0.7656386662289445","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/card","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d022fbf414e9e54424c3c17fc8997c16604cc11","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":14,"integrity":"sha512-4yD41UI8zcUynAMnlvJjH8D55nlqWRdne/e3bBedRgsSLBx9osT3sYWJdK++Kl+m+490Wd9X178XlYR7XkC/ew==","signatures":[{"sig":"MEYCIQDe0+cd+EHBoccFRiYrJG26tmbxbuDaqwpIElyrSm1YtgIhAKLQfLwVDRBxBHNQCQustQ1HIlIbFQ5EdY6paHX1DEv7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGkCRA9TVsSAnZWagAAUPsP/1oNqT3Ogva5hthGBHA7\na2JUe/V0/AyceXHcvOPMEvjfLhAql8FrzmXcNXLUh2nbfCvMISxYGJffaT9W\nFLFLfHIUTnxjfer1Mssxr3VABF8nZknIA+D1+rv8aDG7hSz+qa/chtS4YgP3\nNMiPnz3OoiPXElhvaNk/CDU2prEfcwkx0absSsEG6xjZSpBIWDj9SmYZmtQh\nyXXKk5ja/V0Fhubr7W4jjG3NIe53lvJNwWZb2zsNnZHtFmhU9YXXmpdlh4/w\niqIe8Ts885kdNbkHi6TRp+9Sw+L4HcHcnZx80EAQfW2QyCVY+bNhSSk1u7xo\nfsg529xs/WAtUwsilaybeAa+uY9sD8CCXrv0q9/qJpOtstcrCoxAzKGcTbSP\nTgVzBNT0MUths5iq2MvTDb7/gfZLDs62qJjySBenv991idNsGNs0YFKqi+/F\nGvqBEDUi4EJz2rU82jYf48FOQZNJEqeBcfYKX0q9gW8s0xbAlVMEEwFgATFx\nCjXva2/JgMeXuGOHeLP8irAuZbq1LXM5TDKin35g0rcY0JWAjcbWs5+UYt28\nGmu5Z601eApzcteJEe1Y6gGCP6dlwEfAULbqegzJUAitVnHuw29PcrbMr+hA\nzknYsz2eUiDYwTh4pHj02gop/HTGJEEaotlEf8uzitr/eZptOhy0g9abBfWQ\nJCCJ\r\n=Og6F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/shape":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.aa8e43e9a.0_1579221411785_0.9058744414885118","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/card","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77e4dfa7dd084c532bbd78e012277d133a4eb6c5","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":14,"integrity":"sha512-D4pCKIGn8HN0Gn/EZqm9PyoTdaPz7T7OBqwFx3gDros+IRnGUOEUvTY6FcVPDAxv0dL8w68Z8+PL9LYyrBry3Q==","signatures":[{"sig":"MEUCIQDdt9bNFDf+KnwZZ1KljknB0rj1GHarUDa4pVUPDBQbqQIgDKMASh/+QjpfHQbwDXQmot5iPSDI2xm1/tzdIAa9G5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcsCRA9TVsSAnZWagAAx0QP/1GbSHvjTjYi3+u5In8Z\n8lev7/iPq3ysgGS0mzPewEIrIjpG8eknctornCfL/EwDEZnh4AWuJbK5pS1W\niWDHy0DpuIt6tsAbCsUhkiOWfw7zhccdSykMxDud+Y02EHoPO/NZeFpYeDoV\n0Oz0kZ3K8D/H1pu1oWgHmtjBSMAi+1Yk55you/LZh5yymE+n0G+za3WTMtL3\nvOtpGL6+3rBlg7gFVGLRH+D6pMpGoDsT5X7dQE7l/1fET04dZEU/DD0MlawO\nSur8rDbglHEGp2+KSFISKtqjO1IKECLvSduxAIP9GZ5vGwS16xyI4t6wNKAg\nTiDe1dpo1Trjdc5b5oea4mXyJ4Gz1At4bn/MzHTSMLLpnQTp0TOR5nHV2bXY\neLd1UktqQ29FvbMaa+H5xBgsFqxOMVy56rWjX5aIpm59d7tHP1zSBZW2sR18\nfCtxFVNaNTT82T9nJz7FY+JxpZiVQZ/FJkeajUC6ck5ny/ojXjpvjmPuc7db\nMgWvaDG8wEfKbYLv2jXCIxYOvCDDi4kvhITdLPT2/69045XJTOH74ipYjOAx\nwEej7ZC8MNLUGFTBvrMqJLANZyO6qg52ELotqAJjFZzPzel/b5FELJP0i0EZ\nO8tdfotaD7GX4Sbc8rh6OIsOjoVMF0MecLWxaaYe+DStMds6FY7DLJDgpmNW\nTA56\r\n=PSb2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/shape":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.fe1f3ca07.0_1579222827781_0.48628873565268504","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/card","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67ed9d06091e7475dfa1f4d263e4bde20f2a5b1e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d405af26b.0.tgz","fileCount":14,"integrity":"sha512-8aK4PJQYbfSlLIApxdp079DNlhzcSPQXB6+5KaatXeVfIMx/DueoUQGD/MnQrETVQjYAOmaUAqM6vMGZx7QSiQ==","signatures":[{"sig":"MEYCIQDTMQ6iPRHmQaS68eRVsVHptRDXKmOAH+fLi9QQDRuL8gIhANiWS0GKEgOOmsksdWnK0dXJ6RvA33+vbxiB7rxWV8DJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfo3CRA9TVsSAnZWagAAfHsP/jzZYMaViSj9QHi98nqB\nE+d3LaAWIw1Qgm6Lb/CkYLzJR/y2HnyJyfc0rJfdHVSLkLXLyXpnr3f8lM4Z\nRQ304b1PhHsjhZAt8N39p24JhQKWRxFAzTezjlvsB1MDGd5R3oHrlMFDufTz\n+SXl+7AL+ULY2kbyT6cLZFavKIBOwFKyD26SwRP9M6lwWWpH4ztM+dWdF0Cb\noUfN+IDGx7sQQcIIhns0t0qPRKrOQgyt2sWZCdTjFH49wdCdN57TBmBO5aFG\ngxdckCjSVjLRVcTriEFVum80FXT3l+J58+Uq0NWgDZaquknv/yn28rBvuNnD\nd2BF2Olkve0yjNwLJHX6JWk02p6Zk525EEsZ9bELwvH0+A+7anLy/1P0kiT9\nEHfPYXb8GH6Jsvq6PlgPG0sZBfZtzFj92MaBPpKiZ/KKG1Rptl2x2uqCDhNd\n9EIPy/2YtfhpYx+cGX49bDzQq1pCBgV8cNUCaruoAxV/LVy/nIZFlhTalTNg\n5XQa7XwXwjfmAsI+qGsiYvuM4Ay78Sd7+cUtYH0TsZmx/F2Aqmq+0xuHgTkn\n3ItH0o1o1p9ev1KXvd47thcEPg+V/8iecbtExdKQcTcUEylsVs1iHqJ/9jq6\ncrqa7SZGVeRoG42iNN/Jj6p39PCwt6W/SXvgB28AswQzCyJPX7B13/RvHu+M\n50O+\r\n=Nqzq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d405af26b.0","@material/shape":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d405af26b.0_1579285046720_0.8945495731139921","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/card","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4a0784288fb062f274497f26aa567cb3fa8f473","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.6e857aae2.0.tgz","fileCount":14,"integrity":"sha512-yHQrCwC7lEi2AsJUktDlW/wL9sx5zN/usT0mmUTuv/cHOYMHSKMEtJgRsM5z1GDNc3mS9NWs3ZvttkNfWOZ+Xg==","signatures":[{"sig":"MEUCIQDfFJfeMCgPRi4HPBGVIIm4yZAvsF9h14hoNyHe9S3DpgIgCwh/kFw90DOQ+AgnEYmrz1gijTUEYgkBfgBEPHRaj30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsKCRA9TVsSAnZWagAAhVwP/RCE5/0aJ5GlLeo4LDO5\n1kY6Jeqi7OK7Cr0+5/x7nH5NqV5lHF7vMGNLFPr5NO4bUsZsQNSrwxbVgBRH\nDjlUVCfz8eDTRcjdOntjAQaqfmtpChQEVx9+4E3/qG22C1LRJvCKYfvVBRuM\nzYHl57fkOG4Q7FrXusA3Immt+u258ik797o3XNK3cgURIHEQA79QDGqmlo7A\n5psY7+796ttyrOVRIVPVA1LgK32bu47ghRxQ9XgSuS/8IT23CAaQ7Kn6iZ/k\nJSAQ2Oy4FmWz/zSE0SmOFtyTEgemL5avoIH1KSTheQ4aX/esgikQvOEr8Wmo\noYtAgb+FfnTrfi97WjSYg8NLP4OdD8nFuqzw6q0I35YoDd6GemaKNg9jUsca\nGhlRKPEsZgvFFx8//EYaEcMGg+Y09ycW6XZO+VMPJZUO9ZJdw73T/QNga1WU\nBkquNHH5cp16oqSKA2X1mkjKNTt/RmKwsKIT6vLfTDl1O0txxkr2mUXek54R\nN9KOEcBvu+MiBbhRqLouoFlHZ8sTWUyZLrdML6cjt+Mm8NdZrIwHz+xPOYJI\nd62gHOIzWiL+XAU5bgZ0C+NeU0OzLWOgJsjgaMJsv9Pl3tw2V0/9GETlR1T+\nvtP15LZ+/nCrPyPrr1Us8GlsMwn1dXnRyB3/s4CwwTXJQSYUTZdQZwVtfKFc\nGh1Z\r\n=h1YD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6e857aae2.0","@material/shape":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.6e857aae2.0_1579285257778_0.663802485490995","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/card","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3db774286c2e48d2abc60ae2a183c65ba7ff4e5","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.e2e764f7c.0.tgz","fileCount":14,"integrity":"sha512-/A5i0n06h/hG6TQlfBWuAMYh2dDJEHIwmkLZTKmYO5oLfx+hQ7Bv2vo+JeVEssfNoGENJrP0+rHPsOvxnj5Ajg==","signatures":[{"sig":"MEUCIDtpK14SyUE/pf94YBUxjcVQp9bPZ89Z2pRX1sMZJj+LAiEAhCa3Ltm38ARYTEVj+7WRD1rrloGCW46IX//xcD+CULs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6ZCRA9TVsSAnZWagAA57gP/jvncTNgutoSFznf27k/\nzaybYljkYt8Ifwjmo9mzukQg4YsPohMqCSOUvIVrTGw7SbYgA7gZqiGU+VIf\nmws/9rpD6ndwIvjuL53PBX7/URApHiFNnzlvVJZndeYOhClAVsm6ikzxuQQg\ngml2hBjAUeOCayoWRErZIWXxLwr1K8jnJBZF5zb2JWggpoEuxYMArN9fgK7y\noOgxHw8j4Ka0GiHpkOJsBQiuRoWDENKRdyUgbcIL/6R09NxIM8grP0pk1gFk\n4ZPaMhZ2iAv58YHz2Jyd3Cd6N7ydFTOfaEwFXxUW4TdXI/aeGEeItt3uZQu6\ntCxmFd6NMR9UexD54KyniRpW2Ze1z2xOIHr0pSXuxemE1gMeygg4/vJ+Ss5h\n30IMFworp8FHvMxVxgjhx+kANDIYrs8YIktSz1A50pMPD7VqVYT/mUFreWFf\n+CUH9xRd31BbDs6Y87iVvDDCUGCjOOfX8gObKh4XVHlGwmNlQt6WhCwWMfSW\nGm7qCaC8uOy1uZwbHxO72TUcrz9TLovJeZSVjaaKCfizAaXVWAgy0AAsed14\nOOn1LrxX/zJA7qJ/IkPTOLuLobmyVZCgzUkl9Sibwz8JmD1HHfQzoGlvdc6q\nKyFeP5F50oD97QMW0pMvIeaXqbUH/Cn2JXNyMQWKfV75ko7xiZbSAsu0kC95\nHVuK\r\n=nS8W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/shape":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.e2e764f7c.0_1579286169276_0.9006054185416692","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/card","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb5646c0a1b0c24e30e5be803c75aea3cf815c53","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7ef986a87.0.tgz","fileCount":14,"integrity":"sha512-S4s8HSd8ED6iCSIzljilWWWGDxsjjieRSdjmVjUlOT+5b+tRKzHlYfLDz0Ym1JJQXxLw3JKyBnywJnFg4NiRSQ==","signatures":[{"sig":"MEYCIQCYkKZUEhJA0ASUul7QVQw7yN8zhVVXt0WYaRRJLlVFEAIhAJZJmv2uZirNSE22R8WoLw7gpW9kTvKNmk40Khevj0e4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgt0CRA9TVsSAnZWagAAmrkP+gMkpFjlqQA9Y58jne3P\njvD60wWXyYQPGnKmQQL7q2b1gPjFCe/WMuZdTpZxsZIUQX+pg46+nDdPJYOn\ner4jySZxMVa47CBiJ6TdT/u7I5GivPG/NmhixT0HYpqPKB/APmxBYxeAPcog\n3iS+DjDZXFrn2ZjdEjUtd2F6wNFfcehKA/jtpZ2vPHPPcflv0/a9OAdpfKTS\nGvztHeRdYB2CJUPEsjkjNBWfxZWwwU7QsbwzvWOlPmgsCHf4hp4NSeVLIC6t\nVfijV2AHiIfGpBVmolngmAi92uNqUd/MHP6fH1kdDTUHybkHPpyGamKi6QcI\nn/LEryAFg4buF3au9QdZSNDcB/kq9Z8CIPD2N8mdfVlRmkAwVThvxAcwZXCu\nBtaxZkeC6+OruGX28tO8x/V3TD6nsMfIJaQ2ghqcAu/zYiFQWsfOTHmxRpPn\nbngKH/RrLwnXWHqIHh8Pb4BK+Uwk1w5NhFXqgKuYB31upIZp4s+20qBMfM8n\n3cr9c558CDxL4Zd72KFuMQRHr5kySXD7Yp0KB5nv50FV7gY2LVG4lZKZqL3Z\nAjdE1Jeya5TZiK07JZf3vAyVDUlRe5QDi+Vxlx6vWY6oLA3Q7CNyaseEyJau\njeGMHyVDW6Nehz7Y3WyEtKrswATE3qkLX8OGBkkfGeOrzXKt5G/U4uyOmVLi\niAKD\r\n=O4ie\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7ef986a87.0","@material/shape":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7ef986a87.0_1579289459934_0.07165710286076243","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/card","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed76ad71060d095da4bd10641ffbf7f042b08a08","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.29402e2d4.0.tgz","fileCount":14,"integrity":"sha512-Qn4GMrreCbjc9pyA/tdv0qW4QtOAgPbWnHntI9ssfZAR7lfuLBqjoRhWxinQ69SJSFika/QPVMihkwTXqp07Wg==","signatures":[{"sig":"MEYCIQDeKfqTb6JIDk1W41FZmw0W4k/Or8uyYVnB4lLDJ1qBjwIhAL7JJ+CPeFFHrnxQGER4kBScDlvO9TAHHe1yNGSFu8N9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhueCRA9TVsSAnZWagAAz2QP/0btDTWY0et37ZFvfmW/\nn5NBtiajg++odm+4G7hQqloXoKM6lANXlWS/BLngpnDE+76TDN6j5F1YDhOs\nnJwzxSvku0rBPrRznQmzrqBNHfOxyXwH5uvqQXijBDxsKB2AxdAHUJsfTPEj\nSvK1sTBYtmyKzor5hxRIPLfxZVOr0fVtzqwwgCE/T/eUijHfT0ZC6HZVZso8\nLkssXAOOkYFquO3DENgT/EU95rnuQImYphgXQtNy8IDyv0tEaIC5BpwRBesR\nDus7vb/kS9y+VDQ0O1PUMy27o7hlYoIHMJflAo0DKPCRC/XgqLFv51uPLVz3\nN5YwlMxH/71WmIMQAkla0KgKFHSoDgpuG+3GAORCfEa07rm1xwexBFftNYO1\nUyq/mAhB1nGHRfzfbYPOr40FwsAthWF0ZrdWt2VpT4A23hTccnWGs/1kqgvy\nGZ24p2ZRwK5joyx3XKdV7/NPiuqaqsLwhgxl7Yt39twitoEhimUhmCx2z1GA\nwhYeuv66mlAorn+ne+e4/PTkltjfPVqdvOT3l9nPilKC0V6F9DqJH5dcflAp\njSRGTPmlt6EHEV2EQYY+loZLZq9aFkheg44AZJaBWIzf2eb+MTda/2oAo9o7\nLhMyXb56qbF9fhC9q8ifWTYG9KhIlaRUMDQUk5ZPuxJpZdxZt6IvbAWTJM2a\nRQoZ\r\n=+r5w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.29402e2d4.0","@material/shape":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.29402e2d4.0_1579293598568_0.053884943801009166","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/card","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad77d3ddbebff785124cfe65c596e593d737eca9","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.2b3ec563c.0.tgz","fileCount":14,"integrity":"sha512-bprpUF6g5mV9gQPhaMi6y9rrSTTsNc+zggE2fcdOWM+wT60C/A5bl1gdXvKC4NxebBIF/iEMLFA3AS00OvENSg==","signatures":[{"sig":"MEUCICqlF+pxfEZ3ilxFlSAUyqwpyf1qffQwljEeaBdyvPmXAiEA7rb8AzJ4qFVYv0QwNeAIah8MFuPzchr1fc9RMScCf/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8xCRA9TVsSAnZWagAAOMAP/0wDpUU/pwzLgFkI5sIl\n/fsH5hotNQMoajJO4b5xIM2igEPkGUikIo8nSn/181wlTE9sxjqBYM13fLKZ\nNpyqb77oh1tr1ke1s29osLxDbrCk4JqNsa0foN47UFE8sxWAogyHtbWUgIOf\n9zt1YEf4HBQWugmh5gmXCqSFIoYr2cihbQ7/Va+PzurtaMM96E+r1xb5t6YI\nODm5AEiNowMr5izsuCJHYRZ+sJVGL1KMEGLc8djQv2Uf3uMvPGWD+XHypBKE\nJ8WWpQ30OnGZ6jZSy3mSArbHWnzAeNiLLJcq9yEv5paRDMwN3W1nAflXTd5B\nAwUL7WYN0aCfuMIqhDf67U54i/IcxIDO0b/8KYxp5C47fhn58IrI+IGs0Mt7\n/Xrhen8jtK+4pt7tX2LvVZ0uA5aj35ezyrGKWgfLgZ6rNGIZfF79otqicMVs\njCmmFAdvfDzENq6JV7aH+numcVXebJZqUTPJCKZbkHkEVggAoA4XWK8l6COJ\nnVM/1xUQmwm8SbnSeC1jYOw4MVLRiPGMnQ+PQ+xurJVBrrUYtg5NreseN3rA\nY3lA4eUSErPcz4R6pCyXLkcq/K8AcZTaU7d88VmSoc2bs4KGfhLjeYVnzOLn\nrvP8akN4oyF12kQGYL1jH2PbEGfq6oLyJ6RnvFj97YngAQgn9WW6Ls5vNRtV\no6WO\r\n=dHPs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/shape":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.2b3ec563c.0_1579302705247_0.3061459864489193","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/card","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23111a8b924b14355f82a40e9616143c5dde30bf","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.e8a993677.0.tgz","fileCount":14,"integrity":"sha512-D7mOPdxBv7X2aqDN96qfgJw0VwbEv+tp19QVSnfC9Ot6MA/PrksrZSV/4KF5rFm84fWF2vnzdrU2HJcH/yEItQ==","signatures":[{"sig":"MEUCIQCExof0GPONIhPvZM22qDg/BwIIsvXX3w1uCi3cVRCxugIgC2P80XplToB+zAE7eL3NjoO0fgtXXe0QTF8DDFBML4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyu4CRA9TVsSAnZWagAAAz0P/1dgXX7q9q2/kuHl4w+O\nzvDaFC0XyHFBRgHc7b/tFoFkyxmpO3rkDpnHcb6i8/s8e6u/pkyYS4UubryF\n3bPzs7MzrueRfw6GHDQHrVzsscs6OQociBK8qVEZf71bNNUw3RahcCCPaHmx\n5flVH9ewTYhnjPR4UxDD8QaejhGQoFten6BAVzlrWwRE5yZvmY8BExdJfQO0\n0zr3lb3F0zn6ITYUB/umiFJw7FOrBR3badOkcTXRntEr7LEudQ0aPCaPeeol\nsuW/zhKlJ3pLvdp3axg4Nb36p1YDTElk9reTJvihzbO+4tjg5q4Uii32a4Vo\nZFzxDbnL8dmtC9ti3F/6qlucYGdML5PJ7K7owUBDKj4X3c4U7jrDKlC9cETc\nl8roGAgnGwZxtlg+tm9YUiV6D9VaaBcVmllDl0lreTY3Egysobk5vjiOKV5g\nqHHnnKSLrvfPBQpn32CCQnki2DhbmDa+F/JUtw8muOvK06Bl1Nbp3lx/tZi4\nWRAAA+CRm3ax2cwMPQY5zr5pXm5t0ya1xYwoOrzHuyn4TfYXVU13UT5F29gR\nIzDFLCAe7KUQf7wDGi8TxNc7cnvbePLzjCVPxYC+47HlJQ+Q3uy4IGcOehBu\nWNSWcWP5ElsG5J4/LoCZJwECG01fE3NARVGho9Dijcw4AF+w/1E5rqvgZXUG\nnIv+\r\n=f43G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e8a993677.0","@material/shape":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.e8a993677.0_1579625400232_0.7567530588549458","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/card","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5238ffb91e3abf1c588f7430d437f4020275bf4","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.cd4903304.0.tgz","fileCount":14,"integrity":"sha512-TOlj2OZvdPOd23g+sYB7NYQRX6QtmO/1t2y1aTRa89bOK9Hn7V3PdwzaNE3+KG2rggwyYC3Oioqg44kF1b3ytQ==","signatures":[{"sig":"MEUCIQC/QJLLzw+loXzLgrMKxv9NSUOUeR+W7c4zl/uXM6rxzwIgdtvHPpnyPW4YoGmvx6vI7toXJioLltY+BI0//dkTyto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28cCRA9TVsSAnZWagAAkDoP/0CG4ocZnkbnH+Ro+Yqh\nuK2Jb0Pvh+O80pAWQ1XSRNnJlKoWSLilfRnzewatCmfWiNG3+T7JAg2nKAyB\nv0RGKsRsk3KDDjIc0ufwjnfCPHLm4vXlLrCYcv9Cp51kqk3bkqIKscw3VwNV\nxfidv43bcC1PLJWTiAK5fckMLe3jKT/62yOu/xGFYLL3lcGRH7Txi1jz/CVj\nhpcPHT/Jp0SeJptyqufZoN1jWg75QfYmudHGXCtWrQpxDBV7yD8cY1b5pryq\nO+himN+tAgn0kFXRaStojLo9r96lgKzKTe2ZRanYSvekSnZ4H6M8sxH+S+yM\nGJv+uiNIwHE2GKvbCVV7QUO/IeJFHhHtvb+GucVt2ZQUpWWGTPS8geQGhbGj\nYput7GicI7IIisxx28G+tJNfIzyTfkm0J8AsYbOLFrhLnuDVDTLXHAgETUSJ\npIGs4DPejsYAr9R8eAI1IqjmReExMmEiWzc2Uy1FenUVGm9BaMONcHcjkcGr\nl09AR3MWdeJWk9Jy2kuDne6a2PSFQFx0vE+FQw4KEzKleR13Swf+74c/4eB+\n9NqI8XRCoqAYsa8zt2lRYnwX4Zs745IBxjXlKKkWI1GCOwUkYgaRKLl1PBX2\nD3rVGAkQOvVIRMMQUYBHZuJpVoboUKC85r3us0Yj6vOp4zY5MoH0Voqb7v5G\n4Jro\r\n=ZRDs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.cd4903304.0","@material/shape":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.cd4903304.0_1579642651479_0.12348860550103535","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/card","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed6cd45b9b98061701fb934161530c197c4a584","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7e4b04b25.0.tgz","fileCount":14,"integrity":"sha512-bUWcK+IBkwBTdI0/dSO+JwC0HleMFzAKMZUwOILFUU2q9g119U4zkx5WtqwKXAP2TtYQZVaNQK6XyNKQLVRQIg==","signatures":[{"sig":"MEYCIQDu11xN/6GfUxpR9e2xF+iFKZekwwIgE/TWUrvZX2WhMgIhAOEk9Xqd07Vy2Lmi/RFg5s3UYaV2lGhie44KguORM8c0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39ICRA9TVsSAnZWagAA59cP/2QdaDGO//+ZvUgEZ6oK\nPA1x+l/YptGqRirCPJMlVuSFP21dk5L2NT9DoTwBSudBWLZYDcKw5jXukr0d\n4968czsttCQ0Vgp3VtyHQ4KD4CS9T7eGUd+ZpeEo/eAKZyz+0qthjuUG5NHq\nFCRcF1Qh1nWgwaIaAwUDP4WyWjCazfEbylYnlMQYBKTw4TjlaIa+GZQbtJ+V\nGh8Y2Npt6bfd6X+FNO5fOZAIiaZQq0n2Oa0nX9GtA7W2pwer+iV5oBuEKVu2\nb8YIF+sjvRNmh2Sk3vSog7K+1iZvAnxn0c6ib/qg4xH/rwWwfzxhxQZb+oh6\n3zdC6Cwg/UhublzY5ljOY7jt2q+jtiPuv/S3dqAjH+1zXIECjGxa+I5BPbmz\n53UHL/OwhWUyCVwhPBBWaDCWtt6Ll5KJXnD0XvWgjUu+E8VVXI4msJPBv107\nzuW/4bBdHkwzWxHFaHOB+FbJQpGnlDG7+jJvn13U5V9OE9aPyedz6nRA4WOA\nXfY1NEJFoCttnCuI0ZNMSa7lDjdxoDsJvXON14/xc/Gz9+xwTe7SpyAVZEH5\n1cXtW+mVqM1LM5jCPaVIbEllu4/N7GtvOfQpB19i38+7vdScL7g3tGug9EDz\n9DD9PbVPHFoZ9xzb+KvBJqAB8S3mTvQIMMvh7njJOzpD2JHGPjQBnIuFxcFp\nu+RQ\r\n=KGWL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/shape":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7e4b04b25.0_1579646791656_0.8024192636952081","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/card","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b583e68821a484a7ba21b66cb46b613a97a66112","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ebc296937.0.tgz","fileCount":14,"integrity":"sha512-Vt5LXdqplOP54/X55qo6htYde6Bq2mv4vPK0pgrZAbzdyz+nSvXzIOg6kFMO4iUdjkIDzaL0On42gB5EV+APoQ==","signatures":[{"sig":"MEQCIBnxFAa1NUxDzEpOuCndjltlwWzvccjIxdV3ouw3f5wpAiAp44+mhRkZZIZl9JkSfnSrYnzRrqqqDcdeYPCa2DZfmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40ICRA9TVsSAnZWagAA7wEP/0GS4A1qn+GtdWAK/0xC\nC/gaCyTJY8tEr45Xx+tZ8xHMdsKOk82v1HT0rgdsFnYDtXY3lnofGazS9RsU\n28MHEYRGa5Tx9BKZbIm8r3BjB62s7xhy8FdxaY4ga52J5C13ioN8jbA4Lxgx\nIs7JBUREhSYRXv4K1geCGB7a5yZ2c68Vy0GjfibDK+ppz5K1Y9XQc2awVbOV\n9sZ3UPIq9vUT513cE70bJEwXG1XoEcTkXGtz5KcwR0Es5KOD/glBswjxX91Q\nkbbqBvwLm7iaRhIHGiRENQkuwcC2M3ZNsRocXzEN/CAnf/yTf+a2xeAdOi5X\nRFnPh+fh+jzBNWsPY3VA9IpLU3SJmlqBtSNgCEcZmUrf6+Kt9dPfOFOVkF8Z\njQFyPE2HM0yl1o2q5qfn4g+eWKHcgh3Q4aRPDWdxezZqJPwfmP8w43Akk53m\nnhYaQuCzi/bPe4N7lQJld2L5D+Nzi5Slh1p9OJ1OKSa79GWUy9wa7liE8wzH\nP4KYO/zAp/8KUf/tG3YpyXnUuqUof2HsroSxKxUR7goLEt6EMy5BQQxJDjhF\nFz5GQTtIChos8NTCU2q3trbXsBgMFKPmbBLayAue0i39O0SDgdETP4ukTZfK\nbuKCFK78QiTBkz42kEGNK2w8+p1+duPNwYSysTL1aIgRqhokxWCw06Eivl1x\nN+pT\r\n=Iob8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ebc296937.0","@material/shape":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ebc296937.0_1579650311607_0.4111927746337629","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/card","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"737a1e193fae2b55d3d25d47b6dab4bbf1db5095","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.cf33f113d.0.tgz","fileCount":14,"integrity":"sha512-zu+85vYm3E2V67I+yOV/JAhW2qzooXMGIHyWBO86xmyvIU/O8jYSD5uiupbcCef7hZa7iXMgzFUlQmzGZCL/DA==","signatures":[{"sig":"MEUCIQDg3R/tvQx/0VkmsW/3cc1tN//nc+YMc4nV/BuVant+vwIgDGFkJyIR3zM/2pAh7tanDGEuk1DlrSAXmhVJb2l33T0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PhCRA9TVsSAnZWagAAR3AP/2T1aeZxT38BUD8c63iq\n5oolBdgZdtDXgkQkkZ5NlEYp9bg0tuWPitj4mPAe/lwj8iVU9GWx3Nx5aFHh\nzk9r3KRrOtdWLULBGUuRKWMPDATi8iBo31XeMN+fvcn5PBPM9zNpvYPQBXtD\nZaaF6b8qtIbPUs7BmRJdiWkEq2rH8uDtR6NsFl4GSxQQJCbGz+o5gM2cKx/L\nbdEQdLNkQG38mg1c7tZCuk0czZekekp5Et7vo2RhWhlwpI89LLiiCyIjIu2X\n9KNwNYV+Hywzs+2jUQCMI8v5ubOEfaJ1g97usNDDmJ/iD8jenQvsiWPST2/C\neFuh7xT10ADzk+FMhVBKmBomXnwMWqfao2L/W//U1WZZAsCfkhbPm/6Sf4Av\nTGs+RBbcqNYaVA7odN4ket3en6p1nYLLXuEJbr5SnChRY2sRwCD2KfN2m8Tn\n2Jg52PySnmFZpTw+y2E28KhSA6VntS8Fxb8MkhOWhg1t1n7POwvRxtREPF7p\nz0hgGGY2c8MwoJSYAD37sOsX6aiLQ+6ATizidx5402HfSRiADBj9bC+rd6vj\ne6kGLkbPcSdKSmeMZIgY9FqpPuvfGff70lw9zgxfTmeMDZzwoifDwmvyPIMK\nxNnAwDTULTZegwdo+NMQ/il/1lKH4J/of+YrMej2M0GvAQaw8jmzgOVthXc0\noygj\r\n=Kjc6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.cf33f113d.0","@material/shape":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.cf33f113d.0_1579656161400_0.20796593549842912","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/card","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31c2d02f874d130791aa1ea3d5fe9f07fa4a3d8c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":17,"integrity":"sha512-Ua+frQNHTInR7c0Q6lNDdw+ghUWigeQJ9awsKgotU+ow1Q9YXBY2x9TGTAy3cgpgXkyAn2pqqsopHf72I11Lvw==","signatures":[{"sig":"MEYCIQDUdtZRp69vxe+tmZxyHszoDJn1Fj7ZvL9LZVqwa7MmEAIhAPZEKCToazPw+mnkSWK1xHibNFmpFZ9NSewFKFRyVMFI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6QCRA9TVsSAnZWagAAlxIQAJ03Uo8v1d9gLkhAh/ux\nPVZgwoG4Bm9VrWp/I7mPIOUhHOve01PB/rW2IWXlmYKQvos53ZHR+OKWA4+b\n8x+nTPofpeqRGkzJZC5KlfLmFd7mo5XpS/j910lKots8e2z0FrVqcpBzzd1O\ngWeQyoeI1vn4NH6mSG5WMLr/jTY0xXwfoKWIee/X8s2jIIXIGAA9EEu9PFxe\nYMzyJTqvqWW8oxWdy9WNx/lKjQoz/DFPcU6sjjwQu/QfgHTlKEGmlt2JE+Wf\nzqS4tLbEOBLPjleISKbtwEYW8rVeD9FW1NxOtEWyAO5RInt4/C/g9Xg5jlC9\nDN+drVtlrQ6luKO4lvsrJHLBBFiuzrIq9hTUPJ3XX++4dBrsk0QbcmSBZy5P\nWgRXMmg5pxHmtl8uSL5Km/FV1b/fqOnvE2Wzs91o4L2PVaMt218P7SUMVJo2\nqFhQj2mTxYjuoNgCD3oyt6gc/JNCDDM1qbGCOqE+GcwE+OTzbHtu8sUnu0be\n4LUEku65AI43mwCsphrcL1Z33ysobU3r+QOJ1ROW7cXr3xUSbkSj9pkCEy/8\nTnk/5+9cQ1Ye+Fxi41+/71SWzPf0HCyBkQ+Zd6dUZOys2Y9bLmKAw/92RbyT\n7amqS7eFeKRtPfl5YrhGRw/Lptqe4H8+5/1Ycs1YryqZKj+h6O/fjdQU6W2l\nlOj1\r\n=u6WQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/shape":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.e1d5f1be5.0_1579712144093_0.8245555765202957","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/card","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbd3198be492b917db4317f8734ee06697550ba6","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":17,"integrity":"sha512-36a9YlplrfC6nqFrTBt/l19JIGCaRxI1llmFkr+316OEaKF7pweSxryqoLDf84fn+idK9S1Fsa6u/l4NSl0Pyw==","signatures":[{"sig":"MEUCIQDDMRG5+A592+wu6ibaJUpg/1BuVZWDqMJEUVRVonXR3gIgO4LeQ8LZewLFQQTlAZgz4HGhZzqm/JZYxr1k8fxEORA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0gCRA9TVsSAnZWagAAodwP/3RjyWogREH2tb4+rBWS\nJ1XNAGtp8CCD95qHW3I0kFwlHO2ACVZ0FtUW/xnqPrJ2C4ot16j5p5vR8nZl\nsn3rlqMpZ4Pq1phD6YAwPIaJLBaDLaCAQQWze63yCQwLtdiFuwAoFSyGmJ0z\n1TyFgaHbncCqdjR0fgTDSiBWTNZd8bJ0/ML5QBZ8yhIYYFQy5ScJpAnhal3e\nEnXbVeHnPvAOoZpaNKM1MYe6CgoDsI362yLPN/y2XnGgCGTGE8UzK7ysVdrz\nkVjjxaqvyJjB7fN00lexIIIjn9PuHuMWwm2s963lzJ+iEb6LsW+SraZDv7PS\nht3cWhj0BwAI1VYvZgYXjMgoxgMqBpYAqdoTRHvEH7qOREPamz4saHyf0hmX\nGcbnG0xLMVN5AwVwHAzUe/UBOOFRlOKh1Uqo9BRjrUB1Kp1nztm+H7lBimrl\nSyxw3puGqKFRRRP9uT/eQ1DINb02XSNPwbXryMIXifpCE/BJmOgA5vLnZfib\nZVnxkxbfaVwRyTiTcBgK0BzaI1T1F8XTF8kyr6oOmvg86QdAloJFWz0cztly\n/pFpA4YnR/9IDIupNUL4mc1HobmzcSFTEGh/sbES9AtH9ny1+4qvJD/qO1EV\nQu2Ptn8eCRxdI9fdpdiRSH2egG9PSzlxO/OR2gxRFMDWfPkO9Q8HwBYx+72q\n2xyt\r\n=fz15\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/shape":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.6b6a4ff92.0_1579715871675_0.4233454636667655","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/card","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b563a67d14daff05bf7ee1c3c82e0e9487584cb0","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.6092f71ee.0.tgz","fileCount":16,"integrity":"sha512-LRU5jsXrEx0CIqqIyDjMYXLrp4fHzwYBgKmhL1Whz71tjuJ1dUCn03tKd8ir151iMbG/eWO1zECiuzvTGBqikA==","signatures":[{"sig":"MEQCIF56BtFBe6tRtFnrfkjz3E+BT9wLuhqwq9H2Mboq+c7XAiBP7rPcIWY/6PvObH614TRnI7pXO6/4sTd3cWDqZDH49Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvYCRA9TVsSAnZWagAADj4P/R/yciDD2tTpB49TJTQH\n0Zi+m76Vob23hLvRu4L592E2JSdl1Al0NsVdhOFDOppuOipzVTbK4KJYqcry\nkNMz/m6KWKKm1uoETMzRCX4u9nFV80OFszs7gMAmowBsx2Xcu11E0184PXHT\nrb2cEr8BXNiO+n7j8sdyIKm5EOd5VbU6hqqT0kndj8WBpCQIaGze1rHedIsS\nWkaaZoA16Dh6E0b4Vxei17NauQhCJM2tYrHFuqUih4Y1KfhuxlrOB7+LSAcX\nUL3CbcoF7MWSE3Lo2bAveDFaqGZtrdDc6fh+0qzYNpMeA0+1pJ8oFLLjkWoy\nFkRFZcZBIwMVoePT8GZNgTvbPCS9cp/f4QqZwbUSTevD0kRzJJZuhyll6eKR\nqJK8u4Q3880wx+pFrH5312qMvVyQoCA47Rct4OPxohGRDfBeZ8dbPbzK+i3B\nT27uYxbhHKbGF3/w1ejZ1Z6GdSlHAAV5prmUNLW+NaJp3aUgeDcr/BMgMBCL\nq7ctiYNBF1DYJ4w7GEDWJtWm/amCa1O0TxfANpuG69QRSWlee/sf8r3sFiBG\no0ShstFDuiZJBFYgRTwmmf0+TDhDL7QQG+3pkmz6pkJDy4Y6ZxUouzF74NDD\njXvpm/XegqaQM5VvRzXlICt4Mic+qYKaDdIBUkG3OcHuanHHImTyvrfkhFuD\nSqrG\r\n=BAQd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.6092f71ee.0","@material/shape":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.6092f71ee.0_1579727832154_0.9918132459524713","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/card","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4415cf424761d788f1b2d8fb4dec826d163ec1e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d8d95020f.0.tgz","fileCount":16,"integrity":"sha512-WsJEmDGdEX57dRVaKldiTn+o4QohetxPq8a8eYVrgCVcZHi5bRQz2u5LjeR//kKDq2FbaE9Crp5xM7ytFnpUng==","signatures":[{"sig":"MEUCIQDGhZnMj8UxgeodZh7Qlig6e9nurCZw4jjY8JV2z5nINQIgGOb8iekS8UkDieaaBc30KNc54OjGkXVTqmvmVNEntF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYyCRA9TVsSAnZWagAA7/wQAIv4FngcH7u7i9amCU1r\ncetAXFU+KIE5/GCJa3vsLIX1w+uFJMcDHvNTqPXdnILpy7Jq5NmdEA8yLCYc\nJf79WUDWzB2aO9BFTBYdZzAvkn17UHXRGBSEHmR/XOao7nehL66zs3pDbCly\nKxxSIw0l/vnKQfD0RdHG/YowbpWdSKJp92555HKTUzCIyqIG7A6kXfGiH1s2\nISKkpVJCocWYguwgS4Dgy4xqMAYaG6WXiHNMM8PuPHj/EAnt4UVdzNgh8R6m\nMzJueEgILaeXv7itTHaCnV8AHHIEBeVg8ORoIRexv/RdyUI4oHEx3xqkUj72\nmSpV8NT/nx3kzdTTLbI9PssBzrOxRFLmZbIj72L3MEB6tWSH+7+EZjn6Foqw\nCIoHHotrG8h9d01PW3DtQ4XjwMWCVbI0QYamqPJWPOAoKoRRMP9UyhdtH9sU\niJ0tJ4VexZSEGkm+vz1sqNY0Kc6Nm9tjztgGVLNLGat5CKjt7pJOtw/nRzls\n95yYLfcjD6RWKM6j2xK8dwDu3YF3zwzNjs0NecPWgq+jBmJtHYwnpHlXxWK6\n7pVBcE+5SBGuGC1KxE4g1xmBOe7IyBaGccVU7x5vrXYbBBxk+by+omfui38d\nQBxJ4l0PO47LQ/I4F4EubHR2Af3giGrqMurbcuFZAT7EPh5dIZaGFDqeN2oa\nfcZk\r\n=SlII\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d8d95020f.0","@material/shape":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d8d95020f.0_1579734578256_0.6321669361925426","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/card","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9b1d6b9b4dbdf0c2f6d064703d3fc124cc28173","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b7facc628.0.tgz","fileCount":16,"integrity":"sha512-pk4Qr5ZugMNdWSRxZ+krgYg8BNG375FUm1hLQKNzDhJhwGVEw8ZC9szUzR2Hg4VqIw7lcFWugLQrtJGnw+hchQ==","signatures":[{"sig":"MEQCIHva/Vc1U+LnUe5eUcf29Ol6osLPR+wPEJLDs3UK+fxyAiBceCQxnQri2fchgWBXtOgqtiQ15hWiqGVCJtfT6uhZuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIjCRA9TVsSAnZWagAAI6kQAI8oyEPDKN/kgXzzluxw\n6/RLTAOFT5RW8cnxrtZPy5XS13e3gdZpg3AgqMDKQ1IJbzCq3OCLUAFJUpbX\nqiNL9IBeHwSpS/eCSccYPfFxB04vNI7FHmdLUA//46Hj3f8KTVahr/IY2wwV\nZpL3tg0+nJoDe99j9LG48/ynD0Txy5Nf8PDWNCwFobZvZlqVMssEkwT4ka3x\nX12W40NUSy25dj9Ww7BlfH2fuHAvfp1ykpQumnwtAIP7vOz9LQ1T32oJSoiz\nvHWPkT9y6t/otqn7YxAPBliIYtMV8Rm5PWPgnKbEhsdGxZnwHqLD+CD+UV1w\nGryPeIqzcqXjFUOa11RVt1bPMfDkuaaTkO9RKHmnvJ3LkuumTfzZAu3DdJiA\n49sRzPL7zsp10pf7GbA/vo47o4O5/w9WCmEsE+dfqeHtwTnLrHyCnG5KE7B0\n76UHxk5QcaY8cxb356P16cNISNCWBsRNGxeMPnh73qt/xiUtnd0/celHKsSU\nTq/W8tRzEw/Mw8lZvjjQlpgmn6gPAJoIUBiCUKe3bsZv5ODCQNrjmyuhcal7\nmiK5R4l6B3Ri9cDmjCec/udeD+RjUeGT/3oa1hAbQiA+JdwRaHQKdn4A0jQ9\nfkMpd9Ot7bjS4bMWdluVWWDYiOlL6gUF+5BldhC61HLeyDotTiscPqpWJpI4\nsQSD\r\n=MY25\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b7facc628.0","@material/shape":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b7facc628.0_1579803171035_0.2375658680474333","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/card","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a18e569add6c1ba9900abff514083397ad1b4a0","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.63f357dbf.0.tgz","fileCount":16,"integrity":"sha512-pStc+0QtjUDvvaDkEyQQXxH/A4Dz5rlvIn6Zw3TCv7vIf1TG6em3/55YS0mbd0mhJpbtvYJycQh4Isg8BBwvXQ==","signatures":[{"sig":"MEQCIE1d3CLP5vvILjns+/p/uIfFf3rvuK2Ur3jNLY3XsiqaAiBIt9ZH9wjoSqZtRAbybFdBmHaivgupbExopLFZAG6PmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZNCRA9TVsSAnZWagAA5KMP/1I6EglToTZ/9ODuTF0X\nqSP2aH8h3NknQk/IO7AXDf8tlF+riIgjF+2ifM0f3P+HSv+S13BfcHxygZPy\nII33yEs+z9YhCtDukq58NIA+XoWWkd62BnKyQFjpUpxN/47ov9WiAQlZPooK\n0vYpfrugwX7Tm7UvcS00f5Xz4c1gEd2B0yCHbtWeQ4WIDxkL2S6hxinIuA0z\n4FZM3d7xSTiSVErZ4flsOsCNISCHg+RYf+0IekETdVdy+cUYvzgpc8SYu3f5\nBj/JBpk+KB4XMe4sKTnVw5qD9SDcVXVPvEs0MS5ssuglw8MJ6hI6Ep2LHzaD\npayGiVi4xiRCvTlmyjhsVXZBac58VL1b1ttva6aDjv5XfrWvMOXgc7drGY25\nBSmMn6xtNIWpqkfWOnobRx89f/M7rIJWgan/S3Y3LfFX5J/2q6IpCIMIPPlO\nmnrppcEisz+M1qgKUiFSXPrX2QZy+kzVLF+kThn20b4OeNf2W/IRP2Nj8EY7\nR/07yTa/nnil++ddpVGFOAW6ETmSi5pg5v72Lg3MWcWPimfup6rPix877rNq\nnmGAYDGXCUJPL+1RI1BOYX3Eblc/A0EJtJc3HhqbrMPGhzhMb8kqmCaFryz1\nNaffKptIX6Q8sGDMSe6PAhvTdVtDNQRFFytdMIcmoYyDRJEsNS6r0Jvx7f35\ndaYO\r\n=K748\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.63f357dbf.0","@material/shape":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.63f357dbf.0_1579816524888_0.6699526391601212","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/card","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0495c9273fce8e0dfbd0b3519e73eb3c842abb3f","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.f2426d26e.0.tgz","fileCount":16,"integrity":"sha512-RvJwS1euNGvSZZmq2am1hArm+EL3E/z7oLFN8EczFddgLOwwmjabqwxg6JLQMwc81ewb561rMkNt0y9V+wSJSw==","signatures":[{"sig":"MEYCIQCE4KSkjgu7UjSpnVnvf9g7iXxTCBGdIUo3SnpMBsiWQgIhAM1M0K8rBZvwea96vqy20hhqsGN8Y+bP4TU/EfIZ1tx7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJqCRA9TVsSAnZWagAAmasQAIeYfRa10XzYno6e8LBP\nfPlLFJhkIObaYpd1pHViUMNPZxMWhGMSZDozdZrjEH0ka9TpQFLSM+2tKcCn\nOu0hFRAGUn/eXvV+ga8Yx/j4LflSo9YpwIkN44/53MQGw/YjM9IwR81nvAUV\nUV5VEFKf8toRMCv24QO4FZ1YIjX3ILl5AnAPbCwe7nxro/4T69+gSg2N4yZh\nOZk4C83pUMjqoFNA0c3wnKoiCLsG69hD21QcAFwN/9spvZba2RExZDS5FqSE\n6NIQrFSTqFdciFjr4EpZdKqJjjwqCcoR/fSDt6eTiiSItu6eXwdtfn6BEJFQ\ntr2OHslEEdB9FUCsaMAMuZhmH2Ze24/0HY4TAP6Www4RSNnhS6pOdB3jvxG8\nAClbCvKba9S2YAgw83dylWDOFXnDeoyNpZvoO9qUfTg7FwOEio9cYJ7d1LF/\nivX7uLIibU2TX5u7o+gO+KUUc70eTJeaT+N9pA82VCSAh4+U58YUFhwdDO+H\ns7Bx0VbK82pO+Lq/SVnC8MfCGzGZXpAiJScj6Tzjyt0tBjUlqlaS8hutNFng\nEY8QPTXcVPo/MAZ3FHQ1oqXeqIPUPKCtJ0/DoDZEo324yAzxCq0Phsg4Qwdy\nyrHsPizff0zNun6/S3J0qCRttU8IsfXZ4U+fbbVHA6NRDEMQ/ElpPDneeD5x\n/JPH\r\n=KAsR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f2426d26e.0","@material/shape":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.f2426d26e.0_1579823722264_0.1722481068623447","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/card","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9156a4bb350703777ecca4a45673460863ef859c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":16,"integrity":"sha512-5UNji6QwbpC1m6BtSqslS7lhxTxnuzlEzvW4CQz8Y/Z0LMsagscyxnPNR/iK1TrCcnMgMKXZb94fMeHJMSBczw==","signatures":[{"sig":"MEYCIQCmj2BBo2qsjtnH4ycn/L6lyUDC/NYT5ug8R8bGtucpNwIhAPBbiUARhLlPCCFIsPPMo0P4tX9T4U+Kr4BIWk+qfyO2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+zCRA9TVsSAnZWagAAYzAP/0wWMPCqE871nmcaZ8e0\nQeaBasJShQPI7VeyG6iR9Cp9b5ul+lLVGb/RyIiIUrWYyHSFKch5yEe2mBip\nngWUIhWvYriD0FTW/X4pWnEGGUMli4VncR6DxKENpCWKHW15A910+HVLElui\nh+5CJMQKu3CtAzkmeG1PFTJv98UwA4REtoOJCmXwD/O1e9V2Wlo7RQSoasyA\n+m4KYWscSCRYh9UDvuFkGgcfxmpuYq1ureUN8Hha4MA5jwvxinWa+nwy5yis\nzY3JBlTLil2QbsFj7rqU+6F/xS9kDOAHSbQlGBSQ3JSijyUoWgx3fF9EVmNi\n3ymfC1JbKjr3WDLGS0wsdgi087cpbVT8XrkhSd3YBnJChy+37EfLNRXKvqbi\nsNTJSe+k+9zq7X+oLJ3Vcf/Tpp5ZF+8GdXgzWPToCfDnBGgGSjRDFxBiE9Wm\n7LD3pF5LfTMpZTvj+EttMkVdKck68c6T6cJceRQx36LOFzHSp8VEgGEAwrP7\nzSNPVJF8AxcDhactouQ3uz3Dj3xXu6dzwXfGvn08XT2jNVrRAbfEH3h6IvED\nF1Ppk4Hd9T+wDaD0ktkzAqrR49D4bW4oJNDHg5EVo3F904yPQfjxhfVYK6Wq\nP1nhsKdHd6jZb97MQYcDNs/YfUkO+DwrbD7T42VMCoD6LRPUblb08fV/deFB\nvt6c\r\n=Df/7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/shape":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.7f5e0c23f.0_1579884466890_0.8498501318953338","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/card","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84067ae036c2a5a8790a16cc4f0c4aa58a5f3a73","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.3fc3ab520.0.tgz","fileCount":16,"integrity":"sha512-j9/uO54fJX0tlInm6xGzhVjTgUiPiTHnZaQQfhmOG2sKGA7H/N0N7C1e9807Q2rR/47t1y5IvN/pWbzTWP1xbg==","signatures":[{"sig":"MEUCIHS6H2zeTRKycGfDS++5iXojwvSpiMZe2+9bwrAo4WVTAiEAp2ZtRhuTNirnugwcD5sLy5lr8o3MtuF9ee6B/Iyd9WM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyd7CRA9TVsSAnZWagAAycIP/3/bZxS45AnvEXsgTTs1\nnF7slrbD4+2hobSXnXB0/Lzj3ZTz0+EBxfvM1a7UQaxJaPh4vt2XMDjDjcGo\n9PB+JnoRJS869z2j1bhkORQ7u1g0ZXb3IVO9MOuRUEYoW8FexVKHtiOL4XNu\nzB22QCc2nhGtP272KLBQysIMJfDCzwpxV0T8XhQJ8KFxNPMSyLERllXHqFAh\nrifxgAm6yTp3G5ICsfe8xuZu09yt0hsmFm3nGmxJWxqcb1cQnUXfXGdnL3M0\nU3jASGmkVQFVs1YLEbEIQ/HkZ/aunuZ3/HyhrS5KwwBuNHvkersewCyy4C+O\nATxyNhOmZdLvRgVnF40h762Pq5vJIWaJcMnFllhTPTDEC4Hdmw/p8jddLlNR\nc7kB5g8QMvpog0MhU/tHiEFlzTnJ2CmqyBHlPBEiPbYSh/Nw7zOT6C9BQ5S2\nIQEPA6dlWVxCKKft6l2WW/9GNg37r46ZQPezeqMHrxpm97oGYwcsrBt743RT\nIJJ3VQqmS3nj9S1mGde/8HpRAGgEPmtBRRe+BMb0MuWr+E5gxx1hR91+0/Mo\nEit+86FZ4O/oN1rz019hHiLBwV02B4THq9QEFX3mdI43vWTiM1Yq7hFjoIVb\nTw+pmhHexp5HcFHhOF68I3WJ9ntR4cobdJhw7re161cvI7LqK/IIfhYi6eud\nymFw\r\n=AjCn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/shape":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.3fc3ab520.0_1579886458984_0.14440319313234595","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/card","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2c4a31077aec0d7418d0f33e7f486150d254b64","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.80a4d326f.0.tgz","fileCount":16,"integrity":"sha512-DAh8QruWlBuM6uQqbC3RXnbuewzraC7i/hk+tmhClSl+ycyCQd2bbwqQVJMXR0vldetF5jE7a+nKa1DZsn23og==","signatures":[{"sig":"MEYCIQDe2bN3fNMB3nVS3bp0K3vWHHQjxp0+xQ7f0m7ZNXONzAIhALyjPCBeMjGSG3ykqO8x9V7a/J+kLCMTxDV2hV4B07Nd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1eECRA9TVsSAnZWagAAmTMP/Aw6UHR4iLYd25H2FHf+\nvpyQhF4/PKbmXu1IqIB2JsLLI6Ua8sYMHBk83AfJ2Sq8VuMDCgTQuOcsBbu0\n/MseWYtfYzec/sO6mz5m5jWGQVx1Zz/3WjvbNPN91cBoGXoNIpvmIhRQc8vC\n/PSXSrLmnur4WmkIATBhdOKNjk2UBA1aLd5XJbyEBz74F80Nw76d94b+Rjcy\nouljLihSUCxsRQKru4Z/97lwkb4aB3FShsMmZKQBykqeETE1c4QJVEJ1q9KA\nVpZPwQ6+ZS+b8iyHtix6XHWEmTdsSLXSwYP25M5846DAS9DG7TBpy1yXaGwn\nHm42qI3VMwnSgNKFv+K8SExQK685f+uwjZ4NygVR0+KeSO/t+9MzPsKvP9kZ\n3LYnVmjuur+/f51aaSkrwQw+F8s8ICDRBg9+4svzJlbwHadz8d9kX6KM7ZtT\nUqvL7x5TbF2/Vsby9VHBpFGjvgjx6x3hfZjE/LpvibsBqg1x/Jya1Q/5HSow\ntQ1PUCOxU9/y91SarOVm+TlobqBMyTmLzSvFeYY7szOsXdpavU+rTBOXOcJf\nijNBh9FCWKheANBSn4yGhG6G7P6bEVZ8Vym73m7oHlk9T1ppC7mJMFx0Oji1\nf3R/8VANpTfbwZ2b9NELZfPo6j3lw8nSwZGHDJUX2x/iaNCMvnSsZMM5IPrC\njW4g\r\n=2iBw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.80a4d326f.0","@material/shape":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.80a4d326f.0_1579898756523_0.0305457969457541","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/card","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"438af70992de541c5f0e9015207a115ac34c1e70","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ef7de4def.0.tgz","fileCount":16,"integrity":"sha512-Uh3L0ifdscfqWBPd/USy0WvMQXQnqaSIeQmEto/NWQPrqAVIbcOEFsYETmS5LsKIJPqmAME4E4t9lz9bDWwKpg==","signatures":[{"sig":"MEQCICMDb84ou+g1RvsmqfkYNYpZ6TTGefb5Wc4qL3JyzRl1AiAT9ir5dc/ahFEKy68+ndFJVhn7YolUNa8xuVwXbBymzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2J3CRA9TVsSAnZWagAAJ/cP/0+6Z25vb0g41JdaGgmw\nQY1qurqc2THRmUwqneftTTTl9ZXcMYviH+4gKx/o3sV0zvaCU2+8WLfCp4mr\niR2aDAcj0d0lS/yLAWlb80K9RYj0RhdW3DMa9zEJ7zjy1ndA2u3TngIMJ49K\nS3o9TA5R1M+WxZtIvMY4in0LfWiA9VLu3XLX11psXXFcZ3ZW3xCTekKPHVvv\nFkFWgNQOH48ht0d2bfgOygRUkUSDGC0b8UsJ0eRmy3FuD/qy40r0OdZY2sma\ntgBswn13EC+CesM3NfGxUmyEYn5wk1w4sIsPDzIrp7YDsM9J8L6FEyBAaSiy\n+29LsIfpmEuAsReO1fNP/Cv6im2GE8e/ukbx7+V/G5l+Pl6GMFPhfUKUVJaI\nytJdgXDRBl4MysdwqKYbTomdshDeQG2QdTjbFzpxbkegDslJ+3mNOhlVnqvS\nVwkRHtDoWVfPN8bEMeSSJPjEG/ZEbqr4J/Mft5Vm6+aOpFxJLzowQwJ0UXCD\n6lTtmYWuDKZ5GdgFGAeCCXeCzyhD2C8KbmVwTdF24wRpSDeNLU77dKx5pKO6\nNbNomaYCW8varUXHkLae+Hy74fqnp5020QwfLJbaT/IphYuHGPlFIq89JWzJ\ny0acjqlrUSroCzSAIYUpgaaDeyG1LxW5cRnu+JHvmn8fzFj5DXbwBP7GN6Hw\nnKuf\r\n=y6Ok\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ef7de4def.0","@material/shape":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ef7de4def.0_1579901559358_0.9962779248851734","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/card","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7e660b44b0168aa53fec885b9094c2d00973ffb","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.93e2288b6.0.tgz","fileCount":16,"integrity":"sha512-Sy+Dh5YsqNYpsffnNrIFk6/LHXwRXji30NK5EluxAizBj6Oft4lUHc3WI2KFJFzM6sxzkwKtim/FqliiF2+ZGA==","signatures":[{"sig":"MEUCIQCfJJ0k6bpTbgNQ6pG+c1HneRsP1GJ8jCb2D4qLr63jigIgZF4j0ZZk4zlzL78bl/T9w+GkdPfbj+rXqX4BbhgNhOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGe3CRA9TVsSAnZWagAAGGUQAIki5BCQkBS7jhMfjV8c\nqcwrBt4FA3D48vR3WdS1THByjc0uBribb+qHhfJgojJk62QYb98NoNNSopkp\nBSAmIyu7wEFfLYoD8TiRsHmobqknPjzPmtdHE6nlkF1In72rEXAYb1q3i6GK\nlYrXe1hJqN6MnltwKgmUwkKPhIftgiXZ+S7DTpKydRnDSjNMd6VQrKOYTZqe\nxQEcMraRbVx/JZ61h5pz5BXTfBijqY6hxfXEC+9k1C6niNa1B3GFEvk/eVPq\ntKKMtWjf7deP1vJj5mWeYvYARrFqd9+GxlquPxfUxhybbJceRJIrZm7cVyGK\neaDBOtm5si8qMb1hqxVdG58b33HywxZwBjHR84Bc42Ab5k37QB5xBdiXpPsg\nH7FomHsRrjJy45mGvXu/Lvm1zA+FtF5JTn2b1hvSlOz4u0AkKiM653wwMjKY\nARW+tje6I0W4fm7FLUZFtgGOdktXDYTtlDVRh+toNmR1nOrL2Aa/LjGqzK9r\n9YyLt8LHBpTgWCs7r0aYpPEMxBMPod/TQ5g203iknNkpiVfHV2qvNRv0izo4\nQ1NvNKVHEAxMfqVzT/wmsJ9gtEv7nQnsm98bVnB/MA0gvi2uWl4u/XcYjUjC\nf2iG/k+/kJgKW3AbVXA9Kez/BvC+XuilF30QiAcP9KqRpvDWDbsojGQoVn6V\nakYd\r\n=9MNA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.93e2288b6.0","@material/shape":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.93e2288b6.0_1580230582822_0.1548932228327664","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/card","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"939b574cecddd99fb7f11e6de10a24d73eb9acbe","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.34ef15f67.0.tgz","fileCount":16,"integrity":"sha512-U6jbpkauCj4pJOEnUhcwf1AeYhk6fW+e68n7sY4Cy6gVRO2ZUc6lZmiSaVLKTcLeq4W/J/sn1vIB559/u3Aq8g==","signatures":[{"sig":"MEUCIDWoiX3nYMcwlZlvndZg4KLeW4WYGIwf7t916oFRCkx2AiEApykyJxQjwG6tPaTvwAKo4R29HoBU0Bp6NiWQpmnAvXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5FCRA9TVsSAnZWagAAAAAP/ie2VC6M4ogjNV+VyE9N\nX15ZnrDf2sJfaWZMGoxxAe/iAf4CdY0RWMcmOGpv29koHDQxe/5mqfqevbZg\n2gJjwPFHbBQDuh6DwBDBvU3NxXd+Km/jV9AGYX54e1NibvHm3n63LqlYHPIF\nTyFO9zgMqELHx5RZNkbKwewU8wS6SSQn0s+vDl+I+s97BDYnlm27jAqJAr4y\nK+lX6zBZihszUQcViKLKnqmkvZ3pOK/eFnQagOHkq24Eu5SXFj6by4uEt8K2\n3/ycKqKjcil6ZrwtxINUXnaZ3yIRTqF5IBlpcqM6xdEmBRIxpO338Br6UKZP\nyjrIFv3Zautv+0xp/e7s9pkuf18RCyE3sjisgjCPfN0Amvo1OyNhoImzeObO\nze7XFd6h7nuFZpx/Irau0Zz2M384BF4xS8FA0iJ47XzZvK/PfBhHatbVHjes\npTMWKdWsOTHCVHxSyCzdV2EcLESEb7gPlaP8xdevGWx8ZNM3X3F+y6aAF8Qo\n41agrW8EfxQx9oQUUJLJDCEr2zfypaYZU1Olfv803AftWvPL2OmIva2ldzxt\nBIpv/Jtod9yeMJxi4SyxaTwPN6RCdNunA8pCNTQo+/ZiMTVU25wQWfkLjnBS\n4UAPutuzVm1vjft+EGffKwNVKTlf+ta5ybypFAgU1vlqiggdKiWgcumd9azq\nSdMQ\r\n=l0oZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.34ef15f67.0","@material/shape":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.34ef15f67.0_1580232261435_0.4020910798828419","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/card","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8cb3b4ef3420844f3bae22f82d161a48b4af4f8","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d3d176ba5.0.tgz","fileCount":16,"integrity":"sha512-5PzDxXxzjBvN5uqwlHQUZKZA4xSxT1uM1kT8WGjk2cF9ZWvlsqLmnhIf2qt2oaDzzorWntdtRBitvUBwTO+hxw==","signatures":[{"sig":"MEYCIQD4Y9hxs+R2v4crk5lEbdJnghdc6qdm8/owZQU9xsDWugIhAPsR47TiOHYBz5/EtqTzCR81ISEjBHKuKB3xpKhENYdS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9+CRA9TVsSAnZWagAA3IMP/1HUH+j+RjXmfrrlg450\ncoHmxeHbGYwTdL/cY1W5VlJv58VxOJg460W0QnRaiNRMf01a78W18vKMyZoH\nQgH21C3NpGALqEzN1dhvVRmlIWVGlkw6rzjp5uAf010lFVlNiSpguWUOJzRo\ntqvHQQP7ZHjNDDPRM0M9ZTeWWKZCmD1dZMcGXGyiWZDayEdoJZ7dRN1437mT\nl6JzF/qWPApILlxGsdUvzC5AGxY+SASEKKyflckYZ3VtN5AwpEYwJMrikWrC\n9V0Ji1+/qJbC4FE3lnYJVUY1E5C83oXb3nmiL8NTRGIusdfsKKpR9NYEXdol\nt3ONHM1E0Pe0lZaMbd8YmHlgmk2/Rxp+tGBpduQRf7LSLPlTWvpg0PmYf5Iy\n7lWUx3b2Ep9nVtORJbsQAprq9AwGb4AAK5whzkodf2b977uSsGha9hULiJAG\nj1/ZDPNJ0+lEfusuebmkbu1OdnKHtPo2NUB978lI8EgRUYv3q6K7R1+QtQms\ntfS6+REnJ0x1lYZuCf44SAdOCcV8p+6uywMgLqXx9lgD2e2owCCa13o/I2pr\nLQe0GSyL2hkCCDxhLIlkFqR7WsAesTA7h5iZ1Y/bMxTE2kLhOp0Pt+yrP6sd\nlhXg/qbsNd6DWvuDeQzo5RKXox6fxVna3grjkJ/i8fwOae2gi/92Yy3n7whg\nqcq+\r\n=gC+Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/shape":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d3d176ba5.0_1580232573958_0.30862207712881196","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/card","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c75c021d10607f54d2753543c151e104d10182","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.32c1df133.0.tgz","fileCount":16,"integrity":"sha512-yEj/KFncPLaMPqCazMgIVi8rX7iMgn63n9y3tV7/ddtOlhvPPfF3IPGKVBEA445bAAiuSUP/3CnJOnpY3J60BQ==","signatures":[{"sig":"MEUCIAUzSgBFzGGZNdKGYSVDTVo9mSHpA/39aUsoE+NkZ7L8AiEA9Y2N+99klwKRo1qaUMJpb48zYp3UxSvl8PbAFgqui9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7hCRA9TVsSAnZWagAA+XkP/ib/BdCsO1DdbnVYmfvG\n2Sp1WXenuet9Za9fYrqy52/2FRyZy0Lgkx0H4EvcMVJvys5hooOxhxSqJNL5\n/pRpelCCJd+hI9nNcMBN0Cz/XUVveDcXdfFatC8unATPaMDZbLUf070aS8VF\nywqOQy34zcTUNk4jhehDSwkaif0R/EmOOaJAyM3PBcfaGygStnzfqZJcEMir\nt8u3CKwUN3hCOUeqSwcONZlDTD/tJmCwaprqCNCXYdixYXoJhlPzFj6nDkNS\nmFVAKVtSpb87kmeuvDN4WJ2nyXTmQJXevrEeLI06dHxRMOSYuTTjks1FGkmV\nD51By4Cth6HJfS1Oj4I06Mu3DP2D7tK/nGKms2/YA/o+G3aw5jCr0sDX/mfo\nggm0MVw+Ra/64WNdMnV1tYkqmRawzuU4qU39i/hhJVEGPcDC7ew4xwmHLo78\nqP1/IrWOG5Y451//i/tYG8b20Hwxut06zVSekSH2bVmFhwQntp0hGsRnDhJd\nmHJjGpKZyTXTMS7TPCjJo7SZXIyfbMkzycOI109Kng/yXfXwYr1qVI5U2hJN\na2yLpJ3Cy7XiX0MCe8BowKl+we9eS898f2pL1Q0PyY+gP2gJ0vJgZi37PQ2M\nOp2gUqeyRBlCELiOYmDa1+EP75Tec6NUxoqiHooLG4XIrPKAASkcHe3pdWB1\ng0jo\r\n=zxAH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.32c1df133.0","@material/shape":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.32c1df133.0_1580240609072_0.7732061385542055","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/card","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b0988514d307cf6173febc6639801ec5a9b217c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.f3adce86f.0.tgz","fileCount":16,"integrity":"sha512-vadQvh4DS3+209xB63ww/bqrYv/gbc8m1tEOV4tAr6UrL4tU4uhcBYshk8/ad8r8lTncBj2PT1XV1C+5HzaNeg==","signatures":[{"sig":"MEYCIQCvRVdTHckpbtuR6FSLz6B/Va7Y5eBq5dG1o9eb5cbzBQIhAKTiX950LcCFUlQVj6oUMg9zRV2VEgpXOuW8pur+TZIM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxVCRA9TVsSAnZWagAAPeIP/3KI8RKEgigOllBOf3Ye\nQIeD9Yz49ER2weOBscxKTG2DbCqWboWDnbDvNu4lvx6OrhWUiMNe/Tot+mLR\njHY3o4MRYuMBWX56hGDJJt3Bz4lPCwHg+C90QEaMGV7wakdd89oGZWGpHa7J\nPKYVaCHCohF9Hf1zTsNLcvEBl28JScGLn2mv70rgbq1vu6aW+8XBB3aMasPB\nHnt+QX7s/xlbJOt2rvpD5LR664HXvJdKukJrduSrPw2CS2TCNrDmmpoBHNz6\nFS6K2ubExH2ZeKNCZvoVlrNcu2C35DFKkJdoeHLd4onF0Udkeuevfo5z/9/e\nQjpJeM4M6xFx50Yx0pLdOQt3C28djdx8zy7aEehBXHdiFOL4uLU8Gzmmo1NX\ntAfISSYElKgT39gyYmWhdkOup53UTwxRMT2X25OW+39adlK0Op4ObHXHqgr2\ncCbwFi7l6U/NGQUOi960LK+l5go4kZjGD8NQ+5/LInEZUDfw7BoffxEN9LBd\nbUL/mEY2L50e+3EYMf7a5XMoHOZmJH7FKKcNeWcEsBLNibu6I3aDzw75A2ay\ny7Kog/xyeB3cKH+h/vaW71UeoZmN+J2l1JiCz724V4/yOHieJByNBIhswU8/\nEHxOPueCdDm6RVXzi/GYBdbDxupptFwTgTnk5+Zv+S+k9MA8csxXpJ+RmwjI\nRUVP\r\n=8twV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.f3adce86f.0","@material/shape":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.f3adce86f.0_1580248148827_0.15095022221808918","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/card","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3108042342c94670b4eea0402239547593261df8","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a4423f890.0.tgz","fileCount":16,"integrity":"sha512-X4NgC2Cu7i1+XG6zVyG3IzdhHWyaOScwS6ni/KDNXsLfP+3H/obOrKgJ3a4l52xFByIdcqZ0bjhrS4sIGSS7Hg==","signatures":[{"sig":"MEUCIBUL4f+49e065oqiKd1QjWGCYNr5w183LfmalzZOKQ1sAiEA3BRNKwEQF12e0lnAL9To2743j0UbWCMzE4y/4H68TY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSZCRA9TVsSAnZWagAAA1UQAJOGQQE0jszYdVepOtz0\n3/UB+wsLRQJzbE7AgJ1Ez470sRYDK2BeUIU9XYwa2yU+84ZpeGVELC+KGBxm\npxiOw8UhI2oq2WnTuu/6D8s8dSo1ILFqENUAaOzIBKIsrMHzCOXbl/1o0o4R\n833BZD1nwZB/6ylRSWFvQ6ZOeFbEN8cnmQRuxMSDiPMvHUmK/cTkgPc0jMRW\nzNeWVrVm5nX8M1FPuoGytB8LMmJbMY88FzKKspAOC8MWJUO5zFdX8mIu/f6y\nNBI9obVGXU2qb5OvAR9N31SXkM0OglP/Y6pQ6G08Q8ccV17CpzlZsO6tWdER\n6agSb2+jK3T8SG1doZVm5y5+jYwcP+716vLUohWBbzzfEd0PhYjBDTyxkYrv\nOnKX0weGzcBpaCeQ8rxDlugo6DSD2YJOuRdnap++GxLV5MbG4a2ulDSWQqs4\n5ENMchUGnu8X4XQxcPl5dfSGmTWpLaOtBMxBDCMsENASV0ZmPNox9neTwv45\ny85NypSIzZN2baSWuGEo9YO9T1PCJAjJvpCtA4wvh9MaMc7W7FZEPEbhWjX7\n6LGwQM6EABrHy1z1XLJa2lJTHa/4GjSjprJF3trJKSv7rrV3i386qZabL7uJ\nfmv9ovOPUK8MFqfQCwlYX8bdqtW899CH3jga7gSzAqKR6ZUAv8OHGYZTuwRB\n2ss0\r\n=B/O0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a4423f890.0","@material/shape":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a4423f890.0_1580332185298_0.9040895034187268","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/card","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8ab4380d4399bb08c4499ace234e0e4eca4de63","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.9351f167d.0.tgz","fileCount":16,"integrity":"sha512-hRyORFI89dGAfMVTIjQQabpvbpeWAwDu5IR57ow10FKk5xPKWmFFkGJ8wtmdq0jXMk2+o0sjCTJNFBjx6HHmyw==","signatures":[{"sig":"MEYCIQCkUlegWub+XNB2By9shjYLTfz4X0m8XDdL6+VcOAVfIwIhAM4Ido5qKkUjRRxZq4Gozs+2tkliw6+cp7dWNVJDIDgk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9nCRA9TVsSAnZWagAAX7AQAIjAloD01vASnAPn7ypY\nBY5dT/MIWBNR24R4yTujplHbqCDZYCccA5xgb8HW7R0hPdDjBP20zFak/Cp3\nMXQFNPKWXCwL9Gy2F3U49MJVfdkd1B/ygkkqNbTE3zUVNAI88jDkHVgrFXKd\nwitTy2bi63nzTRNZTQ9xOaEK58vtic1fGLkeKOiikodBO4SAHDJAgJebdhDP\nnXBPr229DHPkh3Rx8WbgD+leqESq8t8iePjV521+Rz2tRN/Opjw7DQSBMAE7\nbHfvwxq4KSG6g7qbgRV/A6/axvbrZXfqGM96BfhykYe9uUPT0PIW2BUnr5aF\n2II7UZU00znhySD8BVCB2pAa/Zz01L9xzU3xhZp93CkK03on1K9A6+H9Gkf1\nr8zw/QkJC7FZYKcbQ5Hxhb7Cs2fsckeVJ6ffmHSTj4ves73VDRhrANjzULYp\noq4IpeK3QW6MqUoT6ZCWkGKcOmAc/IHrnKpKvehLtM8nyWzbHY6LwSQFFK5K\nSifCtFhI50HEa0QvW0/rcbnkUfooOt48AytyDNciZ9XxFw00tGJ2yc1HPGy9\nh69qL1gW6TO8Ae7v4KlpVqpIMpuMaLLVT473MLFBpy8xbG6AxlnXMHyNc1mi\n4HFqt2hNzXUCZu6jb/OCqZk0TymzosrMVFXFw3fwmIBEo15Uhvk40qzqpbNM\nqEez\r\n=R02J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.9351f167d.0","@material/shape":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.9351f167d.0_1580334950993_0.41090783470126735","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/card","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67df7c35cf989cf3f51dc14d55fb672d52a7498a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.29b89dbc1.0.tgz","fileCount":16,"integrity":"sha512-/mXzrWq76HSwVJqjNo4VSsdXCXECYCWnGnsYaIX5DvYdVyV+RRQCqXfIRHNojz1KpOHRu9rs1NiUOtTafr7Abg==","signatures":[{"sig":"MEYCIQD17vJV8pRd6UnQFKQwKhPwUj2HhqhECH3JYJPLUE0P2AIhAI7rfw46Ht4KBPCghEXEhhBv1Khm/UqM0OfXXqxQdVNv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRbCRA9TVsSAnZWagAAUEYP/1CG1tRXKgKLQwngb3qo\nIkHbchJeHqq2BXZP9hz1JI3vHFWhW6Wg7UjKXcdU38VoTkSSvarE5qipXzfI\nH0+0GC4i9Lc+Qhbp939GuasqjWxXqqNfhRHKsMTdU3RniiLGgHGm3lO+9fHz\nxhuh7NuHvFKdu75uE8Yd+2xtNoK2qU9UI+TP9DdmKc6wJBYv7FFaGt2LyIuM\nCzP8rDCCc50+kYUJn6rTxAdpfWJhks+0oMF/Y4GzKmb56t2Uo02Bo6TINoiy\nx4OrkcPo0E0iEBSinc9f1TuSkOxSgmTT6gjOUEcscnyUBSeYceU1K2TP4VEH\nW9B+grBJ1xOlv/EUu/llVdlwsIhT7iNleJ6yRzxj28RHzDa3Ll66fp1fc6Bz\n86Qi38iFpS0197NQIU2QJFz0cmijsTdxU49P8GS/9q6yV689GQMec3A5Mwo2\nCRLMgS6+pBCFpElMXPIxW3Cq81u1JJMfvSINnHZrYqZulKqNayJeo6SuAZAI\nB5HAGnp/05eh/ydxzDIqTXm628VYt0vOzZOsL8cYcYq4oRQ4svSdRyIz9EYL\n8OiMpW4A+k/Vg+jWVE3oUt7r9Jujf2z++4fgp6a9jOYU4EWgH9hfjiEAHnoY\nLtSiWhIYoIUzGF8UPTf/E/claCvS68vGKXj5gduW1d8j17vbgvrPzjl/pIvf\nix+G\r\n=Y2ec\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/shape":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.29b89dbc1.0_1580336218627_0.5926537458284049","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/card","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5e667fca07c608f810abb6b913ddc26789da78","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.45985457b.0.tgz","fileCount":16,"integrity":"sha512-FiaelSPLEZum8UtVo6BomAuXXQkE8EXUj6L2rxOE5u8824mPIJ9T2ebhwwquNIAIxyh+IJDUXDrgvcTq9asHSQ==","signatures":[{"sig":"MEUCICPJYZm8paR17kphN/qUAZ5g0FIo9Tbhthz85HbeqA92AiEArRvgWGwsX3AEkvxclk6aiL8Ivj2s+eaASw3EBgEGwlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYzCRA9TVsSAnZWagAAb/kP/Ru7ZoMbkD/mKJNEwwZs\nBqkszjkJ1lSyRTToXdTeNo/SqH129qSuaY+QtpVlqRFUuwr80qaFbkuNxCct\nTA0lEp840k7mCnNTI2MpESvtTAYo89CsHiFu2pUPsk2K38jFL45qLwBbA9Ie\noaAAUWytBkANuogp0cJymjxxH73ax2h06JndykxaxxnJyqs2/j53NYyxcNtL\nxlKrQ3pkw4eiaJaKrPTHdecNbcNXrzAlOQKJvzXQmDvY/7g7/NTygPOmfb0/\nUlWrSiuVObXOCtfo+Ww3XRmGpElMVXgQIEKYhvXXh0z7JqXr78+sYfGfRpIw\n2HCKgfZTSWmCNjzsL6Ow1f3Q4WYkxS3BG9xhH4OO+VBl9FUnAdToWkH/BTIk\nvvfuo9dukrGP97aZQs2efbnI8mm2YJUeeeLnC++xhBPkHJh3VYbqGCBaN9Xs\nTRq92Gzt9OQnzr1O9KgcTNt2JbJMcNGnmQEkZrf9WH/OB0MWKUjkzPkcCiQ6\nd3wVsiFztj08WYgEdvhxP7AqMIE8NNIT1+6/rnYapkvc7bLnbwK/ay9NB/N7\n7SOT/9ackKiWsFN/SbehrTTSIlBySZuUCMfUP6g4VsqcMtxIhltBrfH1ZV3l\nn88Ix4N/8MQh8l+jaMkgVtpI7uEfbbu/iKYqZwYnZbMAibuouANrupPZ43Aa\nH9N+\r\n=VBqb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.45985457b.0","@material/shape":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.45985457b.0_1580340786686_0.9711497190325147","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/card","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c54bfd0412ea2bd5f05b7484925cb29ed5f93c2","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":16,"integrity":"sha512-KKB+Iw/KgXzsPhbrOvrO6vShalzBghPrfps3NZ3Q4ZCvHCFQovxMavhe+0HB9yr4UrsQjgtjPrXXlMTeLyKRzA==","signatures":[{"sig":"MEUCIQCqEgf+SjT0MK2BdEUpJhUVMKlHt05QS4FOShfBupRjAwIgGXC6kqoZq19S9GHc/NTbvntTfWX+5hnTDYeYWED66Is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRaCRA9TVsSAnZWagAAHd4QAIiT/JsWO3MygWyP/gol\nQLj8/ElpPPtsxEyltbHcg65aTlP5aPwRX9GYDZ4C3VPUitXZBBiItwJwFhCO\noNSgIuo6pQEqirgYzNEVOP2xChVL4hPnvHPen9pc88oyFsfg2IFz5eMNcXSB\nC33fQcJsJQXf+GkkBVoUvERNAMnN0TOVidVWI5pQ4rUfXFxfK9cJgl8FN4Eq\ng2KvIgY4QzgStbOptAKivIrveL/r2iYtX5RBSsppCZgFwFikpn1cKb9oqeFo\ngM9kDtZ4GwociYIvqTlb9z/nKisa2p/Tn0m/t8xhEM/474LpiyozNWEjTrPe\ntHC2FckvAeTMakhuzsoVXqjlTemxP0bL+9bUAEufh3NZLWq+rmcWY5vWBOF9\n7L+cNQ8iM0pll3EjgSHfA9SLYWsmTvLQ8+J6+hUOf4E7po9kRIsH+jHobo11\nENLeXmk0c9d+Izd85VGCG4Wx6PedYchrKSMXZwren45oZ2Nk2IViBxnEUHzC\nRmgShU6cEqA/cs3SDoNvxFlsMJPNCG1TAWqH+wZWZLdEXQew6jukQsRVbp6S\nC0i93nZi4a87XOERmHsTG3zsFyYCXJ0QGYiqSb7EtTb+8T+FgR/J3Zw1TBkq\nN8AQHbNx8XmxkavergHa+S/cCrU0mWN0qvv+yBb9p5oT3ng1RKTkfSyHLDkd\ncUx2\r\n=I39e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/shape":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.a1a0deb3e.0_1580405849958_0.6758253540956762","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/card","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8487ece7a04613b0c4f75187aaa95ca32243ae9","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.181486643.0.tgz","fileCount":17,"integrity":"sha512-lAAqKVdk+G515bjJAeO6YDGnwsLzAk41vCFVzcLLKmU1eAs2gl05eMdwTw9SrgAczMjz3DN5YjvgWki9vI2cjA==","signatures":[{"sig":"MEUCICyZ2XClI+U7som+sWUg6zsmJ1IArYbIA1Bb3ynDvIcUAiEA+MGNGVbwowl7MJ646ExFCeoUCXSTmTfwhXDNkA7G11A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0L0CRA9TVsSAnZWagAAt9cQAJj+gEWG6va9oBERy7ay\nbKifulUhkhfAUkK+7zW6SWR5CMyobhnIhhVS1+ewyZOqqt/pRdSDHoCTn/DU\nCoaCeuSDFwOZD+IG+GpH4bf+bQZOiVPA4hmlY5G7pmY6f/BmzjquTNP2iNm0\nx5oGE0WIV0kuAkPxsaYRgG7M2+vU4OPOg/mfvaIry9M8wVWwlO9HVzjIKEp0\nkdTfqGgrQNPQ1BoOT34CBIgW/AQt7zbg++PqEiSWPXPSmzBBMe9yZuFbb/T1\ny4Bjx1YV3hK3yxIkJ9E3U7qkvCpqHWduSo/fSClrq/HuhpPq9gAn4mnq2qLK\nTy0GN75iXyRoCeuj1UnMfBsz60TtVbflfsWvQ3VysjIswEeE2hKxjBOWDU/c\nV/zeDbL83+oyNGSjI6uYQ1Uy3J74CpTirWLHKklv248dZRXdqG/LIL87IKIo\nu4JB6u6oEDxLHL7HgzBcDfIaqJlA7OJxbg6dJ2jJ8ObGQKNhxPe8OBc5UrnQ\nm+ggEYHLYEWGV/XqyMvGqQoX4YzFryMERFiej+LzYxGtIDogjqvSyQ+ZZtZS\n8TYCUuAhkl9YzugAtRXf7DrzDtSoqJ/WggSYMLfTR2LukYYTbNOlstLdBp2z\nh/6BYltEoAE00+lQEgXnpg/qwFjQdEpZsoVaQTjDExaW4j9yAuTmUdVkXCCs\nUqvl\r\n=MWwk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.181486643.0","@material/shape":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.181486643.0_1580417779512_0.4146982713184426","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/card","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cf0e883fd6a28bd44b15a08ac49f3e300e854f1","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.3a85313ac.0.tgz","fileCount":17,"integrity":"sha512-SsSejn3vwp//MsAjIK0pVixCo5NYxB25vqV+NTq5PWOTJ2tcq4ohgw5vJSWc5k58risqwn/98pSr9+VpZ8L7HA==","signatures":[{"sig":"MEUCIQCfoUMzYH7O5iPxnk3HGlTNw98uybqAY3+5PEwkKxHEvwIgLJLr9p6tuIYlLpg5yzN2w/Tk5lNDZcZ1JGeQytGo9wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFR5CRA9TVsSAnZWagAAkRMP/1V23n2irh0bN3VqZkp8\nnjYaknBHwFUzhM2tCpFJp43ExUX6qXW2Z+4R6YaSEr+fsg5FYU/qsboz25Y4\nf1VCqqYfXmxoEFemKLf6CuZoog9etmYVoglK7wAkAKW12qzvDluxaoxcf8Cr\n5hnUc0oNtpVAV4VfpEizU4dUhuecw5WgkcLcqkxK0igglhOSC/l5uz+XHnVy\nKFPTI31C0C8OMRYSum09X9dUARtsjpWL0FcHBDCOoMBlv58SiuWJVEDr+t4I\ne/TCYOonC9m9jBjYQKZT0CRjPTJ74CwArqFcz+8Kmd6eo/dnumxya90kGrGn\nVSXmCNAVMmV5LIt2OavMez5uQQw+kVZX27dJvgVDyjXX4QUQ0D8peXlMShG4\nxyEbdi+ZUsCbAxsA/Xl+cWL7Y+eM7oOczje/OA30IvO6SgBqeXFY9vCurhiv\nNW3LaBEfR0SN4vGNbIsPGVP6/SJs+hZKN6sxATjlvhU+9i099Ztvt5b3w4/K\nsZXa5IQZp0YBpgZ92mbi+V7QuIg6RC5uFdp0qpyjlVrHI6j0RX3QDs+K6g15\nBC1y3sO7g/fXQARUUjDKlTCbyFiugYC2A1+aGjvydsT8Nj+gzz7UJ755BMEk\n07FmrBxlwKJf+CqOK2lj9gYwsWeNN1iPdYIs1nlTX7k+2JFZdDNobrJWv3nD\n1Wuj\r\n=CStl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3a85313ac.0","@material/shape":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.3a85313ac.0_1580487801124_0.7749139593117771","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/card","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c99896932f071fe0139175e246b8448ad85fde7b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b6c7f624b.0.tgz","fileCount":17,"integrity":"sha512-f5+71SzdLYXhjsazLh6mJusmfKfSTQQrTUb5ZRvfqTPdPKdsngkfZKLNloZekYlJytLdeXPiRovfahDDzaSAKQ==","signatures":[{"sig":"MEQCIH+OWYvzEL2rhu6kI4b1LYgfNfW/nT0vMg4f4xKYoFk5AiA1uCSBnOQV+W7UyKteNrRoDbvtmWhiwsqN9LQbYjtQLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3OCRA9TVsSAnZWagAAtJgP/0p2+HgVNJ3yJ0noJUHM\nVOWzttOo8EJzRse/MdSx/v9sFB4haFkEORkzmfQI58fBVeA5i08YPI3FNzlZ\n1CmjVMPzVxBEwNXmpfXSwiWw8kVyfX1nNenG5u5HCvwX86U8bYzomr+zsZKO\nokD3cHtvwchvSYiC7VFLLXvMWLSMlS70BN3gZVVZRapDEfrHG0Pc4sMekYPd\nKTsXS6pCI1gTKYt8nitiWfpFf/5/OC6hzGn7QpQ7mKKLL3L3hR+oRBwhAQ2f\n8B7xzKG1i5ACvTvU34pQnYfujYjGcPst5r6D3EcKkqeJFqiVAZDvSyq6EKzz\nwgsLYDDOUHK/5d+QO0/VGdEHec56Tbb18b/Ne714d79LUL2BNhfU5QAqLDVI\n4aMQvzGQaRdzkmpP6qW4DlFUOxTSZOL+V4/uQuJg2Pppe/TtV5nyvVFjQVVj\nLhWR7Fte9mydEE7EmF9FJvrUQqIN64FOsh1lgOtFDqeRH25atoMYpcKEJ7Mk\nnVqc2B2qqgY1i7IxZRMTD5o1ay9O4huDxqCejISqdt1EU0OCBhCnU9wK58eJ\nXxAxv7kLULQXmB1lDnM6PJny5Ovxm/vawJ///A+ulKYib26k5w4qIbhH+BGN\n+y2GRgSY8sq5U97KDEMmyQOiBbWn20SpJaaqiF5kmvCoxfywZQq77b2YtB41\nxod9\r\n=sii6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/shape":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b6c7f624b.0_1580490189923_0.28656597735131184","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/card","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae887d19add7e2a9330ebdd54024a4cfdc42beba","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b3f70ebde.0.tgz","fileCount":17,"integrity":"sha512-RzzdLFJzW7e/20lej0qyU0pK8KRskSFNASbLnJc0U2XRgXgbdsPdz/5oxDwJmSs23ePa61HPsWt3vv5DYmTU0w==","signatures":[{"sig":"MEUCIDjfDCCH/vnRPiyGeGSHQimR7JShTnBnKoVy2gMpZ3lYAiEA39BYYZwMCg5mOLwkOF/0KJDB5767b6yXLNSRp7m83e8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImvCRA9TVsSAnZWagAAxX8P/iviC6JciDZ2mb+0WTxw\nlb9xJLnTjiP/qBM/GKP92nVAGtBkTJs3h/50IDYZYe2Jf6JWNyHFcnqjADd7\nzjjR9e9bZUYetVZrMUZuop0TbsL5nHxhRNARpUJ3+k5MuCirbmT4e7pFaw3y\nQ8P3Imo5Y9dLESJ70u/5aNCvylgXvs9k0WzTENbEGPMxJ3exT/GzMd02SJ+A\nqoJj5kui4lyqfKD/kCLp/KxLQCYsOhm29eGmNOO58eMpE6UekbfZ74JG0MlU\nWcwnK35Uub7VQ093oA7MMDngk7dB2SE9FqrWdCTAJMhciCs48ZVXGJT0PN70\n5we7Cc39f85BfscWrIo3B0EG/fn8TGdG8v6fqMhPspduTr5Ci3Jh1BoQKVRp\nE5OR3dsJ95SY3pDhCjarfv1LyP9C/9nciulC5uAO1Jz7PNfp8VupWhB3HU/j\nD1LtliiL9hJddxBPXGnmXYd0XiWQSXePx16w/oc6ZMAeaP2fpt2STNtmC84Y\n71keAxwMAtxs9CRaErx9s4mkNU4QSbwafnhWCVKoN4ABCAsGEaX414enGeCL\nsIZ8dWgPLe1DboUuEBKhBFCtxW4+B1I7525U792tXQ3rp1cVOau+2bSkz9c9\nnroRee19UIiZUR5jz1amSEmZC1007RAV82rtY77xnOO0WBAAnOGviH3qzZSb\nCZ9X\r\n=7mO7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/shape":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b3f70ebde.0_1580501423171_0.527126423099729","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/card","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac61bf14a7245796c8dcf3b2873a0c648ba739f2","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.3e782d8f8.0.tgz","fileCount":17,"integrity":"sha512-xJ/Vn7O6o7lEJ6GZgHOBbbThclT7vq7xa3so4JGcUV3tJP7IkmcZ2p4t5+Vre4AUJdWAOGG/538LKvXjCJPplg==","signatures":[{"sig":"MEYCIQDOIdOan85uXQcNQyvju3OhRQyfeyvTFjRo+yQuGrn+qAIhAJy5dW5PsURaiN34pVzmpAHC9frRk2ACQKKqfyXasDKb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIQCRA9TVsSAnZWagAAMHEP/16yrePQxtnrs6JV8765\nmzpYbMKxfPyzIsEt2L8uLotlORDc6gWJ6X9juFgQe4vHYm+kpFGt1H93xIkY\nrwB1lLCv/UPG4yN+jjrUsWWrtwvFjQNQ7iWxVugY7vIseySfjYJjrtt6fcMi\nlB/61lOgAkkv42Zetc9Ag0H6fy5BYlyXnb9W1s6hBlkhX9rqfRqYGrqZMAhm\nZaznQUzUxEbRJ7U83TZm4vgOLiYCeDhOV2+EI3DrKPNqJp2J49KXqmENC80h\nP3JblHm7OgikSWBc/kX9GiORgc4tH+X3YK+zGX5Y9meqc9mIL2T0y805xYM1\n9PFuDW9HkEy756bO0DzEjZHBG3arfMazxbNi+jvlfdn4AQ5WOm55mmrU5eqB\n9gDH02mh5sewdDaVgprQUTGhgtXP57acXtfExD7bIufLPrWhCjFFp4uvdoaX\nXZesnGXB++HbECf6v60NL8xsql0Cb0B/uxYv4KHJfPhczYLnEP6DO89BVBs+\nYvZIWOT+eglhlRajwgZJ679ZEIF2/2hAPTM5IzQ8kQq5tl0o/gsZF11tsJKQ\nvq6spHWYMmh67DXBLziPpQ1K18SyuEMnuTeVRa1CggSzUUcx1XnojKT0VIc+\nICQFaXw+l7U0c3pj6coNFgcogHRKFDIJhJ4KzCFM9aTfERXHrQR8oWaVhVsf\nzV1n\r\n=70Xj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/shape":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.3e782d8f8.0_1580605968156_0.40492932596309106","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/card","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c694e66edbc7d9b8405d5d18efa024cf46ac533","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.535398572.0.tgz","fileCount":17,"integrity":"sha512-PRElJlYP6sRl+Iun39/i9zicxLwWLouGVUzsZ5Bc+w+qS1CHIxGXAacEh/hMgXPRTnVwRzRaQ3FOyQYmFVC4iQ==","signatures":[{"sig":"MEUCIQDfEAA2mb+4SwuGAXfN8MWqHw4pRhDmreOgzi/qdBPRzAIgYEuWyGVJvGT/KFAPCbJnh5Hxrb8YYswLrdacjbZGou8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJ6CRA9TVsSAnZWagAAP4MP/29FfItYqzCvCWUhdFgs\nc7JJzawNr4caFB7jgvNryWFu8laIO/W4O0JNdAiCVk61xAu6DcitAsRPx4zV\nGErB2F0etlArkIGezmJ0M8b0Uqn4tdLnnbs/inbcThE4Qkm1SC2NuVUVF1mB\nSaXUlZROfLFbjc1cPMdXBvIVa0gdm1Z7/9P+q4kw+766OUlbOWY0aKmWnVTs\nJJ6muUfuRWPlbQJmA4OB+wz8sWbw7TndnP2HepGATQfQZKExbhKWrWGDZ1tk\nFu8SQraoNz5rzqGKUdArceFQoVf6rXaYie6eX8470JWTLJa5oi2jXKuWyiM0\nqdrArcULTVE5CSGZISqpDy8aMzMITOZIcGoNpLC0v1nGV8BXy9y3mOoNGMk6\nN84SIYJb453eCIsn64bsaQBtIp7jeM+AvKR2YrTWf0QtqApBOFbGEDxFubIq\nFyuThFrckZ/0bPZH67Y2J6uWzzF3jD8wAcWaVBhOfSJ42+EFybjhAb5iWneQ\nUqrFBvUSOm7hrrQ9FPeQdmm/+RlzIoMDPr5qTI+3SAuYgqBQgVWdBd4l4dgV\ndvqEl11TryNHEpf89L6yfh0OcNS7WErWEFe3/lBiu7x6SKMYKAz9UYCL6acX\nIxg2AdFY9MMVROHVDPjpaCMsOPCcORMQyLaWnQGeEeyodY4UxwDwLS7ZNL/o\nwUEy\r\n=FmkD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.535398572.0","@material/shape":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.535398572.0_1580753530000_0.32769948134781735","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/card","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc3189be8080ad35605b33160ce23caea99963f0","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.5ff33802c.0.tgz","fileCount":17,"integrity":"sha512-QwiA4TxWBmqsllEYMtMyJXbmle/6cJisMXADh00nEhkJn1e7ypgdmBl05OYTrb0yvesSmJaBtVkF9YF8qkGMWw==","signatures":[{"sig":"MEUCIHPCmYkrpWtOrZtEsddCjNF9rz382xVCO4+x6RexX8uoAiEAo4X9mGO5MgsEwlTncj5ciBYgKPMKgqNMXbw+cgBvJBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObINCRA9TVsSAnZWagAAiOkP/izCymDaP7zrUkxQEJ+J\nZD0+YhCKxazKY7QbxfJ6/3XSiZUl0UT+jIZFtH75tHx24xvYauvvc5mUy9AJ\n+Xt1DDjZD3ifpUT79UxjxYdleoWwXNW/qnYtO4tNr+zfgOjWivX2n7YXnnKD\njcmypOgHVL55QNtCRQSmPbFWqoMBLxVeYZKs4fH34bj4JbGDQ40/QbrOQVZK\ntyc3lvZ8AI1GlHieLPW8aKa1gx2FMZHCdvhrt6KbSKf416PNzVzZ0mOATEYX\n+pZhFWYowe3C84hm8MyEc0lEgF4sM8HaKaJ+8S1swU13zmm8Pmn2Dh1ey1Ft\n2aMtCTMLJ/paYg5Eb641LzPap1DqVFsvq/nZKztKNX2Hw2j0P5flKu+Vbwdx\n0hFmqtc4ig5ZGW25jKZatKoslfT61Rgqsje9VoxPkB/GGnlQfaT/zK+ZnXXq\nnuKSdI+9Sl2h1lqDmp8NGiZfk2FB/iRYGjaVbNwHeVq81d2XLA+CmYA7+2hy\nLejNPzQ2UBIaDQK5oVOx/6bUKZpDNveuXhd+3qC0XbHqXkoNsiPAyUHWDx0o\nHsLwLvhOLVQQ43Z3dqt49Uhxd+s+IozSeaz9TxJ253tx0mnXHMTkKaQjAt75\n7CBOw4zNNGoUgHLtN2U2rG1vjGeSkZSTxKgJQwvr8WqwpbRCc/YYBLyffZqA\n59Tm\r\n=gQwp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.5ff33802c.0","@material/shape":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.5ff33802c.0_1580839436890_0.8521774723151674","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/card","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a84bf46c1e7b31e85f7f6b0260fa44a1b059ac0c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.1eb29491c.0.tgz","fileCount":17,"integrity":"sha512-9Osjer6qood6wKMl0QWjhHsOgsaObq4PF9eVytIAAbBGtrXEZBmw6jXqmKFVKqkMS8AYCW0enr/Kw9l7d6GdXw==","signatures":[{"sig":"MEQCIGtYv8KvjIUNZrCdGx0KhKAIfse85fAdQaQWcpz9gbX1AiBUVPr64NohSZf+83mZaKMTUx88+nmtwa88duYNNgjGgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdt9CRA9TVsSAnZWagAA8R0QAJwaWSR/Pk5KQl/XSX6y\n6Z87xt06nH8evWiOBYFVby5JHKUZK55hC2uVbMd1BTbP1aauaLRUQpBOUHN1\nvzEx416L7gwzeCB9p1/8WlCHPD5g/U7N8FV43YM87BJ3mVq7snbNHNnc8L0f\nm016yBtzdA/aILOcEZ+wiy6nJyjIjnmAP8t5b9raIS/z7HOkE0BHatn93/68\nNIr6FsvejQryy/AI5y1yCeLxdixhDC187+LIb1kH/j1JHjFMt0fE+CMbrfSY\nHv4Yp/xBO2lyKfOERGMS1nuJewbsRAmaVhRsWTKxG3IoObPLCX6jbjwFKhIz\ntQ5gqxied0HOScfZz6sv/vMYtxIozR1/MvB5ORRQ0niRqLoGOsYxP1fccrgK\nBPonQ1ysM8KMt+jCJIikTKZLQobynq46HmvJGFgq/Q/j0aHR65RKQ09cwJdI\nzeIqG94FCpGlmScHJwTpuV5pX8/8jARcZDrAQ3ri+xtqEtSiPCPjIa52wcA8\ndfjGh1Xwo/P+24WZW3HFIJI9tBPMOmdRfyTQfQ9svTV832PKyVeiJbiTRphO\nEx3TQMiRNxpA20QteOe07WwF6iHNjCw6MJgifker+c2L3oosgi4Qwj26YcMM\neG0x2h5ziT2DSDiRgFUIifltA/Kr31MBEdpI0CXDfziWv/ChFKHvQ00gXg8H\nHXYA\r\n=lhzG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.1eb29491c.0","@material/shape":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.1eb29491c.0_1580850045072_0.8643051998410634","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/card","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da49638ec8c6224f4421da3cc94b0084adb9658a","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.4c7154b26.0.tgz","fileCount":17,"integrity":"sha512-3LGd0kn17Q7iDs2KgrM/KrddnQ97KdXA5iXjr7blrQ2Q8kaIrWsDV2c15U8UmAgiBZulxoCBOUwZoTPafsEF0g==","signatures":[{"sig":"MEUCIQDtWi/WFcNWxFPmzzXNeDXRN57FdtO52Juxg7xj/+Ok1AIgdC0WA1eJAmWOKttPutvBOMz+UnwQpjKkqMMrdGEHOWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOudCCRA9TVsSAnZWagAAX7QP/16mlXqH0G5z5TE2Nf2N\nFCBBcUDDqpEPOyrn4sd8VoLoet4l22Y+5lOh4ZqXiJ1SDyWEqcuuRiyDYoGx\n9ffYzWo7cRAWEQXc7IXOjfW3Il7RYeKK0nopbDE8QiPzbhANz21oX2wVSYdw\nWwKmLrGR67BekwXA1Trag6+PBjLLHa+Hj3G+gei/hw5PyblbGqxlP38tX/g0\nFz5OCO/QyF3sy4BMqyL7W/9qRPzrWwBueJZ/n06E34exoqNrWTc7Uj+htzbG\na0NOiixLNDm0Ee+JPp/tJ91iPriJXqsumgPYbFotkS9fjaWH9NgXrCPaE+6p\nsVroQnEVw6p8GUq5VT9wq4Ax+GJMwLiQHkM3XyGOnhaPI4lW41vDNg5Luat6\nhw5voKDuCjlTU4DesP0qKGb+a6fzlyjvtjZ9q6Tn9Kbxts455GfPhwIjbBQG\nWTlweRBcyOzP77JR4ePwfRE57eMUDAz6Zm8l9HbJTKhus70Cye7g9SLLMJI9\nomOovwsVYijOsy8mZlIuLg8GhUPrzYZ4NMsMZt3WrgYp6epZYtTwf4qQKEvY\nM0Nc8MUfHyzxfvYC03sOk8NOGnRFM6dTnvopPougD4CZ8omld681mEOgwuk8\nEwCgu86pkChKSXdK7Vm40CiQ99UpaNpXDUMOH91w1OQNEP9CyS18+VG3rSkG\nFvq7\r\n=hstS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.4c7154b26.0","@material/shape":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.4c7154b26.0_1580918594318_0.029477992100854777","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/card","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16d6fc894adb466ec47710adee6bdea31d2df0d8","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":17,"integrity":"sha512-qL9cpfEJyK0hwPH6AlkrBIo06KSwQbgEBPBXTBIGUkrRnWAefgzbDijXGhBZ5Zd18zqCIKMmIs7XQG+k7eF27A==","signatures":[{"sig":"MEYCIQCCyx5uvamRJRfcDhBCDW54hIgylLwpk90KsA6x5yE0UQIhAI/fjM64bEhlo2zbuxD4h7/NMHNIwWqqvwZYaaXi2dfr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1C+CRA9TVsSAnZWagAAt28P/RTXvVMiVAYTH7bZELVP\nAjjSephtA5FCPaH4ppVFnBWblokdqBDYuVetwjKS7zYlL7Pwvl8jINDNBXSa\nJhy7GuVT6mOdAXMzTpyVqO21zJudZp+zGPV00ObY0bUWNYubYrX+Fh6FL0av\nyzd4FQwTsMfDNe7b3eWkT5vSVvppTtv7iW2wj8LYGWaM2uR3DCzYF0UdZCBo\ndZM5dDiscr0aZ//5qbUIEKP0b34zlN73AMgDt449o34zhWYYu6yy+ySQHzHs\nKyZs3IKIx2UxqYXH3UapfiUUO4dt/NZc5DXPjWvNg9hAzfgCSbVvdEVfqM1U\nKIDKEC+8m36wzPsA0ChAA02YgxLJnzPyXhvZjaqhOZ3ZOGPPG6a/KN2u5Elq\nBXOa7+qeawmgwtQGG09NIel6etdyVVWx+8WRdo6CUy0gJWHbCW7D5ogkLMBm\nA5UIAzbx42fGxKq0TEd+iM4WJgvEy++0lgyB/aunEPqiMnTOnPzNR+bLTG5D\niWRW+cYqqCQiq39Y3drYTK4PA5ZPfMld9gdySMmr2Wa1ri8oG1Hglp96l9Wr\npTfN4I0TbhFx9p0PlOZ8N3xfi8xtjPLOcsxc1GTuBiUNvoNTPrKwAkgFb49Q\nUmNxB/s7QbWn/MO8yDC7lSKeiL57kkUjxDz6A83gHlyP7sjYMOUZAXMLi/dh\nghbo\r\n=cq5F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/shape":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ab5f49a2c.0_1580945597643_0.961125887647736","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/card","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f583ce6bebb9d7e22a40da7d8267f8e614bc8c86","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.c541ebe15.0.tgz","fileCount":17,"integrity":"sha512-cvghXi/LsItxzowG7ZztXaefWTwKoigL8DliQhwraJhVjaIB2V/828oupVukQ3f1PkT7q2sPbnNnI975C1EyAQ==","signatures":[{"sig":"MEUCIQCyoXwQpUS2biWFd0/dwAfFM5bRHbmWxd5vrnNAnb0aKQIgJCOeu10Zrt+o2Z8LZavevmdsucnWD4gpi/QwPyGxhmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNnCRA9TVsSAnZWagAALhIP/00a5/hPBtZnEeErPsll\nNyN/tExhgyICAP4BFvxndLXoJSHo2zRuTX7ITa1aXesc7BfKKy6kgLZ06fq0\nLMDnFS+gVMysIxV/giCQgZxTTP4oLaYV1WGiPsJgW35WjVWQi797ndxKdEk7\nSIPoB+xHVHgcbV3uPAk9lTK6X/VybK8bQoJmzyGNCTHGP30Ech8a/o6vTdZf\n0STmim/onRDnMcJ8+CXZvs9di7WguBgOJkbgkpFVtwnrMxiJkLC9wgkcp39o\nHOnRnu+ookhJhKsOpSAOBvHtvdg9/q80tluO+ikUAz1jUbZ+SSRxQJraJbkq\nhnaB8Exk/ZGOmeaWvmpXHeM3KaE/VfLhSh5NRFR9EcNOCrhlRMlP6gglOV6u\nxLKfNtevE0UPaqD/qmFWnNGCvXvD5YNkjyfZUHd2xgYOu3QmaxY6qtU8jUqR\nyqKWnZNXKhhZ2Q0KdToKKzAVKGZMxVI5OeJYVtpt2Q6u0i1Jgz0wPsSgqqwf\nKxui4nN+tQMvZrbnB3frfJ5LPM+TLitQwQmUEYSTgaY3VZPSs5Jq7u10bXA0\nQbzpqGjssJ3QXz0YF7qaus3bzmPKAofx8erUF/cQS3ARD0vH30DHjuYsT+yP\n9jpZ6QvVlKZvh2AJRUpGNPfswYyJiyCKeIFu/epUhQKjo1/7YgbHZwuZwaPE\ncuhZ\r\n=WV5B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.c541ebe15.0","@material/shape":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.c541ebe15.0_1581028198640_0.7344526499559365","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/card","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deeeb67b89414d29ceb185b4ed36497f10f61afd","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.98f7faa05.0.tgz","fileCount":17,"integrity":"sha512-EVyEHZCQkcal3CulHVs4cKX0eEdWvo7m1VM/RaoxXy9/ktHpToK/xSGLsV5Rn0DAcGkAN6PukRJbSAqtQnjhUw==","signatures":[{"sig":"MEUCIQCHomFjUCBikNwvr87HGHUiqMpM0gbk+ax/FmFJ1B7TPwIgYyUupE/l3ZrCjiUYA0l4dEp4GTcnCHhDHdKr2lTsqik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbi0CRA9TVsSAnZWagAAHkoQAJCi+2xHT0Jui0hesl0l\nVenm8RDOLMJwwTUFgS4VHoEgQK98dgHHeKeT0VpshwzQmLImnhTR9VCc1tJf\nDOXLpPCGFvCDPjglHyCRaXstQbHiUUrf2pwORUy9dyWQxuJqWPPic3ra9c83\nZGqeJZl4Z8EO12CYDNxTQoA33Y/6U8dB47xxqm+IlPxTJR3zntlmwFMtjm1g\npWcfurzwjXGUUhEuFkL9cEFFIHbDu1z/EgkgurNbfdxKEYo6rKBgoUkyKUQ2\nr0/ojQwpP6S0j+2i6XSzk0+LYPi2w/ERt+ElSyQcM5hdNKO3VLxL3DdmbIHf\npHxnFsaczKy1IOZrPxh2ObeUuMJyeXQxp8YDuq8feMOX/ZOL1vSQFvQASAzv\nvuB2Ojt18MdFtew+90fZwhfO+prTz3obIC0u7QvDIylUvGXY9deOkw7SO8e/\nmYf/v5Ese8XLy/cJgAWz/J/X9kF9AKjpSZfdeLZ6Gx35TrZP4esiANJ/UAiV\n1R22Z/SUStr4fFm7b32HD5xJ57Omwca5g3DpYQklsa2hByAzFT6rb8wuMuCY\no3fciWnYa0MF3SJwGNzX1VRS6R1vTV2L2R/b6wLF1UHdZD/+h6OCAULv1dtn\nXU70P52g9yuFCbD8eoOuU1kQyOgWBVk8ZfQveFZ+YIvNVDA8LtVfrC5Vv1BJ\nQWpq\r\n=7/Be\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.98f7faa05.0","@material/shape":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.98f7faa05.0_1581103283760_0.185001328804691","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/card","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46f8bac7d8f3ae604fa10a8fdb584df0ab190aef","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b4727e43a.0.tgz","fileCount":17,"integrity":"sha512-869rlaP9Vd7OO7UAuW3E0dLR5vnjIKLrdFa0S2Y7KPWl+AajigIw/oWDfznhgYqlEaLLUlXfqNFpQJAkDrQFdA==","signatures":[{"sig":"MEUCIAKFoIGecYIQ28xhP4NciqC09Ze7bwp3TWeGB6ndE0R+AiEApeYlq54Dj5M2OeS+JnKfv5LSuDc+sEl5JSsANAGlpOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcC5CRA9TVsSAnZWagAApkkP/jL4QUYdDOIGygMqObxk\nczut/U0oXJjynmcSJi9+6puBvob6f8dY3EosbRqR3AZVdadQDge5rM1UC8Rp\nrDVBnndmzyEGffvNBZKEqaWDYXlFiTyvwBmdYGI+xCnflQNSGPRowmIQP3GQ\nI5j5Sw7yZ17HPB/pjVEZN7Wv55PfS4GIilzygUZZ03S9u2xZG1G71XaAUt8d\nttcKtMOQS+54EFPc5TM2esoC5zIF0cQJaX4764FiykzQ5/TuuoM7rD6fX4oo\nA5nsOsxzWJzl4ATGzHroLfd99H3CNwIGeDFDsdxafKp7rs8PamRMCAbMaJGL\nlUC/o4hmp2xkB2DbpqCUlMAMUMI0TMl3Ha49Dklf3qXEGHmATWYu4i6v+77e\nd0gk9iy9w9kW+DfMzXBuqCrALQ7kIm3otV6mJmcsh8k/qLNeDtlOcm9Opnx7\nlpfszdmDN7no5CnILnadEZ9lWhA1PdjYIcZ08hWRa/0iD72pEKDBQVRwra10\nXq2WaI143NZ3Gk2dA8PxTmZRZIrPRwTN7HCKjURY867FPAw/GPaJQa+t9xAP\nZZeNC8IcLS8c0749z2WEKT3gL5VTrTlYMRnLGMMXy1hBg9f/4t2RwDTeELNI\nNAmb9RBf3IBIdK2pXaFUR/jqwCEXg2zCSuDPqu/kubnuQYBn0iVkkUcnsSHG\nb8Kk\r\n=xFmk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.b4727e43a.0","@material/shape":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b4727e43a.0_1581105336410_0.671680341697825","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/card","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e87d1ff70c58f183366368ac2d205561dd6bd32b","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.91d9d5a65.0.tgz","fileCount":17,"integrity":"sha512-cloza6g3r3+HyxYvw4KH3g9ZeGl2TBCb4bhjG/5vpuvZyJf9Mz8yQ62848Pa1EVJROV9wpz9BQ8sQ/CgOdeY5A==","signatures":[{"sig":"MEQCIHAXg16xUKGjTSVMwAvQnPd8iu+CWQaboNW6g4a/6ETDAiAC/BllOFATu4ums0fgSctLLX6ByXO7DXvp/1xFo9hYtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevVCRA9TVsSAnZWagAAGmUP/2LCOFi5FP0oeBuGLweV\nvSLJVZ+C+pjWqJLK1IwUEyGx4DHdIG5cPfA8h1o5QqIza6o89HgQx0Nv+q5B\niBSNpTr+hQ/ItsKPXY1P86t1p5PLOgdHqK05e51dE28rnvX4CHxWl/eCd/ng\nuP4rpuTfsIxyr+uiYddgvIv5mmJIjrI0EcC8H46RBxuCsp/XQwMg3Ymn6acL\n9ATQcO/plW6utCmhTq7uiFVI7kOBIb7IF8qEjOJBSaYGmNh3/yzzQUUbhXbZ\nTOW1RVd9GI4PHSDOnpxfq6JLDWTS2yX6AhlsPCaG+gJiQoMRjGfhg5E7N2dK\n7PWumWYKlMyhID1jQgVTrqHG2mhKhuhkvfxMvUlN70IqQaPR9L2ecyzVvgTv\no6KhNSFbOZ9X3YYZ+B2Jd5pLLUJrTxnlJxQDrFNoTZZ/stkliT5YOBcFWyG6\nvOdSm659KtNMoTOB24ckDPB4XMoS7anoyFLhnFsK/WEX4esU7Mili5sCCIRD\nwXLYobwH21PGdWjy6P6lIGXKAYmYXpwXqDJhvSUGPT6bLGoQRnFp4n+cfSj2\n2Mm0jidNLXFvBD1GB0STWuSEFaKVIhElwGnqiL3QabWD7MH7tlVSsZo6m8OM\nfcrZBr7CXIu8vb2cKm3m0uvmcJJqL5XYqQxxLsMO/qZcfj3TTrPbuAffWLWE\n07wc\r\n=5wvJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/shape":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.91d9d5a65.0_1581116372711_0.7478194978262258","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/card","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"085eb22d7a3afd5b1773f33ae27175a694f73530","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.d5c006ed1.0.tgz","fileCount":17,"integrity":"sha512-+WIqhWheTm+91HV8L/1yC4pX0/czeoLUIJwI7ekZvflNUM4wEcAIBRFue9OlYo5xeGU1EKer+B4YMOtH9bxevA==","signatures":[{"sig":"MEQCIE1iO7uA7ygoywZuC8zn03pJuRt6jwbPBHX9yQfZv65sAiAlXUivv53RcYKdWWAgiesyzRlQ1FIItVMJj5agBANmog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYl0CRA9TVsSAnZWagAAyZMP/RYuUGZbwv6MxFN0HxQ1\nXud/Pi+Zg5rQgnJYcBxjUrkF/Hy6jWPDvQZO3PLlR74cBtrksnbBw+1V+HZ8\ntWSLKOM3RKSD4SaMsT7nutSWR8p9KZeA6DLPeLFQBXdVYBqjxfFwKnhrAwtM\niMB7rzzCrDR0oUzafa9+2xNiM6oBul8yU59nU0HRaVXY45a/u2/VuFkl38m/\nx96S0JPJhD/iYlF5tVCagNWfF+SvA41Eqb0+zEaDT1HdOYVVbRnN9HBMCunH\nJWhkd1eqY/hdW2ePFMFGDRYl0SwaFBdJ+zr2OHHRPLHWVWnDJMRLoR35Gz/C\njSQx2zIagbxezxDZLgV70pYYOMEHJ23LxHxzCQPw9Ad1tP5c6YnfxyrU/fuS\nuNKB3D2yL5qSZJ7v5vdLi0vN9abzP5p6dfXRJx1uu+9qICPmVjVZHFQNiCkM\nMERdPbabBRHscLxWjdbzffIuh6Nn8ew87l+iO7B/BT6CrLrVpsNJdWZfljv/\n5rLMm1F2FA9hKJK416PQx7dcxQWxdnJ0urC8v287nctcbT+VmL3KjlMWW42O\ntHG9uTOGklLLmOgIgibIx6Xni0VKhZHMM8jQZhshrd1dBb8aW+7im1G77D2y\n5gXXis7siTv9+xkGGJIkyF04eApdHEmb6pFf8WCAivUwUC/BDOsAK8LLouy5\nhQk8\r\n=69W7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/shape":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.d5c006ed1.0_1581353331520_0.12444367318993366","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/card","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06ebe32090a2b89aea3ff3f4e94b8dd5616b404e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.559f1a570.0.tgz","fileCount":17,"integrity":"sha512-jJTtiEd7tIpUIkwNk/2clnCrnAYAEAbBWrqmyhflsweoMcMSJ5sbRDBX9IoODssSfdz83inwR9jflEfKDApJyQ==","signatures":[{"sig":"MEQCIFJGky3XiXkdAYXQIKA4OP/oalFjONI6SWTGH1Yk9r73AiB3QvRldQiG6hu/ye/BZs7eCfY3LZIdY8ddz3VZOgMxrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZHyCRA9TVsSAnZWagAAMlUP/2X9kgriN5yhpAZMExK2\npdtFDLBmWFfwrQamKhv3jhd/8sEIek34W0+17IOph1saVZelB3n54vg0+k8c\n2O2pjmYOkEKn/vyVDTmGK8MuhCezGhCqvJO6gHv/61640lxBLI93zmwgMqvN\nG1r9ZZltbhcFotzxxOksAT46FbFAuA9XeC/YSIAYV5q6rNmMmM8O8sQLDkEA\nDHus4stxL2Itovb7aYQ8AQwUiWTwg1i+5cjnBg1Y3KKJtZcVjd8SOCp6Kq9G\nyhKMavKAX6Jr1rjiU1Q7My2oVmIwwdiNod1l9LuIcM7rvj3Oz+rQaG1jb9ft\nIbQFgSeElmMyaR0a0QTHEnwNJNXpNvp9YlzSTLYKwzxte6EtqWhu4aB9fgwc\nZ20B82tDboZG1rVKdmoLnMrbt7gD9y/shdmuWzMcW8XMRN3KQJMqepRgJO8+\nNc7v5AdfFOtMu0jxSDwqPbTDHKNAvShhdpPYZxvY2SXK3DnCy0JD4Ssnlwq/\n5GKWhbisN1JJJv/eqvEX+GrSoMeSRtZkrhrHD9Yrl+jWyaNEfQbepxnUtBSM\nqei5iioDqCKd/wx/vfVgJ0WixY1hM9o2h/NsCUgtiPR1rCbeexUfZXPbP0F5\nWhxpkZu0cMQRXTajNmATM6oreRT14B8GNfQNVk64qk5c6ilbJgzsSKptaDrY\nBFKZ\r\n=+2TY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.559f1a570.0","@material/shape":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.559f1a570.0_1581355505435_0.060462086611243304","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/card","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3fcbbe6cc0e570a86c3cab896e3fe26970730e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.ad3bbf782.0.tgz","fileCount":17,"integrity":"sha512-ichCav8NMBxpL/UqyXDWxZoapKK2t70RaFh6XBpcWftq/3qzSdvUUuEcnb37OV8HkzEnL3+uH9+vDjrxzdZImg==","signatures":[{"sig":"MEUCIB5PaQ8TgKF+JxChufVQNgkAHokABN+Vcpm/7WaM9GXNAiEArS+ZvXKkhPcYoR2Ij/Z4E8BJEzmILQIVouLn8SEXF3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQaroCRA9TVsSAnZWagAAn1MP/01FnJu4yvSZ8ULF0zjw\nKdZL5B8aOGjz+v83RFMQdZ46cUd71fR+E79jRX2nY0DVmUEgO8kozqMUJYJ8\nns3R7LpBhMUvIp9WTFCt64MhCnytmaGd5tD5l67ina71xK08uE+a8tK3pYZU\nx/hfOKQ40phdLAYmU30XfhP2YsN5oaYfwJyaupKbk0q3H+c+rsuxrslRLpxc\naDIww8VNyu0krXF06xsoZ3G7LK9M1FxkKlwmT7LPt3jlKdYKN2xdjEXTIAEs\nGs5GlnWrt/F4j5mlQVBPDCf7bZ1HKrCrl+jYqvrfSO7yb66FjZm1S6Jwhjuw\nHLl89kwtr0ArWy1sYq6xboEGanyD66rLAfMKFBr+zBl8VAwJPfdeHBhdt0gP\n5vF6NOUCklMhFXdpaxEc5SVsAKVRAAdr9x9EYhdhb0V4uWKlcnsEkOqEN+/3\nRRKtZvRYBzU8VA8amtLyMyIwpzAuoJxC0GeX6F7BgzTwO05Z3zcPXxd2Emsa\nGrKXvom5TrGWEvlepU05tUPYUIGhdF9+Tkf2iTd4ZL7liaRqCSg3QPTcMFF4\n3PHj768Jq/l0iMtPnuOZ1zHd4iLsVYIG0nMwrwjGRAsIirJDOEmm9yWuGjXp\n2AglWeT0ESPYNL4a62Dr/u+aod01HTYL5KkznQZg3GAmw/KRhNBy9Fb7ZbmZ\nBzic\r\n=oz6q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/shape":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.ad3bbf782.0_1581361895654_0.6664321501929511","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/card","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cfd853faffc76c854a7a4392c9cbe0d7c6a6d21","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.570d8e49c.0.tgz","fileCount":17,"integrity":"sha512-cP7Ts0iDOFMsiANAaN2XFkE6UVZDemoi/tDbVepeWjXScwS000kmp1DRqklPhNG5fwhnyTeG7nCD0NhilBoEDw==","signatures":[{"sig":"MEQCIGWLsIjt01pVBI103+8HcB1Wf7sh6i7PS0E54dZ5XyeaAiB76uf3B8Idiq8HedPYp7AezPHIRLeUvKim17ZgHeWb/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcByCRA9TVsSAnZWagAA18QP/3P+iP6b7lo/NAk66nLD\nZmvO0/mkQHMigsvL1acEZtECEl8+mSjxY947ICTceVKY8q23x/oq6TTI820I\nwEuz1I8Kkl6d85EcEPosq8leI/ieerwpchgTnk/hFkxWeH7nNhqqjT5b1/LC\n8KZ30oYogBhuphJ88eMum4tStiWTsGp9s7s1Ho87232fuUW5TiclWwpe8jUj\nVqtvBJXHK8NsfSC0lPyXMyj20dtDjobn/JVGV7/93NbdN/LFZ5DyylpEk57s\nnTo+6ynmLf61pipchVx+B60Izy31JN7yXd/5YU0xbR2A75kzCuRH/t9zHPZr\nMfSfU0J8lag0jQ4VQOlxdlcCTpOmmVRtU448flQ7mr2CpCCnYiFbGGtJa1hQ\nWGHGZXo9WC1bGt9VONdbd5sqC7gJuFCzr/zAIlnglLw3yCgHkz4pDNuZ2w2t\nuWLJIsTymgmEadturaGkOTVMBWYpkYgY7Vz9bR8RFMLz5n4G5N2Y2+8yeAUP\ntNQahlpts0wNyKA9lExrP7DYrgzQaTnT94uMJTZgtCG3i4+fL6gkHbSrmj6f\nAQRZ2PJmjbovNUU/frt4QOmMM5MOAAjWBDmTRJR6VY/azPZXrWnuRcZ4hOLu\nqTpDeecf3RgsgNY9StH+ghHhtYlCKaRVo0DKevlX2g3QuikDs2s1+IVhHuT+\nRABr\r\n=G42c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.570d8e49c.0","@material/shape":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.570d8e49c.0_1581367410050_0.2356362782903325","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/card","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9be368b21c6b1a02db2b25da572a533d7160f57e","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.48b06b89a.0.tgz","fileCount":17,"integrity":"sha512-3PKNJ4DhZaJDLK345ihFMPxQz9ovu++WTcyLcVLp2yfgT3mRpu9XkSZnRLb6ZP+jqhcEKjJoWUPwQhV+MIPWVQ==","signatures":[{"sig":"MEUCIQDZ54UEnJ2ShGgh9oKP7IC7iXhSELwoU9tUfUFuDmQqQAIgNkoMaph62vgRzDbQSUH4O65FamWvzm2i8syKOIjkY2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXHCRA9TVsSAnZWagAAZCYP/17+qg0+IOhSP/GRExua\nesj7ZXpPGzVaGVCGk+4ivha1lQxSPhlYW5zrJS/Pbcepn+ZK5mK9oXE78YXj\nVOA1soH/J4hmd5T9WqDb4htJUZtJvJucs2SkHeitvZvli18RYHy0OKGQWxNZ\nwLRlYV4hJEAyweC+qC/248EacI07hxMWE7Y5eGsgIOWQj8ss4EBjI7uFnl+M\n8aSSOIcxQ1iki7RnQ+UywK0imBaGJfByKQCs4cfZXLLKPCcUIGlr418Xx8ha\nnmW3z654W7u6vjrEbHW5964e80CdUHwjF0Em3RnYxONZ57EBHJUQiZamm7OC\nMrUWixKb81ppMxsWG/XlzTgX1T8i7voG5rryHj6goaetN4d5I9o9OOwdvqkf\nrmUWj6EJ7RPa1I1tZ1XV6FCMeNxZRWN+Tda8Hvy2hLZhFR8pLV2fZ7kONj+D\nUo/wRuseqFzHDnQtq629YpusWuOURnpy3UZsKe/lWAh8Z+0Kii7jYaaXARcd\neHON6Edqsa25KlyXRcyoZkyNjxMnyKT6u5NAM7is7KwrDquLliGg03I6BAek\nNnlLV1ja4jlhAZKvR8y60Qd3WNdG48m9fzAy+3dwN5qCoAQ5o1vG8qJmzRwp\nJc37fJkcytsJ03IsnmUymiYgQfOAq6EKwgpjUiXArqKBEp4UFUu606lbLRxw\nX0Yh\r\n=m55r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.48b06b89a.0","@material/shape":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.48b06b89a.0_1581446598885_0.4878442056509755","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/card","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82533f6eacf85195b2e92a0944020aa86867d36f","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.612443dfb.0.tgz","fileCount":17,"integrity":"sha512-+TMaaPNf4izbICfiHTXcMxYDLXjwjmmYkmOWz4Osfiy029lVdR2BlVXf+rknfbtCm4uFxnJlDnIp7Vyeo8rmGg==","signatures":[{"sig":"MEQCIEt0dHZ0n3BKM1ct+nBNr814HE1+9OHkmIqjM8aIFdRDAiAL2KB15DAeytCgvef3dkQ8ya7NJoRQViGuE3ebyiUzGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwU1CRA9TVsSAnZWagAAaFMP/2uokilelhrANjhnue+h\nxmlkDD7vKm4/zq9ONeRmHtny0OusJ8ov+EqsW/HTUQu9ph4pjAVfHam8HiYn\nYRtBzq1E0sl5OprVajYVeRWHX1iWHXsY3pZ1L3iAX0IIWJyLg+ynKE8gVT0s\nh5e90WV1MSxVEizPlQoHrpzLCupG0Oj4TEjFSK+xN1tLgKALQ4yEa9uqkzBU\nzLwX3lVp0YgvQwgNCXKXTkownNpMj9SwlXCJ0cOKZvZNa8GjseEPx4iEmEhn\nBzOH7EWfCXpOfsb5BA8DJMMBzhgRf9VSUd+VDVH+rdvBGCivOfluS78N8SEE\nTLZAIGz3fkpynmcwsxDXTnbkJ04JHS0lmhuLuqCW0IFgmnDtn0S0tUuSZLTl\nJxa+SPRBDF7VSGBFSCpL6tIOM8zqNVKA2gNRlfm0m/7JfuQ7m6DEN9Penm3h\n3+ybxKVpn9GDCDtL86QMW0IiwiYiahb01E9R1/H1EQFA4A8z5pRQwTzI/QSs\naYfpCjv65dTgfne4Z0kbHboNNb52hINFy1QnGnPpzrR2rNk5eJbqq3PAldDa\nZ7W/7epcvek9GYJLQS7E+8v5S7gzMgvc/1l/cjCru2estLBxIUzyropDTvUf\nQfCONBT5KLwKIZJdlBIJc6SW6nrdPpPIb7Gl9twwV+IHR+Hi0dkxVnXDqKcg\nITMj\r\n=1dlz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.612443dfb.0","@material/shape":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.612443dfb.0_1581450548745_0.5175713580873149","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/card","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0403854508163d11de7a3ed2f91b698c5b6f3873","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":17,"integrity":"sha512-NS25bHaW5PfcLVYVKcVqdu/jJSUdSHDcsVsOFkbm2iiZxQAg8MZhyKeihI5LjNazYGfbsHU/ixRphWAABdkFAg==","signatures":[{"sig":"MEQCIDFSzb1SofQh8ABWeX3cuifqzdXjB6auRgpXZ3NVTcZNAiB0N9ETYB4Csby1tuvCXI3/eT15eJT7uwJ/zdCEEKZVSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yYCRA9TVsSAnZWagAA9AoQAJWtJAUh7PUrE5cq0iox\n/Vt2vvzZ+rJ5E7BEJxTyQ0nAX57zMKq1Z6HHp34dZJoJ4RK2jc3bABU13Zi8\nLzsqv1uizvy+HJO+GVNJg+KvDL5RsaSC5L5EoZO2YLWikTLfGhXQu/UVoxrw\nSTTjI/aCwL1SZwN3lHD7i/Xv787jXDZAcEk9xu60/gcs8XJpU4CqbG/X5epR\nBx/mrJfetwtWEqZlLVisRREVGohQJ4L7w700kT8hhOvCxaz/3UF2+JoAl8QA\nWbrXhPBU9FQ89ELma2z63AXhVxaxlYnlDMoD5iYsvzUerT+4QjYPrQ7/+LeF\nBXHD0v0UUZpT34sZY5e1THXiuhcoLNPKXEkl2Hobpbz6t/MVQR58y6oNK/u+\nFwEiSscCz8Rw6ni87Qyzd68aYEx0rYPZhBZ9MBZx0pqZYOgq8TcbtFc+4xPJ\noMdINVHCY1XrWJ6pMFME1/9IkTbB0yNR2gmo77cM9L4C4stpt+1xOwuJFqcD\n/R/ccUEyLI1t/p7GseqAis8d3HulFGNI1+t9pEJvgEbtRnoGz91AUaNzz5Oa\nNg7U9pBkE+aIwa0n/GHdxjNoN9KC0FSJziKGP1mBZEK3Vcs6vN3vUUoVhDIa\n8Fso8+mIZ6d5zGhJevuI34Gis26OKlewa1VJ0EkKCmq+cqxF4ClYfUywbU5H\nNhsE\r\n=AEZ1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/shape":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.8c11ea2a3.0_1581497496277_0.4976097394713028","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/card","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e356b03d1d5c6891cc669214af284a497631468","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.b2f3d311e.0.tgz","fileCount":17,"integrity":"sha512-u7RCxNZtUTFRGfivdmrEb7DcycDT5RIf7+/UzXuKuuWdKwO1RhurTKU/xTtPysgN0qpQItxNwme8aEFAG3+0Uw==","signatures":[{"sig":"MEUCIQDQEDAQu/tIyPOW9S/T5F3CArLb2nnBlIp4LLDQy5XDFQIgTPPtN5/cCuUgI4fl2fOGpdPBW6YVoYRCx+EIzwyUuVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMsCRA9TVsSAnZWagAAwBkP/AyvG9UqvwhJb09WmRyz\nyAGHqLcmuGiPnQpsQDsnYE6BOu+2uphBwifcgJcc3Xmjkt8O1mqvn2SbhsIO\nYZgXM07sLX/v80BHfBx5ohGbeRcIgjL5IACSbKhPd4aCRsBl+5FNOPJo3WF9\nmj2nkTBOZiuT4048Pd5JzxOaI6Bot8xxWT9RLaWae4gmm5JdMXUEE+BM6ZJt\nIzWMkzjbXtzJ8MGa4MAuB4Rr7gMtt2ITXWFj5oGhSRtnsyAufLJsQeyzyyxO\nMGEfsIi8jhYRkXk7JcJkGlXE98Q5ItmjfLoVyRFRG7QTwEoQ2hpOi9lppzm7\nALcXRhKbpXbeU0gs2fpK/ZrXatBduKMFdd2vD61d/7EXi3v1OLV584AjFr+n\nHfwOCO4GIf/vz59JGEtdFiakX6DLVIzYHR/h3gFWxUx3CBjZc/5gyP0vqF16\ni2tV+Gxu3EaekQ1nBFuy9PXtl6qq1mbDpXyTg35UH1wn+GKvdFp/vasjB4Wg\nMs19rGVtUYwJOWEILDTJFrGHKCM4ofxujO9ntS5IRK6I8c5avo45Zq197ErR\n/nbRfAL5CEJYHGCyWwFmxOJuMVYs1ANLbVB9rmsnFwVYpmPUbjQBXVB34Z89\nYjooHswhY2vuBzbn32TyPG1H1CYo21rt0ef41iEETWPq+5drQN/zi8UNsXR3\na0Eo\r\n=rlcx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/shape":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.b2f3d311e.0_1581630252341_0.35642034165244274","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/card","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"846268af1f30d04df0871b3917b0e71793309b4c","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0-canary.4f488d0ee.0.tgz","fileCount":17,"integrity":"sha512-8PE+gn4IKcruylW35IjBkMi8YRmJcbhDOk4qydYyvMPv3rfFIshLidlWxrBJTJAasueUUhvV6m6FGBhCQ4UVew==","signatures":[{"sig":"MEUCIQCy9y7g9SaHiXlWQsG2pzcDIz0cTYnGtxy9ji9h8MaPiwIgFd9XZf9iZTD+ejZfasi3PY0PU36tyRbQuQMMCdMDHUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZrCRA9TVsSAnZWagAAPUAP+wTVRJSQO07Hfn4PVGco\n8DasNSPVmeMxcyLwJAzhvwZ1i5koIFVH3LG5QUeyuhDYg0xWfYB59MDnxAOL\niZFCZnGhwqqzO0Cb7xesVEPDb0UZO9w/M91vdN8e9AezZ95f2J8v3zZJ02rq\nTzdg6Id3OCM1L7bHW0dylSFa+V5ja9z+5dgMrqBNI1c9fXDk8dl0Ezt+Pbw8\n8UeI/e5RxbJqVmvDEzNn3vXdgDNIHZ6Bkgukk1gXGZToo1UNk/nAUESvubGK\n/GoeD0VEm38GTKI3yXEqylV1ubEkJ4vehklNOWVsgXR/qpP3O8oVhekXuMl4\n2T/HZhJ/PSJbGbTwk4KbptFx2XBmRsU9v9Uh58AgUs1eukZeSkNXUqpdBedj\nqA6LpZ2DHEfO4TSLKvcYxBxElL9+l9fpx338TkQtA3o1AjN165QuWnyFgkll\nz6Ti4O95zgop79+KKyghfRcSy7vmPeAE6azOVwW4eJffCI4dZXfg+5o8X0K0\nW/xYFRu6iVnZKRhIDuUyqobv7U0wSYOhk/+9xVuZzxdtKTzpfKD7zuOtLLc1\nOkEK/R9oUJa5qf/3hIiNmBXhTm5PgLk3hmqx4N1omYCmYBpuokTrDJ4zj4U5\nv3iIs4+BREhXZTp0AyuXJj7cFbNAHBYoE/eaVmdhBLc5EJCj2DTEKJRDBxhh\n0eW7\r\n=ik9A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/shape":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_5.0.0-canary.4f488d0ee.0_1581635179090_0.5109727624773988","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/card","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54385cd9416429e2f2a4d1cfe2fa833ad44cc067","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.fe79de07d.0.tgz","fileCount":17,"integrity":"sha512-podhMSuJEh0ox+2lZ7XplQvEVWuVfhUmtnr5ZxEWFyD4zejERWiltk9Dx4WvJDyBi2q8ucqLc52jUHA3VSMexg==","signatures":[{"sig":"MEYCIQCh3bVN2GBxBU80/cuAO17Yktzao4t8A9I2Gf55IUoyMQIhALcHhrPFPWFxqtR8Pq0dzDh2Y6ls11g4mvuzjOrp6m5U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqACRA9TVsSAnZWagAAMWAP/jxVzFJIsV3VjzGGe221\nEsYsWC6ZuugQgeh8wGd7W2m8f5o7Wo9tJiiKxm3ErnkYvgj/dgcbbO7AtYto\nxKoAQg2gSVK1KOMlOEMg81gt9ZjZQQ7HEUFBXV9gWW/iwcGc7JjhMrvQ5PSC\nBduWRifxDwHMNVdvxjSb/cF5b2xpYA/Hquo/+s0+o3+6Gbe6JinqDMEbaQA+\n1R4F2bDgIsPrLBMF05/H2U90EjEdtV6JiUcX419OWKECr985P+gZxL1CK24J\nNWnY+7o0lzf96p7a4QhNHGugDzkx6Nnmq/ceIFFq/7CjehHPTcOkVIb/n+kv\ngdvCaBNjsmgETqMInVD8AuhcfNvLbw8kLTcnxyXRbVWl7+cKnPHIAVBi1roj\n1L8kLelLqhAcbCxsAywDWCWgHzDkJ1T0afee0LZ8Q7yL4OtIjkl3jKeiRS6u\n1plg1K44ctTlTsSVCkRehyaCtCmMuG6LF6nZdx1REMUQzk8hmytfRzHwrjXl\nNHgFYthx8Tcv+Dmem0BWBEJsfKDWCmiUG54ObHJH/fz98CKYP7BghvVp+eIH\ndjcv0X4IUnvKArwsMXOEOS18P0Jy8k8wCfoWbUFPnQzKu/UEuDcEkf4XuqfJ\nMBZW5GL5MM16DgGHOWvr5iglmsMYylmCObX4yavzZRYFxjUizoehooMmMy9a\nQ71M\r\n=C+Op\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.fe79de07d.0","@material/shape":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.fe79de07d.0_1581636223709_0.43619250000406184","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/card","version":"5.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"697263d01d9d4f37280c11972ffd566e86981cbd","tarball":"https://registry.npmjs.org/@material/card/-/card-5.0.0.tgz","fileCount":16,"integrity":"sha512-+Ca0GBOjn4YR5rD0ojSlzkmE3DI6PM8uOT3/fX5S3nKatDpGc87Dg2uttuZCdA9KmXyrT7g0ZvsdqrZk5pkMQQ==","signatures":[{"sig":"MEUCIQC/RlR6gwVwCCd88vxhpNReyCsGtJ/MatpY7LLhbxfWFQIgBwg1Q5R6domBqIq1d4Moqc9mqyBdLgK/O5pEHhClzI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUeCRA9TVsSAnZWagAAL4EQAIbbfmUmhNd/8HiT5GZA\nsZHfId43ttWoOficbEB0OSSEohpjn1ElypgYeqImd7vfHfV0/rJ25flcuPzq\ngNS4DaJGCT82q39uvLLmL6bKaPby8vBPH6nVSIZ2HqdMfDJ0+7mcmMBDx5os\nsJQLm8leavGx2mQ55lcsnF5eBTmK1+JpFOVrqkKbu5KLlXEqGSsm7LIKX3QP\n4O6JGDqLENC2ZIo4ZtHAZHkIAKoYOo4WYzWZGROsa5olHIdZ2BK56YYrkMZ2\noBMFa06ha4z/DsXA9S4i3ZZisTZzrE1lVXc/KX+FtE7rBkT2hkwqfWVltt5l\n7CW5OT4wmKbexorCiKBet/4hp1iuNx9T+lYTx7ZM0DyE7YX5zZUx737J7ZyB\nDQLM+lra5O8UyDwZ2P0AdJXPd7MXZu31lFhrsVAUOpMTpVmw4yZfNT5qvnaU\nCtI+T9DRWLm4FfYWh+9C9N7vTTaMJuCGCts0WE5jtMTsITWUr9FYl8qJwQmU\ng/QH/UYQOTkCxlbeNEb0Dr2LOBdpg+5W9pLl6bSGKuJF6xRCFHskXQmpRjSP\nEy/pCArnt4mctBEwH3r+pHYPp9enltyjtAi+Nz6jIRl740dMjvaOcNX8fm3F\nm6iH8THyWfzidEH4qUA0Qy273hgWz5Zg/DCCme6qMIJ+KQFB0He8ZvOT+osT\nUro2\r\n=QrE/\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"^5.0.0","@material/shape":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/elevation":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_5.0.0_1581638941878_0.7158773057081462","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/card","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f69942f1d9369ccf7df8048d54cdc838d35778cd","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.5e313b1f2.0.tgz","fileCount":17,"integrity":"sha512-DcTHzUXgOVuyN3yPXsIUOcwxOdZCrs6SafLOdbarwdQW5RZrzIRQhv1P9c27xH3cFl9OEI75I1mLoYZm1x36LQ==","signatures":[{"sig":"MEUCIQCiCJu/+r5xWQtGhfoVq2jruQJKJCoYMLKnD6LXPV9T4QIgRl3xsAoeLqjbQ18vveqFcdo8XnMl6SwwNE7r2sktb4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHBCRA9TVsSAnZWagAA/+AP+gLDn5h7gxC8Zy5BhdJb\newkwh/1dAExI7dCcbqTaqkMvNynCZavCyCKyVrftoAY7XEm8xS3ej3+6PG3d\na5ZU7T52C9BDRU8E83ZVRHm1ZKN6/VoQEaIz3xixVaZW+fgL2+eTJj/FR5U6\neHK56CC7d7uRCqCoCb62lmyIWlZgQb/tmiCGqFdGFSjZvh5JHaSzWkVxe1sJ\n2bm2s+tOB5pljOuRzDkJhH8dj3nQg7FQz0mlXrFhB+V4NSW1TQ31b+VrEZ0L\ndWqbYbHAzxJCOia2mZFFW3t/Ikg0af4uASCHbzgSeeKppP0QgXGVOYoxgYk+\ngdqwbE4sJr4NZ83zp0XmKC8waaO26HkG1M49aNemvuvqj/GmB2sdgLhm/MWz\nt3Nv9USifuZ/+b4WN8T77WeFXM8koGD95G8QjTSOXRXvlinUD7i33HeCPChQ\nGKkfirzA6PAQCBQrtf5iaxEGojlTyHrl5xcfys0/VIIOhpyoQYhpxajzMryq\nWG9cAgWO12NrVR1PStrYvIxxX+JxZ5m5ADjkNNlYqPlc+dkOZRUiF+wx1qLf\nu+/OHmeWiaNzYK4z5tKgGue/nVS/ZAh7LshjXZXyHSx8hYfkTqD+anBMJ89P\nuRIGConqB1KvmeCdMs3trlcqZV9o64Pzyvg41MQDOusTL7S0Bs3XyFKXhh19\nyQy1\r\n=QDKp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/shape":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.5e313b1f2.0_1581724096830_0.1352933477472713","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/card","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c27d2e8623ba1673939653f23c56b08af45c8d82","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.6a56f387c.0.tgz","fileCount":17,"integrity":"sha512-zm/hKtCMpDzZm0e4WqNlsBpIl6k2+FBkyzipeWdTBVZBPtIoKAxHA70/9zUUe+s2zlY7Lb6HZ/UHqDx9wx+iwQ==","signatures":[{"sig":"MEUCIQC70D0O+HhqIx6bLQ7C38/457pGZbH5wvKSaE9tIW9LJwIgOR9dylQQzj0D93VpWIfPkwQMiAmde7OBKVRMR8U8YOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5pCRA9TVsSAnZWagAAQLIP/3ZtH0iTEBkb21j4H+/a\nUrElOZ+3v0fww/4BM7x6YQId6iTxsvEuFl6JzixRR6VRjRvVd5Rh7QDhieBh\nydo/u+KgP9j6d6lWMcS/7pUzBY/H2WK9O+okancUN7X9uUDseoqgT/4+rZuC\n/8slmAn5irfzmnVBHLaCAhN0jIJiMg9RRlwyDUPOVFtH/GV225q/ipg2AW1l\nrFNe0z+qLHKWiy6PFXvxXrFD76JQe09tbA3L45iRgz8Zwq1Fgcta8qWmxx8/\nN9RNCvM3TKwqs9/ihK0HCfhq/1zlhQ5od7B5yh5soN2g/U5aUwc3c2nYO8Kb\nx2EH32fVbPdfYt1XvagrvkyBFJZ+2+MPwUzSfWGysihgb4a8+pDXNXRSOhDh\nWunFYFz4YnYCZn29o8IvXtAXeNpmMtwdc+gJ+DiKp+muVUzD17SWQvaeoaKd\nRjqv5TcnHkSjqKj1S18WjvaxmImuqsNriCqdH8OgIJnrtIBOGAuq3ft7Svxa\nlHU3Dt2NWdPH8i0ZHD18wp17mBlTO7jG91A+jJBf0WFW5q1leCP+KgKQMh2H\nuZbgU3mXwEGWhz3/kfkMZnoF6oAywmD6XKVFvc6DX9Ogkaa1bWStnvpouALm\nG9hPQ78na0Nc3VudcYiLEiYrBcsDkEaQMl1tbt3+VtAC8FpQVQfTH6AjzdBY\nknYz\r\n=WgEY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6a56f387c.0","@material/shape":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.6a56f387c.0_1582055017204_0.5363710411914173","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/card","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da04e78c4e51094a162b8d65d019979db6e9d7a2","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.bdfd52632.0.tgz","fileCount":17,"integrity":"sha512-4GCwTaADWcM6kTROLaXSFTBvT5263MVK6a46DJTb4VS7T62Bd96wc300ZHWfxlkF9nNW73Zzs6RJaHvLkGh1NQ==","signatures":[{"sig":"MEUCIQDkbAFVgsFqsLCbcVMb7RQXr2qMqgG7tf2XJ4w2zTuEHAIgXGwaX5n+XDLEUvrEddK3FrkpELv07qJLbbxovEWwG1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkFCRA9TVsSAnZWagAAaVMP/iQZ2X7VRxYD4l03nNMD\nHdkcAHNRkMvQBI4I1ZCxfY0jf8B/ero03ZW+RtYq9M45mqS29l4XQr1OR6E2\nLcHN9DmGr/avIpByiEL4K22mocgOkUmTtSN4fiu7Bf7EUzp7YRUuK82252v5\nZXkOAIODvfQS4PM+ERK5cQZ3yu5W6y010EDpS0ApBrw+Xg/MdPe4Tee1Hbvk\nAujrQSmENkSBhovMzPrlIWX7C3r/kpEB5Ett72tAibjZ97bBhEzS9Tn5sq4z\nyCL6cx87AML+pWwo4X2NpEBzTFda59/w33fBY8RpLmqfzKYV8Fec4BaEC7zu\nVAcuLcnh8uccBvNMytpKKB1oUVrRKqNV0STpI6l7KxU6i/xWho1nf9Lices8\n2GJlTXqtdHgX5eygNJhySZqck/98xbCvEyoBg/CevAuvkXrS+l+r3TVMKzlG\nHZSZkMS+bgWylRi3FgpDxL8uX8EcLImRXFyUhh26Y8JCdii2unrVhk3hOAIE\n6+bHctTNmCl6zjfN+SWNAVH+szrVOTRh2+QcHfh9SITACw1dmFLxC6BxljJ+\n67vL3r5a2Q9unr2HdF05+COTpdpqbaLOPverPPEXEMp3Jq5NHjQeSmnbEoW2\nlMqcI4j1tpZInfMDwT1nM/hbxxruFY1gctDIcqZXvYDaDZHWS3Gqdvki5sEW\nbaS1\r\n=gAWN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bdfd52632.0","@material/shape":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.bdfd52632.0_1582143749023_0.2442961175687377","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/card","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"743c12daed0ac6e2b024cbf16e16a281eba02d15","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.ad2e4376a.0.tgz","fileCount":17,"integrity":"sha512-qDPNKEEUTdPn53eKXefucAiUYE+uh5aZM2fwi35/JQHcezuIANwv0Bd//cvqUquW8Jti5BPuTEE+YGaK3YYKig==","signatures":[{"sig":"MEUCIQCJtoJB09SjqeYgXXXiNCzIRliD247kzGsU6iPZ4ckDEwIgb7mZCWDLfhIMdzQecQN/eoIJG6XddqHRUCN48VcHBUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMzCRA9TVsSAnZWagAAGeIP/0yKrh9ie1PNPlSmEVMq\n78KVFZ+2dUld+dfK6Zu4GIEEErIJi2xbZcPCEkuHdkQAiWYGqLuBRII7/iRH\nUZPKPbZZlHxUBZuIU+hcghEP22hHJ/hy/EpEkTr0J4hzjL1uTfXYJMAZVvAG\nRVf6Wpc8XE06rFAJU8OjeprZUEF4evITOmsA8yJ6VRsWbAuEa7E6eyuVAdx9\nbT3oFj55feUeTJyYOnIf/h9xsJ7SX92pXtWGvuZ0GjEBOnY4EqSKENqudzxN\n727lrdbwAGHiCOFHth3zRKcxXgRhETN/SuGH3rn29Pv1N6VJeli/ybOWrFqt\n0RG0znBmiQd6gHvUIsXYTC4FiYfetoPCXV2nUPvur7bc2a0cIm5L254gVztC\n8eok4LEhDaMD1BkVsvl5efGEmu6Jx+/hPP8D1zsCL0E1YRUkhhTuyOMq94ht\nf2/q+xiGzDpu5ratT7wfxtcVuGrZDAC+1MGoxaAwUWm+GjkUHWBwtrEPT2NH\nUJWU5XBrK0om5G1iTCvjZZ6gaQaepDiZmBNd0y9kcP+CSkfR5+kpXBsA90ST\nelrzz58vAmVmhHFLMw7f9lfHQG83oPzIo/UnQbsJ07vrRXpBc0XiMWwHEtxF\nCrC1cmqqkigSp//Ua6AaSP8fiMhN4p8BWXYz8efmiSYptq1RCOpOBj5Hk8bd\nssuR\r\n=dGOb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/shape":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.ad2e4376a.0_1582240562565_0.2723904704718776","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/card","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d601bb7d4de62021c552f3be82510d59a668d8f5","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.765caef18.0.tgz","fileCount":17,"integrity":"sha512-fZOpZ3zX0A2p68/eyWhLqFOwp4PvERdiKNPWmBG1FPMF4b+Wc9Nll9PIOLil1s0Twfrt67kDmO8ez62Ttvax0Q==","signatures":[{"sig":"MEQCIF0kpGyPlYa+nX2TxLn7+ILY/OpQJzgYgvpbqnUkvsWVAiBfNa4qgGj2Oi+/1b1RjXGMkPqgWXj7HfCxyfnAKW59MA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRfCRA9TVsSAnZWagAA1ncP/R3VBxKStpLYVFTHK1cH\nTqifGdLPvlTyoSzl6h3T4NiF/TkWoh/aipZl71nFqbKWwCT1bYckV1/kC2Xy\nxdXvLo0LdGNvKcE02oX0b8me43wMNIUt45Eetrcq+osOxtWcsjSntjnBd9XE\nWQZacoAaeiul7nF47P3qUfYGRplHCNDD2ThGBqYkkOkrCi51rvVDs2mQg+vw\nMMB2FuAYeVjXiGXjV8qB3iIFyTB0nA3NmZ6dLSUW5dyi/esxrZOZibMnHwTb\n1qGIZKF2UwF4W6CN7WH1nQQ5+v76+z2dO38PtnSf+CYZIr/1Vf4mxwi762lN\n/V/eJbikegWTVQYKiWosp7v7wqmJrXgz8z4TmCu0LMzkM5LIKixpt0LGfArk\nsBfzAGeR9jTzc6oN7xVPxgDkAWJQqvop6qlmned45A0Oc1ghJxsXPA09g07I\nMYxbdTHjaGuSZYVyZEQtiAOBfZVn/TflE1//EZNaH9orbdDn7kX/hTidrqFT\nMz1wR+shfwRPgBzgFbSopPuS7H+3R5zObDzKxa4hYg1A9s6HFGq6K4J1h8nR\ntebW8bFUtrKkqBdhz6MAaQK1rIM2pie+yxWYx0c/69FH07QAGoRhpmKFKqZB\nX/yBtOHA7AhqfMTplY7c/I62h4RmpIILkpnq3s16oA2jPwkzTkhrzzKjUjKH\nEXA8\r\n=XfYR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.765caef18.0","@material/shape":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.765caef18.0_1582306398804_0.4972016816654985","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/card","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f298c1a72d5bda74205c299d9e7fb788c87dedf2","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.949562303.0.tgz","fileCount":17,"integrity":"sha512-a6uFFlFopdLg+WhTvYCc65uCMOCZRmvF4WEE//ovADNMy5NgUlWjN8t3PeTPFWtafHZJrN9C7UC/4KsGCgdpZw==","signatures":[{"sig":"MEYCIQDKjJjQXbHifjlzfKJHatGczd/Incwoyto/bUDV8DtJLwIhAOrwEoRsjugUSma4/6rgmOsvfLB+96cLvn5qPbPwoZ4o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+TCRA9TVsSAnZWagAAGpUP/RnnImZQEYEJVwuz3wrX\n/r+yBJPeejvS87CHWWbzZK2SqWpHoZt87IcIWRWaO+Dyu8IgdOls/swwIhL+\niY1zwFu6VnCflng29k3BJmgwRtnjPpkyOfdZs2sIoAYoqvYOGzB6m631pkL2\nJg0eM8T6FjhfBsxXWvY2CX0/rbQ5xZKELDmi1s8xy9N6nk2yXTIr7gKzLq7m\nv5mOvX/7yXrxzfdpSACblGDOhqH2TI1gnhLXJe1ZSxQr19HfJNR4UIdH4AeO\nfhccu+zOXRHsJ7NWyxSxuFiIMXZdRGlYqV9Otv5jZLJnP4gcaZUjMkapKOPC\ntLUv+4ouyMiVALygj6uBupB9PWusrBpEwAuoTm4TFNUEcMPqnLsYmbvV+q3l\nMiF++rgAsPfq1jL/XhWkQyDv0S8e1Y9YHIlw+nSABY+tTTGQ+cKPyoV7Ru03\npEE8mlmIaFddG9NC+gJrIcXyhSbHTStyYpXG1Sc6eQi7yHBzklUD5JXKFgHO\nb92MfUI+7lDaDKTzU5uEQxUfc6PfvggUf0ZoADdUuDAS1O2oi4WLEcHie5nA\npX3ipZamxhXTeoo9vKVybbm61I3SU9UMHUbR8rboTryvCwgibzwaiA102UE4\ne0miyKY63h9ktgn1l+KkwisFd/yb2P2Fj264anCYCyUs7VwYp/zMeq0fEyax\nBGmn\r\n=ohJV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.949562303.0","@material/shape":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.949562303.0_1582317459207_0.6255852369037138","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/card","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74cb52fed8cea15d3995cac8b90c083dd153bc45","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.7ec96974e.0.tgz","fileCount":17,"integrity":"sha512-Xk1FqmoiUvP3MetGa9axipZFfC3OvaQgGuVZAJYi4PHxdKrVJJnkii3qbXjC9e7NDQzMUPKB1Y0WsFpfiMpLvA==","signatures":[{"sig":"MEYCIQDp97aWaIi2TLBnQBzP8npKKLLJnFU1wBa3X9298eIeSQIhAMCQLRReWc96eVgrdDh7IapgsJh0u3DVbKq27b2TBIbq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBy4CRA9TVsSAnZWagAAnrMP/jY8ixjTvzVLVN6NyLP5\ngVdXlbznx3bWtAemeteQmYR4qE93EXG6Roe+OtO1b3pCQBH6NlNLYsAEl9rR\nXVoCQAKQO8lDuS3GJLP4Zap7UP6cQeLgkre0hGttZ0FqbyYQLyhIXBHP/kLO\nsYY5pupkWh9ZtgNDO1St36zoNXVz89/KeRAzeVemaj1qo+CvJTN4F1/sSb0D\nejc+A/Fj6kCn7ws0OpD5sZEIBW5LfR3xy4NwfG0O6fHZCyCxHfmx7dgypGPX\nsRpTaSxn5IWJywgqFZh7tG1H3FYnmIL8f9+6Q6f6I48b7UoB6Ln6uanrtC0u\n0pwa7aZEfgEnPrVbIZp24ajExJrsGsOu80rwRzeLKPRN0zebLMAoMNLCoKyL\nZlCGWNkXv5vbXfRYS6S0fjZBJAyWZXBgr+baBtgRFovSGZroE7cdQLn0HruG\nzr9V3h7WmSJOzsfc0c61F6XzazO37UTCcL9nwbUbe9P2pB/Gg2n4EOhpeVq4\nQxin5MHfY+wNZ8qX1ln8zvwO/RR+tKvwfOrH1S+XsXTMdsb1MkcgvfzLDPPa\nU7kAH7FulRAxiv64+AcUmPWXdBQ/kdTu5YPcpn+dgNvQZNJWMX66OGb8dX2w\nqQnFkReQ8vC3e9BAlTXPE1QXobErcuWmBVEiihsoaHuFAeKzI4iDI/q5CfIx\neIdl\r\n=Ea9u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.7ec96974e.0","@material/shape":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.7ec96974e.0_1582570680045_0.479531797217565","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/card","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9f6ba14c8694ec2dc28d5be29563eb0a2b71d7","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.265ecbad5.0.tgz","fileCount":17,"integrity":"sha512-MV70pKDkwPhNczcbNJfLWjK/0K7StGJpDXfr36XOIwdFJMXFbyFALnKRff6g0gvhhLOlmjSmLyk2D3tq3tNK3Q==","signatures":[{"sig":"MEUCIQCT6+vRL4s39KIhvOrQaDbuEfRWEJOMy+nhWTTbzpIH2QIgUfCanv+CYeTNfzOXgHXrQSLnQN/4//BxzOJB7dHkvBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYr4CRA9TVsSAnZWagAAxVEP/0hc/hDkLo1jtqLAX9pW\nM4etSCfbZMBa0cpVEi6fcyz++6jgp0wuYRtESE9EAPD2On0oSPUkRDMd9wKE\nFNTkyMdy83g6+4PGyzHD1RtwJvKZCPDoog/89z+7YVHkOW2YrKs81aY3vg6Q\n1IVMJxJxaVJudpyimQ+XyUn8BZho3vCq9/+/FpSAXVATVcqh4I4y8KAA2umy\n7ECXcpqmrhKJxQph0SCrvXLXYWYaN4ioBbrhSAr+72qF3gXm+wDZ2ksXis+/\nHZISuVJdlzoX/BBAiDpRCc8vq5T1S/2X2Qbkx9hHaSBtJaky2qDBKuIc2uMa\ndRO9VfCPB1cJxuwxDfkvyzx4Q8ZJZXsXEqeQViqbcsipydVtNxI2ipdYa1l3\ney9sd5QWbrR5ooS/FMphi6UZf1+vhKVGyS392e4h30Y/CmQxbAGw5y0ZAImh\nynCE6q7zWM7rG2Y8TtlbKz9Mt7AkPNb/Qd0JZIzwXKBlnOz3O5Q0pbxra/Da\nlPZv1quoZ1LN/Mjw9jVPV8jmJKkuxmzZNK8iCCBLnQA0OtKmzJGTL8enoXrG\nLyoZD9Owc3jV+LLrH0/E/hpNXuKgMSF5mijj2LimLK4i5TTOiTBT0EpABkV0\n3rOsCxkdyUHgPy/2zdxPGZMwlRZGPJwrPci4v+v36gEX1XqOmTBv+oXrNxVq\nvIgS\r\n=stFD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.265ecbad5.0","@material/shape":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.265ecbad5.0_1582664439701_0.8595028137403482","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/card","version":"5.1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db3e0b52b09e832cb39f81e9384b792e33c24104","tarball":"https://registry.npmjs.org/@material/card/-/card-5.1.0.tgz","fileCount":16,"integrity":"sha512-/syao6oR/PAvzs04quybeCWHZVn4W2dNnxIOWIJTRQced0/o3gYrHgQSX+edC+6pEnSr3Drwbo2cye7nRdbixA==","signatures":[{"sig":"MEYCIQCJzpP8dGcDULOvePUaEcy9uQ8LigcOwxG96BmTRTUmcAIhAO6U4/EIVDGIz8ZbgNODae1JKa9Ul9nmtMMcO/6w6/Mq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZO0CRA9TVsSAnZWagAArhYP/RXlGM63RTH4FcLr40di\n2ivgZ7zd5exx33R17htu6hsVdcODNxXtsv12bZcIy2xD0rAzF4iwnEh5hTDc\nuy2CWLKpKvp2l4rRZkc0PlaOLblaDYLJVgm1vNydBeLP/hk94IqevxBxIclp\n2N3rtOTtVARuJkd666sk85NxwPPaEgmhYXKpdsl1gka0L06xxWogf+NOAzEp\n7MJlbhPbJ69o9qROdY+9UyYEp20ITsQvmfEueC1+7wgzOTddsbTzw//MWPeN\no4ZTpS+HwsUVY/aifc9RPI5CzErRkmIKZ4GBByvEC8oBaevINycJIJ1HLWfh\n8EaqjHhsjSrvuwo9uvq7mDt3emoknGb2x0YPQxA3KyubKhuId64ROZfeW/JV\nqa1rN8Zu5mr1Qh6vc1TmQ01WofLEbC/9xoWYk/LVpSiAQFK7fUUOvEjbAOz2\nbM7L3ZbL55Yalx7CqFIvbvpZcy6QjAI7XTY5Gzi8F8+UIvZ4fvqphyj9zr2B\nwOVMrxiGc0J7A6koXk2gPWc79oU/wryK/H0mEr5NailN+Q9nD9mId0RehVOc\nR7HKXVuyRjbF07/2IhPSCuet1rOO3LG8XNXLDzIOOUTGBaI9b7qkPf68zF3o\nu+g6DfwgfRhBsB0lv3pMqMoVXdPaEwQ8a9Mmy+kojDU1fOMU+8NyuCRYIFjU\nDoTs\r\n=12Re\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"^5.1.0","@material/shape":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/elevation":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_5.1.0_1582666675245_0.9797113109783477","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/card","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b95492c177e560435eb35a9ae48e78a2f7b82b7f","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.2cf87456f.0.tgz","fileCount":17,"integrity":"sha512-UQf5+RK5PpjN/O2akof4RPlk3a9UUcMVKsaCZB1ptV4HhLidA0BnGBhnRa8zWBdeZRxcW3xYnZVqMV0q0A607w==","signatures":[{"sig":"MEQCIHaICKGdKxwYshWm6PyhH3QbE9X3pI6uCIixW5Yp0np/AiAzcI2uPNnw1hMLkMHXFIsxABprqvrl2V+3rUfpbiiERw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPqCRA9TVsSAnZWagAA9YgP/iqT0LOyJ3M7f0qzPMJo\nbi50NFTarPDL183wzr6hRPdcl+Myo9OoayZqHKy88ucOlO9JpSeneLuIZ/Z4\nSZP/UBIkdvW9ki4iM6UwVR/tI+PJQY8cybNLNRKRUwlbH4xsLQIk9Gz1OIut\ngT5oyns4P9I9mWK//E+7k0de9T/97bBRmA6grOdlq3HKeOuX7h0xVip/tonV\nB4DLcZeUWEtSE4i8sw6b4tdjEIMScPcrUZhUHP7C5Q9j+qW82Mu1gr5fJr0i\nn8PfgvA5iFwGCVphRFIpwW5V1DM2QUCjTwLUuXGQf4TNxwmh2eYmjaY4xNeC\najhfhMlTkCzyIAFina6A8Kqzl9MeW+Lb7yruzGlg3mnbWTnfQWSf7Tj7+KvS\nBfaaG8SuRSmONV+c/gWhhKe9J0elIkWJg0+lu0myvLT20d6EEgR1VXibhJoc\nMSIkH0syTt+0ILlImo4aMpmbuhTxV9jPatu3ZvLCb2LRjh6Yun1yjGUmdK9z\nJHww76giLA9z8Sm1L5g8xg6nSJpuXEk/2On6rgnlwz6q6JjWbx+sPbqa1cvO\n4BXXaunL3aKw0nSO6Zcj67in4IUARHpggWbUE/AFjVw/3FBt+NHq8EzZgkJo\nXjmAKKMPpag1pCHiXx+NhJe7RyS1gbTT3/oUCstBTE8KJy2nYk3xkzF+LkDc\n9c8V\r\n=YcXd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.2cf87456f.0","@material/shape":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.2cf87456f.0_1582666729607_0.529367831395255","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/card","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a786b0d9ddf8cb298d1cc4ccc32cc73e616351dd","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.781434a92.0.tgz","fileCount":17,"integrity":"sha512-tOOmMvXYY35BLFw+ERuqCjknPYGy3jBJTb0dd0Fh9/9ZHrg6/V4O0vjNYqIkeRgiUfofdkQ+xl5sVwFqNltLhQ==","signatures":[{"sig":"MEUCIEGfURsBeXhYH8BV6rajq+d5r3oW9NCONOC/03lhsXnGAiEAxV2DKzn2hdRn+fRn7KEY/XlZN7AWrZKhl+eTMV5VLio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa16CRA9TVsSAnZWagAAD3oQAJTl0T/6WPi7/QSy6UIJ\n8xCdv6DzddFI128ly4uXDEl1jhyL3VI1NhudVh+jLi2rlZVQlaifYwcrfziN\nUtXT9re2dZiZZDQ556Aeg2kaFyrNgZs+hnpF2E3OLIprUY7JD4CnL7H7ow94\nzA0SflHaJ9qXfCWm7w3It4OUD2xILMP2SJLVh20pidNCyScP8RYWX6s34Xq4\nZj65Mj9uessLluLQQdtzWNMuUn27W6wS1uSosdTI04nytWrWmAPxvWrJbafZ\nhiQva1pXWcSDufAVAM/FuPzivs4hl2olh6i4wu1Il/HTmm/vrZ14sci7MqPX\nwQDeS3J+qpMmhB7FaV3CceWLHh7oLPkVzEJfPGCpSbnJuw7dZ5v+ul2767B9\nSJSRe30CkxDRL1GfsT2TX5orxbEgNZDxgbFB7xwOYZNYtBD+VbtSzD0kp+Ss\nMMOunpGaK0VSxdWzxJ/pwtuqHR0gtyScfmf5y+G3RiAR5FJyNW2brgjy3YyC\nwmlG+1GlKEZ4W9VkWQro9n7nbOuwatuYzjAaL2uhtxOQmMwTrIQOVoMygO3S\nB0OfgYCLObYlauyjzjGHbfMJQTWnTvaIa2vOFgGLsPi5eSIyMcFCDYhhqb8f\nb3PGK3Vloei7JVn7jb/zPMFV0Sx1MWTZFEdAT/dCRI8bIAlArtEXpVuK+iX7\ngE+5\r\n=jf8M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.781434a92.0","@material/shape":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.781434a92.0_1582673273756_0.300524940342376","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/card","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9f8b3e21f45dccd04bf0fca3a7c7fc9625a2433","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.d6f60c98b.0.tgz","fileCount":17,"integrity":"sha512-kECKeaMVp+xMg3zG8Epksq7OY10K1D1IZCF/4mtGBiUewWavx57s3ya34UKVbwuqtvJ4mogYfxJW0Xx9ApIltQ==","signatures":[{"sig":"MEQCIFY9Ux4PtM7yvh6eTlg77rVQ5h6lYiPWPlswaYD2/DlEAiBD3tI3uYdVM3OQoPN9KIx7rvdqfOaENVSnYz7z48OG/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4tCRA9TVsSAnZWagAAC9gP/3LY0m/XS7NwJeqxpXFL\nrZQMcYQaOxWRg0op9QBFussQZEZYy9H+GIUSI1Xu98BomUQaOkBdKyP0aIPn\nI3OZWVAzqExXwbBizMYyKak6Z9ZGtvtUeAOgUR6JiFyWdPOBTcND2ckG/GY0\ns9FkWizTBBMvOAqph20q+X+WepqXCPCboKjUuXa9ZNqd17qKt8LWTsDJnjEd\nIuXjnZYASOAn7pSsBcWSvVDHKrzKyqBm25tNxiMm4g7fW90f2UtfaOEH/40c\neAIvzU53CoCBnZpeawCw5D4z5zZHs4JmrVY4ShV7krMOC6KJ4AHyQSTULJMR\nlJfRgrlzrbUB2CG/c8zxWcnlxIzlO5vA4ozhDwwg+D06H5YM48zdF8U5CFb2\nEpZevZ06e80MmDeH/Otrqq+cP9Io3nBb/NibpSO508Qlu4z74A6aotC9va8V\nQCeMQ2nnWjY67j2qkZXum3qnmQNr36Gk2xIvZHeA7Mx1JxkW5qDAUZQP4kPp\nd2p7f0itVdz/z2W3DS6sgxWr/aBHl25jGDPl0/2FAso7UDHJPz71WOlo6BYO\nv/zTDy13EDhPKZETGLcNH0UURnE/ylXpiqSCTbcSdHBm1+7VgURYQG2gfYfV\ngdgxz7v8ToJTRZ0JFlM/XxirFmEm/l0nNrp5nRzTzoWzMrPhZv9AnbxyB4mX\nNQd3\r\n=a+Rs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/shape":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.d6f60c98b.0_1582927404636_0.5803238763075866","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/card","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4df3dfc0aa3b3409fab506f6472ed12d94c557f","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.69edc6e28.0.tgz","fileCount":17,"integrity":"sha512-mZ8xVdMDWaIYNFfvcw5EdReQKqGVvVwGTDCb5ghd63V6cB9DCAdTycVWX9gYgDPS1ydTzwnmUv3Z6eiKW1kg6A==","signatures":[{"sig":"MEUCIQCxshjRqradLI4Iwbpr6iZwkFUVW45aQpCY6pX9/OPiWQIgUTpMaKqJC1eVPYWtTFV9gZVUM6kuje+yHi31Xbd927Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZAyCRA9TVsSAnZWagAARdAP/1PEgUTXvRi+qM/t8xsJ\nM4bPIdBjDVxtKK3akATDnpqcHfFiRjUx67WqIN12VWt/rK3Q/KVkZROzI3T2\nrhCYvROiWHDSxcwNymMm6vCdTLwclRw/5NJIX+rwoHtA1DLHMo18d4Ry/z7r\nKO3z3p1PLM3YXfahzC0CpgzVDspgsiL2Kohavvs35qoYOVHMM+2le2iVTbWq\naFTNbDe4gg0BhEhbVPlLJCGZS2IMmOELYliCDfs1HGoeaf36QwRxbwoVhLIK\nxYvfVVEtPfSn0z5fi0VjWWzmkioBcXGby8e0TXKkKZO3y1SBeU+MyGFsDkgO\nzoX5CIsas9R1QDJI39qL9nnraGE5Hc+cYfZElU50xxAlyOklycSjaqfa5+2X\n5Y9I7gfRyNMuiNmsESPca0G3gw4sKHZoJ+OwkblTD813y5+C5DQOJPoybBZd\nXehoPudO1r4vMNIt0DaZ6pwsTyl4jlwgMjcS8nOkFAtZdOXWi3W3n7NSIlQi\n+Yi+x1/hYIUC9LNtDGthTKtFGEWniSwwOaC2BEUGTswT7dZhAjnAYF/mOL4b\nYIZ/ZisBDZjFG8pm55C45a3pz5s/04USvgpxmrTM5JTLCGeO2FmPE455KMgs\nA56BF9wfdhzUscH7N55P6bND1sM0fi5/n1fysn7RR0YUf3H7N3iHy6Dw14We\nPtxV\r\n=S4i5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.69edc6e28.0","@material/shape":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.69edc6e28.0_1582927921037_0.42761672566512576","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/card","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4ae4a646d05f9ec16470dd7b4ab6cf867eabbf8","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.9372e4939.0.tgz","fileCount":17,"integrity":"sha512-c2n7xWJNshLb0f5n3CKbLxu6aEfGBGCMdxeeGPErlrRaFAkoJtOaAzHFCAnxove/qq660hJDwQ/9tbwVDMk5PA==","signatures":[{"sig":"MEUCIQDOLYPEjwBHY8bR8jm7uBJ7oh6IfWu+2AiBG4G11RsucwIgX1Xm6zj5OZHK+eWyinlgiMUhlVgXhfA+ItYRjIAtT28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXquACRA9TVsSAnZWagAAE2EQAJmJS5Ob062zqba2dlrL\nTpg3A1VZ/QPr2eGWxBKZasAX3QDpNPyYwHBkFsGNPIpHBYmJyoPTB5s3GnIh\nCz8THOOQDOJvvaezf7TXYkeMtWynyfjtNxY28CIeL47i6lHx//w9sD4WfNiZ\nFpxSmNAsbdNWoxADBnW/p2I2oe0O73i0S24ceOZEEw35tv6CNnqxz0xEAoFQ\nDg0i8xsVYyYbmuf9mx+c7FCg0KjfMQQWTSJcdSl8oqgJHeyLm15RNwj4k6nA\nRO3VRvUwkVxwoGJL1NHlVJ7MDVppSYyCi/Z0VkQ8Yw5gD6IOlKMnL/YZlEh5\nAOOOESU2Z6LFTfMJWKQ848LCQIXWs5hfX01RrqUg1JFgfsMjGghwtUeAAUIH\nfUgA3pBsSWxsHcSVKzg+ZG/wcKeaBbNaqmT27p9mLfU/SumXJaeKrzr90L7d\ntxfLvWbuH5RDvX5FdcOZqDDERjPEqNKmJPZ2IOZm+w+1dm/R1CvsdQTYx/4S\nceUMJ9FSY6SvFqMxgRW49p6F2aXkTZt1mEfRCPwVfkXCyYpSrGovxbLEcI/7\nSuh7/0Tv5bEcRZHkOgqz3zzr3Mv0hgfqGWqotROjfTBjLsJyy9uBfT0RpHfr\nKRTDyfgFjrxXJr3t9E6mm54MauzWPbu9w5yi7FV/kebNcvmT99Zy/gEr8N6I\nu+l5\r\n=UAPG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.9372e4939.0","@material/shape":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.9372e4939.0_1583262592000_0.13401852715984242","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/card","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"921a8c2681570bb6f0ef8e2196a074476c5b1497","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.9cf5e9842.0.tgz","fileCount":17,"integrity":"sha512-s6hHL7MCwbAHGRJ1F3860V1cU6JqayUbwqATwu3hPFFFnJpjxA2BahyyzppHmPHJ+nI/mi6f7kmN4uyst9vVow==","signatures":[{"sig":"MEYCIQC6LkASnxBsBEa7HDcT7IQ4mV+LOLrvHv7FuRpDPz4NsQIhAP0dl0BaGiA8G6AZs5Duuy6WY+qRaE6p9y9CJ3nqPhDB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXud0CRA9TVsSAnZWagAADCMQAJe5LZe5AkzAOfUU7J8E\nKq/JIRvv2UcIdaL9uH+C/sigZJWcpP+gvH+xlhGukccCVidE3iQDdWaoNyQu\nVmiFRs0FhhggFuFup0JklG5LV6zKsoTZbnHw33BRCI4x9dSG75GnESrBXNPn\ncKb0rer2Dd68ZGmj9RuAViR29Kyr0Rgb+9PvrRI/MVQv+/cerDqJh/ZcDkfS\naRwR5NUmYcm2KXDg9eCEvgd5tbPOssA0Aq6FVvmdXg79Fz1UZ4oACGKVJzSS\nGsG4FxpgF2T5TQOo5oWgdI5t11qok0EAGtheDrvX4QT5zxnswqfro9tuAf0z\n4EhnoD+CvxAwhhgICvh+SEScog69hDh+OPWjQl+O3ycXr7AECyvR/axV+WWN\nZ41VTgW/h0QqfJqeVUlC+SqmJ1sbnolcPWjmB20VmHfsPyaWytcRzRtdAlIB\nlJ/ARODJXsuo9ddovG8MIVV40OP590lxacymS4mRwEeblOXK6rxT58kIzlQS\nzgqPW818Bq9rId4Mi7s2o1yNSdttWeHlcjzRJ0OdO8UbsiRzDFo/sZ8jjns+\ne+7LlCNce1ECzm7SeL6wGSPlGEzh/g15z3dBWBgbhpv7Gi/x6+wNxRXz6SsH\nzexZ3cmiGkmFj+GxbuZqcdJyb5WIeGUyyyTsu8trrUm7iF8Y8+LzxJL9Bvm9\nvYDP\r\n=ZoRs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/shape":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.9cf5e9842.0_1583277940292_0.60367094604705","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/card","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b5ddc2e3315e72085abddab82f2d45a235ed61b","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.3657f8863.0.tgz","fileCount":17,"integrity":"sha512-LtE5yv/eDss6LaAu5iklf9ba07nIUsDV9xvvMwS5juGELQXoxdlMMKhm96alxNNoqKYylcpjgNGebyDOc/apyg==","signatures":[{"sig":"MEUCIQD+LKZ6DgolKPpLNskfUixKWt3f1PY3+SdHYpNqSZnU5wIgbkD+ZKjcN7ZtZmITAhT5HDV6qCrUY/tEE6HQVysbjNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jkCRA9TVsSAnZWagAAIs8P/1a1CByxrT+QjuNO58Cn\nN00A8CLVqq1WZLSDnzncXAPCYPWn80TpcB+7YA0Me6pTAkcy/0Ya4gm/WRfw\nCYJ83AD4gx+1dVQ2nbSZAI691PnXMqGxkbAK/mWTT5jdCyyXsCZkqbU5NsKi\nIZmpfBc/bvzx/YI96rEORFyqrbaEZpTUXHjQa5XXP9gr0/+wddO4/EA7Hk38\nOp8g8LRGi3gQBVhRclVpws6fziWBrknoz9TvPL7woJL2oPUANK4sYq3Jujg9\nUjgGFwIAJ02oVegr3Dj4FU6vaZ5fr//w+DZ82mB7mPCnEf52UJvF9GkhECcD\nnJc1zFYuY9+Gp1CqZJlYJoDHq/2x3qEkpo0DpWs7vRDronW5FUNou6C/yCrC\nMJ189gQBLe48eBrwJI8BstTGc1vnzHNqDhg7emjBRymBLAVToaDcgDmBfDZu\nE/blrvUI1Fy7Ovl0FwWjA8L555KF34L76TeN5b5lTPDN0fJt5/TjUTxgUnM+\nAads1bzelxwNjZ0keMjhEC3UCHaQN7KNPr96XA50IZrDgEWTbNGnittCzVg3\nRXL/gV5eP/kyewQLMxPGQu42j1mltixNy8sFRNpH6HY2shb4Rg14zxcBP4VV\nAuMzpwsWgPbywuMohbCE7rqe64O0SxQqLbj9dwZFP1XyvK5ZcMnqZncwoOvD\n1Pri\r\n=JSiZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.3657f8863.0","@material/shape":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.3657f8863.0_1583343844416_0.14200122881474253","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/card","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"607ade945a2df497161663e2bbf7bceb4ef9b13b","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.98b843417.0.tgz","fileCount":17,"integrity":"sha512-H7kquPFoOFkcd6rPm1nmSllMfU9SMllfv8DI3lhhFCbUPQZ7CdI9H4qx9gm9jXWtfNy+aI2pDfplW0BrPiEGTw==","signatures":[{"sig":"MEUCIQDZ0m89B2DlJLk/VjpgfG/OGc7aDbZoJldL1zYJeabQQQIgA3uvI0Pt6BMx+wnWqCVFPvEGSmD9VDLxvoCzdJ07o9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVjCRA9TVsSAnZWagAAuawP/0mEWl6WfBCjr8tNQN5a\nOO5NRoKt6Mem5trb8BWASNq1yj/duu13Kgzt3Qdd11qVm8CkZS+VYa2KtDz+\npRo0VixIPHNBVMZ3vKk2yfvUXfs2Ohs7QqKcfxzmPmGFxSIpQGZIOWv8ynGD\nICGLHYlzNBbbV9HkADhTEkA9J0Oc9mqITuOUE3gdbZTU2dW5WMI7b422/DPF\n0k89HtDPljqbRn2LMcbXA4d0KuyK2IEklP/sTxUR4A8sBmMT+rjj9QbiKDSz\nA1PUBwpqmlwEbtw+G/r2MktviDjm/ZINcEsgKpMEohXIqNIVUvd4WBHOO0xw\nmKBOkZJTycHj0clXih86ZUO2XblrVD1ApRhk1+QpICGSGI27xTO+LPw0LvsW\n7f9incC8tixxtdYDIwlXjQPYHfa0O4s5gLY7iCKT+FoT+QV4DFxDXcWHPHJ5\nkKcX52USmlLY4WjLzjNM1Bar97yx36f3dGm4LxejJnx7j1nq+GNAE9fBOV6t\ntTgytMG4uf/ORQnvh9UXgyzkfiXkLa1Ku0rjFnzRoWvbxwwyemOlmw1qVEmq\nT4FP59o/zBWGIPrd8VYhS3KKJPqf1+/1g0NlZ/pBdjquhysf+TkNMMNENMEf\nmexC48AUczUfZFHZ5JWfaVhy44MReps1tniO5YYncjCXYb3LsvWlYO5xH8tI\nGuNL\r\n=qkDM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.98b843417.0","@material/shape":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.98b843417.0_1583433059459_0.43480502693624845","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/card","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fa4a49cc40b016d53cee5c179cbc6deb60bb2e2","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.17b9699c4.0.tgz","fileCount":17,"integrity":"sha512-8Y9C3Ofx6coXWhFqldjA4NIoiG4x7CkDjBGPbO920HWMWceib2ufWatTfFhscDd1x9VlQZK2lMHL8fUwdGJbGA==","signatures":[{"sig":"MEUCIQCGfiCJU0SJ0ZRXdVVCHtIap8Fj8J+sFxMBauLMn9DhEAIgKNIoZChZfHwiBD2PIXy7hKA7pJselShE1hRsONV+XX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFlCRA9TVsSAnZWagAAOwkP/3Qrbw9iSl/rVbS6t6hT\nMoQhDj6dpZNCmV6yPLTJuUsUfkQK1srXm0vpEFXrOKYBW2DbWfvPY94ZnVJq\nyc8oNN5DmI1ZDl9Rl5CX5yNbU7YcoqoDof+TRkItdS7OwYPtny6b0t/2Zp2E\nnKVmpfGWUYO00T0w4JCy+Nc6pcwh9+WiTobw4vZQ213h0/iwxEg7ps6n2Enr\ntkaMGbI9/5Afhikhp8Mn21B0UsbpJBza/RWz24ic44ex/YC677Vvlw0uzPbc\nuzLt7T7NpaecuXN7xglAwlo21TthtMOob4zudP4q2Di4nzNOp4kEGaozoHjK\nil/awMiGErmfRF8YBoUVFluje/cptgMyDvW1Z0mq6kKmrUz5G4dq511LKMzv\na0qtQrWxiUA/BOzsKIWso/Vp8hZLJiu/GyYCAwyjoxpSoZhzxL9b+D69N8+W\nLCz4KZyLO1mTT3AkzG1lmoCMxKbpN4Ojq+vbSIj1Jp9bHD3PjX2dqnm0p/8d\n0uVHvITziFGnuDVgBuayJKZGhK99OfKWOUwyuyojlhiXlkAYTfiK1eFsfyyB\nzPXbitTJKZxNMbsnndPLSo7Ggn4EGVoqZoOKxLfg/pZukVw8/Mdwl9+jCezq\ne1fQ8cB8MAHiXjwT80a+8UrMhLLQpnaMeQzFSkJSeJBMHT/4/qKzTaJWnoCL\nm3UM\r\n=g1qv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.17b9699c4.0","@material/shape":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.17b9699c4.0_1583436132443_0.6832052911168591","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/card","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"463f94730060b173f1f4865176d6ec0a2c994700","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.6ee035572.0.tgz","fileCount":17,"integrity":"sha512-cQ+bCujv2ptybxPGX9PO6qqvrOQyniMy7MX04B0TP/CS1hLUTxI+pRLT9rMY/Y+a6tVnbEtRXtcP5+ZmaHzM6g==","signatures":[{"sig":"MEQCIEAfik3xKcWoqN5KIxjH4dDepycT1YP5XCfU+mnMMnCDAiAF5hxsf7GWqei+mPdFGZT/3L+jwlXOMeMCgxoas382QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLpCRA9TVsSAnZWagAAR4YP+QD7LAnrdp29F9t4DQvX\nsQ3JDZnwDi7BIDCBLgRgtG9a1hfs/gPN0U+LkUT7ej7jc3iXxlVh6TxXjYxJ\nzYEKoIrbsnTfsSz56RnZTkCXxjgbfOFH4CgnbRLHocaq4ct2zo6YDxLT1XAq\nal/95GTiN5KkJveRzaYBZA0WCjAqGRYZ0P5lPtd4hJofh9VGbCJabTFuPQaY\nUHgiK+GGwMLwSvlh16U/XM+X1MB1ArECoVOuWWdA4VM5VE1BA/G9VWZm5p3t\nrMJtCq4wxuru2sadURuQV3T59ZbhUXA29JEJXk2yr/zlsJwxg9RdQ0dTx+mk\nSUKBMU9OxGQ7fuzWnPFJF1tXI8kTXZvTPB1R6kJnV3CmcMtziyFCLV58bf8I\nm5NLXiXtv+Vcx7RM8iWLDNt8tAywV4XTGOaiKI4Xy6/6VY4PjkuMgvy82noI\nFww759X9pRc6AAmkLgJSiSEx0+jiS9sOxXgfdA7/SG39+vd0m4ZwNuCJ6EP6\nVBAvabwZFHz/bDbCuAbRc837lyu0iVPajEqAJZ9kdnPojPlTLM244Pi6Csky\n//RysfOY8XFKvDptnc3yya15oQANgNRPNkpGXfooUu23Nb/NdqQPTWRmU+Ve\nIKXIhbfJsD07g9H25XhKFM+m8RmhpnCjYAb8O+Y8ZmR/0sUfZTfN/Qg+6wlJ\nQdXb\r\n=pxNx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6ee035572.0","@material/shape":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.6ee035572.0_1583772392979_0.015079093715077985","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/card","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d2f8ebc2d453038dbabe3b40c658438bbf52bc5","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.bd33cb56b.0.tgz","fileCount":17,"integrity":"sha512-a/nl5byBJn0c4Lzd5w2Z95Vs5wUrExByeV5SnxeBPLTOMmrt/5rnj3VaWuBr2kztHrQ6cuxuI8yUVOSwEJPoAw==","signatures":[{"sig":"MEUCID1IMKPHNulIlxPN694cybexa1xLHQP1zI+IoM72UDvNAiEAizD+1U0eL1Vdlm38wKvfHf5JAlDpNiOUNyWH0MJJSls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZns0CRA9TVsSAnZWagAArTcP/AuT1drrqm6a6rRj94lC\ngUFJ0tzTApYpKw31p0dZlzHJmrVQcS/Hurdu61UxImW0hoXnVXHY2H8edx7O\njbkYfd0F6NXc2H0sGx8M15j1s1Wuv2v8AUCZwBiaZSrXKnKy82UoMRPyol/3\nC79w2ne8wQuk6QiZcoHTvV4uT8VwHVwOyNngyjVlHjDDu6HIFr2EMAgKaGMY\nh6GhOoPrbKa35zlVI45GS/VUHwFBXWH9osRJpoNZAU0AyUBtkX9HTgTiDDXc\nIN257xSRjOofEmuqYdkuuayh0gSmoOv+Ukt/USpZ0xIgTJXLThJKcJsUJ9zV\nXvNSIoVHAMqmQp4vJf7wi3GZKkc8wwNZI0hgpfcjyP7On5T5ZUIJ6tjCI6nA\nxpRRpF5iu3tYQ5hhVrveTCCK4ixLjDBHc1PdjWBH79r9KtU+qvxJ+SLhtOi6\n761euIkOkfGwiAxCwdsWKL98ZkD78Hg78FKgFWtG2JUzEe/zdvVtu5bZT+G7\nhCIxdh1vxB9wAvE+XPjLCqHBU/18U2zNbtFHszOsIjSlHQjAaMWM52isM/Ir\n0w4jOI1XHt6v9OG2x0j5E2XO7xjeqX9fZok/18saqyJzGNFAoYj+c6w38GWH\nZCnfHUpVtUPPs3yMfJ+l5yS7RK/tLn3Zinim4HIIpwYtiTIHFdMZHCxFsqpW\nWYHw\r\n=E1/v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/shape":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.bd33cb56b.0_1583774515709_0.5142230415021947","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/card","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2a65727684d077ebcfd855ef7771f9b21b29987","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.26c049afa.0.tgz","fileCount":17,"integrity":"sha512-dpWfTJT3ldGg0fLSDQWHsTApes2WqMbQsgDvl4rzWJhX/lZ/YePpJN0dro75HB/7pN0ZAujPBpqh3070yPj/Sw==","signatures":[{"sig":"MEUCIAtq92pvqYWl2fC1KDnPG7Ut3uqJI5/OgBlGWmzAFt9MAiEA/f4TEUkV5sg99MZJcRNA8L7jPoI/S5JJY/youtH31J8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gaCRA9TVsSAnZWagAAGFkQAIr0YsVDAtH5oXfMqxW2\nIHuYViTRZC3PSIx5BiCxStIP746QUP0vp+SW9Vc9xfRiYjpp0dt7COQ4ogwi\nTmZmBEhOev5OjF9Yc/bhPHztjYrYlpBBIH9jGf24bndSYqnQpWWY4zG0P1Y5\nj6/KT0yK8eskjMZPs5utwsuCpYQy3/xK847b53VWANZTbFoPKIYp+EsoTj+k\n9WuEG1FwjhWs3Hk0rqIPR6Ki9qHyBqwiG7uU7RS/IT1gV0nvdp5CazYNXopE\n3D9e356NREOhP+SjdgmYL7phbmUK1F5PqWmrs/4OXvQdufvlpXUWvjL5ZImc\nT+1hFpu6kYRmZmqYObnp6Y2j3d6+sVnW6h5oWmAjmhGh+pDMHABGtmx0TkIJ\niwgdAoeUMKeTqQQf3qo/Ttb48+Z/vfVpfXdm9l2VAzOFalBHxwFa4QVlgIdS\njdm1KW18f+iqD5IWKT0V4A6aWheWXrs3iwwdDP13Vsbp/YKrz2agY0CY97D2\nu3EfUeifN5sBi1gOpq4a51EL9CDPmqHmC46sw+gT2ZMWS9P2akfmnowI4H1i\nffcsBM46LoSHpZN85WThKL1+KTAT/ZDr0O4IXiLlwteJ2D7yDZ4nnkEo5qLw\nuo0i61/bHRkFD3pLo/oWXyAefQZYQG63UplcMeRmBMKNtcWIyREYZXri35xC\njzqF\r\n=02em\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.26c049afa.0","@material/shape":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.26c049afa.0_1583859737585_0.9748700926242446","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/card","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6d38ad26e4240ac59feba392105183d63099cdd","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":17,"integrity":"sha512-UzerU0OM1pXYk/ilLMLELxrDOuWJtm+TPuDxwH4qQivfOIPT0tIlX75BQjtjTHn46I6OWWyv7x5xzLrQzByN5w==","signatures":[{"sig":"MEUCIQDJ/8WLOjTBDqSTHTR/+gIVC6bi9BfuYVrRA7iENY/5NwIgV0XHPUZspGkCvW2R/Z7HaoRl1Hoj/ZiXq21y/NxbJTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/pYCRA9TVsSAnZWagAAF4MP/38zJ9E7JA1Fb3v4hung\n375G9emSbzxwTLWAQG4QII80grdlQif2GXQSMtnG+4czDwL1n4N6jcZgbVIF\n1jPdVdrCOfXLSCBsvlUxPiOTn57YrtDIDWFaUrTfobg9dtcPI5tUy+WjXJVv\njxjGYxC62qY3hCdqpOmUAj37P9ae4gKC/TWzNWf6WB4Drhr6Nz+M1JEmZOzh\nBnGZtqi+t7XuDB04WpAdpWkwoWnevYZMUXNsOwbvzzxW9Rk0tL+QGivPhxtV\n8Ug9oCG3Z5+hZPpm12H9fsxfS9J8NVTOo2lAxXH5GHicCJMCDJtLI+UvHMf3\n0o8u+mCR7S8O4MnLaATgPfoEtqOx8jUiZ5gSrEZNF0JQN6qbfD4OCU92dibm\n2T69pVH60U7dDb1ScEKNjRJHvB3OGa+W+pRuS3sY9cuTFCBB824aocvAehoZ\nATL1uSXAQuIIaqLpfd49Tw4kk0ecXCFw37mPqOqR+aYFQ/wbzWHTzOJ6H9ME\nVbmMh+tH+nJOhiufoJIhgC9MXJvMUj1lWsODtUKUc5s+KoIcjPqWcPkx5Qyp\n5AfJ8g1hHvpLqCefzZiIcf+M7/PfJ4FOtOU6SYrQRIViBW0ZKGNCzZ05LSib\neas1MR1S2/ErjudKL/yKg5TQ0eIP5p2q973Z40kNgTKrZ4r0wYOU9EbH0Yh+\nEXiz\r\n=nFrx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/shape":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.1db5c9fc8.0_1583872600195_0.143031161195752","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/card","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b5e69a034f41c40e1e62a541bb47eff42c6529","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.4971637f4.0.tgz","fileCount":17,"integrity":"sha512-jfjD9kpY0HR85J+s0FytXsFijmdV4e0nHi6LVJPeVxo7Psp1vy5/fEb8BYt/aj8fciJi+FNG04Z1GFl/qk5JBA==","signatures":[{"sig":"MEQCIH6BLaj7+k5hPD4pe9UMi+gS7c6KjDkdvDFgMsusMvyUAiAUtRcTyY3N/uWhfM244ztWiPKDc7Kg3Ncolw1O9N5SFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuJCRA9TVsSAnZWagAAc7MQAIKK4YjI2hMK7AQrIq5T\n+7zSf4KoJ8+SeGQZM4SHtmTOGccqrRqshjrtlAC11cHg157+jrNt263kP76t\n1wI6PXxlvBciNQcY+zYjnnCs51PK34X8NT7FkulbqagOErKe4GP7r1uoQCrU\ns9WcUdtE3PlIQCLf16AkLK1GY35rCJ4Wf3g50CUX1gWu74CFJgrd9mNAQelQ\n8N8u0GQ0uUEAWO3FcVYxJOrbInyajrx/y5Bu4D7sgwGSOE3a7qYKxrOxS2vD\nhsmqHC9V3qluJMozR1KjvOBu5t7LWeLQ2RI5wRYMlD+DT5SBlxAXcIrJJc6k\nZcWX7Yafn4gbpYUkNsal/R1w7erL7LTYLKVQIgo5yLznrqeLBy7vPOFOU/cg\nTTOc5L5XDhjU9kDOZmz+MrRKmL7vN+mcEtEtPBEBM3NR+dUI9cPmltaF547f\nhCKfGMAtnBFIdTDmnlGiih26JGx4s7pS83sMxz7BwRz/P/ouKXVNlhNvYYXg\nIIQAjev92zauNTikfdpQOM3R+NVW28NIyedz42qnfAYJzTQE5lbE85JDc6Tl\ntRs69lnwDgdWN6oEhugaRuK8gjkvqBpiNB5rZqqqHvQ5Do5szFg+L9JLIbbx\n45yclN1tzVV3Tc2oGe9jQRiUFRpLyLx+AmGZo4Cdm+fJHZ6odrPvM3wM6s+0\nRsor\r\n=yZ+e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4971637f4.0","@material/shape":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.4971637f4.0_1583881097185_0.24780697442363797","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/card","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71c6d7a50482865e61800ec198e8e1e5d9380103","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.1ae8130ce.0.tgz","fileCount":17,"integrity":"sha512-c4UvmeCcdcUnv5eJcNRZz94XG1qdTiUj4dsDySC31JkVLAWGr7Nu97p+PVwUJKhL1+TxEmhlNjfN2MXAyYaOgQ==","signatures":[{"sig":"MEQCIFTVdw0lAIFFZfTuh4YnnsKX0+PxSvnRjhkDppIxY7dOAiAIbEvV/7oRyXXlKvxLu019/PltKK0jetqae0pms0pe1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0yCRA9TVsSAnZWagAAP1QQAJ8AFcaBT0lmrrw4xZcO\nvAouuZAvNT/ueVprKOj3l8lnKFLLVTPzIYZ9AV671EkuHisoA8NJLIcoolUG\nA3+F+Fu3UiLxcIWLKGhwddgAvUZYfsujGtFZwMZxr4y57+iR2QUSw8qFgqY+\n4he2F3sg8yJHJma8K1aFun4dgoH1InPyj0wA7hsaz111Un/KfID7ipsXZSeN\n3xQ3bdjqHHa01IgDCEMBG3Bho17rgcfD5EbxSuZmZNHjoXYwqX21qyX8e8lL\n4F1DWVV5nnpNUqkwPoEwa1q1/Wk7kTYld4sfXpDcjy88lwtrnoG0/8Kjxtih\ndg4Bl3Fd+y9Gclp33PHouZNedvd2ixn6WALP5vf8P2wGuaY+ka94N28W3LPr\nFQ9p6Kfv0l/gW4bzlcBX5WVcoQBnnr0K+dCsUEWAJQtjMR1UFPpQ07JQJQua\nrKfaZC3kE3lOki5AI7PrQHUFuLnjghz/n8Tntqr4bpfXzJC1dvfV5wayTv1B\n5bB9IXYPxKcSpCl0CcPmWUiG3WA0MWpcPM6ifG6QDWW8gHjH7XoY9P3bCDkm\nZHHa73z3hE+NLBBpELXaEB51uVDyfcRubkvOUvd5JvfEJuz/SPxXMMZI6y83\nml6b0M87+CRnNVsFMQQ32MQV8ciMFJtLtQIhJwlczi0phAqyotxWlpHf8bp4\n4NoD\r\n=FyaK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/shape":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.1ae8130ce.0_1583881522529_0.36570646955424113","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/card","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27647ffae0dd93fcc34520769977b5bcd1cfaff","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.8639c2690.0.tgz","fileCount":17,"integrity":"sha512-L7Hy3zLjgyOFPGIZASByTOSaBsrcDVIapuVyQUgAhTDJLi11HMlF25ZWDGCsdGG72Sx1tGRIAZZSLDh2WVUpQQ==","signatures":[{"sig":"MEQCIDpH0lHKps2Kwqijcv/EO1nvkJm9XHW1qBMQ4BpzhI0/AiAwzZmsXaiUoAlZ/UBFihi2MxHfy3WSQcKJy/lz29yGCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYqCRA9TVsSAnZWagAACukP/RJxqu91iHuBtqDY2xzP\ngNicfv40jhPhvzxdQIe+JAwCs182UbQDCaC4spn282LwM6eWw7Wy9H6pHiZy\n7SFUfvqFq9vImBuZ++/E89nRdyBvAJYVgJ58NhI9QpId8UPHVqBPIMqrLEyY\nCX6PXlvQ2RERStjv97gVPnONoabWwN8m2Fc5S67pWuErb6Kz0MwG8eh85Dbx\n4QUIYHruRFhU4JXrjGbcs/yo1bJZTSVL0cztPxNeHpllLSLWw6Y/F6CyfbeE\nldTmZ5i1+l+o3iwTYYaEyMhvrGx0+7dbmQ8UujxVvsX5d/dlN5T9Zu+cUsiY\nTPuzgIS0piwSQDrXsyFcd6IEHhiOx2hjSoEk0d0oTVoFj3rT8o25haW4UZEi\nGmXKHzyiaNQ5RxqCzt1aALzlfw4VMp5g5Va9PNBYRk3mOtYbXer+l4Coq7nc\nE9S28TP68Xd7KCmUakt5wNsEWGm2c3P4xZgbknUDUSJs/iYjltdNU8DKTyf8\nbNS1cuW5kEjmpVXGyhGJdw5i7DOa/HEnjNJDdXCb5+F6CsDFQSglOxxpg7XN\n2wWuW+ikOOwfQdubMNIrgLkPSeOHxD8ru3pxSTdl1QpcFf0Piw8UgqlawWnC\nqPVSEyKkjUlzboKGj+lbmx9JllI5E3WGaws6JBDpFU3eBEOWcEiPVger4Iqz\nImDL\r\n=oJf6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.8639c2690.0","@material/shape":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.8639c2690.0_1583908394229_0.5940261873962354","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/card","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4105898af1b1afe63c36baaf1e1c33b60acbae","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.d5808057f.0.tgz","fileCount":17,"integrity":"sha512-ViSeknuOG8sXSTTeR3xw7fT2rA+3NpJIGIeciuWX/UgsnqgjM4gj6tRNrBIuei45AtqCgv4wlyaoAWirGyfHZA==","signatures":[{"sig":"MEUCIBdQWwwiCTnfeU3qADSO5BcBaaYMElm9zq4PXw4gH5t8AiEAwng6pkJrSL1yorkdcGcU74zEszOLVG6CKrLeqZSUsUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRD2CRA9TVsSAnZWagAAYjAP/1F80X0QWq2s5q1bKloj\noCHrXa4qknwbvTdu1FWiuT8QZgQN86ARuz2rT/ZAGX160YoeGEJzLmJIxwsZ\nP2dco20oGydNVwTi2HJz1+0Qj5MVi5rH3ZNYLu4rsXFQ6/AdrowYMU3wG3b7\nCNBtFRPdDgQrMbUIFAyJjeQ0e/cBLRkyJ7xi9k8nooZmXAJ2otm+5yfpbF94\nAWSoneWvva92pGIaRhIk/+rK4S1kBkIUdFua4stmwiEHiDCz1N/fQ5O95yPx\n8e30Dg9Rm33SGU+IoNcsQdrm2/tHaUklOyeWwiYUx6CVNOGWOU+UZhRmccUV\nWgS8Enf+/Y0wLdq8k1dWzgBmvJ/TDFwAQCMxgCU874GEdrQQN5nECbZVKQlC\n2Gu0iATEMbBJPcYK5Ffr1X+5puha0B1Iz1ZUEdAow36MQ6tyVNntsag21Ysb\n8BAWGCEK0iylo1fpjh91qVkD0RU+uL0MDGULLmRSQn0wD7/cd/efpu+81O5f\nfIQd2fRtpqKPh+kJY9TXhhhE+0ZNoel36ZjiQoxqkKPrBu95oz6+luQHqzKj\nfblspBDx4+RC36Z8LyCajUeDmJ0YKILgsV2a29aTUHvc81yxkRDoTZeUCVxW\nacp2oGNl2Nt80Pq7odwvZGzjkpQIEumti2+DQkrnvXyZsT2z3jrPlmCtay2S\nRCho\r\n=a1if\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d5808057f.0","@material/shape":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.d5808057f.0_1583943925571_0.30855945257520645","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/card","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08399d8b83700eeb54f3c577dd9a54ce2a98df4d","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.b3f58203d.0.tgz","fileCount":17,"integrity":"sha512-sUFAHuN3QwUpICQanF5bxXkDvmmFprBev3+k2YwCqwHg7A2NNwlM5TAk5QiTsCe8DmjXvT/8uYaDZUW8CNfHeg==","signatures":[{"sig":"MEUCIQD3881iLFS9LIglT92rOqrtdNcMpdWuq/3BU7UkBV03FgIgTcfzPgaa3QQizW6l0dVKm9Herr3rS2ioy/HU+W4zc5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4WCRA9TVsSAnZWagAAk/MQAJrXBu6nW3/IUeKcC3od\nDarKJJz8JW6WwFXbLX/yHiNsv8eQs67paCZAyiXBPA2L00jURK+pW9DO0Vz+\n+3kHK7P6LrduDG20wk4aMfx01ib15bAXO4D4/UBCz6s+yLPvH39UUfQfHa4Q\ny7xDNRw1CNjv1zePlMC4i4/FptjsgoH2hedwBdRWpDXLz0SoRCr3eiEpCLyk\nNoFAUcNIdiGhgSOFB8t7STl/d8StgxjqOev6Z9wQ1L4tdmcnJEvEAWYcX8d6\nAtI0eHwqYLgQY0MqvGZoRvfcorPgXJ5Y3r4HWtQvXlIYmMnNQNCYMvOwTpBW\nmx9n5+ZtThQ6BIkCSGWKobGjAHdSHosaIQWDr6TBjmFvq/80ncLceKqnY24P\nt0pg0DAixduA7tnQcWyxgq9ecSb5Mjs2VVYzGGDks/R6d3AhbaS2qe8LKtpR\n1movT/A6YwpBpHWdYXsgk1j+R10u0RmqBZNovbnFHCn4fogCuXD4cbryOOdt\nRs4kK2NOuyLJplbWWvfFfYp67Zb/I26Xq7TXHwrIJFQxMZ2XUk/dUTyi31fe\n1fNfVqfd4QPKpZibrKMBIll0OAOaNg4PX6ZQZ0RXvPb5jYUuIwgD98GVKHH0\nzKn6kVYUclXn5y6/lXcKh+xmRpWeN+E4sNSN9bz8WllArR2w5Z85wrj89HGt\njnKt\r\n=FJzZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.b3f58203d.0","@material/shape":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.b3f58203d.0_1583955478238_0.8207265226613198","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/card","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f40a0e9a80dbc0bc856cbff4115bec9c6ca77067","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.bec065920.0.tgz","fileCount":17,"integrity":"sha512-GJ/DHikEUz0MMnPEMHm62eQkUfCMFsxJ7kqAeBBqnkTc5FfWLnBpBaNS++wQPPhU8NfkixGkq59GZFv3tdk3+A==","signatures":[{"sig":"MEYCIQCCk3YXxvOWlk29kR7Yr6Cx5/JX1YMsBhS8lxH2uxt8/AIhAJmNuUosCTMPr39jLGQUtkr05Z4enwjBp/rWIzQZ2qa5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmUCRA9TVsSAnZWagAAZacP/j920TChW1iIySmcYydf\njMghcJbG+55BAQx6TT264oC5kJHsaBHBUYMgbM7TsF3dNIppTP+6KqDtwhNj\nQl7LToivIfsKff3h92VHqu0wG4NjtWI3gEbVJF1Uy0TSFR6EVrWMNnWcFJut\n2fY9wN6fOkmoB/h7n7IR87K19cLAbCvqrp5yhA/1YQUBDh/09latMJQokmVW\n8OldOIu91/Z6HTGY0qnxG8cisic0itQ5O3VRIQ1t7Lm5Yc5T1GiCy52lIypS\nzZkQPLsGnFtrukOBHd9N8C8EBrMa3ejjH8tOmD5L8OOrlqiFvgwM25P5u18+\nnJ7F4UfyZ0xRLkHXO5gUwzbXJADZMdCDQ88wEtOOAScwNO/9fyb7aHTr67zt\nsz7F/1KRYiZlg0ZfPprHBiznRGsMvTtl/M3a7xuVuJXnh3oEKlAoMEkWu4Ee\nJnXSO/WWdiVC2d0f1pzVKmjYyoZ5avMGgQltZbhKLggtASWdnO+LeSuWzQvV\ned4EZ88UzNk/dqeO8zeFqPE4o7iWdIxooE8PFpcFIIpDGC5U8uplPNws5liS\nNYkSGicCPPNDuzoB0LAXRcu79DZSQpSId19G1MikPTv9u+YrIZVLjSlgKzI4\nbZf1Gut3cwf0/t+7Tgn0b9GamsSA3t5ZI9KdYz76LqgzBYjazFsCEJyajBtC\nJoBo\r\n=s0u3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.bec065920.0","@material/shape":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.bec065920.0_1584044436189_0.5443722793010719","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/card","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc43f29b6f46f2b2c9f69243d83311feec5f6a51","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.776291ef0.0.tgz","fileCount":17,"integrity":"sha512-9paU2L+n1CXZD/1s1LTpoq7xpae6ZnFWFdHxBvXcIAPGhmfcD3c4MN1psVSZUVfrjbnOKalI3x+qEy41V8x3Kw==","signatures":[{"sig":"MEQCIDnnegeGuQyghgTFYgQjy4bcwyT+AUtoq7qbZqK+ilJwAiBAcz6LSXmHiGBTOHm5YyV8r9YZg21YqnkiK8DM/mgkSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMaCRA9TVsSAnZWagAAZfcP/i6iL6sEE7UZqCm/RLMY\nER/s/MfxFjAOVTb5dta1ma5RdbFji5o1PHebf4h39ym9/84zTksKP/ptpSen\n4jZ9obqJVBFscdtfpUdmP8b9AgyL6Rv0VG2abR7Ry3mBtlDMXEEmM5REeg/X\n2HJbeQeSiKs6S9dQVed7q4TVnPtCB2+zYb90VqKZ/Y1X3XLEzv2MCiSTBRw2\nsk4q1u1AoieP2rIcxgLgEmXNP1CMF1lGBRWFHboMI4wWdr5vp88WV93sR+lE\ns7AWSpJ0rN5TH3IT8cS65ZQpJGo2V+J0vG4e/T3olcboNVydMIWM5jacw/wy\ndW8+C8rKG3ff/0g3uEtil9r8fGqO0qLygVKUbQLqFp3b3u2oIxUFEcAeV2t1\n0TIn1b22HK+SWJiw8gD9t2yP3Mv+lqlFndJFnwKq8d6Jcw/EpKpasEp3Cmr1\naMsLotl2DFcR6qJ5UNlShoj5BGnTagE6sWQtjtrr+4IKo8UpvUfRjeCF303A\nb5InufnBl/4RlwY7Waa1ikyOsS6E8Z/2HNSpQfxYY1jpZXfvshDoIx4vHQmw\nd+3gJ+QJtk8wARnIMV7FJtp+Mmv/sKEoFfEusyR0ioAGmE0FJYSUnwkV/8sH\nv8AMZp4ZzXDT2aE2BMRoBVSy0BFdCUHdOsWxZOx02YcNLkfXJVUUmcbolCO9\nc5OY\r\n=kKTx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.776291ef0.0","@material/shape":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.776291ef0.0_1584472858085_0.7085963524837644","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/card","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1c7688bba0acb428c2bee81caa1ce5ba1a2f174","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.ece19f3dd.0.tgz","fileCount":17,"integrity":"sha512-+yOc2bKb+VAAtqD3fuNK5ltPCHXQTNMIw9/A/5zgsTNNQRzNOn9BSobyZnGuk6TdMf/NwQbEGVRvAc8c8NRg5g==","signatures":[{"sig":"MEQCIBHjmPpYl8meNqhED4ajjAd1GSRodEyNGQpxqrSCuivwAiBmbeLvvipExe0zNl2TGvWePjnBPyjCAf0x/l2r18yCdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUimCRA9TVsSAnZWagAAvZAP/0ue/H2xBKHMvdksKiX5\nsBUB/4zBrGEMhtmNFtp3d0YzZdD0LROWdE6tx2b9HLwdIZrgJoGAXO6eWgtl\nvWY4Ef8MQeudRjL4NexibNi9fFh8PcNg1i3b9TzzkWJuP9VDex7xbnUFX5R0\nyciUbrGTMAM73dygtq3PG1ruBlNM+6CZea5qQy1p7OQ68YapuI6CbMDlDvML\ndEZvLjrEWyrm2Yy8vdOx4CCfIUJGB40rtV6S10oBFdds98Jslj9M9AgBpBTj\np6H1+BKMLMLHUaxnm7diSWShrPBPCZZGU4cPBbT0iAOx55WA3bqfMxnJPB/C\nHYJBGSN0cMbMWMuZlbQvGVSNHKJvxT/Xb+h254vXnH/H6KoHH/+okyjWFqH/\nE+ai1V+XZPfEZr/uMvpMkbBYyfAFV4YaAJQb0yrSojFS+H0kzVXNgWD3q+vE\n4nnD977t8d/Vc4Qoh2J4SPI02Fw3ewbHO+M+n+Tn9L63vQNlfdspQV9LA6B7\nvAZjDgdg6iBegpRiwB6es9wWROKiot96duUdFqaBpU5tljRx1j7PwE3SxE74\nq0K4yVRO0+rip3mb2pEN1Y4MBOSQ/mAEMxmMTZrxIarnBm51joF572cZpG92\neAsdywhOW79Ql0MleiOs5R3/AZh8btmQO8VHh9nLsfUebSa268B8CO/mFjOM\n9Gka\r\n=FeOM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/shape":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.ece19f3dd.0_1584482469800_0.245112626669447","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/card","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"828d4fc6b9a7e04031bd54853a248119ef33e9c5","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.4dc45af6c.0.tgz","fileCount":17,"integrity":"sha512-4kLXk/YA5izwZv2gNTBB3n5/YBWk3D4xnd/kT9XkczEIut7NtfiPo7BHM1pMoeK75EiMcRaI2fJr9UyjK60OFg==","signatures":[{"sig":"MEUCIFw8LHJ1kTlHIvHPj50YR3elLTEIlEsuj6CaIbAiDbcXAiEA7sn9UmW0cUeU+bbWxZlEH/4vNG0ajvFmAsSDBd5WAtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3ICRA9TVsSAnZWagAAhbUP/1jpa8jxjlki4ut8lOoE\nOW/gZ34AgbqTWzRxu5haKePBzPQCH4bDoJNBCa7iG45zypuL8+Y1Ixb5hlpN\nbPZt6RreC4zZEoF1N8eBRkdm4GPMTSENNksqA3Vz1ll1cOGT9+SHcAgEqPLR\nTV2lPnLzkLbaUVeaB6mFpjSNw9vhVBIA9oFWwg11DUGK7J+v5RAAVYekaDkK\nSnOkBUDMsfgni2UDK1EMJrg+k6CdNV2J1COmvVM14zJ9onhqFyDA1KObTvn/\nHPp+kTyCreJUojp1Sz28C1cD4357HP/Tnw8YDKn3NLOD1ZxrG4lCyNbGSH3S\nXkNuNags4GdQikDMAbZ19/oGiwi/H/NvzlL0fqEZtjp7PeWwfzqPaHoStYCp\nw/MlvOArIDC4mdSE+3+K1bmroCKDbU05Wu3tXfUjy8Lf8UX8g/KS9zqW06ZJ\nh/nG5/lQoyj1hGRVPt+rjeP9Cx1gtUS+WzmJ8u0mpVwTbCqCN1U3xAho3y+9\nQxskOP6jAyPnRBS/+yjF/SSJgS2wpID/aZeKzbPDvlRfHCEtO12W5coSbjuF\n92O9EC5g7yJYIxFwkSPYyj+7aYSxdk7JhkbTBBgBtEReYhSjFMmw+y28YiXo\nYIVNaZFKZZbfW4uFNTrqMvLpbv3ZQmQh7r6sydY24zB8wai0pLjl6Cx34yrR\nyqeT\r\n=OvTD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/shape":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.4dc45af6c.0_1584496072135_0.7946239167254117","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/card","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbe13739d64dc297654c44139571ebc6e6e2e937","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.6b48781bf.0.tgz","fileCount":17,"integrity":"sha512-yo1iKRUrYEms4eGiIe3qJEsMVF8Anmq62OLt7VG06ZowMZlf7lm4OBq8EMik/4VM09HCXjZj0TQK53Iyzsg/wA==","signatures":[{"sig":"MEQCID7+J0aDqiIRUhxZjb7UwCSgqsSR6lTS1QeKjxRwU/fAAiBlzFVKpyKfrnkjBRsocWWkRr7Nw5wqEOWXFzTX9Pd66Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+PCRA9TVsSAnZWagAAPRQP/Rha5nR4NQxJwluVgF1F\ntfmcSe9Aw1ulbs7zi2+7fSjCzim/6sDN/EHHOAEBiLOvAuynwZaJ9qzaCqwi\nOl7aDXFOiVVk3CWQp/O4CK3aVDU+os71KivljZNbaVixd5TPXEeII6H2p8/E\nUZY+LA38rmft75bxgGbvT/XhWpnrOJrV7ieRy7Rworzwa9+ExiAtypgQ8F8o\nfwdyBiRz3JCSeaUFdyeIKHksAYoFC8IkpRM/KHVNQRTtJJFB5eYl9lQMoAPD\nBz1dyDq8Qk+Oat8ir7GVkUyJPZesPjnr57NFFsbG2S0r6xsIXiBsZw9g6Y/D\nzn0RgAuRah6nGSVQ00a3zffmKR7/dVCZrCJ/Kfna5mb+uefRDMLm+jEl9cIk\nQiRUGRRuv9v9PdmKAQnDGTp88jom7biM11/8RwOP9sEuUhGr14ow3PErwuSy\nKMQugqzKaIput+FnQD+0c1q6wjRzDD4jT++WWKqN1YQBfnnLK2Fhvy7Lagu7\nMPYKOyWDjtb8/o3XNN4RDEzNjANOCupjdVkUXcvYPgFWE/NUVH8yHVqfpDCS\n9YMX2hgyta7DMnE2tiU7Z+8MYpFes9RZWvroXnJdVKmj3oey4nJUK8bDeDi3\n/97pcVR8DQJkXlQbYJi/MUUbpNPlIrX8WHpcH1H793DzmXhkX7+JjayCxqVM\n7pNx\r\n=h66K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6b48781bf.0","@material/shape":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.6b48781bf.0_1584545678895_0.7438593900148149","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/card","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d136be44a612f84339d2894be23a00065771c094","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":17,"integrity":"sha512-qgE7jajytGxxkfbW/fBhmeehkyg/R8DT5nUClyHyvYi1A6QEpgtrZnd+N/S/JWc2hncMUghZTOYRvIESXcSkpw==","signatures":[{"sig":"MEYCIQDbRDDR3pYLbGV9GYFr5RsiLuT19MeyA+4FKoHCkaeb4AIhAM/+Ec9DDNQAkXEfgwK+tnsPNYBw5+hYd90xQFRIrGWB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec613CRA9TVsSAnZWagAAc4kQAIW0A2z0Q7rZ0HopB11C\nhjE5Z//b0ScNVpMw/P8ZIQ5+6tKO4/4w4rOWyP2Uy7ag1hBBijSinajHJqim\nlLQTa5TlbfEhBMECQZBuw+/oMpO3KxqGDkrhbwg5uqpPCMsY5YOYx5D5obmV\nRdfkdydAd1qyv+2F7Z3XrBCqhzhfdWk8P7iKJUtoA+lXbrDTRKfWLI0ymo/J\ns4NbRqwxjLtAi7t89jJGBF98qDj2uetT9VXPv7XKAw8l51GDq89qr0epl11W\nJ/Vmq0HRqTDVgEWZUCAkyQNni2Eggl65yUCe+V7mitsXRnno0E0e8YnSx/67\nUG+7mEVUwmmOQD5t1F4k9IBFy7A9+Glzp0DYpCqsTlcgu1zptn5HPlw7HhsC\nq/o6U6fVB1WdGOi3JjBo6/SyNoUL0hSUzIn3JJzEFywF0Hoj+waVAnrRcUpP\ngeIYZQm5VDqTYi7c1akoni6bAGjQR1Kcsarnc3l1z5Z4NTGbwSAxTPjph2Bg\nQm5zUkEOLUGmMCTUBFh52VBbMNi3U9r1wzLS/Y/oXHa7zogqqx6/oPE+PWkn\nkfat3LVkIU/Ek6sTE/61uRUaZ6UXKQ0M8q5pCWs8QsavnV4bR2y3agEIfyPV\nBOEVjx9EOv3Cbakd66Ylc6A0CNdexDAWkZuKdS84oDD3zSh9USP9dZB5miLG\nALx5\r\n=q1nz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/shape":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.a88c8e4dc.0_1584639350874_0.5991968398927174","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/card","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a028ab8ee98aac64d0da73b8402dab92637f19e","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.cafe18860.0.tgz","fileCount":17,"integrity":"sha512-DO99jtXm8WZR7Jd16IZzOMgWfA4QWan+vdMMsDI4k418gwwgr/rmAFPDFKD0Tt2JzopiiFGIeaz0zgxykT75Hw==","signatures":[{"sig":"MEUCIQDUCh1kByZk4WBlvvmyrsaWSUX97xIghlhrKUkjd7A0EgIgNQJbrcoG7dYhtUL5XpGfFgQqCePPa0Ws8DvAusl9GYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjkCRA9TVsSAnZWagAAT2QQAIetZLil5oUDrdYXiCSj\noswTbO7Wwro1J9iQdrjF4QoD1VX7pze9B/0tenkGxIke+smYva5ASR6TCPwy\npw6s3URzyNjSWm9RhRK20reKNT7WBZlRj/ZSozyBOwz/vqRI/nJt+kGVmEyL\ntRFrvNSK+eHmVD+YwVbfNczs3nqxxNkUOP52v/cmHnVk/yszzpZ3WYx4FV5T\nJT1Caz1zxaC3ONHjz8gdC95wSHcOd8QMhgbMC+g0MNWRAK5GnjK6kv2n2PL6\n+gSqfXONMC1HNVblTU1a1PDCscaXL+K0l0vXo8i6xAc0i66kju9PHBYI59os\nQ8LTXXH+ykHTKvsCJf69dMno9oM7n1EkeGgTEY7UvZoAey5GxBXupWAIFXf/\n8oav9hvU41AexaKN7aVkL3jQsA32FRJBgNqGS69saLLFpnWSrUiuoHJviXF1\n2FlAQ5MH7ZND8yriehP+kJ12baDMduFL+Pmq2rm+k7WpgUhHCniicxXVztHl\nPIaX1ptZhfQowi0cSbTkxSnlgNq8MYxpKAcpIMo7Os8D3V+K/4A7G7Id6Yx8\ngahEbF+jY08DBMw0QrB5f/Xm7hmSt7tKvpJ7+ngjm/RCnWLybFSHkcE40yD9\nTkUZ0dPTJowTEuS62s7COPcA8YG20dJpo8d2B76AKnNtDRx87dgutN1bo2uw\nXC3U\r\n=rG7V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.cafe18860.0","@material/shape":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.cafe18860.0_1584716004409_0.27615420506385924","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/card","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaec736fc230e2dde0d0e07c9922f238e080df93","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.35a32aaea.0.tgz","fileCount":17,"integrity":"sha512-MjHuJStQxLTyguNUhq0WsEYIKWYrA7o/O8bvEwrlQOwZ+BLMczl5zJgO6QXr1ObnteeWRG5FhZ5Ew80WtYQd+g==","signatures":[{"sig":"MEYCIQCwoiHiZyEniuAkyv+MEOPCMsd0w7Y4wIv34OA5wp/dpwIhALRCXoJta70go6+IBSmTgOGjWdkZ3vVIcaogrk7t3zVC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCKCRA9TVsSAnZWagAAH7cP/Arbw3v7AUb9S7HWy+e3\n5MDdHMXMqRrEkteubAY3M+XjzHNbMCYnlPR2dS7bEATbcLv3M7vwEOrdOuxx\nAR+FgqWIaN3Kf30K2nuQ5CoZiqBmE72ZB2v59qzh8GykN4GjLioPGBD3jwQQ\nNnL1Jca52Vae827qPGY9Xu8cqr9ribAGL80siIJFurnpsCtR1EgKRJhU/8fZ\nfkJJVV8fqXrJmk11OhLCSc6/KQZrQ2QIcQ1k31QGLt8a5McUnq0isi61pFMe\n2oDy/bwhEaC3SK9fvdo4Kl8j1NR3sHGkjaefUfx2dPIelDjqZJa1pqjEqrPN\nuQw3cwGcQ/FiiufNLvgREFSS7Fiswt19RELYXQz6aNGMyKzMCtcIaOfYDBiP\nOka7RtE9tsALa41gFSWIZU/vYzD4aLdghVEkOqtndgaxfhYv2beqsqN89DJs\nJ5hBTEFhl01/tVFhHk/oDr2MceQZkzlIfTwx/JxIPD5k3hIBqN4cDCH2JB5r\n6Au8tvuZf9SKJh8BfncNQ6P4MIBqTAmgll+CpRzE7/ob43pSi04LucbiQE29\njGjAoADcOL0JklS3gKZa1zJoJbXC3V1KjNjrx4sAlihkPfhla/mf4Nv6bDTq\nAauhACldyF039xQLLDw4Btzfytg0n7LNCVL1JqxC+BylYvZOYpTa/IdHPLIQ\nusKK\r\n=ZX1C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.35a32aaea.0","@material/shape":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.35a32aaea.0_1584734345991_0.18617391877145217","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/card","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b15faf5df878fb982935362813f6b01bd3834ead","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.e75deb854.0.tgz","fileCount":17,"integrity":"sha512-ImZgQkuRAXasRplTvXEqCxFrysqxPlBcB7mr8KS1RNkPKFo7SqWWTne60whbWM0gBEGaT8t5qAd3g6Grypys/A==","signatures":[{"sig":"MEQCIBNCEPAS3+R/TGRCja2W5Ousf7EHKSSuckznW8mXI+CIAiAoq9wSeh0vShsEkGR8dg92RzFXHXoyeIT9CkIO7QPSgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBwCRA9TVsSAnZWagAAFU0P/RMXkbZW4yrB1iNAI0O6\nuhVaZv9IEKVIuTZ+25RhbYapa/isYkRNLrWfJ60B4w1lLUEBxL04NL4QpkIb\nVoGITR6bb3ez18ZlH17LG9KkKsAAcyDLI/zxj6KFdWQqGqbFzN9n2c6LJoEC\nRJODhEmdwn7chafHIeLgZih03xIf33lOzSV2fBxhCuSPu6SZ2z20Dba6gpnc\nANg3vncqNHNtObGxzup6nf/O9mvmZS7bVaMbBpL2LHigjtAiMsualbsvAZ0B\nTt/HwcNvcuJxGgwwTZlln9iI0nWpbiuXZ88EqVO2wf5frHyk9qFtcliQpjJc\n7dugmJm/QnToDUak3oheHQX5xoVoVwOpF55/MY8PeQtP40aEP9yXyK0nGit2\nZK+171bM5z3u/8YQrgYDyeptpmf9jJmK5rPiCzy5/E2ssyI3S0kEt2Vjw78V\nsv8Fy1wIHcT//jXoXj9LVJ6/if1pCcellhrF4msmf7h7aQg/t72feI+clJ5o\nFoFgQHnjr9WR15vs3plkJlF/aViOrEMlerguOxqgpafJEIWa7j3CpHb+IW4o\nbHNaDBzK2jb9SYfu0sBRwlz96BfBICCnzkHTkDAV55BaVZRTLBkycQESi/nb\nafnDlhVH569qX5Zd5VgFvmIxZwu5IxxU9Ql5moeXQ7R7VBiUXpeVBR7oFMl+\nuvRP\r\n=No5k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e75deb854.0","@material/shape":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.e75deb854.0_1584742511921_0.43730085693483867","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/card","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e07c54ac4fa7f8ec914ac688c4893496a39a82db","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.2cc6966f6.0.tgz","fileCount":17,"integrity":"sha512-rmPfad7HAGEX9eqcFBQBAi6oC4F/UHa803PR5decOnjVy/6/JHnX6aAqJVvNutHqf6cipHRwNcmqQHwE1AV2vw==","signatures":[{"sig":"MEQCIDTtx9Oy5ce+Lv/20lnDbGVGqtc/6IKchL/WceWoplufAiAtjW9BfX0kG55pHUpjCJ/pNy4mWurNlpRVtL9N4XDbFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTKCRA9TVsSAnZWagAAQyEP/3vflXcKIXQFuG57NoCp\n9fQU4iyY8qqAGB7/nlMi2AhuF32fosMRvLfitdh0XaLioj3jCDCjcr9kH31J\nhh8/8WTyFN8FGunzBA9Lxdqlv3X0c1eHqkZ3Eyt45jhIIeHVS8HJ9KnACi+U\nKa21V349h0Q7YgZijfdk+rDsw5F7KjlSMmgpHCUfPJCKqjxReAW1IOOmqjGl\n4lDDwJ5lZ+KeEX8gQwXQqoBMBG8O5TnuTwHP7AuxzSnqXYwTgexP0YAH3BuX\nrSI77zx5PJk8UpxFMGYFNAHl1FrTr0gIoSlh1LzZjdpOZ/K7t8ZON0bEpq0u\nlDV2PowiNeP5k6uCI4a1dCftCq8ujBKEe0XOcC8z+03Cq/X8EtF7uei/GFEc\nYZ+aaHXr/dwg23APX8YcWeQnMqPBygtCbtzticg/Bb7jLgFv8ROhvvjsFdvg\n83Fu+hT74cvPkjsvEK+sE/XSPUwM9xqJ5YqHCncbobsO9WPeFK9ih7hxEJUV\nWAyKcIk3YrQBBI71afJGS2QJOncB18EOOc/pNr2XckfDoM2MMMpvc6NjmMgZ\nRq+dqSHlHhGf/TlLZnDk3E3yH7kzL0bhzStrfYir7WKfg9FsVoFLXXTRIhtE\nFRjNE2HBK6NtefGOJXcJkmUENchIqspdeEb3ZeeH6UHTlGYkeR6HphGDjf17\nLY5O\r\n=Ldcz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/shape":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.2cc6966f6.0_1585075402529_0.03209233713878579","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/card","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cad35ab9a0a5ae4cc39f2156a375a92c75a66cc0","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.8707953b6.0.tgz","fileCount":17,"integrity":"sha512-RGxfywoFoLCyv0894Km7LyoPak2syk1lF+DDpP4wN+kohf/MahvKR9TIaqVVU1vCuKTULvhGRCz+eTZFm1iKnQ==","signatures":[{"sig":"MEUCIQD2W28+GeC7Bs/94s/g6U66hgu0Hbt+2RFR4LNltOdsggIgEJS9nvwGz7ltDRxkhrzLKrzZPvNiKNkXGdZ1OPhdAa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWlCRA9TVsSAnZWagAAjp0P/jcFl+a6op8B+zFEvZgA\nfFEN1YcGKZ5CWoJyEthJKAt0BuBFTIxvCP+Br/2c/WC2oghUlgqGa9ziS41c\n8HQqPkXX867gdT2heXgnO/9j/LGFXAuZZY+c3RLVD4DaN7wsd1MQA6zFPZQm\nm1BB2ypY52OYi0qQrqSh86bafk9b0rHuMfcLbYjqQrb+I0I/Qd+6L0HK8vdL\nX8tmecZZETp8NhAMqVll6no+QEM3Ls831kmFDDdPP8FRXC8VlcsgrKgWnekJ\nx2uUy9JtmYCuvJsr+5qMLRjL6aPeycvGTWAUppfBjV6xqXmkuutmHSPfO64k\nj565iSHkJX0EcuNunr/ctaO6U3pDAOSHGN8R73WJWv22S0Bsx5W5TX1LVmTW\ntWHmHe2QT2+PnVDsMUHuslg1xKN0+FJFztLidRKMoqxyejaFBp3fR3Mavk87\n9dNnGDv93EppWZsw323m90Voj990xFiMe83OWndEgH9IrsurkdYjA2T3kiHZ\nm/UBWs1yjdQjLYUQkuX60WPjJ0UdbGmFPEgC8gYbgjAK4UeBnB81OPXxdDWV\nJbgBeRaEnL/N3UtGvzhblwFsNkc4dBgNmUAxhGybmH63C+wWpL3CKQlanRMG\nsmRqq9uGd8Wq/kC+95NVh67tjVwGqcH6jOe9zdvvUlx640cbfT+vMaFfx2D7\nZkEe\r\n=KUja\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.8707953b6.0","@material/shape":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.8707953b6.0_1585075620771_0.405590431199937","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/card","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aea73258a4d0303657306285bc2e47d47ebc90eb","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.10af6cf39.0.tgz","fileCount":17,"integrity":"sha512-QPZ/jUu656QB6nZ48F627Rj4M8MkCCl70uYoUPWzYKfR7x9Mf6vouNB6/cQgSVmJ++k1u91SYA4905CaQnFogw==","signatures":[{"sig":"MEUCIQCCIru4nGOm3OyOTyYlmcmSe07V6LtAdRfWhvUCKwI6SAIgf1eyQaclNjuTVV9E/2pQ21HgIR+tJaWCzKFHabkRsTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BsCRA9TVsSAnZWagAAUSwP/Ro6AjkKvmhNj4khknPA\nqgWQjqgZxGPu3Mxc2dC/03eGu+P5Td+exRDiHViq0WhcrI/ZDHH+cVe18iWw\nqj38PNYRDtfLTIzq6mqa17CCvsm6l4FximzcuwfLQr3lu3vS8LukXr35QG5g\nO567V18Yt3Wv61ZuHLJXeK/zigtFirXZPU/OlyrL4exzqfKLSnROxAgAOZDF\nzmAFOkMM/vMJlq5nv81ej4Bx9Qh+hEf5aZ/9jlARNHCnm4+Ic1yGw1HCbZe5\nIZ6T+XWCjWsDaUcCHTS+zjU13zgnnU/0Qd4EXIls5Xj3FwKsK08SRPIAiI0R\n2uLkNjsQcWHAu/duqcDGW8K4xH9PZHp7gwvHLvjAj6dwGqziOxFTGbdtWVRG\ndBsEh5482ErvbXJy9+oJzyOFiER0rputwuhwh70d1nTo/qpirIlNVMky9mdQ\nQpNEul4mSHe/of6tm2WJmsPunHcZsfLFsva8eEWs4z2LL6BEzqu3ZcDqM1M8\n4Cc/Li7IV+XuSK/PzAlBd8m7Xet7AhZ7VbOb2DdzTE8G22+M65TtilKyeLd8\nPv6QXPqjO7JVjLucYo0G/hy2uONfr+824DAcY95rrEc0O9szZav7Vn7Kp6US\n0xyAcB2e6dt1zgQxAFFDsvaN4Ijlpyc4Z73w0Hb03xSJLuUlONt4Xx+C8c7L\ncIm4\r\n=JhQK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.10af6cf39.0","@material/shape":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.10af6cf39.0_1585160300247_0.3988314691993542","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/card","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6d74bf9221fb2ed5541c9102eeca0fb6beb5177","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":17,"integrity":"sha512-uY4wZwUSZuT+yycf66b2xSe8RgCBPjJmcRgN94ZVGM8njHV6dQVZwzfeb2w/yKX7Nb0eUvZwjSTgKruVVfs3CA==","signatures":[{"sig":"MEUCIBdSEbjYtGtiTr7NVcuae+Lw/vKTUEbIRYxOYK2/Nzj+AiEA0pytzAHtZTziWlQM/5up5DBHdyVILyFGRJGKoakt4GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBGCRA9TVsSAnZWagAAp90P/3XLHfzoYfDYFHFYWvU0\nnifvzS1LUb5zmEwWuNYmU6dFLsJLQUDYkAHMo2w2xEckOz0HJsTqmecPI5G0\nGU04ENsM7dACRjJY7NUzi/+yVxA3BIkIMeA0I09UA06xDWQwzTH4wfTSxbuP\nQWXGj0hRngXDx3K1UXfCrIC/SyHBqoI2L+pBd/I4L8Llp7GmvrJ9Sxl6GFkA\ne3jWqT7Eg1f9GXl9FbWRq6VMZ6pFi4MqSLN7t9H5WwLDXEHB36TyfbgfoTna\nyOh6SnAMvFxAVJ7vkuvW1y5INX0iilapqSDwRtY9cGg8NQVf3wMvMVQYlToJ\nPjQh/juwf/0rOFMKMwguLV7IxHYh5hp4c6+SJPQwZaastFgGzFigObGE8hcw\nJ2jh8belzeBBLoNOccC5j5qmRMhG5V2ED50kRYOwpixbLghGUYKw8RW64mQl\nGtMLBJZ810lDwrq2tnRPf3PP7LZo6ExTn2rVnBeg+i4xJCSmpRcM/h/b37dS\nbxjImyzVrd0nLYGzhUXzLzlLUxIQhvGu+6FU/hJBIrAs48NVKowkJmXea3Wo\nc4r7bJdn6GjPUC3A22y5+7Cm9x8stiC+sbLsNIwpbWuFoOjmC3iBOCANQ8Ei\nv1AjW3Qrv9akkUCVVnJNhxQMRzNx54EdCQM/dlK0T3fBfCAOjuHN5lcd6LWK\n9xDD\r\n=0zwj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/shape":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.7d8f9c8d7.0_1585332293521_0.5014993392313962","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/card","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26cafc6b4702c7b3f4dd8c8c5f5d4a7f5f706474","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.d6315efe2.0.tgz","fileCount":17,"integrity":"sha512-0Vh84OSm+5AUtJZFsZRujRBPcyT6dYHQcXIb8UFJmzHFa1rp07hu6V2OgObkA+ngQtbuMeeQhA/E4lKQFghoYQ==","signatures":[{"sig":"MEQCIBxM2BGkxf/s69J/sTnXAicy3BU3PDYJmFZsM3M/ZrlzAiA03mZAj/Js1jeGLNIbtuPitqBN35M/RCh53qlvSkMplw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpqCRA9TVsSAnZWagAAai4P/3kPr3K8Q7sUyf2u/FLp\n5PmviAaGf3sb8a1HLgH9ZES9T73zDdeglcxyoLKVrHRaqxq+5ER2Ha+9V7Du\nej52McNH2C8B7WXCIpCFE40UG6S0fev3kYvv3O7glQCErqkVgdX6qUyXHWwv\nrAX1mtgBVT34lE6+BOTY1t9okyXL4ix3X/n0BEFn+dln7YB9ePbEfO8cL0UT\nusAyRfTKw4XyXIvGoVoeQkpRnYHETpDxsBf2KCZYpcq8yDYbv0ncU7GQV7Ve\n8rhFGyshJYIVKm0CeBAmdx/2DRm5eO1NFMRmdqoYLRSVbDx5nft1VeWzwt9l\nB8gxVHIYY/yLiBNBVLZSbP0uTvqfdjo+1BYamG2dbFrOo9bsNYrU5CTztk16\nBl37XMKiM6dtCjvaI3VoDS8HFT1g9D2sWXQEylurD7wYwb4W4kD8wY8mLy29\nDK6m7DeLvkHPc2KC3W3HeayL+LKGNauktzZ8lRLNv5pL5fYN0G03i5Tj/iSV\nNxlen8O8buR/LNA0+BLbAxbHWdjrzSQlayZ3d/9fIO1EFytCIfULbV2VfAkG\nWmSowHacdYhgZJKF/PGucii5Ic8QSM260Lgeai6aJWKMAXIJHVrvQwZpMauw\nF9ynazft9J7nMByFzy7zPCFcc8m4LPXpnn+eve+D1wFXQQpzH+l69fllbA9/\nucA7\r\n=0W/O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.d6315efe2.0","@material/shape":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.d6315efe2.0_1585338986008_0.44087771139275267","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/card","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61f27351be25f84791a83bb0db5fe81b942c5d29","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.a3016368d.0.tgz","fileCount":17,"integrity":"sha512-2AsBrZDT0Y46uswkao282ModD/HBNuGA9nQOyRIvnxQke0lF0NSZDPVzR96j9V68pctfmqleinlWykKoJGnuOA==","signatures":[{"sig":"MEYCIQD3glTfMpoZ7mh0I+yKGKn60sNkZcblIBJAV7WfgtDUCQIhAIoC6oCIBsAwOkcDNUh+dta2nNlu5QvyZhs6XW3U9+Hb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3jCRA9TVsSAnZWagAA7poP/32WT8mznQJCAAZypZjJ\nN+vXEDqQdJmPZtZ4/kkOzgndlH7bXTBwSOe+1HzdaglYlmXxO4a53dw6IoaE\nYnMrJSWjGlZxdwrRNTP69YWhXd0ANDvWj0umSO1uCoqhzAjLVQw8DHZ+swIW\nftbAe9qy0HFihH2/UJTEk1fE5sedPYwY6ff8asI6FzWUfcdc55nvw3E3mE/Y\nx3wZNUg8mPC44tkBcLIOjpiSRRmn8dW4M9LgCHogekDxv547+YPUqH1PiXN1\nAFe2/nhj2vY09nc2ska3jZFfGQAZoRjLtJRL7yUEDRkXfPJu/I3y3QMjxgWd\nUS9RDjecUdSqLrA49XCCYDDplJnnoydQum6frAyPvw+5OYAJeYe303PzIO9L\nK71AwBpj4W7AjdBRBnC+Ua+PULeiL1O8QGoZP6sJl7k31yHSBlE5nUvZHISg\n5GdnMqTXXlkIsIXmpR1gHnqfUegRlEkLsNzi74yAThme5XL2/PCpGdcGsUBo\n+0Juu5C2ZmX4fU/Q8ZD9JJ/lnBafDtj67VTpFevgvVs0i1W9rmBFyXbMGFnl\nRBOIr+Aoya7QKfwtyri0EbUURxXhuITJDQMAnVOFH+rVaytZL4NyIs0TqR8V\ngh7YC2wQQvNqajnq3Ujnq7fiea8OXh/sUpevwzwP/mFCW1lU2Gb7UDsJ+Q7t\n2y+6\r\n=00sK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.a3016368d.0","@material/shape":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.a3016368d.0_1585343970510_0.9958795017727282","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/card","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c7c3cd3c020f4f5993930765d5174374b44ede7","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.4b45b6620.0.tgz","fileCount":17,"integrity":"sha512-d0fU0XzIJ14SVXAnBWBC6O1548HOdDPLbVY63yfJ+A8XOBruU1jRVfiCZxzGTk2wECeyWL78rmrT2cULFN0jaw==","signatures":[{"sig":"MEQCICRGwcUrCD6bBPge/MrNDJqbF2XCi/pgaHw60dRLysjwAiAmVIuu8zxA6rg49axNLkw9ccEOMkIsgfXWzNp+rUCX5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2ghCRA9TVsSAnZWagAAd6EP/R6WlkkIxx0DdprcO4Sw\nYaXBsnD752vUCWNr32h2DSrznrYE84wpVm/Y0N0vm/rEsAsM1NACAl+5+nfn\nP02JQReFujT11kP44HwOk50O/l7xRSZaS4afmoJOT8/Z2ryfhNwjs2wQxcCF\nmW8M33xkZbLOKbvbsXcmeixO1PRaANyD57fzHDDCWWZw4PSDdxg7hdeGcOPq\nRQBTt2YKTkbB8jriR3wpxIPADbq9x0aCHsz9IyHni14+EGeXN1syNSPwPLi3\nsdNFD8jANUXtG/CS5gnNHD2i+Xz47BjGUY9oRFTiwemEWvGSwHZE6MQTd73s\nRwn2zN+lCrfOMUre7/+Htc0lbD60NSLNicWrfx3HxvdnZrQkTeMfsLY5MGCd\nNldwkjU3E3eVG5DbiLA8fVYyaJoN8Wm4KSvqzCRVFP1HmAAJyLYxB+QvB3Qj\nie4wUNmRGhWuVWH0Tspa+Y1NL4Moocz8sYlvR84ELUE3WURxUV2nENO8A3Su\nnz7BKNZCKmG2S6GwacXny25EpC0GgvwxFPIIvQBxMRMQFHcrGnmmoUGQOthQ\nOhm2Bef0y0F9EH3HIjQwXelhJvvuoxVDHZySCvDr/Q/j10mTcCzeSkYI5Lwu\nJz0pC43ZGpyc7/rzYhPs4z8e/56JU/cIG2WPjf9G/+yZP3Q6aZ364n59go84\n27io\r\n=1npH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.4b45b6620.0","@material/shape":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.4b45b6620.0_1585670176623_0.4548173541522751","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/card","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0363a41ff14f242103df66e07bb13f265c0e5a4b","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.e84b9c8.0.tgz","fileCount":17,"integrity":"sha512-K8uUdLxU3+hFgfAg4IQT3YfcY9SldD0rnkf9/6nsH4NHWgCD2HHP944zo36571uPUx1g2Z0dksGNFr7IzfWWKQ==","signatures":[{"sig":"MEUCIQD2nyWLJT5l07qpOcLJjd+jsmw64qauNjGl6f+gTaqNCAIgbJcTa7dRJAybGMRimTdJ1ElPXWeOWJg1upYFJduK+Cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeaCRA9TVsSAnZWagAA6uEP/2V0xgvyVpRvNeS9MpPl\nnXCpaMPXgrkNdnEnq90881f3u0lpMhhnYlp1MMhtH8K5Ln/GLB7fRwRFpgE3\n8q/lIx22Lu9cuLCPTTr2eVKMRxp2I36lujnUixFa6VVxGq8cd9UMAroNFVUG\nv/3PqtwUirKprAQYBGdqVif/PIRpTolWWk8fk9vEOs/0Fkbxgnct53DZggUi\n+Vf43HAHBYH2aOp05NbYOOjNDd8vLatqbzNO0pjACBPZo8rw+9DAnBdkSaNa\nxy8QN4ix5ASAr84CgiLWQaWg2vGZXyErLxCN4B//GlXub45embElNOSpMyMc\npgFU3MRfCdnWOGuP3mrvr0gbdRq4tNRzgIUyX8ie2oQXT/KFBODrPTeRRNCY\nlmXh1rL7yOnS3cLg/6vuxRapuG1WWs+a/lShtMLuUscjmsHxrQrcPXAqwQAj\n2kKGl39c3A8SISnOuKeI/u74mU3pdnWEaOe3uMIuorz+F0iFRchWBeuB9sVB\nI/SqCQd5A0ZKTOSOXKSIc1EdNX+9qQ23G+Tcxm0z877iLWgz1isAA9VNEbYT\nybCdgrq5BG4HDQutVjgWoaG7/MwT1Ff1GThDjOffPSZYCzPQKrbRtVmAlRXt\njMnQIGL/qfJdRaPGw0nDB8bdWCXzP9PfIyo+s3ufrNKWwXGIzBlPvWaimLpl\nI5Bf\r\n=29WX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e84b9c8.0","@material/shape":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.e84b9c8.0_1585760154249_0.07448741351736832","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/card","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"540b89ffb7aedbfd5293b3f91ce3eef83f4d081b","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.e33c49e.0.tgz","fileCount":17,"integrity":"sha512-uz2lRIVEEnpgowydaAgFvsaBtAelqcnws2ZzGQgDS6NcW/s8Aa2RjJRSDEzNk6nji3Nc9KXdXopx7HAuuTasFA==","signatures":[{"sig":"MEUCIGazw7QSLGeZB9NDPfS4cQUehWOtOsmap7pyH7XXpbnvAiEAmYL0wvH0M3MEWJ23sn7C95JGtoWx8k5HMh+xzIvuVCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS01CRA9TVsSAnZWagAASCoP/0YEFoFuCyQYHRk+upXP\nJNdAfbpceRfuOjrOyG2fZXHuRSIX4X/YyJOuNYApReVqFOpuvyVMWa2OiX2R\nBN8gPDzcnzWPSGeWm1CQNPX5whHbtGjY0t6J5WNg83em2C107+KG53ydhhNL\nW6/wUbHBbirCFz12aSIxcNwgeenI3w75JUTKrIefYIu31Cu34aJF4aV3xYl8\nc2xjNOhVrpjTIANrZQ5ApxS3GIoSW56x9awgLdzEyc1TVH9YD9JPsoZbMYu3\ntLkL+G34XdgIR19o37992cQsaUC9q6M71MEQpTPt71Z4ulPTmu+fRxDWiuK+\n4pgBYWckpUdrGYgzglk2PuXaCw2LFxpsrk9Cs3MI/CZbIljG2rB0DWykYHiO\nHxF+5JnVZBCkcBSpA1blLLkGQiGjJNAL8ivPqvH88sPBkuCRK+OOsCvNdgUc\nFHBVmt0mp/Eq88d1do1jw7KJGrwMmKVw4yfNGPdBv/IiWei2tspYPBS1eS4f\nXPhrvBMPIKffcsZewUcTCoBdUAlg6TpNEVnGbld1AmEIS+ceZgcSFqMV2MFk\nA1YC2YCx+Hsf7vcbp4KtZklIekl6HyVF+FeRx8WUpEOuMiJJDcGkd0HZhCLq\nUrzjJUANF5V81vDgSOZM8f4dIbeHv/D1nrXjwxWjLFcPOeJnUp1u8KaY4Uh6\nK2Z9\r\n=Hrcb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.e33c49e.0","@material/shape":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.e33c49e.0_1585786165243_0.9028562447086559","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/card","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c711417443c3e376fbd0df81c5ff1386d9faf5e8","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.f1f8e60.0.tgz","fileCount":17,"integrity":"sha512-EZypYXFYiDO7Lia+4aIADSKJHz29u4WkmzgiWIZMMILHrMHSJYgnYLJ/8TlbzPXvWW98MiPpH716ThOvSakMrg==","signatures":[{"sig":"MEYCIQCGAhR0FQhHgPboerSKIesxw1iLk7YF2M0SwyGq13Jm5QIhAP6ecJ/v4XqKT6O/HKH4ZOifvc89Zky7UFAtnB5Wp3pc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlqCRA9TVsSAnZWagAAXakP/2U/SUEhht80R+iWJ5uq\nxNtXi59TMpCRMydwRbb50e1PXMG6Zr9EAKq3BiZV1xKIA1k+Z7lApdkzLLUi\nAw9MCge0kAeHFdLFPHouVMYJgcnhhqgmc2i2IlT5hsrs+f6FnbFcLkAIYG0+\nXlUM8u+KtVoaltLWosyGJUO8ZW4ZP7offVgHW8oPUhWt+aLjx9l17vYxDmN0\n3k3yOb/Niz2ZaCzOPnD6QojIUiUIS/cEgDRP90R8MQkQ56azHUDI3AbatXWP\nvrVYVRSCm5Bu4wFeFCqd4Zw8624O5Rw/69PO2uZKhPkhnEeQ9Gf3zyEu4Eje\n+1HWTQGmlSvI4ADDy38ipSb5AsFJqCypgdzvORoUM5L2gQSTlzqI769mKugr\nD/yXdlOCPpDgYiR70nZtjea0xy/zI8FADkkCd9qZPUIjRq33szPEL0/M42gt\npTrw8jYOjS12qQWlcBA49MzlEvD7K7dvoJhQWYyYCYyDz+Xwy4eqMM9qDWmM\ni0DEouh6vn4tJj6IAU06Evg8ai1/idgzKTw4eRbiaW3kTjob50vEst1lJXQN\ntFqUNq+cccQ9WHuID+93FgsUM5Y+D4KYea/CkfqE4rC7w8fg83O3ueNqW4Im\ndQ8AC6pWNc4k3bb8i2nj8fFq5EYsDNpQgYPATpgdefewHgaO8lQjntfkG34w\nlmOc\r\n=8exy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\nCards contain content and actions about a single subject.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-cards\">Material Design guidelines: Cards</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/card\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\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@use \"@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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.f1f8e60.0","@material/shape":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.f1f8e60.0_1585854826258_0.014072715556496362","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/card","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2cbefb21c1a514d0a36cce2f49fecd5aa5b6415","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.1e17c49b3.0.tgz","fileCount":19,"integrity":"sha512-MbHL7AXezL16E1gjxlwqiKhQhxLGpOKArg0TnzJZRsJfOqS99Q5n5OSStC6BggtPmvvu6n+DyTPn/duni83N3A==","signatures":[{"sig":"MEUCIElYW7eAmdDJhAzMR/uyZAh/ZB1VRBxmDhxOaCHIfTOHAiEAsg7IbRFZe/flQ2W8uuhrcJY4wT57xS3SPozHzjWEfz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qHCRA9TVsSAnZWagAAWUUP/1UERWnBXO96GRXxt9J5\n1jomUAac8JX7pWON8QpRxrs2RP6EsUSKfeR3beTY/+HiVvVg/P6TnBFqxHv4\n51pW1QsVE/i0CE2l3n4woS7VV8QIoaa/4FEKtD7tKlA08pCs7MdOLpCzGSTG\nKpPA6ArV7WWi0rczL2IdYXBXZZEx2S8PNoDZOZRryIMh93CDgoZAYuZ0MV4r\nZ3gbXWKVs0elMWweB2w0xnmZbOCmGC59Q6wcoNx9CBX6XNzDgoC4SWWzbX6g\nmj+yYBg/aSoqEamG3XlkZ2fvoNLIf7sYvq6Hch/oeQ2U1UfptbHSU2c3sbMC\nHCGmuylv+F84dSHaB8vkq79+QSKUU1NbzC+y958Kh1qiCkkPvk6/RVnreYqy\nwX7e5l1G67XhlQK9n6+fxNmjyLCGbCqY82GxmVtVmIPHA6Zo5mMlszaD982k\nt2U2WRCnY5XBGUNH39sLU1e9a19HiDRwtszjJWFlifHBrfFpjhaUlOW21hqY\n9TqXImrT0jtX/L/pX+CPXMHyojsVUnBGzO7+4UsRoHShrXijCgFBTH6uOZE2\nF6Jm/NQSN/5tXXFQrh75V2Bz/HcNalzFjUn34Gh07xgmR5Rm4eCWnDadwp6g\ny4+5UZ3065FxJu9fS2Y8kGRMpxUjyLDg7Ohwnm/aGOTRaLLoB5jDrYerfaAt\naaVh\r\n=LuEv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/shape":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.1e17c49b3.0_1585937031234_0.8165662463503622","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/card","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"518d2fa259c4de602dabbe13255cc989e16f9ca6","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.6a40ef217.0.tgz","fileCount":19,"integrity":"sha512-0HnOm+qNKGNke0Bi/odAbgmHppxHOTzSyL02zOa6MC7uuXxd88WylSOmcelUynPLJR2QzVrNRixQaHaIDa3nfA==","signatures":[{"sig":"MEUCIEbCjcCB5Z/hbeHKlTAQ+oxwwaQgC/QPXbQibkGSV6SBAiEAzhGR55yjzFzqDUWdu1Goak/BrG33iFTNlqgETbZUf8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh412CRA9TVsSAnZWagAA+ZAQAIKYJ1Y2js3+yLFaokaj\nez+cXyBFMAS2KLVd1vlGhVzSe2dQNIPHhDSZ4qZSW8qSyE3Afgzgl9l0XaQM\nEVEgC8f927aNOQ2N0au8VjwdUupXSTqfKaUPD+ZbOeqlFXP8E3KtnmmfaLUP\nTXh4T/v84txCpACSq3trprkMy7kspY/g4TexkntlCw1SrKLYypmcebccSoVp\nUgMKh+XgSzHA7YciOFqLFG7GYKXzA6MOpjoCrEuryrZxhm+NiSG8XvtLpMOP\n4Hw/QX069rjsfBNrRY/D0krLm8vJ+h5FDeZCHCXVrkvMDntO44cdLdH9221l\nyAbGde+jkA+gehS29I1EaF+cfBvdQ7STXUppMDgJGYPPvYgrgzl/7VliS9rq\n5a6s6ZsGirjJLtFFS48dgBhcbW13tO3TDc+k/f3y8HPmM7bL7bZMmMX7YF9r\nwAyg1ejnuOGtDlUt6tKBOtzv3lEP4FIABOT/pGl/W5o6Me87B/IjQhOZzdIk\nNFw5jZspVPLVVC/AqADEWVIHrfvMB0hZ6LhxCrQhr+6lzXCTIGUTTurpgv6R\nSoYdIUCZoZFn4FIjxFB8VJaFTYvjoyEgquv3yE+yRo1W3EPYJVocX4V/dhL0\nY29P/pU3lePcGaI5xbVMcLixrIMLdM+1Lkrfh97Zs3Ei8H+XZnXQqbO0KqSG\nt1B8\r\n=Tg8l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.6a40ef217.0","@material/shape":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.6a40ef217.0_1585941877708_0.6641372225501105","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/card","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d3e9700020162471e4d291937aa93ed056ce661","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.5f24faacb.0.tgz","fileCount":19,"integrity":"sha512-txV0fAb/jTxoF/cELBOuye4+/26H3DpSx0GJUDP+JL3jiNmSDdwdY/5NG9WdioB3/XrXfeCCr+OCO4O6uZAmLA==","signatures":[{"sig":"MEUCIQDT8ObYxn+w3fbfcplbxl+sgxnxjBN+6zqrBspXH5Rh+gIgbY1n6jlU1aKyESr0LpCp3mXagrnAoKxswt/c+EVfmqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9uCRA9TVsSAnZWagAAqjIQAJA1AbKwkWHSu3CzRmKf\nEVS2wmSEe4RMcc9/AiRny8cSG93YNhteBBzM0Bn764B/eW6tObzdq5u1ry2u\nhE/3ds/hsauAdkBSJZoSci1aZpHe9FHfi4pkzbXF+L2jvSbMc5fcxx1x4Mnl\no0SwWlHTHq1bffq5oI+Ov8HWd3eWWsEv0xcyfRGAtd8ccuCjEd4PE6gmaEg7\nA689hzYZTLnpVTIlo2s9jB53aHXpcaoU2ampr35a2UIshBTYGnni2KfKX5SS\njFin4BQMJRBpUxYFR7zthy7qHcmD6jGMVkT7XQpb9/Cz7RdTriQ80QN3gbDI\n0UFhJBjcXmEdbdUzpPcYSqQtQYy/MtC3NVU90H2KcYOAltsAgD18CFJaCYvI\nW3i+op9fYlEQ3PXxgkRpAKiprq+YUYpq2L+l/wTna3accC/p4Qdgp6f5NReX\nU9oz0XaDBqrrMoOPiC8J83hc29hgtlYv3gMLYx5MOr1p+lGGkY7ALaxUHOYE\nK25S3QY1eJJWK2OCmPD2mEhJemvfWgfMY0yZv8yd9Wc9qe8QNz/vDumDPXJG\n0y/DSi01etO1jlGk72xopEvNALceNkDSiKLrNkACB3Upu18F8G6slrP5yElv\nIwnczVRMqx3SKnc0fTzSSbfdmtCcdlm+3ik+L43TK7+XuDv70jbibBHl+bH8\nE6KH\r\n=rvHG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.5f24faacb.0","@material/shape":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.5f24faacb.0_1586360174289_0.34917782867488967","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/card","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79b0e4d60e79bca0ddd9e405ac9fc73eeccc4bfe","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.82fa986b9.0.tgz","fileCount":19,"integrity":"sha512-BcQsyVglshBn01d5G8bdxcOiRcOA7Wrfw8x/ufLpLvZQ4QAk3OXN90EUidwaE5dojQEr9ngFSwbnvj9D8+Ay2g==","signatures":[{"sig":"MEUCIQDutSxRqUSnB42QvMdm6znyTzd9vGK77twWUUPe15TFeQIgBnSsvqzhOLj86I18W2W1QwF9UskIjq13CYtGyTtLnTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfC2CRA9TVsSAnZWagAAjFsP/RiOpDguC5RvaIZJ5xBI\nbSQpMIXNVIGaoSalhuYSY9bvrYKZsMsKH9W3iRmD8dQarmRzQXKwOCcXJbJA\nP76kddVKr8jDxMc7pIOfXt7Ieq2Z7CJzBfPlS8kujnETrE+COkJpc0vvgzyr\nu2M6jCGuSB0FvEL9vYSV/dRxcZx7yDKBVXPgwlFC9jjgSVlevekChXlkIdDF\nEDHdgIGn3517Z3mVRFF+RwODG/zoZfrqEsRGNQ5iGBw5PEaAdQtrUmb8RsZ4\nLWhnfhf4fvkThWt29QM360sMKiESDcKTjkBqOVP56XXRg+dGmMv8NnfK/dVC\nXiJDezaoCtM2THOOaYiAG72EeUyhzSI08ni1FzUlnnAYEbbsZF/YA8WkelB8\n2NoTeEidzSfWP+LVab8Jq//G4Yzf6vcmIqOq48t1yBK+c/cqN2+kX7o4hr/3\nmSV99XWgG/JD4aZ454CTI8fSuzSVu45dFUF0FDcDnXyB+zdH1bxtZbUPEoVD\nE5d3QzWnAJMfRdRwLakGx5TrccGHO516L2sa2ai0V3OyZMU25POK4AdDABPf\nrsVA0l0LFaC2pTFhhAvl5+hGtnSpyzphvH9CBm1PwmxHQNtYOumYWs0DBsmq\nJFQhGGmghRhZKsv2GeV0RPl14AzPq8ZwwZVVKJtd3aRovQMLNwRQD3ryVhFU\n+d9+\r\n=ShQM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"6.0.0-canary.82fa986b9.0","@material/shape":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.82fa986b9.0_1586360501823_0.27781169903014225","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/card","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c9591208ba3d799d1804afc30c69fc12f70bdc7","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.9930d9cc5.0.tgz","fileCount":19,"integrity":"sha512-roarTjxWg+IrBPUuSJSvOp9OJEnuYpseGJNua3wkDsJdItoKxNBN8194hqV8Qn6S7LXoksTbFan0uWfl3Eur3w==","signatures":[{"sig":"MEUCIHACF8ceiVu6HC04cm3r3lzcH11OPfAQuwYWuRuqml85AiEA6nwVNIEz3RKO3JPIs0GKoViNN4MziMHkOpuZQE5KMQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibNCRA9TVsSAnZWagAAa6wP/00IZr5cz8BenWT2d+xl\n1JAm2XsIVKZpKq8etyYcI7oqiqSHeNokZULtEuxZnzTDPE48AWL/Zv2fSyeN\n1+MHHwZktxMWJnL7CD9Ckx4SoeZ5AnQ1QZ3ZAuH7C/EFjO/cP/tMaHFneXQW\nh7x2+I4Lu7DhskV6VsCwVfk9vwzKLePAc699v+qauQUOJ2I1uRnv1QmR2cmI\noMNwNIXcLiVaqK1MpuC5FBChiLhRYxlklNSWK10XjAYr9nrpI1hhTaJCRbH7\n8Z0z7MPByNflU3/9/SgJollqX4j4xrP3maVvvmscHsXGrZL5K/Ej1RjetKL5\nmM8TzNC564ENUQ4aIqk2+R7SzHmok2SrgusF+Ma+yQqbzKjVcZMbUVZ1D+NE\nMPXEJL8euRua9yEgnXRl2gSsb/sCq9MAFc813AyOPZbDoNYXWupD3fFtQgLy\nu19FIrDjh4ivQSkWA62TRh9NiO5PE2oN9/UZoGdgLJmFGhM7nLNZJn1PfwNu\nUL0EeECs/LKldvp1R2epO3zGluF4fIdgA9U7LkS69akj+GgImG0bSDU1rvpv\nsAWpA5mqjga7/tjR7yJejnNtSZ11N9YH6ks7sGl6WVY736TbnoOtigsqvN0v\nv/Z0W0Q2/lAOCpMSQFgw1ZGB2aeIlyILKzhJ/W3SmhJkSS5zGx/ZwNvcbPYj\nmvHE\r\n=Erwz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/shape":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.9930d9cc5.0_1586374348512_0.3982562439496411","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/card","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bd2ce25cbb00ff55b20db8244e52500bb8b1470","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.6601d24af.0.tgz","fileCount":19,"integrity":"sha512-zozJeKxMPLytcA4PITfUeftPebB88QOKoZnRIc7Bwe/8qkaxwYFLZ95pNzzr7eHR72QX8HKhscdk/AlXuRk29w==","signatures":[{"sig":"MEUCIQDcmUstCEvLaNPRHPivJ0p57qCyjimpv+BuNXsVrmTlQQIgQG+mvgRAc3SMLkZf4omMy5D4FbAQf9bSvcnPC8Ll5T0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyBCRA9TVsSAnZWagAAl7YP+wfh3vokwa2HoXD5Xedw\nGyfhBa2Qqwm6EmTb2y9L6j2xWWjzfKy3FOpqQG2oMGbL46Bo1QJVD3esyWQZ\nsyn3x8MHhSQopUlyUPYgwxNOI+jJQ0d+KMrLnpMDNheADsR2Lv5IsqPTFjjV\nxImY1INRzzoRDWgrpnvpmhKChJJQQffZYn+tDfTIDd12hIz0Pm+/qWjwUnVz\nSkryQ44506rNd2Sy+xq0SUSTs3p6JqQR1AFgeLyuqse8LUT+fBva0cXYhPUs\nuXMqdaSL9gu2bHQy71Lh5HB8IgUncOMQY1knqfa3VNf1d5sq9mh7FZvc7wiU\naHkvjCsbdnvk1C8WytQ/i/hhYoVpFtqYiwlTRaMFuj/KgpB9qbCHkGRFaLqC\nWkaIRTwu/aYkYd9cFn+JSp7H87iOA4gtngMfoAfgCRtUy+UEvzoiiyXUzcmz\n48Fa7urGU8ObEygsfeROyqhhMKIt+6+O/CAMDlrYMG5SwevED0AVs8Xrs6lo\nDWjVa1eXkq25LZBvqGRimqn3wN+7nD2o178XIJBR0kKNmg2Rr6zNlVwQpFWb\nOM1QfAGVu33AVUDS2U8h6PO2pUqX5tyLhDosGzqTZJn453PRFZPC2cropHiO\n2dvJdk+DHLwGYFyeCwKYJGILB5DbGp6nvTh3m2e5Sx6qs2+lzI/LP5Qn+3BH\nYx8k\r\n=jvwQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.6601d24af.0","@material/shape":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.6601d24af.0_1586392193368_0.7872316437896794","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/card","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"251b0b2fdffbcbf8b2d9af0fa1ea8641eae05316","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.05f5e1583.0.tgz","fileCount":19,"integrity":"sha512-FZcX+JfTmHsytDPa9zP9EuZtzLcMUDIoYqgD4odIimlNUM4zIOqXQdALjfFf5161JNoWSiEVuyaDz6oPLs7J+g==","signatures":[{"sig":"MEYCIQD00VzSNGMUaTHz+JIAtqwB9nNUgb2TKaB32DYjKRhocQIhAN+/by0/K6fBDBo7zeG1VU5JTG8HaKuWcp1PfeIoS0V1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCTCRA9TVsSAnZWagAAqmYP/jpegQBspNGzpURbaKIj\nE38qlMgQ0Zu40yTjg4KY85vpFBJzXj1JUQO0onEZU1I6G7uC6rfUwMOgoMIZ\nORZQp4qFdaDsSgd5ccHuuJOT9z+Ui7Hgh7RfZq3ocVqdln+8/LH4M5Wp66T5\nVFbFtGWQ6pHnKKKENdFKdfzbyAv91y8uCfwzlpZ5IHtCSt8+bQba/ojATMOD\nj/YjvOT/2EGPhXGbm/CuRDgNugkplBYmDcHj0lTpp9xJ8gXXvW4sk+MPiy8g\ngIL/R3Z49pSZAhLfgcO6ocz4i/PWTbSA6Bfvi3OtH1WDQhMn4lY1JLSQCOW5\nw0vTQLyCE00dWhVvkMe3kBUfBpwsrRSO5d/IzUnQmrolD1BSGJh20MXdIsM9\nzh2Evxp4+FsMLWbD9dXZ2pxFaLW5iqACnVSqX2HwvrekArWonwspeuhCC6tx\n5EK8+azLIEWFZGj2tNZmhklpQ9Z8UPCWFCvnfEaKTlt2jLB531ra0lbTmjJF\nwd7s4XJ9ElLvLRIJi5FI1a26clczBi2MctU6pj6JDMBZXTkW1v7gmCr4ASnU\nKY31HQZ1E03TSUA5bxM0vaG8Ws4aS9pnkJwT13W7cAyp0qFzhwdkI5Ky2P+2\nE7DabujZVXFD3f5Ts/pOzBVTO+t8KHeco3F+XQMuhtta5eH4NQwEmkxuZZP1\nQG6Y\r\n=eoUZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.05f5e1583.0","@material/shape":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.05f5e1583.0_1586393235483_0.36351084020358915","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/card","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b604ab860f063af11835186a63bda3bec303a7f","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.bce00e186.0.tgz","fileCount":19,"integrity":"sha512-xI0ZeU5zA/pH01EK+aAa8hg8Co+N2sG+XodVyKHEWvUwpYwFijqOEKO2O4h/vMxqW0z3eriMsX2iqn8YfLcc/w==","signatures":[{"sig":"MEQCIG69i0MDUeinUjlStwqj9itJi7vRZrsB8SJHTnxvMUMSAiB7MrWdYiFTkzMyqodEZ4gl5/pb7vLSaeEIvqf9D6BDWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3JCRA9TVsSAnZWagAAQAoP/1t4BESMM8+qRcZ+3m22\nQNre0qQqZ2pQ6ferk4EgmtN9ASxgKB6uStRFusn1feGIdfyjsvQ6jxiF72kJ\n0+Y+8ZOL1eC2wXmltZJpEveXHy/Gx7rWxZjzYpiqAodmvtDHP5sZd877zp3F\ngzdjMx/YaumkXvCNfJ3StAfZqy19wg20XpImyJpRIP+otTleAG6wqKman8RZ\n0Z1YHvUuIdzZfft5vtZQ4YDmRmx2w8tcU1Z3gUeO47COIxAY4re4/fe7Tvi3\nubvScjIqnjhXlEqj/BVpclxtoItAmfcxXMy+4wwJ+wkKuToRq1pklCWhWXJl\nl7UxkeIY8bxdN4NnZQ6kAa/mwq4v14BMro0gYKlTzVzBqDDSqAwnWIeRqom2\na9xytGOieYYHU+ZbTuVRe0hlMSbcNIDQfLS526iTQEJxoMGBsnd29OIMMOOI\nSKnfSEU9DXxHfEYlzwZXMLLOo87a31RYHknwT08n/JFnh3/2+3j6W81PVg3r\nTCLv0iWpFyyRVAFFIckgnwfMuRCXX0l8fiHHOHKebMaohIcpn09iuFmPLBJI\nDjZjgYHFFq3+STypOvJUCwamggFjIOJbqayN9jvxrH1u3ky4fx4aRk3rOKBK\n8vO/UuSmOLYNnG/dwLF0/6CMBCe4QL6OY8snVnCe33x5HjPrOLuWSd6tDd5C\nY+AG\r\n=GMTX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.bce00e186.0","@material/shape":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.bce00e186.0_1586445768875_0.6276703258068477","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/card","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4334ac9cfbc054994ecf0b86a15d849ab2eac0c0","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.927fa902c.0.tgz","fileCount":19,"integrity":"sha512-Ffa9HbCbzBm1JjRDTNchdkBA/DK+hErMzHU3JI6tYmnrvOQ+xD+W8aIkac3r3Mx2z5WaUMSuuXD+ArzCe3KyzA==","signatures":[{"sig":"MEUCIQCHwkeU6Mi+IMf2oRQ7hrYfK9umCr1rWMrTEonYNLjJcgIgbkncDexXs3SBqR56ea5yGRPPoK37/wk1xc1Wb+/OWWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22CCRA9TVsSAnZWagAA4G0P/jrL7z+3o0IHclgKrU5N\n5EnfHCq3qaDBJcD+OTrOXGk3VGPJtJ2M1xb0vFGDLjuSU6Sxjyv+UdrK/QCl\nEHOgYJjsa15KDgyPFGlsM32x5KESJWdeBva2E4sIaX3BkmK0ulMC4pXuFHh/\nG9Bw+8PexVZnrKhujV85mAMUKsakCQB1w3outhfpFG+McJHhrM9w+LUX8LA4\nlUlHMFI6uCJzUSgNwS6yMT0UukzqheEd8DT+nRQUHYn3bsmOhj2iVwD4EZW1\neXjH40QZroON68DVIYWvwLmHwhqeDc1kH8cLbZf4Eo0RElAmgqnVGdr1cH/A\nPWzOWgNwEk/PIztn79XwIy4ivB0Q9ctYmVytTm6qaVflIbuS7qzaELhqPOnW\nsaeYy3/W1uR2d1ObiGWG6MQ70kOS2QsXc/4uoY4w39KUaP+UvnNxL+Yxu+hy\n3soHTD3dt/6rgnYdeVhw8iP1DT9z5d2h10JkQITTa3YJRHNL4vkuNWPXm3U1\n5SAF5hPdapBHiG0nY1eM9bJGg5IBSlhh+yTGMO1I+UB2I7tl66olxKrhANiN\n5wEWA/DSPdsHgxYE8zM0QSs1hsaE4jJ0urOrVDvfroy3nWV/VIBclYvte6f0\nv4Sr8xzG+SIIljbp5m9IYAUjALZjVxE5i0YoEgOkx1oMjhotOkHC7gYwaBH6\npbgT\r\n=CdMG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.927fa902c.0","@material/shape":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.927fa902c.0_1586457986075_0.12964259907736708","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/card","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8e7360c82f045b4016b96e543b45322b5d1dd1e","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":19,"integrity":"sha512-ocp7hPRw4NCnbHPRPuKfrdixZ6oKfqgJDyuwp2OvhQnlTm8hKllDrTgu6BrC/UDqfYOhPwImM75/i8tIbAjkxw==","signatures":[{"sig":"MEQCIFnn2VjUP/qw4Ue+T+MQNzHB729/tli8vRUHCSAf/coOAiBoat4IZLaO0Y2mCEcbCQ9FDb8rWabNi80C126IHbDHXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMlxCRA9TVsSAnZWagAAHjcQAIFMrn8woqZxmzGYmIgw\nCreJj7wYRKq43wVEJhDKEMTtWHDg4bhzwM6YTDL4DgXUOayyQsPM4vuUm2R7\nlgTJaNXJNM6ZwbNrin6kVmmmG7Ozi2SMLgdM1k51VZ1fIpvJSVpGGHlj8fSR\nZ2J5RbP8KKjXWtVbItbCKScLhWhQcHQddYFeItEDrXDTg8iRXemPJJK9o6sk\nAtFY5D1eywVhyJDMW69R523Sb42fJslLSlG2sdprMjlpusvNrCzZpQwuQ9ua\nf8MZ7vNSgUKEabMHT1xWthZNmYxIwoWVk5y8YzZ2w1LBglXjSZczaLevBp+M\n8YvmOzNN6ICUIFgXdXPgofpcncdm7Hnv9UJJwKlOCi1noOV05TnYTylbARpH\nO7QMu7UyJfrPg+nqffnQZqsurM5WvkMFZ+n3sitLvAy3qWmPbaOqSeuh7hnD\nKxg8fLTyrIS+HJDQpKEwGuxgpD7+E8FN3D6/xOuZmwTsBXc526YMnUtbt0Wj\ng2/a3ybuidD5PZaiRX7fidIdVAjLCEO7vTys5vs9DfO85MqFJZlErURlF2db\nEzjriPJ2zMpAVPWBXEYWddxCbVL9JOBdEXbjAtjIU+GXDWjjVHHkso7i0n/G\nrcje5NIKASuLI53rD2ptFK+2nQDcavyXMsAG8WqMj41fdsLyQBZP/CZg4dgr\nQL1H\r\n=1G8r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/shape":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.eb28b6ecc.0_1586547057299_0.673021218609356","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/card","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca4ae706233f44610db12cc7253dbc1407a49b0c","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.816a43b42.0.tgz","fileCount":19,"integrity":"sha512-l39Ke6V6wZ1Fu+wWgvo7nqi+ej5iAnG5vKXpgven3fIfg2wBfZJegHmLzxksy8IeVbj8UOvGNnDoizvvFcS3UQ==","signatures":[{"sig":"MEUCIQCLfK3UUBGYu5IRgeT0tM9Ykq6rB5UAt0vVVzzSQr8rogIgVHOE1qj8XKQ1hDPSM+C1gCzJKOelz+vBMmFnstzTN28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyaCRA9TVsSAnZWagAAdS4P/igKt1qQd/P/1lOmy92k\n0OZJYD94dwkjaWq4PPuQXT8jdPwAjshdLOdoyFgG1gS6fZfOAJGXwZeMJ7ES\nOD2xtdiiguarBOF8EepOrGp/4gfNoqfeK/kBPh6h7R2fdkoKSGovm/f3Nfxk\n1ArO9xhg14nqpZcpHwrWfjSwkwnPtTreH/SlIjtbSSUwEGcYf2oUjJFXq9R+\nD8pAvYll25XKBPR1dxUeo27xX5a/QI6z8Qe68YRuw1Pu7Wd9Hno4b/Lc0tXn\nD5aIdIUA8QzhUHP4eioa7kKS1Qa2lZOlyYYmdGyVoSYDZrG6O82jFBExlvLm\n1Qm5TiSB8y130Lb7lq8RN4ggRPZvS8wsLYYLKDqKtWMWclP6W6ep1mmfB1OC\nwshaXfIhF8jRRueb6P8vAd8lzcFnRuQE+ST9jfgq0RZJ/K5KAVzpsZpNHwpT\nnVAO+CDAa2uZbPilQLZ9O2BbHBg0LdibCEkPiIEPMgrQLv6sCCd9ABz4NHbc\nMVD/uOfvs2Sb4qWoca7VdO7KbtF5CCvBqbXB/Q8iOxZRau6t1NuTFil6IIQK\nuZGnFFmraCWqXRUiu+ImPumB6BNzFaKjiqNjIR5Q1uKfMt0AqIcW09kzqKN+\nnkcL8MY1L3dVKx/V+fapfyMs7NU7IwxgTqD2ObSkdSng5251SCU2KamYqW1b\nJQlW\r\n=sXF6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/rtl":"6.0.0-canary.816a43b42.0","@material/shape":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.816a43b42.0_1586551961657_0.6196135192304748","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/card","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1436075b8110f5b58a104dcf0185d89fab031b34","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.008c4d319.0.tgz","fileCount":19,"integrity":"sha512-PoDt5OlU6A3FnYzo5qNwVWKIV+VF9R9+ZpXjFki7scfocSOmijejnSqBPd7+uqiW5nKmgO+fqSOCITfDEyk4ig==","signatures":[{"sig":"MEYCIQCYBPsZDSGD7CcdYAYn2HGsDl7aLCFm8QhqVkZ5B0c6awIhAKuwy1t6YXQTMC33jQb5YBaEdPX8wPSczJIy8N/EJ6+0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJR0CRA9TVsSAnZWagAAJ6oP+wc1MVr2GGbRuaoo14cp\nQiSfTewOWYDPwiagDt5bBbKrLhCA3bizqwGPLflGwRiur7VTZh4Q58d+UVgt\nudFyLinPtfbsksDgjtr554BZiW9Oj3T+7YqpSGJIc2YFqwxNXOgeZjIvh4Ul\nUfWeEo2PsrNs52KOOfl/KIKX9TiTfeYLYbQo4QKjM3dBUzfFrJFGNcneFj7i\nO5BidEjaMV67fsy0P31G0I0r95UNn0yoAaMoC5CVDcOnVvdjWEipjcXbLLD7\n9pbrtT1hh42YCiwWQJEqBop1SUWDWXsHbXvd1K+jBdU5WJS9Od6k5HRsAa1f\ncuoYg8oHZ5Lr2CNJv5SM75VgKzPHnTffFpWaMANUEM4qIhIxJzALTawbzJW4\na8cnpqcAKbywm7gHVePUJLxTlp9n0fCPLuFCFplLTtoa9l1h4OGnZclQ+4f6\nE1N3x897NRwjz5ViPwo5111tRMhgnMlTyC4UyYna0orGAtNZLkHauz8Qxube\nic0QL0ZDvF3cUIRjCiI+bypL2Nfq1bqxJ8xRKEqy+CQTskkIJfHkmkynuAF6\n1v3lP1SQ1yJgsoMWBHtU/QYDn8QiL/Sc9UacU6TY6HPm3ssUjDfAB78I/2y0\nn5yAMjQZvtLru2jtgLImOJu034vSQk33rIN66DKVzrSS78Io1MPpbyvY4nex\nrU+7\r\n=24Rw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.008c4d319.0","@material/shape":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.008c4d319.0_1586795636220_0.6064968993478976","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/card","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce2108eb7a641121baae54295b4876af3a74c2d2","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":19,"integrity":"sha512-K2Y4pBPu5UtPX2d/xp86epDjn58PloQlyhGB58Ab0FeKAnHfaI0S9rTjwUKcXLSc5d8cwCibdDSgmjZcmxhUig==","signatures":[{"sig":"MEUCIQCu9pboZ9EAeOe6TLqX4+e91wtHyiOCElQGbSrd/GZyhwIge3Qe50HIQ7x3AR0VJQk3fJMmwfDy3tnSSROKiBxtoO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUS3CRA9TVsSAnZWagAAE/oP/jF7KTdzQtMIjMaXo3uS\ncJjgYp2MMsA+q3Q8sGag+7lkGzudgfrgmzEuJU0gHtqvQzSZMg96xycFBOhq\npuCypjj0VDfeYmnlbUiyWVg/eVEl9uhK8ZyuT/olMxfxaNC2rDZ/MsoJu419\nf5KUwursS/aq6MrK7dPnW9GI7P//Ap2TaJvHr7BEXAf4ru08A+d05Ogs9U7O\n2ExCDJKi9IGT04N/O6gV6jf4iUPYyEgWRrQf46t5MhQ1VevMNz2N57dbKirQ\ncbPcUP0N0bfy1DDhBRO23l+N+6yr7YWUZS18/CXyvOUKLD0Bx5azVWr2QOdS\nx3aSYH3aXFR/LAsWeDZ8MREKYN5XF+nsWKJwfNc2ZCnH9TEDifXG/1U/tIKV\nV/FcfC1xjUmCI/cLq9O8B5thM9FmjMCdWde4KnKshRIMoirKErg4rAndpz5D\n2dDG5wab5ZuJEkwao79UZ3QJxTp6GevzsUQoOjt+/pk1C/oi6mQpsPNS/BjW\nxA1LayezSNm3+sAPYAvcfBk5CA0Y0o2SVUcOHpt69juY6iaBhmPdikCVsb7U\nppKttOwbh2Q+OqkcVurYseFD4x99rGkJp/xKYVfcbLo13Y8Ra8dZDrYCJ2Gy\nsfG8jAnQuTg1WzbV0feckv85yJ8yN+Sf42orwYLgfYj8XRFhYFSZJtO0P5Ui\nKiQv\r\n=6QUD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/shape":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.cbb3f28ca.0_1586840758732_0.2378408353132646","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/card","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07d731e5f6fe861e37e8e56a9714c95416e354d0","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.f172b0f90.0.tgz","fileCount":19,"integrity":"sha512-zLcMoY1PDmfqfI9HgMj4g5xa6Kw+VOh0fYve194K4wiksMBYaPBDVTbDtqKnadJtaDAZE5sf3Uo2lOPf8eq/CA==","signatures":[{"sig":"MEUCIQCc/n7Agl4SSGow+wy6y6yKenFGhcioVc+f8AwVbZ6RywIgA12O57ZKoZD0Yb/OI+U0Fi5oNvN7pllNxZB1Q+qdBTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLfCRA9TVsSAnZWagAACOcP/RN1R9SBapEe9cSVQkLe\ncMYSF2IwxN6WaT9AOs5Lmv1R5o3/BZSObXZxGtQt8pCbZea4EVGtNEFaWWDv\naerLduYQV0fVLS+YSD+3yhSNv3BqiNYfYLSh25pAQev7yDeOmB/GvZmueabz\nnstEi3exuC3hFT0uxWq3uWbFM7QWXdxUteJp6dA3kiR6iN43OvIvlxU4/15j\ne82NAqsCOunGcEmWJxuhSF426irMmXbI3d9TeunwrAqML+1ROnHgSvGQdbvL\nnF40CJIfzzx3sbWfpbn2yfj4STJL3Q/9Wz/uSBmCzpqf1aTklHN8p/XPxJBv\nx8Quotb+U1Bo5THmiT0FceV5XAeRBx4L0I/TZiHv5dDkp+aUJuG3oENpwMNg\n9dZtNazdW7VghBlqLLKuXa1rqCmbm2PuJeAktT8/Q/R7/APY8xQ7c+9FGRra\nC4GzPFYcAtYJo57Y1U3/r7QOynB0DGJaFSTsi0DyeS7+whdZrBF1insjGpD7\n2aqWeKWPEpmfNKSRRJVWkmQThaQkB4wRcmmr0jRrcLRUCgxv6yryp4AFtbxt\nxbxAJDMWmBGwdEQAl2KsWHG5NMtJhiv6OGsvaNqtZG4kSUpqqsAE8DhxXGKZ\nrWOTUACaFSNO/v6bQLTNleyc/mM1T/AhEzDGjtIIclBjk3XApQ+hiNJGTnhi\nCTee\r\n=p/XG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.f172b0f90.0","@material/shape":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.f172b0f90.0_1586905823130_0.4408094399776312","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/card","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99429dda16bdf1f1b15ccb1ad9b09ae01772d219","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.c02642273.0.tgz","fileCount":19,"integrity":"sha512-Vd/rKW7lQTgFv/tPYtaYAtZ+Fivbe5FnmpZGDFq55wtwlY/WeX4htG1dyUmNs7aQFsSjcAAbrG2uW94J9TgaLw==","signatures":[{"sig":"MEYCIQCZbnXPP3ygKMA9RgaGq+DT9T9xag2LXSv7OskTr/icjgIhAK/c+wQiDR1s9m1yAp7RwCuKrIs3MrLKSJ85/LyhAM08","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOTCRA9TVsSAnZWagAAh30P+wSuhG9Zri3mOorQ8Cs2\nIXEHSRGV8Q0NGJRc2LNC21MSajPLiaoDASu6jB8P4b7ydRJQaJm4T8E4qjpn\nteOtLUnM2ObrYDJuKsKJ57fIyOhndV1s912N0aq6/1x3MTgbVNjDgRja3XAS\nY1gQ8FaDNwBukyXfT56GkdelWV+eHCoDGxfP/owfRyADOTBZTLUm6WhQQjqk\n3/XCDWl4LkRRRGqtsVeXWTHRX5EvQAzAjFpUDzEwY8tCD6m8s1q1NriP/Z3l\na3iEFahVpsljKkA/RbUbkyiY2+uD+XVmKEJrfa/HxEkedzRYDNA6UJV+wwlq\njNpysGnS5VudL+ATAuPtD99YG21uHjeeSjyb8V16b95Y0s+mX1q1QtM98nft\nPzZrLZ3auIltIz/7ew4AaCbOfwCDFZ2uO6t/RxmrrwzqdKJkWf7/SBK7yhhK\nAiVkG5nIEy9E1kSInW06axgDaKGNWCmJy+VcD09TH9aokN19BG82sCDA6naM\nhtQrxx09oLq1sawIEIRqaJU0HY3tKINjv3fAQ76W+VmunTE8Pt3WbvYujcwy\nxUmQipA+omhSSvbxj+CCB5ANVmYEQaMQGAaJ/bPR2wyx9DAfZhVSHLYeVAnK\nJ/kNC8QGEsyZnEoKr0aVWuvfF1v+43WmlnEUh6pVCtLa1aGGkhEqAjLXVOsH\nUUY9\r\n=Grh1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c02642273.0","@material/shape":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.c02642273.0_1586967442925_0.7187814889248543","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/card","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363a3f31571ba451b1f479248daf8d4b470ba427","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.8a299b568.0.tgz","fileCount":19,"integrity":"sha512-3rZjS8LQJxbXuMbRVMxzTqIJU4Kxk7UASiXamh4o5PfUMSovHaSyT7MM4lBkDVV5Dt3zwBVPtNLDmryOpnAxEw==","signatures":[{"sig":"MEUCIBEAMmn6jMMRTz7mwsHg4Qw64u6SlAaD5MaKJLQDqqsRAiEAs4IMECPPaQ6gYJsUR37x+cu5XjccwR7OnPvr/vESxkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44ICRA9TVsSAnZWagAADxEQAJG8up6YourpR7/nzo+9\nyjUpfHc9fl3vczTyPF2ZBq25uLURTHgHJiSxoW+i+qdUPnJj57b07NSKFhXR\n8cQEl/SnIShS7mfvCRwBkih4EWGPAQuqAOm/onkKGdBWKizOEV3Ktg0Nyy96\nNJ0rFqFqqFg2tMdpvVyVJEmCg1nTy6Q3Vljaj9N6Xab0yt2Kp4eBjEHVjJvu\nvFYFhtFyB9OHr0+Q8vNEhhhkaA1KotIFSXJAKR00/fy+aha6zyBBymiyVdve\nZLOha8184gAMhvhebYY4Qx/BMsXYhGucWGL1TlTX+fVfZ6qfcvapM9hSnTcR\nIIKFLkJHMsOiwbhjiyZLW0n+/TRzk7UBuwQHVvM9BxMuJPcWBoGP/L3oQ9QB\nw7VcYz6P69JUthL4rSgxnH3B4omSG87GxHBoxO3YBpVYNf7vYiBXRJruTNjL\nB+65PNvqUxvJRroGuDd4XBKygRzz44B4RaoRYliCLfRvVVt4mq47eCvthkvH\n1quCO2NK4UiJanGo+SmLrAqfIgAQOagfsOcLtgOrxRVka3pM9afJJF0dLDpu\ndg9MdVKtmpH6t+TMnfyZiuxfRTcdV4Ut3qOPo0zoYAmiKnPKpinUGzietfD/\nz/k5J7tK9cvh1PGTLK6h2r9vzRA5ZY1URYoiau9cH/dGGA4qLuiBwaoFAK9M\nTOVN\r\n=ONYa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.8a299b568.0","@material/shape":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.8a299b568.0_1586990600278_0.5210775629788442","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/card","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eb18f3b1e16b905f5bdeb55a300838447020a5a","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.490fbdc09.0.tgz","fileCount":19,"integrity":"sha512-SyPUK2Hc7XG72yRqL4o86RQ/R+OPnuNOGE+ROq39EV0aZJgz6BKbCPsClLABsZsJAtKlZViWmKh3tQhzZM96dA==","signatures":[{"sig":"MEUCIFZ/9H14Vye1Usgi6UFb5h7epVTbMLwuqN0Z71bghLbUAiEAn1tD0fKzhR5ZpyZUJ0NRt55B9xJ467gaqrqJ2v6DUoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RTCRA9TVsSAnZWagAAqKwP/09V+jqJhpIzZsJ75U2n\nvCO/aR4+HNQSVT3P1SmRPsevnK5UvDYgctyTdr4mvl0+2HGjrNsimRiAPWs2\nlujOKHGDHTviqJmwv1orKuMYndb6dw49jUb6bs2bBvZInlosyDbAAsgNTzFB\nuIoXELcJsQJ/zXZNwnTcMnrFkge1diC4JOvA3yj5prTfk0GWQh2iTKb1TMzh\nT+viRd+niJf18WxbT8zhYRY4OVefypkq7pfWpQcgrbtERc+NI8wH2mEj8AfC\npnZ4kblRvuspUct+npY+VxlaTtElTqrWmyqn9FdRXY2uJPOPnIL60ugDWb9p\nw1PPR/b+ETFU+gvkmzAnEdJsXiSyl6bk5oAeyoI/LKlRoRvJy3OrpA9QiuqF\nR/sDvZoOwRoAITNemluXKZUnLF8JrXJpVnRh4lLVVUswId6KUfBhQE0B8q65\njgSlR6UFNsmEGkrKSQBnPgm2R7MTUKOAoWjrziPFmJKIZQkJbbfaZAYEfLP/\nsUA7GSocr2FvV+FyhpDc8F/NP3+k1e+y0l9y0CEAeVpo+MF92tOol+xJsBb8\nHbsbfj7EsmvTDZKsQvThOEjR4Kao+36FXP3pjTLrJvsibgWKD8rXJwOoryyj\nr7qsam/++1OA03AFDrC+2oPhrLHyAhKYJxUKyam9/sOKatTBp1hbnjARKTl+\niWwG\r\n=fbOl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.490fbdc09.0","@material/shape":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.490fbdc09.0_1587016787041_0.914253417297703","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/card","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6b3b8d7c28d01c87a6b0d630a58cf3696154a49","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.f838c6e55.0.tgz","fileCount":19,"integrity":"sha512-8BNpnGT52Iq+8pVng6FEoSBBR5xpzhsD9/PQdmWlojyQR72tj2UzD9RPNpyVEWZkjwvUiIqB8uz1V02KL2KRvQ==","signatures":[{"sig":"MEUCIQCC7TSLuxVJD1Ap8RGZYLUNl98SOOASfl3+aVwZm5iX0wIgTJ0tbsR888JE3Cdq2cX4jX4dGKcbyV/mpXiH8DujIE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsiCRA9TVsSAnZWagAA/boQAIq9UD81OchM6rLilOU0\ny4ZjGY9pLvdhLIQmP3EslrclUlKgtgT7LzFtbYcZ3hB9lAJDLme3K/pS9vAM\n8b3bZvgPudLDsP4ORwgz7CSPxzjm2ypoNVZ69lxYl0TfSBoLemu7prjVspWT\nFyjgYYMNUOVdmoXPKSbrFIa3rNBYQUFHIyblTl1VtlwnWDiZ+xqCsnDW/iCg\n1ceWO7ZpG/b07hgVwa2aX+lZOkyzYIHrQorEv8+KTCBqpcMWwWTv49L6sKHo\ndXqdvjdcwBQ7qeRHXQntTzWGnbRHw6ekCqygbQDAkMGDVx0RuwpPBdD6SS1K\n2oBrxSALopB2S8fSSTEugp8rT92h8Nk0AApvfL/+znfcanBXTDYCmzZF7cLI\nK5cQHYXBnTKZQFpAl+dzsRNKNUOz7THECjMij2VRst3Uf3OrCKocVZGK50vW\nqF8w8mh8XgB2TrUVrp3HA1I5qc2JErOwEEBlaeZ22cSU36lyKr2nCrOSWZgr\nvAGuF2gC/Ac4TQDsGHgGM0qgWTT8JIt6/KPaBFEb+ZaSNzQssXVWUvykQwh0\nqwxAOkEU9QurRgOYtsVh/2u077Z6v/NC71wGo7RboTO914X8aiUIRYaMrch5\ntCTSFan35rVL8LOxWeDIeQJ9Xdxzy4m49oVIYDSIUsFkq3NNtbSDpHeMrxD6\nDkD7\r\n=CVrA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/card\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/cards.png\" width=\"328\" alt=\"Cards screenshot\">\n  </a>\n</div>-->\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.f838c6e55.0","@material/shape":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.f838c6e55.0_1587047202136_0.7401645103345653","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/card","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a84a45bd15477177354ff5a349755c74627f654e","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.ce6cb7024.0.tgz","fileCount":19,"integrity":"sha512-fuSWgYIEgFLeUVqiu1YsLXHPb/oC0/bPiagBZMQE6KFfI181H73e45PFTvf16axlqolbXIoGx91PVWDYI4CgjA==","signatures":[{"sig":"MEYCIQDV9pCCRgWivDpo5Ht3Hz+MU7RWX13BM1KfC6qB6EL0dgIhAOt6aXPKSES3lZjUetOJS6b9B5rAi6fXNApKIFP2HEkT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOPCRA9TVsSAnZWagAASP8P/jhnSeTQyVf5Ytd+Dstq\nqQ7Mzq3w8+nvhR1C/9Zh7k9qa0HUt4p1dp3YeJHYhPdkJhgM5rvHrcFIJrvV\nMyLt69+Nh3buJ9zKKWEFQ1MEqkvgkc1nGW6ZZYiWHgbYuVky5JXOzK49DaI7\n6AEUtSFeLzOPkzq5Pr5ZCgv2ea/1v8giYfTy+kFWKOTdSzl6d/U7Md0LQFMX\nkhE9ScmD7OhBIm211zLL+9yMvLMFf4yYFtQjYVye+03Fi35Daxwqv+Agra2b\nc7HvOlJ1HQmr/wTW+Vz4Pr0Y2eq7vnxWi2YVNlzxowa3RjwjAEAi7i7kb6bY\no1nKqAlCijTFFXJFtB9u9viCEUs3pBpllacqf/D5zGHWkUoVP1xmqE+cHdyy\nxRK4yHuGUEwpJczvSfS21fbZrnhM527l/647DjkOMtuIIhTdjtb7lNJzfhs1\nfPje4RDI4R4No3QtWE8i6SHDScjF7M+BSWDv2iAcUFwe02V4SJA2+4xucke6\nMKeIyQA8sWlyUHKJNcR0rOyX11LlFMgmkkgLrlkdNDW7eHBeLV6VLcLSM2RN\n6Ojg3Bj9FZlvBzX+PUQewcuacPpifu8ARihNp+KtEVz3EfLRxBz1rQzzCgf+\nNZrtVFZsqja4lNRHOUQ6i/w5jBe6qf4ixwq6FRmhLqNPciIZ2f2pSN+1qMhw\n1EDl\r\n=tXcv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/shape":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.ce6cb7024.0_1587057550920_0.638238462128851","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/card","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fa575b2d11717d0b9792d9394412adf6dc526bc","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.0ab62a65b.0.tgz","fileCount":19,"integrity":"sha512-sO9ElI49wVS8OpXRcDBKAatAEbib18DL8ojkxMu1Fmn7iX2JI0mWKirQkqOWFN7WOtcS5FklsYvwsZ3TSqYtbg==","signatures":[{"sig":"MEQCIDOtd/iGMVyyGHBBr4f9flOFNXRqgLyGDWK9TzVgGqB4AiAuIZfM1qJaYMsQCeqwRlTFXSTkBQFssAM9lHP7m2Sr/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnhCRA9TVsSAnZWagAAf/4QAIeqOasMUUY0vDubNlxw\n8X6OwcHtcgQdufP5SjPuIakNSQeRZUGx4Nhli28TL2mQ/FC/02l5Ss+3uccK\nsPGL4/Q80CYUxnlfeVodPS5cIxpPBlj6IFxDASAwT5V54KiEMin0PlimBZxF\n6vyKCovLQ1CQTj5FZUOT7SpFo6OZskeasvXKyqebmaPjvZ9CdayQryjO4zME\nu5KVH2JDwrySEjZOkrzlm5MIrLJXEzK6p3/FYk+My1XVM+sWRuCBMgUIgOu6\n5YNvnoiXccBfoQfnEHNe/WH+wep00BrucYp5mRW1OlsR4fqdWVjelCTPErVa\nIp3xp4My9wlxKfTC1QuvvoiepbagX9yepLT2J2WZyfXQJ/cVFRflUKYEqsLw\n+G5wJSv9J8AD6H2y0M7MzT6yAGBF+rxcfPRjYKv2KNC0saArty1jA6gfMDOE\niQGaM3qkms0z9pkApmJHnTnBd8l0H2KZP8Bufa0LsymTjYeI+WF7VGW47ryU\n/vRJD/M6DSPRz8kzqmEqoVWTx6VpiMvY9tUJyneV2MbmpcuKcUeglqKtujvu\nDQWw2zXdK2RQlbneqsCk4yCuCsTTFTGLuXBdWK5ppM7Wv7XTltVSOJB6QQob\nkNXiBVnKqLHmbHcP5+LxfmzFKOzJ3tCFPK8cwCoUqngJTG26wAIu63eTEgkV\n5lSA\r\n=8rbn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/shape":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.0ab62a65b.0_1587063265058_0.5897703611076945","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/card","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c3dea63425033205ca2acc76e17f9df59ab4b9","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.ca61b656f.0.tgz","fileCount":19,"integrity":"sha512-mKbWQRAWwxbDL0aHp7sGc1NdhvyLmcK7ORWlMq24iOpBoBPiu9WMoS6Gtaak1xPp1h0J2hnVrTY4NpOamjQdLg==","signatures":[{"sig":"MEUCIQDAa9By0gJEia7q/Ff7UEJKGdmQZ33sNNJQHTF0Bdu9ogIgNwsnxvaTgIdnbsHu1tB+ksXaTEfYZc3Y9r9bNxHoY8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlBCRA9TVsSAnZWagAAYOoP/28j2o8lgSz7Nnc69UH/\nlftJ2/8scBVIV4mLzK/YsMqB6klitAXcY5uA60DyOSG8+QWoDfN6GfrPdLM0\nFn8DV0QtJpijG2MkrR9y9QUhgi01kQaBAXlLfp7s+SYMLnB/SY9eZvUWygbz\n88D81FLWHX+s6ydnSsjl6qrrIMlDiJZkNzeqLZOM+BQin/0++S/h7zOKzSiM\nNryVi3Cyn4flfem/6iv9lnIRDrCxk0/a5yiu+Jd8mSiBjs7iXvD31ssJdlYy\nbBA3NA78CFW7Cb8w8RF+I/C4DpySw6OYIrNMqWFTtUPGl4rqmd/jei+E6Yae\n3Z+4ayVVTWuoXqJRe9LycNDz3A1tor3h39rdKKIybfUm9doDMFNnzC2hav30\n6XhTh/RuArXwkwlJbh7dSRekGFt8PoWmws2fM5HrDM42aO5awD3qAVvVRBcS\nZvxBLVAJCgm2qa3yInaxl+rRA8+oXHbfBOjcymzReT0s/WIJ7reayjL14oRi\nqHhpqMxYrBw2Q9sA4aaNKC4PWzZ84dH33asvMaNTEx/uhAsP+d1dnaGyr8jE\nRiwsb2CRzjUk5IsjMdoF3w+87TBKJ6ILbgrAWAx9kmrStxgvkSaRvsjuA3sA\nTbj8hbg2NzXbac2dTk3KiL1461EDSC1OmB3yLbdMa8MB+ubDe1dqq/1zBAFy\nkmZv\r\n=enYm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.ca61b656f.0","@material/shape":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.ca61b656f.0_1587067200739_0.8736450327377452","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/card","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8deee645b54d433af415a7710c10dca202764697","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.45a6615e3.0.tgz","fileCount":19,"integrity":"sha512-02nPWmqNSD3vvdtEhVMr7654Qb67fNlo0Og3mFHlL+867Lgw2j/YHabQJmkUwV07h+r2eBJcDFYi9+N7QMwwRQ==","signatures":[{"sig":"MEUCIHzkSnV7kYjo/WU67KGn571dWLljqT9bHpEeMb0XOHK1AiEAyXnAkajFfheBFyVF9OboRqEDuP+1h8+MGRoAR2EEkII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMD4CRA9TVsSAnZWagAAZQAP+we2obCEkqYNHQTtB0GW\nOjCsfTgPp2T0XRhuzdZ3BmpGMpwd5s9nZ+KVIr4xIKqw4rw8mRuIacPDzXGj\n9gBpveKQA6NnEJKL4UP2KXRoh/2Kb7cQhgeUHyOcEkjHsy6tNzNyPg2OLuyW\nDALtZ+G0X5rToU33iaQKcwoYU4eEf/ZsG8XxGfDg4VgqIx1ZeRW1pCFCewa0\nbqPjV9UElOP1K/MR9MnnIEbK4uKaSS6klQN87zsaLKxAdTfylgBzzS7eBW6t\nIhvyDMOqepd2N2ROyvKiecSMhMBZMHKttajShS8xCRAPHJTtPnSZIAZcNDY5\ny+e12nzbrK+bjvD2iY/UENZ9F0l5NZjcXx4uFzfKC0jhhRCpb9gy6PidfCj7\nggzDOTcNSaPm+/r9E1SINFVgWwzI3855lPBgmGXysxgVDMs3iOcnwmQM9Gze\nbNGPW+wp98ygqwFEC7hrG06ncPEosVRxXdvuWqblUwfrrlpBnsJySvgk4KbF\nf7IOrOETm8djwx2VK0W7XeJyuJT09h72OgYFf0VLruHXWsGGOiaXIKTqi72B\nh9PVtJusbPH48aBnjpZIX8BE2q74Um3+2TVSzkyalK70KZU+xVLZPHXwsXHX\nNrUNxzwcYlpl+4KnSFPf33CZMzb2RaUxFZND5hiL+c5PLvCydedsD5LJhWtI\nU+79\r\n=omrk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.45a6615e3.0","@material/shape":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.45a6615e3.0_1587069175881_0.7686141106046718","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/card","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00bd50707e762d099c862a5600b21fbb5891adfc","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":19,"integrity":"sha512-WynjxhnaitUBr13CCX/b1qXfU4JHA5n5K9o0xvpNjcs97LUAixcDxj7v6rFjmiYKFP6Si+XZhCUZS90yfr50DA==","signatures":[{"sig":"MEUCIQDtg2Q4Vs9ThY1WdxRahJBnFqqRmCxEv3LDAod/A9JHvgIgPsuaEc7bFmR4bTYPtnijQe+feOkF7wGX9TWSa2nOyP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeo0CRA9TVsSAnZWagAAgFcQAIsGioqX9gGBKIkH0uom\nNPi3pSOO8to/ipwHnIjOyamcu4zIyHZKTpkKp8iZR0tewidBM4KBerf94L4y\nLkqSO7RHFpJ1W9ZwRxzNqe9zcBsbC1Pi87OPeFBSoktyxPjT8xyuX2qqyBnQ\nFyrGjxlZkDA+lAt6s1YyIPBcqMpXevt3BMgtdoVmd5h7IUp6+3RtDo/rpJc/\nG/u8BTIWGAblVIHAHL+oVSCe5UpXj/646SDbpMDfgtid0GaShVEiBMFQlFIb\nL7OnobQHCh7CpHZmgjOj7Tp6ZUo3b8giNybZuswpqcMQuWkpJn1hQOkcrDlP\nnvLVziMmUT/foYULt0bBWFSCDLmVHVU8j2dQVsXwXW/Z2BOf0+e/0bx67rMU\nE1pke/gnqQWG8qwgnwKKHh7QafOidF+Gpnrap6kJTp6G1qJp/EqYj0N1iz6b\n+SNv1zu1q8xJFXBzhnMT4JK+wBdbzB+F3hNoSPOigQzOBM4gxBLHksbT4ghF\nYwJiFyFVvUPjC+Z0WALLZJHEL64VJJzVbOgPD7L+DuSYwAjpvc/UvIxJ3tbc\n7Y+LHZfxcUIUDl4tM+OiB0/s57UjoCfgvjWj3Uw15srABr0I8NdQdLOrRIIz\ns3G74N4l3Mv+YoIyesu2+jPVUJ0tACzpn3rEFAP/8O6LsJfWmS9g+1YatgNl\nXZQ1\r\n=pAAb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/shape":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.4b04cdb0f.0_1587145268290_0.7747545617399285","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/card","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7b6ccbf937cdd540be432ecaafc5fe271f240bc","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.b273afa93.0.tgz","fileCount":19,"integrity":"sha512-7VECbq7hAuWhHd64OFpv4ByfM0FuquXwVy0d8lA0hmzeBJeZ+JIJAnIcPyLqeictvpGAX51k3MgqNa/eVUqDNw==","signatures":[{"sig":"MEUCIEeOTWjg2IrX9mf0SV/x1YDPnD53u3Lzsga5tcMpEQ81AiEA0y/5dKUbUyUbNOeAR7JgFIOw8gvfriPzIrhKwzcR7fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWhCRA9TVsSAnZWagAAeCUP/08TsfCzi53B+HBF56rZ\nTEa0n+ikFkgoIniRAEIXs5K9LeBAuV26XbFJEVrm32UhR549Eype9pjT0ev1\nxLD9FejN+gbXHx3J3hUnP1DHy7RYvy13ABeEfSw92yy88TMo0dOJrHEhgGNi\nWikeVc14m2U9WlUHS3VncAdUJ6okuvbCXMiEpWHqz5r1s3nODeuMLvz4wj5g\nTE9JGW6rMnmzYqxbmgwU1vrVLeWLiRuszHuYRQRm+noQgvctTKJYU1dWCjli\nyr/3VbyJRIxzw0P8+id2wOAGh/OYxPz7aEAWMrb4SRBzADvu+udaqjQd0Qbo\njO2JC8/ClWn0+n4DuQBhr9iJGY/lRuv+6OgQvts7vtlvBhd9DmH6PwbsQO3q\nuJHaID8Uhcw5yRmggH6gVzDnJCDH7jn5Tml1tWUKpr2YvRPT3RsraJYWpv7y\nVgNVHzTGDN/dTiNlKy2K99mR7GxakXXhTCRicWJtGIxa3qOzav0mPPzD32nM\ndEcQtMs2NcKF0HzNUDPPYL279L/cHatkDD9eEZI+Pyu1nqEG4LDA2b4ihqtC\nL53C8aan/CV7FEFSPrKEo7MgsPyAFehw/PdpqYShSyvlQmp6c+8AOnLtdU1j\nRrdsOnwAodlhuwaWyqTeZnJPpr4JD1SqxENqYdZcAZwD/aB+qjHB07Cr9pUn\nMWdr\r\n=YQay\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.b273afa93.0","@material/shape":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.b273afa93.0_1587164576991_0.02844994739466422","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/card","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f76d1b0f716b20130227db4ab29a66cb57ab4a4b","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.b70bc601e.0.tgz","fileCount":19,"integrity":"sha512-n/EL3DeZZmQVMEegbp3rOtM70x/GMNcpUefOW1AFOXFLHaxQdRdAUD2DhlbC/AaevNUGSzaN8YqKymLIrJM6gw==","signatures":[{"sig":"MEUCIQDIgE7r1JXmPT9wV4YVglStpZeOWC6vsZxQCcadeCL3KwIgXdbnOO7HKtvSRSGXNJrFyBSMO2LacssKJkgqcwv2Uuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjn8CRA9TVsSAnZWagAAFRMP/1hghkUpQ8jFCAFVD7mf\nnl696i0yKOUshFSqs64idXAWCVn16HP3QLsA119a4I6nW5ytjHhO4Jtlyfh2\nA5URn1FeWgwAnLcppxrMzskrZrl2nvEp6LvMU/7E38uqyv8EpQ4D+bNtj5+p\ndnvvOxyuRa4NpSB95g+qdh/8bc0h1YAakBeayQPkbl+eS8UuX77lg8mnJJnd\n8/oB/ciAicmOLGflOy8obPbqRQH+QCE+k3F0+orRGZsgBvqqm0ttAbd41duF\nvHlGtVMQP5Y/Rp7i7voKFhEwcchYyRmgM3LC9N5OGSgRtccc9brjMPEkxax5\n/jLybPtP88Mwf5iSUsEOYJtunVOHvulGEwoEBsZMu3/o9UywubJlJefMAduO\n+0fKg8WqiB1AlYLi82HK4CWewl74ueGlEpYwi3DB1/JEJ90fjXmeh/KTCov4\nIdmnMHYz5fQcQtVKUKOfIPVMUcHGZeAA416k+omwwmWBbNLnW00K1NUv5BJc\nBEvykMXzCaJsyAjEDYVphXgwXABPKv8gIV7MLYZXSyMpBi3EaMQvx2g+OqcE\naHHiigt2xBDYJdH9XUQm6CrohIUnjItj7Sm8pnQ1E38tws63a0kWF0lHoM72\nY50LGVEiX3FYaa/cv17luSAbMhXE0FIlot9uxyep4rDp9a2jtkP68GXI3/Zt\nIELE\r\n=dCtm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.b70bc601e.0","@material/shape":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.b70bc601e.0_1587165691458_0.5929799316818485","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/card","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b43b294a1baeb18cf0ddb3151b93ea8150f6858","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.c4b4bba96.0.tgz","fileCount":19,"integrity":"sha512-Ueq6x6rLsQTYOpOE1rvyQd1FLR2HcU2BEkHn6EavtNUXUAJwFe4D3InXzweDb5TVKTyquq+035TAR5puFw5G3Q==","signatures":[{"sig":"MEUCIQC+Q6GdNG9Pfizy2zO00CjyIxubBtVWtgtI4oVGwQYL8AIgTiu915mMVQGXsjJzldbs15OY0ojbZw6Rqy72pgC97SY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkc5CRA9TVsSAnZWagAAutUQAJflDa+RUZuSK8ClR5Us\nPqLgYEXR27i31eRwMwyW+2bb5Ggawmit4V3XEzLVMRt82ii8bCIevuqPfKIZ\ngZCWYc4CtaKsYq51HLmbES0T9jL66Tmd3DBK4PN9y7LFJ/s8yzzIHkFaU+26\nBerPQMrR99R3/7QfPjns7O5n85P2r6uAO4zdJSQ58wIjhwCFNNGghnH7ogx5\n6lTpPzkGJi4LPChLj6IVisc2Ujc2GvC9WGYHaTXMMJiHVERnmaIQRHNKGXjx\nFmU+oYLtWFeKp/4i/SmAt2LaSHcyTHgaZtHn/YZHnYv351GndTnIyIDpFZXR\nTAh6ufDjjYJdq9adJ2SwKRnC7slwyoACm4zED1hDs1hS+DRjCvP2xol5usxy\nK5jeA6OPAP90dbYc8iB8cRmrd7lrmF0RsK/6YDETtjcMffjfzTG1EC147Vf3\nwed1aPUCWpk5xeXIIf5N1WjowxSwvnDjGtBcK66MGnBCyFGdUxdOf0OeMMX9\nKihf2k9yJMdtt+l6qV6zYVE0wAfG3lKoBzLYeiILdIvcPLERBIM+osZnVA6h\n+5I2akGACOzesHg/7NvARlDodGY108AhAKU4c+HOc1XjduXqUTL6o78tOTU1\ncAo55HCT7vTnjLh/nb3G7jztQ8THLnsLGC9JBqsGzlMzHG04CG0fK73Pl6iF\nfN1L\r\n=Bj3V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/shape":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.c4b4bba96.0_1587169080799_0.21346047433095316","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/card","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7538d14bbfdcfca3fa692d7fbd6d0074f2deea8","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.6c1ebc721.0.tgz","fileCount":19,"integrity":"sha512-Hbqz9ptn+vZG8TOjPWGVeuAcz4BpBqLUKBaDmRNx+dBeQOCy7ILQcK2TA9O5uF+X4S8t3P1Rdx7+gJ/xgu/MBw==","signatures":[{"sig":"MEUCIQDioLMkWljZ8AKPgi8VdW0YrD7QA5nGRUxuzwLBKNUbOwIgD2JfnJYHNnSJzdx8EDsTqQ1PK35qBG6Zj7CsdeDFJ+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7eCRA9TVsSAnZWagAAmmMP/2xyCtRwrIlmWjpBXJLg\nIO/o0ITt3iKO8X7ZDhMWHNJA4YLxJtlgVxSDsTWLKCwFWzJxqZUrL1Zc/CfZ\nyUItcI8/1t/nrK8EMesSzs9Fwvzi/TfMqzH7puxxEpPrephH9zVOm5yPev/z\n0mJE14D3we5WspcnaO/pr4l3dVjOnpman96a66oNqB6fnfrPRGJbLUH52e0c\nDZPt6Es2pYFxBH8AGpPrbhcq9v1aNz0lS5LHArSrRXrLgsl8FvE/Ugpe9lD7\nq3nOfWJRmquv9erlmo7yTKRnjYrUUmR8Nu1Nn5OsKYaeuhXamxR0T0aq0gYR\nBUY98LV8z2vXYG2dUvJzWn1fZgFNZIv0Qjd6mL26ZN22RP1sELVSOXi6gktS\nEqw7IX/uRypLNS9DbtuZ0mUqG2KWJ92rRaFua79qiiRcxWBVCNrb70MV+AI6\n7DaoJOiZwovm8GVJsYyZa1tayvWUKBnM9FdzZqUwLmJ4P3SsdwAk9Wx0SEiG\nJxf8I6u4c54VnNMGYCXBozkvsHH6zm6v8uJfCCfBzbXDnkkXjqFsulY6jk5z\nrz6zNNoYN3457PoStyHB96ajri/9HliKQb6PDRIKIfbQbSuQTEFNxUhZJSh3\nN+VzucRNRQQb72QQZVwuGvW+25xuCNtqPNw1C83OlUXUWYy1g8E9dA3pZqL2\n3fbL\r\n=MKIR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/shape":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.6c1ebc721.0_1587412702106_0.3636729064800004","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/card","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62202f8791bc6ae0214ae65a9e5ebbf8abcb4baf","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.9cff4318f.0.tgz","fileCount":19,"integrity":"sha512-TFfkS5CUiLfKGrhd9R1McXquSvj/iqRIIZgEQRKpC5dqurxot649MMZ85xlaoiTEIcFXXg96OZ/93fx8kNC0ng==","signatures":[{"sig":"MEUCIFvNS9buiH2EXBpdcdhGqn6kMtO/pv6kqBuL0hEvzJOuAiEA90LIxBgkbd2IjpocpwjtUN50we3jsRw4ikY42RoS6yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxdCRA9TVsSAnZWagAA3yMP/jaNqy+rrv17HZS5vki8\nt6SXMXXpLAatk7GcpdbPbPr33MknY72HHj1tAG0A+EaUPvdcyHsKW3iPVfQT\n12Mtx13W6EGTZpY8jxD/E3+6HRJyHBf6qWeKx6gMvUWMq6httbkpdduQsQrI\n6rs6Olg1SfMpzUqXAF8feHMnaj1G0lVa8rp4Jwcf2i41H7HebsgXM752dfy4\nvpuUMWZ1hYyippmh2zQRfwJvMn3FMioYKZqvoaZ8tATo/BUVK/AKsbu6M9QP\nduQAZmTh+8Vl1PU9KYr1rpWIk9Cuebzk/HwipiGU3syfe4v7r4YAKxe5cTcm\naCV33fmxEdE42SArbrzh3ThU0LBJn1OZCo07Xyml+821ppi5ZjXocokqs1pb\nsZg48sPBzAjryWhkImSTzMPjSpUTGxN5JDuD1cfWrPwNoh7iuJu4I34jFEww\n4aSyJycL9Md3X+yOleOMeUTGFgMk0pfa56TVZhNgWMKHLESQ+MQJdIgX8Ovh\nqkzF0dvU4OZPgirJI0SiWcVRhT9rFO4jP5cAJpgEQCxyPUXqNNAwmygMXI1k\n+yhRZqXm2ZOVFy3LFjqXjfIzegWzrKAnfFfy/GcKsv9fcYwSjSiWGc+VHa0P\nl5QV5jNvPecDO5dlqOc1EBV/Pe//UKudO6jaRxLyit3kXKgJA7ZbtXpvAQNN\ns3Zx\r\n=ytEz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.9cff4318f.0","@material/shape":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.9cff4318f.0_1587416156892_0.7320099161780509","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/card","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9422a7446cc258b284707455c13640fe2c0dc176","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.7b4482402.0.tgz","fileCount":19,"integrity":"sha512-dn2SsRhHmfqDAqQHVf0hUwdulq/ooHGJ+SIiJrADNgiVSd/ebFW87rqmxMGxXR5jZcpj+qnRkZOMfnvBTHLUlA==","signatures":[{"sig":"MEUCIQDaSSDXkC0rx+o8rdyBl8rt4CP2xsfqyXNIHKYrd7Yb9QIgSbK8W7kBw2wmr1RhY9VNY/OwEjlmjEmUzjySoIAkVJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAeCRA9TVsSAnZWagAAGQoQAImpwkNF/efC/p4Jy54U\n58pBnOlmkMQVK8bc4hNuzhhR9JmR8VpcgONaX2+WRSB9/3I8C3wFha6LdIHp\nzsC9zS/1Ieeq/EjRWt0MzUwkzTGHQRHYmtQvB+H4YAdl6B29zihzWp7GUW2D\nVCJlG+gny/XDPA2pkdrwd0i2cK6ZH6U7toW85c4JdMXyK5/BuMN1wk8ktMVU\nhOCuGvt4jb9Z+LqlgGMJQt+DqSuSBF7fqBtF3HvdKM8UsRsuwlMN/5uGpCOW\nsfNcSRpCUmgBm27SZKLu20VQ9kO80eIf8l+OvNsn0iREZDrcbtzseraff0n0\nsA/78CpVG8XkPAWFnTCSMCEpc4/9JUOT+W2TH8lf2pguDyAY2BVlOBl8vVc2\n7V8SdP5DsRIoF5oiUhO2KOm/WuooXRkDxyHGg9YyCUDXtLHAGIO8logdwf0i\ntASWVzl4LbUMlt9Rw9MiFfMfH9UhXaNPx6fcgVa3oXt6sn7uu08xqDZb9JRH\n+WoEUYszclBgNAAxj5ucquXulAlIaIOz7hky6hEep8p9GpTv6mb3lBaP1rXu\ncOq1Rd9DF/NbVpt2l1DMhEsZqCNBrAIeWl8eEAnUt+gR+bRQDV9ehhsZ3sUI\ntiUeQ18q2TwhlzTmtZZNHrb844ZYPJ2jAOn+KMORSduU9mC382arJ0x2vB0M\nxtTD\r\n=JIyG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.7b4482402.0","@material/shape":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.7b4482402.0_1587421214398_0.030751372029245605","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/card","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eb6e78441f0bbfab336c46c9db76b7a879d0b14","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.deda86d8c.0.tgz","fileCount":19,"integrity":"sha512-AwhhIvQEFfv5qoU+AE4b+kcO4ZbSn1PHTBKwEEChPJt7l66dEVRF7m8IjypulUHplHXuL1lZ+zU40CtjT99E5g==","signatures":[{"sig":"MEQCIHkgJ+QG/jX0Kc+oCtKXg+nogvcsZVeucNH4dpZzJc0RAiBne35/nir2k4OACgmqiMkyXtzO6X0OvYJnBMzm26PFOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkNCRA9TVsSAnZWagAAbvcP/3vbstejgFWwKUr72Btv\n7BXM8O9niLYlKg23kPiA3cojcC7orUqRYsPhSrFsM82fCx7T9YiaQgYaguTi\nle7W8RfhYqcWMaaSjN7Z40mEBhuIN4YcQ5xZ3sFHZM6UySImw0Sib16XKUrK\nDZRNBj/HfZq30udhF7j3vBSHRrG//hbeCYJ7a2UWMgTfUE9k9ZASyypcqOz3\ngAAb6dc+pt7j5GpPq9QVN/mk+QiWy96lq6+9Vm4CX5jvwHhSR1LUhsyBgCVa\niNLuQ2VFxel/kKgcMqH0LbiKM0rhgWsT51YDeB+EwEO9tCQjz5xMuaGez5sC\n0SXU8o43Sun0LO9FAAve3QFdGBVr66je2rgOup+8B7njPc4SxkHs414G5zFD\nkqzWum90kcqd++ixsJCtSMaGpqXheG2uDEx0xpi3kynSyADSFPwkZ+AdpWhi\nAwlUarhw6W5ti46yFzrlqyIbBNBgVDy65bQRgWpt2xr5U21yxw4PAYNibEsy\nZunyTVU08+EkDNLIYclx7EcXMjIMHOh1tUFwF9G3JiLHsKUklSDgENWlmHB3\nJrFCgQkleOpFVXPSUvC7ElAZyr8PTSVt4tMW5ZvncPrl/1IBwgZXUx+JXixb\npFpwtcR3OGoaRdL0W+et8CagmNEHihmAbGUuitZHEHQtcU54MlgC/Wb+X8iy\n92Bh\r\n=jVRp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.deda86d8c.0","@material/shape":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.deda86d8c.0_1587431692670_0.7172172723348151","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/card","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbcf7002351cc5b2b189f6b91726e0e22442ce6","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.d10412cb2.0.tgz","fileCount":19,"integrity":"sha512-h/qlvV3lLvvMJhHGkE8z9mqs8hrf8mNE2ehX0Nf07sOhdKhC+ykd7fPGnje4k65zgE+G1q2Sbd+lppgEkcJJdg==","signatures":[{"sig":"MEQCIFJqQkBN8XdH9JlAhoaoRE1dH8IsIO7Ey2+BEyrOMjxXAiAgvhr7/BiYCIWRNR06yBtvhPYCqYwH3eEwfHik3JuLrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzj0CRA9TVsSAnZWagAAHKcP/0f7r9/IrtnDbYLQvjza\nQQWhxgL+98YV07CB2B5XX7neQUTiISt0CZyI0n+6T/CiQfCesIdkLasExmbJ\nW7eokEIC185oFH3GLEFKVfAwngLzr9dLtI/YlfDzU6rDJVvotFpu63sj+cdw\n8Fy+Pw54bYdX+y1VY3AR42Mkeqr+WpeV13GmD13Ww445L3T8IrC+oteJgKPj\nixYZz9zKTM+z32CdwHLMmwXi7K+zj69baNtaOi92sfwVVP516icOuXl8I6He\nZDsLwZOHoEK7ObBYw5DirB27mm3bZspvBkKYLmRPwVUJDI3NZU7GBduz6mJJ\nv1zgATBv/Kr7MPLqzAUfZNIyAq6e9x2wQNA6BmEJ/iCY8gia7mW8ExFF33YX\nV9bmkFGUt+ePebvnri+BKeHjSwdkk7+XCy6nnueWvuCvQrJefEWuzejfZN9u\n9vyZQ/q5RDarZnQiMAYsuf4odvLZbHOEBc1W9pH5/xGsF3YqT6j/8oIv3DzA\nEkknkhbdYsCecgGZB28IlzEZL9/6bxn+5+cOKEuLsmBGjwXIsrpyal5rquYr\nmT3BavnMSuQJks9L3JnQ9XVh0SMcEBonJICrPb3AdaVUTLDa5rDNZ0IHjJeo\nQvB7Y0nxAAAFjWh29Fmmwlm02Y126l4ABl8O/5uw6MCUkKpR/afhjMybfEli\ndBut\r\n=3mjR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.d10412cb2.0","@material/shape":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.d10412cb2.0_1587493108349_0.9186658754845956","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/card","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09343444c64833011040c8a2e645d629f9945773","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.c141801d5.0.tgz","fileCount":19,"integrity":"sha512-qX2H2wFQH/zESUt2jmWvioRy3OPwS1H5rZv08O5CnNw9OIx5EEZLwjqPGzV4dDawEBuj8deisiG6bUWdaUo+BA==","signatures":[{"sig":"MEUCIQCtsmtc1t0UaTUk/bsTvJkyFfpoToGXYINzQ1Cy2GSHXAIgSaT/vR2Fgq6O0mcBDBcN1ONOEsXxtReJqYYDoimAjNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yGCRA9TVsSAnZWagAAMnoQAIbwQEENXvQ785xJSK0C\nSgveaO2Q1FpETyEAOmvNGYPvPbz/E7yEfPhU0OYsAEYfuIuuB/GSfwjKIHvI\nPTMs4exKhQqsxqtquQG1/VYV2/b+3PFZixnFtf2qJ+8owM4GdSBjB2iUWvuX\nZfQ+/LLuRNtnWC1HEXDq1epPMsrID92holl4dnyqk3+zA1HhvERawfPEsVtk\n4yK4qG/2XVfnsnq8BAsF6tecvMeJsHq5y23LQrBCuSLgOUvlO8kTJlYUccyw\n/8+iVycPK/qOXQRk3ZwsUSoZleq6V1u012VTn6ACaNOQVBkAwCgp7ymTwb9h\nXQC2zAmS1zv9HtvgqkqtYcsnSzXkh/WgiuM5V5RnmufeLBM8d8mheIudWcFD\nM/qNqpldO6ncHqSABxTYm553HCvJNF9d9+UWfhBc47o0XIpIvqJc0vtrusek\nX+cxgaNtvVJ28MdCghINTF6c4Sm5WTjUa8PXStQ/JXjqS8TK+iOEdbVvzh5I\ngkuoyFs0YEV4k16jEexJMpv7HR0/wQ0ljoT44Vueg1QrNqVWeEG1bkSbfXr9\nt6PQ0UtBfqZi81cbNLM+cRO/ru0gCGdCYjJZnNpebfE2zmoe7VBmidObo7jp\nWvEIZ7Qp5LMkHu+qPCltaeC71eWLuXg1oljU6fJtP86SkK8lh1PLFiuX0197\nrtPA\r\n=JmlN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.c141801d5.0","@material/shape":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.c141801d5.0_1587498117570_0.7689614045596487","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/card","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4188bbb4b61ef6687a34d645caa78abee70a675","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0-canary.28d10a96e.0.tgz","fileCount":19,"integrity":"sha512-EJaf/wU76+9bw93a8ET16F4X65M7sYFZaL0de6NOvFG0MTXoWDRGO5jsVpifQFcOdTCGEswrjnfEc7meUHhi9Q==","signatures":[{"sig":"MEYCIQD1b5pLL+99oSXOkLbCiQ1MYtRLjqKtlKee5ta/JV0zQQIhAKDV5OSzyMhupj7vEN8TGpP/yOtGqkzDxHGd952gXLGl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAUCRA9TVsSAnZWagAA3LIQAJfoZCo+L2dlKwNVTLXb\nfXTzfbLsk1dpSGkUH13Onv3vaV+MNtePyqYBtOU6lc1CDh9+Jkzq1754gpgD\nEPjufJLXKiHvV8I8h3eWzCr7AEmecYoB9MQY1LRESt0iMy2MxpqbbSfIPBL3\n/ERMvy2cj5HjQPVACr14Mbp6ipKIir05ni+e+wRMze+YvNUWgJbRe90cRntD\nAOWVN6+Tidd96iBkC/8VKzhbrPCNkMbSKhLGFxFj2kz1gGvVVHYBEPMNzYl4\n6EmCP4ivlWRIfWlOPkcnYUYcGT8YN36sr9ySUl4h9GHuzitvzmmVIPfvco9a\nMmTjQ5jfJMQ9idiusYc9p8X6aXHUyPI2GMJVbguS7srnufDF670bpIMy7snx\nN2nWalZMeo5GYstVMQbTN+zNXEj8cSp5HJRoCahK+qnQmEb7Q0UEAbBR81HF\n8xrJI3cN9FXFrh2+mlp+7XBnDKDl0Nfpi66Od19poBpGFl9uLzPpcN9gozBI\ngl2o1J4RpOaMCTdPgK4gNDg2oOCJhuP95vmHk0De0JfIfB3HbELI83fNTbW1\nF/jUfl7wSfDjGvtE3v1HwHFj/s9tl1C99pdDQWyFMTYdcvOQzt8o9pEZTNV4\ngFSd5ML5Aeqqs5hpezLdLOeJq68z1JkWttO3+3WD0Sn3yuPSbpIIvgfoYQqk\neloO\r\n=c8+q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"6.0.0-canary.28d10a96e.0","@material/shape":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_6.0.0-canary.28d10a96e.0_1587593235556_0.33654001165500413","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/card","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dca2e182ab1346bc80ea2f00789cea286990b071","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8540808be.0.tgz","fileCount":19,"integrity":"sha512-uBwO7WT2/jcLy98ha6pkCfda+nZGWPBoyoRjZxFwfwiM5dYrFyEHB5H3A07xVBuES8VAPW9HUoyvt0pi56xP7g==","signatures":[{"sig":"MEYCIQDo0iXmVy7SL9QGPnck+1nSwsnY9cAaApo3GIRiWn+/ZQIhAOufWQOj6BDnqxo1PLUSyFJvVyA1IqHBJi4qc3vSJ6y3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+sCRA9TVsSAnZWagAAvaUQAJps4CW4snO5C6weJwZr\n9E1gLpXxuW/X89w5EkffaZUAa0Xr6IWimNhrVlAqtc41PfaGcczTCvr6MWIy\nF7zIA2zcrzBzT9uFaIV4voVRPP2Xeo//92XEiAIaNnMoFZjeY5GUG6pf4bAQ\nZcoz8a4/qjeT5S8blcN/gTUt9hUOxoEMsy+5UrB8ZYj8XewzR5XhmfzN60jf\nKNWm3EWzJUy+sZi7WpNkMvy4XszwEYvF4oKnxOczaxpFBINChRz7kZ55yoY4\nTUlLXHI1hQY6868jHMpzktfruFOavdHqt1z9I1iCJuNIHfMn8sHNbzPZtuPU\nuey7YhergjBb0ZFMJJ6W7HtTgEDH/jHErZUHwTQFIrHS1DiU9lNwpy1g+Htt\naCUakPB34apf2+MsaZ2NuYkbAw6aexnll6GTyRZH9nWzKvwuY7mQnqdHUEpy\nwta0YpnJ/IW3zZyqYHBZRoN32jE5TcPSvYG1fAkjJ22/TN0VkzYQHjxHfNib\n/GNnhBnBe4laYVZ+6X6TNZVt8Yq9xnZBwbzDR4JsfeAoO939N1xu5GZR6SQx\npJ1Z55nKm7Ucb+XMZDhunnZn01nebDrMzSzNawCYJjCqTv3+8Iwo6hY4w0RQ\neOYDdn4Hl9wezeEtRWG4oCTcLRWLM5djfdoxSOEC1erTpPp8e1V96nkmBuox\nnRZo\r\n=78hg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8540808be.0","@material/shape":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8540808be.0_1587662764253_0.49556580974287323","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/card","version":"6.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aea06ed339143d39827837aad2635751c3c63b2","tarball":"https://registry.npmjs.org/@material/card/-/card-6.0.0.tgz","fileCount":18,"integrity":"sha512-pqqy087rw9VgP180WxGgC/UmiIW4QTom8VWihSwo8dXmTKQgpY4KP4TvV9sBN/xVTCiW5RQ++j7oZKDQDlyobA==","signatures":[{"sig":"MEUCIE/TdkzIV9cMlIN6dCH+TjRyptcaX87FP3BUPkRvMTvGAiEA6RoM+YHqOgD+3dC3EfnH8eY2Hg4iWxh9+yQdWhNpRsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/JCRA9TVsSAnZWagAAeyYQAIlC1Bcg4KdDCw+lHBOy\ngOBLvG1I5yNC1G/Wlxx85siDuDzCRAvoFO0LikgBEowaJ1GLyTJAQmVRpLjn\nTnWly/hCCU4fv1Vlk4uQ0Vo2duPtCuVahl6Oec1JMS2TNxbplAnFmSitJmYF\n522Ue1MEB68ZJ9SDxdCfUYIgZ5x+x2gOOI4YcXdpqmaiztBbFZ/82hD63jJK\nWd68/ynp6ji82RBwye0gv3XV0gmBkkIhec8gnxNNNvxDUa62n5ijQUwBxE2I\non/FnqIOQO0JELUuZC1OuUnsC7lrsEf5Ys0pxwIGOVsZEy0BCv5fvOzNIXEJ\n96MFWcoQSiCUXb1hKCzTR0dsqDcaBzZ7xKen+8L+vKz0k9EMuYRX6QtLXd06\nY3+HtV+rV8NVYWMv1OGd8C0jzHUbN4vWEYp8UD6B4sbEacqwHrEmF8m/2Zew\nIFW31bEM43mT9aHfP+iOIM3myndKuD2NpJD4LEDbIU8COhjLhb+SJZRHO9U2\nkz8UE4+Dk4wyX15qUV6SHSy3UJO3YWL6VPXMklau3gmSBrkoj3r0UyUcD7g3\nazG53iXcsd6ndHFEGkBGhgKpDYoAMqKA6PfZrU3WUywHeeVc4p+WxuYJDMy7\n6IEim0hWJI7A8MB4PjNWH5YJxomHnV/IoCLqpG2lttCVTmz4lgrx6aEfLIrj\n+PcO\r\n=y/IY\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/elevation":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_6.0.0_1587662792514_0.5461845094946856","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/card","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4265327bc38a6c42e6d6e35d2bb43b00d8fe44e1","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.2673adb74.0.tgz","fileCount":19,"integrity":"sha512-c5H67YDYX+ZNPjVGVCqnZz0BNtg5/TWg4d3JJsO1PBmLYshlxw9tmBvaoS3CsrLyA0q+SEpt4DsX11ucM+RgMg==","signatures":[{"sig":"MEYCIQC65xiK3327EVnC0i/AuQgBh7PQdL5RILijjUdLkJ8F0AIhAOEA/RhEx6bwLgirlNAWOPjWh8KVCJRK305Wof1I7Lyl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqYCRA9TVsSAnZWagAAb1oQAJ/LBX4vNLh2pBcp+Tv9\nGeKaXs7ZbpBp8MF5Pa0GzshlEpy4bgy0OiCpjk7ZDPFlESgrXlI7LsRAg6oq\nIG9tC59wBmsX92/O9c2UrrPJ65CtS69lvHkDSv3Xl3AiUl49wHsQcqqZySlH\nOUnLkVzVjLDthkVeQEic2u/CuJqkmt9PbDwpE0nb0gML5PpPy16I8jkRsUlr\nsYKgNSZ65opFvnhpSXCa2hvC524kpsmG0IdsvXfwNhWQd4Sfu1PR8WQD3ekx\nmNmWZf/pYxa9kezQ6j9z5Ai9AeSJmp/tXcqrrnfZ2qsD2L5sB5T3mBvCI9qr\naKioLCrLhjsmI7TxkDTJwNXIbZOZqJD8rlG9ok9pv5ZaX4WAHeZW0LCdW15k\n5vqb0h1SjcWytA1WE8L4OtaFET00i01EvLb6Vmm7+wXcf4qoaEe+RnfAzclK\nU5+qdAX7sWRYgmuHmRIH/bdae25ywunwoKUxz9Nx8l0b8UZZvyMjx6UTDIop\nkhR3ihVYKxDQPOWuQsr++EJLhsNrHck5m0u2nxkqYKEX6gjUMMKCxbGE4Blz\nyP2HQJ68NNVDFmIP/44RVZFr8JOuULoK93yhUSE0Ok8oZlCkFBqyidSxW+OL\nOAKpt3cqzp10cP6Nryx4oO4fWCMrfZv2NUYPSyH1BB9a05YHpVGPfDKQfxtq\n+uV4\r\n=EhN4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2673adb74.0","@material/shape":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.2673adb74.0_1587681943518_0.1409242158243158","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/card","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39951406c958acf4c7678e55cfba5cacf8e6bea1","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":19,"integrity":"sha512-AS68KZDB5r+/fvnJNcEicjVW+3O4NJsp+dXRVTyHvofvQ1571q6HA/Ggj/n/09ZBT1COTgUe1dhZwZFgEctfQQ==","signatures":[{"sig":"MEUCIAcgebAmio0b//3g4EoAy8qqatlJmKAYuLbtKiHpZkcbAiEA8Gyn4poksh4nPCFCZO6FFsO3OI1mZjlhJKzitDYzGnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojD2CRA9TVsSAnZWagAAx/MP+gOYMk1SyWIVg1KJrC8U\nXQ5qA9ogJV6s2IlFgRfZxC0bvfPuz9CTs+U2wcV5KljjlK5urvggX18jsK8y\nu26lrckYHOznvzKNd9oDuwT1KZKT8/KrosXao9m94H7Yh7Npy0cRuf9wPHcm\nOOVMzj356yIwXJCsqp7ATp7gee+yZxMOsvzbKba/h7xQ5pEpkzLUZuLIXjYL\n21dPGWPhkQCUj0aY8+0ToH6LZfjH98DFT0s7nPoGFCkpPQqMsTgo/MebVR2M\nuVhNJWrCNc7/6cIyKYPzV8AMzD2hXeOjRO0k7xWi1e60n92qEae7q4CLKWiy\ndjzHk7NAFUQhfXE6nO6EY61PIA0+J84bqCyJRoG/0/nelrWuSsGtFm1DtduX\nSvnr0lbQDFWd5sRpsXDALl+4MFt7j1bPeXVhg7Ym+6FjLZN7vzQbwPLVmayB\n4mHlgvpP3TxDmsoO0v5po2RBewBVfD7KfYo3KpdtgyPRKhyPnLd+AyKdPt0T\nPjohGv+tYQ5n7GulNIRIzrkxCmk0SglRcxaOZs8OwgwZ822vBMDrM3yPALyZ\nC7pVj0yriRpoEjyBLBinuV9DRxMYRqEVQAKmN9WUHDFZdY7RZ3xesyYh1Lfi\n0faffY44RgVGlGVjn/Kc05EM3YUX1mWKBX6MJTI3dfTTMZpRlYdVf8zXUPLw\n41Rq\r\n=Ys65\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/shape":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b10d0d7f1.0_1587687670287_0.5847024510846683","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/card","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93b612977c47ce04c4e4cbd2d0df0e1374cb7296","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":19,"integrity":"sha512-E2ahc3IWfAX0IGXheSub0LbwF58U4uSDguMbDzE7cz3ue/FsiGaofnEnDq2F+ug75zHmxeY86Q55ej9VMha1fw==","signatures":[{"sig":"MEUCIAn+nPE4Ur50yEE2ibxMk40WDKmRJ5AZxwXrjtWU3C9VAiEA1tz8ifa0Gp4/7nPx9crWDq/ZezKTpVxXjPU+QfHbHyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1S+CRA9TVsSAnZWagAA6ywP/2EGFI5QqQoCcvsSpbBg\nkA1sd12ApOnYbCKTcVZqe/Z2pYEH99k4TswgwVmGFBNLkfhcxHtP36gApj/e\nZlibAmSMTOfHruYOZ55DJcXltsLvPXQdqNEByyGSfe7LpXPJayck3HPBlr2D\num+dkVffZEsfTN+S+kntXeHWK5CNuNvX7Z8fM3Z9b7WOvVdgSaOebxkJdv6H\nK9eKQUl0pXkJtPl3DawJKI2XqfPzxVazrEBWhvMeJDeLu4YjRcwsVqGfyfEF\nLi8MUhzSsjmtcuxgq9nlHRvr2XnkEp4zZBJGBdel1yPAZSrHqz805aPGYd6p\nvFrvzQPBthBApnRDeFa/GrQBBNWGAE13aBSmiVeWV300Y9hwDCk4HpN2SiKV\nfhYi2EPyM9x1ge9uUhl7jPq4ADOQkKYANpTcjLuhrcg4kgdyy6O0ZL0OTdj9\nQfIdSLOr9VeMGVtZG8SoRVUG6IE+I3z6ADATHqKRHm3WjkoPau2+ChVtxy3p\nspgr+ze6sh4Jeuj/BSRs7YwlP/3i0Wx/92duMTK72nJ8wNTwFytwSz7mRLDG\nYtwZlM8x1kgsCyMxJxaesPWdvESRMrtiF86dF4SEQHPeu/LtyiHZOA+uBa0y\n/x/5FlvzKp3a3uBAtdFOXXJS+JZya/G4/Wihf2hZS+iY0ZX7QIVUe8RleSPK\nYzW3\r\n=z8cp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/shape":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.3bd8c1bac.0_1587762365690_0.781301274358781","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/card","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74dca2c1237037ac6bcf5c883d5e31c0cd788cd2","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b83c8dc22.0.tgz","fileCount":19,"integrity":"sha512-AD4ndB0bTbeJ3bvXBV22KHhhE82jN4c36CpAeLquzr1kD61obXewjTy375gfkADHb0QwDq1YmkRiSViAT9wUGg==","signatures":[{"sig":"MEYCIQCS4A/6AxvE9JkTgjlAIG7v4gvyKLZREYAWFXQF6IZQcwIhAPgjKcWxoU8frPO43zBRHwZvyaDsegxs+SIg5mn5Y1om","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1e8CRA9TVsSAnZWagAAoKYP/j00cfVSe7jEZijzy5Bu\nGTbS0/3PTG6tvZdtgn46VUd02tXWXzgmCMmdMlBsrdLJN+0VlrEdctocLoLJ\n44GBMQ/YtYWJs+2a4DTJfuWMFYEkKCklwQl+bDbbQbE3M6aRpleqbx5CWFnc\nYfSCQ976LkXiQ5NxzTqjqXFmibfTpvhGa8tBc5e8DicjC5wEqQeZJS+BRA/i\nceOBjPMohVEvRVM1m3NAM4vh5nIL9O/Y1TmCqqAXsvGxzFc2ZV6ZvF3gJPyc\nyIBJLPI0G4/YqCy5gGwM8HfIa1YGTlzsOJWhegL4j+90gn/yz59f5+vE7X2Y\ndog8Tb4cwDViMlX5/3voWe9Fv85497wPF3di3b9lD/mWv/ajT82koASy0RE1\nUQIkG9yhQF/WkAerdB7gVENMIxKTP9iHWsXLbnAGrRGmhQKhGPBh5Q9LghwN\nbVgwrSu5fEXTyDKmWGC/DzGhzQkR/lqn+wgrpcdfoPELV1KuuKwbMT+zQdZh\nJ1M/6UMcgMS8VTBR2V0RNKf5BHnH0RPAcT6F0ihCVnymx6wcEmTjx6i5Os+w\nFErRYmB/Gpf8MtQs9jW7Tt8OKUotW8STiimR0zKzfNa6OKVeRsLckLQfgLN8\nEall5CYhFzOqF8M6jA05tMdRJEYjRqNRedZrKqRYvfF3YUgXMwTdlFHOwK1V\nF5zU\r\n=bwok\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/shape":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b83c8dc22.0_1587763132450_0.797458841906884","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/card","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"755f413cc3662b8f22440b401df0d1ddedd2f374","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.1b3dd846d.0.tgz","fileCount":19,"integrity":"sha512-vCfs+wwKjFM98JytJXTTPqKqOqQYHSb6H7nJptUJyTo/Va2taoGKmkfo+LlE2BLrAavayN7Bh01HstiUtaG8fg==","signatures":[{"sig":"MEUCIHrTWMVGgUgMT43KLSAps7I2Y6+9h0aCoOpKAt/mz5KAAiEA+loqGcquPa3PWdfiUfS2n4l+02O3EmZTu7yQVgXEU4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fNCRA9TVsSAnZWagAAoJ0P/12HNF6PvflWHw3V/5xI\nwUe7JNbopvqAdyGF608J05H8QqFwbD1cuie+mPip2HZdJo/+g+xsHY1tT4fq\ngeBXALzQV+F+pNzcOjWE2ZVc9sPcGuYyDiS6HccLTHG5yJfASMQwngCq9nmV\nF1pCVg8yIirHWN4Ejc9rFxxRj+2M02CEBouEVJ9SsfALJvqetcXLqS7u1pUV\nlIkR5EAuz4a5JJ11u8CJYXV6HnzhZt2jwMYiF0bVdiLvE9thlCyWvauvZepX\nfiY0KOdNWXVVCExbvol/zoxvGSgtx1SJvNifwo/xlTZCp5kKVf64qxCqm4dp\n7jQEmiGNAgQYzrZdqWEFS6MrpPURmQd11pw74T1LxKVnsr5cxwHmnlrj9O1L\nVcFhUuCZh/m6vRNLOfhhWpj3bBV/+8k2+zV5Bd/HVrxtlbX+sHYbeAp1LvIR\nxrTJommD5d3ziChIhbdT8bIjlqb1TYnlUR4sSXeJ7dFIJbNSouCGm/kPquv7\nU7B2xMenY2/powNLUDRjQ+ezFDRFjGhGPtUq7wI/pMBdJOuTz8lneaVxISKG\numexQ4Ui9Yb57gOkFFUod0Pgu+WiwH16TUbwCV2MbIUywjlmkBZ6P+tfGMFe\n0XfLy7FHIk8PmqwUb2kO6MoSTqk2f5tP/LO1UQ/XnUekfjeJG674HkndDLKn\ndAys\r\n=hq7h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/shape":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.1b3dd846d.0_1587775437475_0.13322911887478117","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/card","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffc8b1a5113db7ff3b0dac7a0dca238923792c0c","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.29debfea7.0.tgz","fileCount":19,"integrity":"sha512-6DlqEHDYNTuTHVl9S5irf+pu8LWK8QriTJyKtZtnekNH8YfvOdf1EJvQb4pM0WNfxFbQXJTPN4pD4exWvSOcCw==","signatures":[{"sig":"MEYCIQC1qbEQBiao5FH6xyeaknkZAZiN7fBzdJmEgnvG1pd4OAIhAIfSR2glhX+jyNEoN6KlTdfhCoR9aWXXRNjA0IrwGhMY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDOCRA9TVsSAnZWagAArRsP/jH4Yg2Oj+mpnZbgxAqQ\naoSiXg/He168Qb42saYFQsO+DwQWUXwESLOPDvhMOvvLfnkNeTeHn6gcR3Pg\n+SrQ3+06VSDl7vRXi7r9BX08XPeubcPOcUImm+h+pUHYTmIEBlp0hkJ2j3QJ\nCbnJvdSS2EGYpm3BDquYBE/vXHkm6+HLOTFKnzT1yXNYPENgUemwkeUFpEzR\ntHmKla1h6nxvnTk11YM1SYP/fqGtTFAGtKyZeXBoL+zlnGL6Pzn9vs0WZD8s\n52sVXulGYPEDnSQDc5YXRaUOCAgB1v9rJpiJ4CKDx1ayFVO804VPqOAjSNmC\nelSQwcj3MkQNg+DcWMpAmVAc1VKGCTdeMXWqW8IRB7Cc3TwtRbGB3zH622a3\nLy0kR3O2+z5WNmPBPzLg6MJJv55udGI1CZFdBDUBXB76gcMlwXA7XzZwlYvf\nN2bM8Ckc+3a42BbifVry/bzm71vaQTjKB0CoO/H6hUwpyfEg9Eao523RbOOO\nFSHoowu8rhW/6/hjVcHywUB3tEffRopmU7ElC024Tw7E1HaVF3PPRQOElDmh\nEVEvaOM8whNcNpKwb4Ba+GBwSc6bSzug6s69Y7TceZ6PGW82nlwq6jEwGUUi\nAdeejH4ARZKyN/W3qBNBeAL5AlIw+IWD+RlGoc/E/y6wrJZQjLl7Tx21rchP\nPYmj\r\n=YNOc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.29debfea7.0","@material/shape":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.29debfea7.0_1587990733948_0.0055170381226281595","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/card","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c70c053220714b82551b4b423ae526a5dbb8ec93","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.28d32f8e0.0.tgz","fileCount":19,"integrity":"sha512-K7gFCN8BePiMGFEVKj3GnUYMO0AbOF60L1+iE84m7H0V9I+sZSsNeq84tFP8yZRngTjk0YiZkSPm5tCv3aBkDw==","signatures":[{"sig":"MEQCIEUFHRf0YV/xA6ffUmNblJ0Jq4CsaGaZUYMHYiEqYh3oAiAFo3sRS3hSoE1Qj3tbDGEDlhiRXipdWvAHGD0qgSf/3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucBCRA9TVsSAnZWagAA4j0P/2QCG5qa9w5XZCaeRY1s\nAtrrgXScte5aThNNhLHQD2Ex0jk1rg1mi25GLPIls1I1TTEKM4GtH2J1AX/u\nh+feztsqbfYFySLJYnA7Md90DN16ikdmHjWy3LgJd8Xj6IDjNtfnf7ytf+2X\nU0mCC43AmysljvOhx9ZNfjihFiKObM3SBgog3bAoSe2tnsOKaewExY3/MCj4\nTwrvZZaOdrZEQe3aIF9H2r48OheDBz8fZbwfV+FEfu21Ww0KQEhdvcKlBzAb\nNdjYWTsexPh59CAgdrG5iB13N1gfvzKgMC25VRVoJWY7S2nUTa2IH16ByUMm\nncBXKLskpZXMIveTjHjfaayPuxXJyfDorDX2eyDy11oxuVUzzYafOX4r7Q91\n+5vUm7sk/Z0ad8MXWwrHomoUn6Mpxegdm9J5HJP42s7y5N4v4cAx/OuZCgCb\nfNLbt9hVIkZQtTgKuul421mLc9S1Owdw69C4CKu/v9bjiTNNnJ5ZbgLjOERW\nvZ325A03HJX8EMLOlznzP25GTLwramN2UZsWPPvig0dECgGhRNlFgGcarc5J\nMVx3GQ9K4xL6ib+5szO5/Q/IJM+tJACwZLj313WnGqorEdR7kniU4kRNEVzx\niCvhST45LpmGoWoAVpWxbX7DCALUCl1pE69MJQgMkjzwX9Jzabv+/Jvhh6tT\nDooS\r\n=dnQA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/shape":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.28d32f8e0.0_1587996416750_0.8657850401242038","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/card","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdcfd89d7c40162961279a5eaf58693a9c506269","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.af71cfdd6.0.tgz","fileCount":19,"integrity":"sha512-8PhmgjRuFosd+zu7QA0ZmGcxFF2VdEvMNr0ojo+WiURH1MwTQV0JJdNdO/5Hprr605vOIk5S0WHfMsfSY0RG+A==","signatures":[{"sig":"MEYCIQCXUWadqDFeUDbxjkhz3BfB1MA50VDndFiqel++wgBOPwIhAIdvCBjvPU/ha6O9s9ZcB4+3mQULN5NPpuEBucZxVcBG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmKCRA9TVsSAnZWagAAzmUQAJgIAtkOZXNccjkJjU8/\nxG2JLWFguqB+798T0Q2wLrXAQqBJzLwDDMYiNXTy+n8DXQylquF8q7gvog+0\nSYof4eDLJjgeRltH1iR0bXqBDXlGZfONoVd44xJbHLzMYas7Ujal2Js72hYT\nttPLe/UCWHFSBPm9vlQHrjzZb8ZfaNXaDbjpxNh2+StMatn2oIOElVW0mBVu\n+ud6AnxvlEVZ5ZhVMCGI4K9F2dFfTQzl+O3SsEHLLFwg++5LgKYyxNGgwVky\njuh03hA6LON6j+eMg+PBY/jBN4zw5iTVauZ8JIBDADdLS5+3Ell0TPSHICZs\nm71SHs1sCMhLRVA95i1IifiDNn72UM4KfXv2WSFNsGqhbPQtwMZgOhAZPime\ncVnheXZki2mzKH3cfJI1tPeHHtpTUQYhoTOApAtnggXqNkP/vgRkUxj9RXTc\nhBG0J1ys0Gdwl93WYW2kPErrekYyHbt8v1NcJaVJ+4sxWsg1fHMLCuTTRRp0\nBHBR5hEdqANvwMc6E1tLCV6VKDYllXmSf7pXZploAO1bgVkU1UxLmoIqETQU\nQa98JBlM1mOCOD2caU3bza7baVUElp6NS3C21jyBgqxPH79vxuw5UpFXBbYM\nrDDKREQSvdrqNZYzvkhGMIjvooabmdzD0VycjdB9+JslZISP9CHyzOjiKkoD\nUMX8\r\n=Eh68\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/shape":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.af71cfdd6.0_1588115850482_0.4190870306880061","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/card","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"522686b53ef2b15fb41ae56d3359e0f5ad938fae","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.99d2fc961.0.tgz","fileCount":19,"integrity":"sha512-2uV/1oq/8yhB7zu5cqgnxaMtHgvfaE/JmOroWXxTkUwCMJ+JrqN7rPr5fM5rK9B6y29/DeUz4sGVvbOOfYwO/w==","signatures":[{"sig":"MEUCIDzC5+PYlMrurESis8YxD9zQoZqYzphdao+jpBtf/XuTAiEAlmFFCJIUGXfdFJqzkbQZ2mov/98qcCtJDhDl0FMgeME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVpyCRA9TVsSAnZWagAAT0sP/A0Q2GdAH2m+jsU0vUec\n1y/U1VzCdmu2wU+1PeIcSzocQyObcXOstgSNjhsrzKCmMGW8e6vpHjemJtG5\nzYGrQEU9A/49JqopS56kJWm9yDCk2VauQB1dkIP9/XCndiWa0Ew11i4zKsUA\n41RpKxww6eHmbI/lPOnq43wD1RI3jx9v7oWgOA0x625+n4uyq7p7GSvhAdBP\nTzO3tPOnWi14/XLjupQ+ZD/jK9/65cOirXrcANcZJmvtKFdU35+Wv6j7xhvn\nF/eUTlIxeXJLu6gp74Rkcy+s4b0tNo1xWkY5v0M/SihFkLPgri1iVvQV6bFM\nYSg2qYJ/wGVWPy6B0pZaUZ8z9buePaCHZwksr4MZ9Yt2Dun3sG5V+YqvgkYk\n/Z3xCrPUI7Ct0ZzfH/qSxm6xaFy5Z1hyghgRLYXCOwZCW9Y3es89fO33ECKm\n/iOHphjC5ncbPgiyuxT8vIEjas7EMu5wlPHMRGGbmD1NuoygopqrKjUWNyl4\njeNZPiK0rcC7PAvYMTnZAkMqJz4slLpduMOc9rTYIS/S+aK+uEuVcLo2wHhk\nuPSEq9ljgckZlnPo2/thHuh/0nEyQbNYTCckY2FMWBzbe+zZJJe64gq/4qsK\nXgscJtYk1RH1fWyOn+FzwuK6YIB7/0BE922m/me1a56pc9qXt77VSJ6zhb45\nzrN9\r\n=UXZR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.99d2fc961.0","@material/shape":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.99d2fc961.0_1588157042350_0.3633021765948199","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/card","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba0c02c1c69754d2175433c8f5912a66cb578316","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.0e052b24f.0.tgz","fileCount":19,"integrity":"sha512-BmeGCmN6l7VroRBF/vXLfyU5Wl6awCvndrBcIcXrup7v3MagnN393qtA472WERZ3EZ/79+v/ZooALXpxRJPBCg==","signatures":[{"sig":"MEUCIQCXIZy8ZXyhrPSuMO2I7STh2wd4CmFfVy0OGzGtNAKHOwIgQN2cFAXIZKMWiYKeT/l2H3Wi6Vi11Y0/FPqolMqYQqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioDCRA9TVsSAnZWagAAQocQAJIqUbSRuTsbNx9XbJ7+\nP8hKkXiDWWGy458E+LL+61E61Bfy71XAnAvVlZXtUYIXbMJnkobHnGKTgeQB\nVqSFi6AbrvfeeCbYQz77+5X6PFvpxP7Vr2aLgJR+AyoJRHDjKWDfDzUlRYn+\n4Cy+JYduSM75FogcZaIZsno/NwBErVhuhjgPZvxPa8vHnesyHcriCAzoB21t\nknq70v71s83ZWZ+8TvMBaFqShZXCo6bjGwyWi3UDzbOaAEFXnIm5r+t1vpHJ\n2loYW7ZFzPwsiY1WyirbzSas+6U8IWYI2tkPc2XAdq3SRmZTlOl5FVFWeogh\nKX71+FEnAgOTJdRmtptSvXIJTHzUBgTKb08dddxZm1/KsD5vyPz4ivQqIgDI\ncNocM/ZS8a+pWEtWimv4zLvcj7RCQyfdltsIHqzh7cqODtS+3g42PDYyZ6CR\n9Flwdl9IAAdPGDVD55KzDXUFB9cV4oVCZYS9LXHENXvzuUEIc0cFX2dHbk6c\n6tMjrFAvsazWXtBSGisqkLbO1fqD09mIdgafNrEu2f9eBR8ZEcehnxy54/WD\n96V/hv+Esm3e/0rnwYqePSGEwq9wZBggCWCrL+5MgcgRYjwNWeBKq9CsUrIw\nqp1NMdT6HhML9AvrZas4rxjMvDzLfVSmcEXzd9cEpNc4RTRuHDj4OY67GTg5\nU1cj\r\n=CFtP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0e052b24f.0","@material/shape":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.0e052b24f.0_1588210179032_0.906948247596576","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/card","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ebcc8a5605ba6f915661825b98d613aacb7b51d","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.ff4bc632a.0.tgz","fileCount":19,"integrity":"sha512-HC2Awf0wQoTG6C6gCBo9TzJC6mCEt+ttopRt/T4hKRBJcKsrDRjS5Rp7v82z6ANOzBx/1feqM8i5my5DujCRqw==","signatures":[{"sig":"MEYCIQDQLpiodGGguyRGb4W8I45I6+dwSGV/rCHzzioDCGFqxwIhAL/CXGHtYmh7sz+3KbVTZicl/yY/vCHc6LPBCu9aKu8y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowICRA9TVsSAnZWagAAVqAP/0G6tQHhFNKvBNR0w1JV\n1K/TOXjJwEzoCgoSwUhIB4eEup74CPTq53oUESfpBFrfQqREaX7OmdQekOsp\nwiJrK6GOj8LzZCDhhJgXKfR7XVhSuWmKXJlFuXYlCBrZfx0IZQcjo7WFGQFY\nH9CXtBTNjPD/CJI8wY82sMF8CGZMS4gMEVuapT3myJQ1FtI76XL49fqskKuI\nxeswMEY4Z6xkM7GbBmBwG2EQFdQUANuF6nAqS9UvuPPhL5lqRKZ0Sc3EtvpG\nSacN6I6EJhnpPa4fGgbi6qy7A4dIeak2rixMyXZwvK9sjLAvQW1pZlaHqLlv\nt02V+1WsakQNxSXZ0KlfXMKFHSWQIY7zYbvAeBsi5XGUwiPpKa0RHOIhUsvK\nXkBbMxcLMsX9gxouC8J1MMK43jum/oMdCsiW3nVUe8OIN1eEeztteHvkeBw/\nANvXSxnmqbnF02vQnwwIC91RCFZn0rcS4erluIPgFsd0zEzl5yGv6Wa/0R9V\ntt2/LJXFswWtfoGPZwDAdfbJcvtkgmnGEWVUarYWBCDd7t2VUWbhYtgXbLVP\n1mDpF00SSy0ffP0V+tBMk5q9i/+0oaosjDN9DZnKgz/WX/c9fkEdXIyWlRCq\nqdw+tTyOwcoIpimNxcriH6xFL+dnyQS1mFH/h+k2PY65Ka7i9Id2pMpbAG2T\nPzzM\r\n=/+O4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/shape":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.ff4bc632a.0_1588235272225_0.2347104467956891","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/card","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a40f101c4fd333217558823dd6171105bced555","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":19,"integrity":"sha512-HRAB07A8W+7PuiXbmtrcR/SvtAVyPSozwmnuAYReVSA7b7lXtvBJch1wi6oQvDQqRlBn2LrSJVi5W0nEZe3zLA==","signatures":[{"sig":"MEQCIBMb/A0lUQ1tycsk3S4+Kjo741LBQqHOsbnr/STeJWbMAiByCABfcP6kNxJGalqanzIdqtTUQHzSMux0SUYypueJ0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGLCRA9TVsSAnZWagAA/i4QAIG8PbXLxkQRRgcZJLmZ\nbR7vFxE6sIPr5A0JEgTlxOmFqR//xyq6VsmVyjG/7NmjlfVvgKcC9qqsfdwn\nadh67dnnDIpYGu6Ukdpe5DsMe1dP9gSTpGVgJouG0hZEyS+ZpyXZds0J9aPQ\n6khZwtA6SKMbJbHHQUxB1Erxio0UON9a629zT/KgaTtxXAAiu0f5uFHuK1fD\nY1MAsvFqNX7BdO8xhYK3SRF8ebqJ86PAeoPlW4TKV8xbezhyLrCB8V2w+zng\nafKOJjqmSfKbnl1YVLo8BbSbjQvpnL7EvsoDqYQPUFZiV/hByTUUXVNlDE+l\n+G+XGKAUpNEAOmW5LXMMldw8rtfMPUximBd7Lwrt061OHTNkqjmUD2cmBlQb\nJG2UhFVT6UZQbNfWM0prtlAWVPdTRlU0aOavjlRWgAz25Zj6bmAOfb4o1YjC\naU6vcv3SdSX8qmTyFrs11gVETvI40Gpb91FvyRcdoxU9P9YoW6g+XjYGaA0y\nqXYPGncG0N45x3vxtMZSHccKm4At/aDd9THAN62EK7JEeQI1Uc/p26efiTNl\nOYb+frevYuO2auJZJcPx87kshneRjnup4egdKQpHXjjNoQoWuRa5S2yPpxmp\nbXMO9puPwS3RUjwc5d5xtEQvcz6BCbI4wOwoTNUQjOli4Oz9Spe75zaIJC8p\ntUo5\r\n=S4g+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/shape":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b0f83d2fd.0_1588257162835_0.8130934161024441","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/card","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b757937e94a72cf1a2ac543a653d1a951ecc0537","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.e59906a57.0.tgz","fileCount":19,"integrity":"sha512-l8TpQr5mtb3Iq+HitqRIJtdMKFkpKYaV+kLvVzyUQK4xFGCBAi9/+6Z8G+4ivWw+ZnviWrBY1JojR9AIm2WWzw==","signatures":[{"sig":"MEQCIEj/Gr81u/HyAj35p647w4EDgMOgVEsgiMv5bNwxxq5OAiB725KdPpO+61ptu9kSm5QYmW8PqaKeYk3JhKz+6VwQSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENsCRA9TVsSAnZWagAAV1YP/28Uf9zZ4JF+/cx9RVc3\njg+sktZmwPCMyAC+Ey+hB7NmC4EzV7ugKkV2Qy7ZFcKr8esIzqpWuhjAEMm2\nqFfMY+I+HL9Iw+s31+CCnWflJdzy4sRMpLTpZIl/a3KJC+ht4yMXza/fopIm\nwHOKnOgMZd+Nbu42EVxZoODsHtLJNpnZenoLISEKgD1phYUkatYNRj12YyOE\nmSO7vh2u791OjvshxfHeMlHJ7R/lC8I7WKJf2vYLr38nC69jqJObvTdE18mS\nUTatGTuGcRyOgrcMaEk6dN35fHY1DAraulQkJXayt/DfG66WonOzC3X/redM\nC/3AW1Bqlkz+J53eFxGhwReKf/Hc+5wBzDXwb9gXswww3iADp2tW0MooQQMq\niZWAoDZgEIMZ/DcSnZIsB9czSh8/ulGBHda+s4vKbYyhj0XgOjsUL8vjJ60i\n6SXzLNfVYdVL8zzvjTPqWy+XJmZl7GWx2pw407dl0ZgKeH4h9jBmoHp0V5yy\nMhoVBSlf9BcHEdyLzL1meLntx5C1mzjjUILcccT2tKeP0ENnQfQ3sGBJWN+L\n+pRn8Jnq7qe92BJXrOLGRmpUtyVyOOcGZFH+EbL9ZyOw8FLrjqqiHJcPVSvT\n4+0yG9YWQEhIXk7ygXYcFUpKAR8w+t0TBvTDtITAmVg30BFy1asBLthuh6Hp\n4T8b\r\n=BIox\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.e59906a57.0","@material/shape":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.e59906a57.0_1588347756360_0.32981261319845667","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/card","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f2ea1699ac948e606d62e49fc3efca78ec97b65","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.c02712b59.0.tgz","fileCount":19,"integrity":"sha512-VKe+Sd17XjqHHUSV/OQCje303tjHYPdlbrBVoN+6TPTnsqApncgQG6yByhoa5jK/OTu3oBQ/XnxArbm+zPTjDw==","signatures":[{"sig":"MEYCIQDR2iI0NnxtNbTq7/QCJQxEDegBI6kOZPf1TD77NPVS6AIhAISEd0W51BpZVEkIaByoyWKzxXvsMkFOHsbiOK659y7r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmsCRA9TVsSAnZWagAAM+gP/1I2vFNtd9Vrv0Uvi6XM\nELKMyBfH95dACyAEVz+Rh4596FAGXKa4QzMEmEz8fsqcZEtYjOhvL+wfUkLN\n1Mn85aj+DxOnDdOS/IR9maLpdgkqu0wFHYuJsIlCmOCcOkQ/D1ULIvLHJ5Id\n5OWfIK/O8/ePcKPNHQNo4iEbRON6VHGRf5fKuih+Ty1Y6jnOfDokEVieT3W0\n+YeaC3exkULb7NEn+96a3xIkFUAt44FyLooQczfxtt1QL6FsHOpcqoW6Zr9i\nY+DU6HTEIdAlJXtXuz8I2L4b6wayBJ0Cd1D2hggo6tkCRzZS0IIpCoKAlN0S\now7EiuSXYdV8/S3Ox3/9QfNGD8H1BZKDWcbsGHXWCGR6i+IlU4//64zT+/qq\n2JnBT7n1Azj/fnTWO+4LLn+C/UmVEqSJpiw11cprzGKfXETW7MwLirerJf4n\nEYQ9Hj4TZWujMN11wxqyDacxoVGMkp49gR/KS7RhPVIhQKVt7Vvn2bWOBj47\nWckBIRyQOgOK1Bkk0peBPFC3YqeWvEkOzfZ1W+IoEtrW8B3W4bDbJJVMNvCT\nDZYS0HRkAHyAKGkEE1WWve0jdbLq6q67fVF/+xNCTobB4c8eg5hZ0Kt3VWXK\nYHE4kGB/p4/fwlGWI+fg7UfRHzaUBizjsYmKNW1QYuriEe/i1RLVoowcoi6H\nzEgr\r\n=qgsU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.c02712b59.0","@material/shape":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.c02712b59.0_1588357547532_0.044422245171320984","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/card","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bcd97a902504b9ab63d253d58ca2a8ff6e680b4","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.15d65448e.0.tgz","fileCount":19,"integrity":"sha512-9asdmCxfe2F18vUapAX8xhJr/3Oa+XsWkP04m2EVj92dk27EOfH37Wqinj5RdxhK38m5TJGowwTJPPP3e2u7kg==","signatures":[{"sig":"MEUCIQCwBY1GgOuA8osZ4sb/c3L0SNFZTX9H2OPF7JtEUblAOgIgPMgYzY7YTpjRXfIXbaT+ianjQNqfY0trjWoSLa0mdUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHb6CRA9TVsSAnZWagAAExEQAJpHfGpFbJUmDxezY9W8\nRS6kwO1YSLJ9cP01wHQTU4MdJDannIXupivPj1BTDxR5w7PZmvDmOB+ot5qL\nnuHl9Xum3CsrwOewI0R6kij9XWSMnorHAivYWPN5eA1B604dCE/E+ejS8Dsy\nO17A0fQn/Ued48MOUXjaH2PjTU6y9bylOfnMSdoim3jUB29iIfQnwCtEAgWZ\ngj/gT0K2gsmMoGVwnfr9NO4d1CdjV2DfKJKpnAdCDltLzu+hihV1fw1klRf0\nwuFrU7CANyHZoZAGKu9XUJgBprYn95ZPTKF/zpDWQTBowztnrvzoZbQwHvG+\nZhh2OhX7gIFYMKr7sFqj/GKkrWO9B8m5RTmzzTIh3rPB9oaLzeu/bbRHe60z\nGDaJuJiWWziG+1GpMWPQiKKxjSX9bSJn/md+gvCYW0e/mWahp9CCXE+YEX/v\nifROkhS3C2aE5quu4O43939hFkpdfmG3KR8DYhSBfI8Rp01QS7GqMrY2witC\nkGirAVMtVGCR6wA9K7Cm4LKE9sg14HR7XGVIoLChhSdyHaATIs/g3pN4KtN/\nBhh1wIYG2JHe3o/GdTar8IJpTM6Iy4xazSt8H4bgT2O8B78nAcEtD5NT8D2F\nXGL2Yijz1NdpfGLRPGZzerwH3XsVQRxgo53pGzMa9sv3MXpnAjC2SgWwz5Ss\n4+0I\r\n=XZDo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.15d65448e.0","@material/shape":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.15d65448e.0_1588360954085_0.7697937843472131","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/card","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0dbf597b335d2eb8c0eebc6c6a0a488cbff5719","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.142b1549e.0.tgz","fileCount":19,"integrity":"sha512-yJoa7Mr4bm2jv3pdSAxRWLiKpKJyz/qKDe08mmY9PYTUuCkLemGxlXrERxQQhrPdxWDYcBhgeb3mElndSAAZRg==","signatures":[{"sig":"MEQCIEqtsZGozs+AddORiCudhSqPm8qxRD3zTGlIcZnrKSYgAiB3I+MleMIF7MHhL1c2dw+qKq6JnHMIDKHG44XeKFAHfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRHCRA9TVsSAnZWagAAcYoP/RS3RCjDloM+HKgdBgp5\n1ObzHs/SckwyKB7ddwpR2LYI6eeK0Gq65lUtJpBHys3yHK3yjuVOFhRqBrIY\nxlVzY3e6y8SuXFAMA/gX/Apuq6qwL7wRVbwkzKsCdvZrqrm8nGv+1tIskGgy\nWtUwu5mrFfrbjwzBBwC7dZhjWdYA0KB2uuzoLpaWEeGVuBl31aoAgkqQ7jFP\njTCJjjo7lGaPAKMvRCu2KHHtbUL0Wob+KbWHpQXzBcaP1FipxLulZ29Wqvyr\nfwzZ/py3AFDRt0c3WAQoJ4VrdKpmpSo4yXs9AweYPDdQ5c/vXihy3XbyO1iw\nKkVntWmQNpiPE2pT3pGSejv822qGgcTN6B/gv7W8+uuK7mDsPoCXgXRGjrvx\nTIP3EGJyTh0xud7y0USN23C14aVqJZA70chjYfFL9a14i7Pk3GUYCgav8slT\ncj243NFwDBjrWXkbuflaED4vg9mwWZaFyXzz2nJ8YOUEFvOhEKadYTxD73iu\n3QfvfI2nZY5syR/NTynx1KLr8hjVY1eSMoMBUVoq67YkygfznFree2/xZZFL\nw5d7MMbW6leCgvLha6kE2EJmJz4VuFYBzSoG+y/B7pvvkx4kBpy7CK/x/AjR\nIO7DL8xQEfCi9geU7yNdq0Capty6xgah5BQ6YBEfgsO64meTQARPz0uWcet9\ncVvh\r\n=CFCQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.142b1549e.0","@material/shape":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.142b1549e.0_1588372551186_0.8584909277827824","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/card","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b850ee81a67129e23c42b5df959ba600a37084b7","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.524b7b812.0.tgz","fileCount":19,"integrity":"sha512-FsO5xlt5O+uOJsKh1xFSZ5YKrvZJ2HopL4PEiRNjn6R+7T5xRVaLVzThVyYvcebzZJoHQwlPhPJyfkF+ioOEKA==","signatures":[{"sig":"MEQCIGgBYuD+Lx+iANhKfP3Z1MPHHjghIQ5NAtfbg4fhCM0lAiBggeKA++vr1RcKhic5CY2XTVm8+raZw7squRsaft83Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3oCRA9TVsSAnZWagAA1F0P/jGTNDQgbXd9UvTER/Q/\ndivnzqERG33M1nLlJWAFBLCeZBZ1+YhbXpkbgns8dYFwQQlZYzG/5SaZYBRt\nBnxDB/Sx6asdWh+jopgOnriwq1FfFyPnapXcZ/DTnEQkCuLuVArSJMw1e4od\n9muMyPbdwZjheWMOOQBjQ9T7owyn+9m8PH1eD7+m0o5f/pPDUiv676J48rNa\nLxo6r9nYSmaLy2CQgowYh0zwVZ/ELmNgtn7nk3CiC1uiWk1obuwgo9iWsKY2\n8+kSDcs+mxBtHUESX+T9ha0p23mvpcJ5N3gAaniu+T1E/+VmgY9nMOKTWbR+\n5n4onAF17JAqWMMKUfk5PTVFJUDkDgj0GfIu1s0V/wo7T9Od7ZF5Td0kgS91\nEVNsPArxMQMfcJWy30H9LX+9RfM85boODeudx0bLmE/ciqNRE/dWTsJFDa0l\nSey3FjMAXQXOnz8+FP/wHl2uccc1PttjH/cFJ0MTge/jRqMyO8eJ/H5vs+Or\nTcvz669utmD2i7PTK+txDrCRK6qGtljpS988inqEe+WqCMk+C0BNKriE3Teg\nLOX3UuKb6NPulkKafNTNhdGdGp3krtpqlo05uxgauhzK4QAMvj4ZYLtPGRVx\neY9KyipkJZWijVDvSqo7WMbnREPfkzU0GYzz4YDjIJRNTFIBDaioaYqSG64k\nwEjC\r\n=Uz4/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.524b7b812.0","@material/shape":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.524b7b812.0_1588538856171_0.08751647646088934","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/card","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bea3845f3b88b663e619d09e1ea6bb012b2422b9","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.bd8ca9678.0.tgz","fileCount":19,"integrity":"sha512-n0ED6EwDTEHp+DkVfjpHgotAzbEPpynqFqJRb/ll24FDMkGBcgfAnkN5ZiEzP6tdId6gg5Pyc2kIvxgtiaE5HQ==","signatures":[{"sig":"MEYCIQCXq0CXOJYi4ZpgWaHbM+x4v2iZaqs4ZmWwmvre9AKvegIhALjSDCYAnin3XNVNpzTvT6mf0FKIP35/Nzpsf1ITwa3b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6HCRA9TVsSAnZWagAAYtUP/iMGb2HkQIrBt8pt4nBe\nxWCqiN9rVqc2o7n/MzwtmIB3b5lEtlICpBELajyz8n68YC6lqOcjjjVjlXKC\nKvKqGz/DjqmX/Y5g+OQhqDNl4FGXSzl1W/8eFH8djiBZ/EeMo4Yv3UOihseG\n+dK2lR8sAm7W9IP0h9JCuukSMyS1LQgenW3lxuNaJMQvNrA9HjOtOqLhXfXe\nQA091o9QQvoUGvXUtYtbhGjpbR1ij4hT4t8No661zD9RUtBlmdJCnoJXWBHm\niO1vj+JDDdGYLpyZfjQI0jpcod8kZH0+yxCe0YyjPQ7bh+p0rmQ/mtJ5dIjq\nlmSIyo6CROlcSX1lKs/iH3COEwuMKD0TePkm9MueU8jC0EpAJqoFVe7KxVNN\nFf6l0uqY0rGQbqv4VCe9JD1IldN0gVajkCKIMK7eMn9F4Gh1FS8No1+crn8R\nMFgcOaV+Z1swZ4eYq8aF/JlxgdU2oxr+ZQHApKGj+vnHDoMBEDrLklUYB9YP\nmQDjPusHbXaxSjof07POoQ2C5J04uYc4zdSvqKIsNJaVjYxzwsRGfT0jACy+\nv543EMaz4MMGsOGBOXYZWNSgty9ajB8OZbODPPp0MdUGZY7FkVFzvIzpNLcJ\n3oA5scFL67jhQXnnS6rjczUyPzuxPI383Uxw/NWS7NNSWVsvXYAH23OgjeRP\nMi+K\r\n=4kYa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/shape":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.bd8ca9678.0_1588612743215_0.9377494758632368","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/card","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81ebea887382856a79688f431bb6ecd0ebb8164a","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.2553e86fe.0.tgz","fileCount":19,"integrity":"sha512-leaCnZJ2nWAg7wwvRhCZc4rqLzPuoousajUjV4BpmMbKQUaqszwYpP6f6V3BeQTpf2q+jLqe1WCi2Y/IUTWYsw==","signatures":[{"sig":"MEYCIQC09RDrMNlw/bbm4THZI9K4Mw1f9V+PIiLyeB93iLo0awIhAMBwTrmDNvecJV3tNXL4rV1I35ATnG/PCwqFJutAnDOJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFtCRA9TVsSAnZWagAAgzYP/1edxypfbRJ8YUEXweBx\nxxCQv2VP7g4zKb6SoKfIEgF8TJXUhWvU/1kPvsZv8pL2JRSFHnnzYyx2sG+U\nw2rgWpzwsJwmmWrFXwwhP54TpNMJHW4mXbZO7LPlWoeoBT+qinF1DaVwJdVV\nfkiAqXk5bu1i6xbhhT19x3SF4daBscdHa5GbTTLsfuntr6m7i2WIsc3V4Nvc\nd1Y8enuIwF9JwvU1gckuarTu5ywzQX9pr0I9YPEVrnAcrr2Itl7r6Ze8SuMt\n2WwFvN6UVKYLecNEv+iJPEeL59h4h5MLAcg4w4AWyK0FBVO666XMQhgTaBdo\nLm1Jv90YA2RcCsJ192v1/ZhPsggWTVcD/m50+PYT46Be/M031YrBqwrDCMiu\ncwa1WV+jlAzoJZUh5+miduJhejCJgOplRsOLjOvkyesXkhbPpkV++e/KTa6h\nzgMP1kfjIjIOCrcBCH2rxFNGrlhBZV3beykCvH5eGRlcmJMKsgPm5P88MfRl\nee1zB/YSE+6JLXAR3q5UPZ6iS+ypbm6tdoYg1XtiCLojQFuWfVpaT6WTzn7e\nAg+8JhZCb9zu+Byjy+0qk9fcK/XXb0lHFF24tQSJ/8zzprjzSn519Z6KGMUU\nxECmoQjfa1ThuNik/+cuEZMShqQ6Rn/E9OVLo+2VKN8PjFgPrtFuW0341iiS\nYimP\r\n=58as\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2553e86fe.0","@material/shape":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.2553e86fe.0_1588613485148_0.9317583658321953","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/card","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a70f4ff242fa9dbedb87b1d2e1ea98e7b78ca3f8","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.03dec929e.0.tgz","fileCount":19,"integrity":"sha512-0uVDeR1qyqImiHuYzxeEq3reA/VIzZaTKONXtPFMOpoace5yg7DjtGKm6SL8nOXkSxA3uhRvGlifCoINbVfSNA==","signatures":[{"sig":"MEUCIBB0RBkWO7JUVJbHNydoMiMdZtq4e2P8wH9nCVuGFvJUAiEA5VwB9UEt0ApGlKtzzmVl497yda6r2DT4dmWXDgIcLJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZkCRA9TVsSAnZWagAAgAAP/1uLC/K5kjOG28BsJRGm\n+DPQ1f1rXbDK7oNKyCzM0+oT6ZPEBxYKa/ER77ZPIcjY0H7OYOs//Ay7ol0K\nLEFJT8VPis0ke97zFn2qVmDmz8QtfGlJ6JFuR7ySXJY+LWuv9au/GvEim1x3\n43Ohaj2D8JrZfkcM+FCaZPWCU9WbFfJWkPUMG8N1kv835oIuMQqYo6mOBfmL\nqewGpPLrkZK6Jf9mh7pBxBFreTj2bcFbMkhiHJqd55MkM4dFrtaFM5vcCNQG\nCy4GwbptkpyTxYshT4/smRyVOkKcgKu7/KRQ0uPdiC30ypXB6Exixc/P7kxc\nT69qcFEx0yJqL7AX5ZEkDrKJEkvrUo6Mwmxogn42H309KZyJ9zB1RTRAM6S1\nuS1972ibHFaCEmqfwx2/VCH5fAXEShj/k2VPkqmNyRKoeawn1vYnCWli3Wvj\nCjfjD7u5HojwoGiLBblc8McW+8NfswiLAxnhLsl9e3NdVoyK0KO/vtoC1EkX\nmQrH9Bybnvp0s4CI9PAqMMiUVkoiNxdZ7VsoQ9mIul1wvhwrKLtilXv/4c5n\nQPUzQhAGHbaRIMbcPq9vkZ8GtfVg4h+r0MP5qXjtdo7gBwxxW6VptM32W4j4\nRujE1+ciIEiSYFuyxpzmIfIdwO46pz6kNpkBxeYAwKzuP8UtjJJDcQErUqg9\nUJ88\r\n=rAdC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.03dec929e.0","@material/shape":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.03dec929e.0_1588635236180_0.22146544187047001","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/card","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a38b88f16d35fb53e6d29a547cc3fc79ceb1d25","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d92d8c93e.0.tgz","fileCount":19,"integrity":"sha512-J/jM/iVfHrs9v8vVl5u/2UY3kh6WPVuGbq2V7/aErX0TftO+vvc+cGsri6rtMTkd6Q1BqflVtzHGCcaUaumLiA==","signatures":[{"sig":"MEQCIE7wDpi4lYNv4dsGgZ8eIGD9GLwlWH3MQ2BtKq+O/Jd6AiAxOH+O6/oD759y/KQ0QUH4j3pr5hX+RIfsIK7l79QJeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtbCRA9TVsSAnZWagAAKpQP/2PXFSrlWgk+P7FO/X5u\nwgTNWRzB51FxttuAJKAX1AacTbVsgT9l7HBmTOH/sGhSnWv0TBozMLwzFijz\nSEH5nYLC0D8pdPqbN7VP+R8KfeCauT433znEfvxbiO/ksotCAdW+o7evpLUZ\nAf0kj3UGyrBra3uKl/OQoMH89n6iVLDGUpSvzdufqkyVL2Z9B1MfJX2KRINt\niksw7eYiG54dS6bVv0WnnCOrI8cyDj8ALrx8O2AunyzUk5legj2RVyfJvqnx\ndmsmjEhE/dub8BYOBrPzlwAIHIHqM6qoiOGaGudSQ9Y/mbupkrBhkqtJmbCc\nKwFOZwnd7ojZBnFQHJjzNjxERadG7/FU77UD8S4DvJuY7sItMiobxHfu9k74\nmg5BCATsn6BpFEXQoEhFZQJKEgAX3ROcFeoeVm9tOGdVkkCIh0GsZ8mqr7Xm\ngbVIbLCzFh7TGOairqncN2+U+CgtR/HQgd2f+ovWFHynKV+laAK2iWvcRaEz\nsoxwwz/a97qf6StDRoJTiAuby4BCIKbRl/g6TRK2RA1u/LUgvesLRdl9tTQj\n2c1Oz/Y6LFVmeo83ZDvSNefS6okSzv2d5klUjwph2DrhK7kp1CYjsFCKLBgy\n/Wc/gRISHqw10Dq2SEJbhoqkG7weaeaEjM3ijoNMzUAeFEsRIwJmLrydqUKF\nE5GN\r\n=X0cr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/shape":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d92d8c93e.0_1588697946527_0.3811991346408532","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/card","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1ec52084ccf22763c3a375d599aa27df30a8542","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.09f591967.0.tgz","fileCount":19,"integrity":"sha512-O0x7Rj3OLoSTKns5bX8KMOZPiWMnPYo1hRvK1odanNeWR3NluzyLYCeXGZBDYJ8hPy+GKQidfOdtyBnmfSELPg==","signatures":[{"sig":"MEQCIHMdVY+fVn0h3jNz9FfY5BB4/dBQ5W1WBJdGyhjdM/+EAiAaDMSLK6MyT/Jkz8S0+mGhX+oI4AATDsUs/Y+5mpaxCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTZCRA9TVsSAnZWagAApbwP/3UNki4tikFJ939TQOUt\n5ea7z1Ecfbtc+YVK3xLKUd4iHWtUZLfzXJAsvjEs1Ve7+tBhZoO4aoCIAANj\nzDQFKtaYb/M47nVoqecmdK5HV+ocNhcFiWXUIscStUxiV4Se1qlT0pI4Cr4k\nf5NOxwqcy9n5ucF9aVwjaBtXYywVMhiFrGX9tgHwYIq3QX/iF87CMLpMXbev\n0JxliHDvIaRW/Sd0/IkXdekx/DlVOQOX2DeVw58ZR8f1Gr70n2TpWsdlK+xx\nxOXsQvEADhu2yDPzQB2l6mYd2VWglqfc5Yg5D8HSFVmJD3DYyqtk0jBbnAZb\na/rRMIyYa4rgNOcPZyN7mHrPt5qeOeZ+V5HpJAMV3KUC/YL0nUuCrLZbas9O\ngi9H0DTts90wpJMZawGjv3wk9fmgutLyv1l6hz4bNsofK27LFuwIj6hGbpcn\nlGoPOUJKiw/6ZjVUwTCg86qLSuWn4Eb4l1gbKDyrv57a8BfYB/iTvNkahQ+v\nO+lrFW3aUxDangwYZOycQOMq+W9GXjBhrWyUFiS7qsKpYw94RYsFhhMzHWat\nmBZMMsT+5W8LLgU+b3ODq1lMgtR8rNWVff/OyHxZtNlXUI56HQLAZEVO5WnH\nTzPK0FJvDj9W8QzzTYdkPEk1MhYMD1jZmgDiSLKL+76qH3+JgqD4uYzE66nF\nePVt\r\n=U3tG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.09f591967.0","@material/shape":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.09f591967.0_1588712664990_0.49068226156060546","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/card","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"507e2f0f82584673700a1a49c90a4d8ed3b41d56","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.3846ce311.0.tgz","fileCount":19,"integrity":"sha512-XhUlA/d9kQ2xvuC7eXM2Nhi8wTnuF50TDWEe2mKlpQKx604eYKqLIuzylv2jIR+qrgO+7bMYPveqYAo+SFkL3w==","signatures":[{"sig":"MEQCIEriph8MZAFc31nfBzoMm6XXcTGXMwR3N5gzGyzgOcZ4AiAU6/a3Xe0/1EchbOZP6UG5cI7Hrt/BF4x0WVc36gemIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUYCRA9TVsSAnZWagAAvpYP/1cCD5cwnvXCIDvJbxK2\n4G75Xw0H//GuoyEgbaZiGbI2v8NXil/9YO1xEvqDZaH/4UMmJhLF3xkqb0LB\nGv3wNrKRiHCCKhBKbe0jQtYxgA/DI3AyozDVP0QoYeOu/9xrl3VrbDSbYbAt\nlCbAguRdgUztiCtJdHA+s6pSKJnsbq6iFWUBj0+6ypzdfzkFQRBxQ25GVgsJ\n4xn7fjBq+oRkJpPSOyIjHHatla53/+PNM9A9zEtWMQrhTqN+zzLjS3ujEoVK\nFjCqi92YfKs2ypOYUDyud+FzkOVALwHpbgeNbCy4p+DjcN9jYY9P5wLgX+bq\nye1ly3RgelYiGGWrXiQ6nvQwjmiqGlfXZtefX++9y3Ytvgsi1PrFuOj6rm7r\nwnawNho3wmSPK+4Tz1NrJUSUmOjqL15pcQ+FGXgUd0Gf+UILnUwhe1mg5gDN\npmBe2GHtZ6MvCnkJ/szrxAcroLR225iAaCCW/JYDqGURt/NLW1D1Ei6HmWbK\ntu5Q/lsiqmMCnoyLr1ee1Ks1rXeRcIfnyd+U17pR0txFtj7k15Q28jdiWUhq\nhoFLO8FOtOo8H1WA8biNUeBTEVmSVT9niPz1gAnYb60tFRf/AbgdG/dkvaZf\nR4xCtEIBxjnPeZGn8ms+ntLxUvYU/0nnR2hxb+Y3J0NM1DdDBUUIj3KWVrfa\nMhFc\r\n=LQJ/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.3846ce311.0","@material/shape":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.3846ce311.0_1588774168403_0.12439283577037852","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/card","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd6cb7d3d7bcbef49425ccab83bd67977997ffc5","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.ed7f32463.0.tgz","fileCount":19,"integrity":"sha512-2LX19F6kZTQBkB1raQwdX+KnrICjcQanr9JweqegNoLJJI+rVD7+cdRHnRgTVhxjIvYIA84dESeBvVwYStCmNQ==","signatures":[{"sig":"MEUCICJb7SxBigJt56OfwVMByLlO64pq3FCihkDFA5DxT5eAAiEAngRuC5zqEflPiPrf9n8HQMZdpPVnoWVL0z3X5ZQ5Mac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDZCRA9TVsSAnZWagAAoNoP/ic4FyOew9Jlrzn2v0eZ\ngV3PQ7LUa8nySje8NZnGp0q5XmhgN4trruBkVZfRsFIV0IzOBpqV5SO6ZbgO\nIdJdBvhQNNem5CauV37LHGiLZivMDrO+xN5E+HLJTvI7+GepLvd6rc8ivGYV\nCWRqpN0KKfzDoSChTdz4Ja2nn7zZFpxuTK+FSg8+4hi5EpQqTojQYaQDDCkz\neDShlS1ym5STo1tJsoZZ06R0Gf2NkXVK9ajBevyqgXVLiCwZY69cU3j3Wd7L\nRfoVyhpBIza1yNG9+9WkOUemnrliBRzOyUNtWjGY8zzVOjxavX36KYj1z3CW\nAuVgwL9Y1jMHwdk9ADzzoWfIIUAHZ+qnpZnIpyLkZ4tdY5YKW4nyywk1LZyA\n06vIHlLu2nxZgqVG7wdZCXr3SWmGGQ3Lm9keerCRUNJBsN5CU3TkqfzHHa+d\ncB+jjDbtW8glxmNydz1KNLifV3uDAv5R4+19qCW7jNUFw1dlz3HthOemxc0B\n57tz9U8CdHyJfHpGU8j6Ayx39sUQOt9Ma79uoGqdANT0np2vGsDFJE4ath29\nN7KQligcR2aUg7MFsPPoXBCwiliZfR2oQxdGq69NMrXlMjx15yHqBsae50N7\nb2ASbJtrrXrfhlz0Xx67Rp3p3q+iOCrSeNIIlyulHJHbZ43KNb4N0sIEnsam\nn/f6\r\n=kzm2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ed7f32463.0","@material/shape":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.ed7f32463.0_1588781273098_0.298255617028067","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/card","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae272b2e6b885f8a32b47bde29327e424f1e716","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8135cc085.0.tgz","fileCount":19,"integrity":"sha512-NrX5urRbpw7YCehOeVecJdmw848LkiFb4lJhricf6wcLyoHPr6rJiFXcoCgeK1EdkD1o0WVf2HBsApFwgnV83w==","signatures":[{"sig":"MEQCIBp/5cIpXvaAZCC+OIAC+A0gHfXFQTROWHdY7qf6I5k1AiBuW1a93qyN1DfWj75O93LL5uoZPH7Mv01t7XyUSMvlWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYdCRA9TVsSAnZWagAArYQQAJalHLbHo+vJdeXpJxPn\nlubPu8S4+kcAmEZ2RQwNr+KQi/UlQoc/hIKRXGsWLp15P+YA3JV5wop5fn18\nim5dzW+THIZO7slXMyysZ0+hkbWQDEaLiGqyZNAG+8VniRjjRs5Y04lSYPpk\nV0PKtNzRPOqik2PQWw8LB907q8yHwZufswE65JHI9LBzcT1jU4w1Y5jQkelc\nuYXawLaCKxjuhOLmtJc/5xfChDAAgKrxWGFEIxQEWVscepaG6R7BXgFr5ZdK\nvTKOiuR5AJMNvsTIcwFuqfG2/mBfltrPboF4mTiOPF3eOXOWIkwq30j7TpZ1\nsfj0D9uSZhOdXVU42qgJMSEM09wOmEz1aXbnl2MrQ7FrnI7GAhGlYO2njp0G\no1IRahVUKlPdUSJ1brqnLMjbHI8o7y0kA1DlgVAIO/ATTZg1+heWlBqkAnkP\nBQqMy2uZiBBWoGmOP/V4f6g1hpl1FHj6zGbFFgpRh1c5A3IqtTle1vAlaQ/l\nfeOt9hEf850UGoHQEfScJEpjBGWxwNJ7GSohrRN9JwZJtX1x6nRiB2c3o0yi\nEYaj57TowmEAzD9l50V03gyns00v7F9kpiH2nTfgz2kPrFHp83gxdDc6p/96\nqv0n4EjQomRrhwwdzIYxdhpeqP74qBk9iwSEmm8cQL9Ey1lB1p4pdfrk6l8C\npDAq\r\n=Xdgc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8135cc085.0","@material/shape":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8135cc085.0_1588794909067_0.36262308832285517","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/card","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"800f2ecc6fee3b2e80f911b0e15f7358fd64a76d","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.deb212de4.0.tgz","fileCount":19,"integrity":"sha512-l5vCcI2f/R4r1IAOBoDV/eiBnLULCQRgYpNAqcc8XOvCKXIpfwGq7boTM+dmPDokTheEjNxbkAiOF9IJMkbpTQ==","signatures":[{"sig":"MEYCIQDPi0x3eoIVjnmo6JdHOqfJqV8wL/QSs3jkqJ/056fmCgIhAKs7xLLa4aJ5GbVOXEanzgXswtPHYzN+zqIUYlDEbuAz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfDCRA9TVsSAnZWagAAN8YQAIqEg74vs43VfHvu96+Y\npj5WlqDMnkfCl7GXvTYbIA9eh+h/C+csCVF8qGFMF4PVA6zdQLgkIAD8WDfN\nj292xz1aWg/hVWS6fDQ4Ma/DklIl9UkI2Hi0M99Y5Jsr1tKnHXixDX73ska2\nM2wCjYZMxtAp7LqEfRZ7z1Tpi2BJCmY35vOy6zDy4DGBmsrTvIv1gaKCpi2t\np/bcJYbdC+ajr3DAs5Fml2JlWS5+d3oqpojatjfzQK4Sjhx09EeRunNaZr03\nDXdtfNHcybJ3os15sc+YnkohM6WAXSRIMSeMRWW/SWxZr3khsICNY+Cwm+9l\nTV7W3K5J6JBKHWqd7blVDgotZStLIAg3eczA0pITTfn2sPBRnnm7P657d8V2\nOToQgWFW5Kp9oPTUU6DPNJQN5KwU53Msp3KHCg/wNsTayqHrRqE4XAp0HbKC\nnCYvdxbREo0WReEKhSvwQ7nY2jqqwKyEG5GZX1aK3q4FDtV/8zcO6YyfipjD\n7CroeH6J9p2Gvp/DJQgFmVE1q2Vkn/EFzl6jw12GwG1J+5KmiSoN+WFc5ari\n8Lzbeq6aCoGPepP/yTbki0mTUdzoWvJDlIlu7ky67tmwm9SrVW9+CaaAxe6b\nw5OQeb6DIdFACvi7y0EKw2ZrmAwyKvdh51TWz0WZ9SKKifJSbSB9dJc1ovpd\njf5F\r\n=mrEI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.deb212de4.0","@material/shape":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.deb212de4.0_1588803523355_0.19655092891667203","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/card","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f8ae3b2fdc10e9a110e0ae021e71f3b2f49dfa","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.f83e00898.0.tgz","fileCount":19,"integrity":"sha512-23R6ouA3Gl5rGkmdjbaqfs0GFnBSFRguOePDGls8m7a5OHPXNNT8eVF/7NJEYo7PdinVy2YIb2MwMjunnQmvGQ==","signatures":[{"sig":"MEYCIQCWeFj1cs/TH9Qe7dcC7sTH9oVjTs5/emqRhhMy5wTKNgIhANv5d9QAnvLtfwJIlK6ZrKIRbnP6vWaW9GHoktnS/C2D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwYCRA9TVsSAnZWagAAmlwP/iS0eM2ztCd7n6r8Z6SJ\nPY/T2ZQCZO+sjX62FJUDQn5Acj1SCB/9/U8Pe1kfXmjHJZWBHttegoVa01qq\nZq67p4oRItoFXUHmR9P8F8nI/mFqojJn/UntSFoFf9ey8NGv4Y1kwwIjEC8S\nl+qIwwWavx3e3AIcDiFVnQA+v99P4ay/06kF7a0eVIn2nN9DSLcGALRrc/gf\nvquma+ybq4i3TQMATCEc8IbCJGzttqwMMrLrPV6SaN1TEkJg4zt9P9FSaDgh\nqBbX0pab6HjLEXPc2kbhE1py8p3Jclou6naNJTPluOu8MX8+Y+vUDTdrjYWQ\n+J0tzOHEa9imXtq3xa2DxFglmqYOoBIYL21yuJjc4krZfdGuJs6tWhZ0+CFW\nYH9Sas13bv0uZmBaTFfjbAH6nb2rzJ70Y0ZLSp+beXCtK1Ty9WfZz6LCUnew\naAzeMYv2s5Niq+JJsr9EOXngDwvzVt5yi4WlD1rDTPEtt/CgrEOTQ42vznn1\nv6XSjpFl3rJMXEqAhpvlri5A2+ZFQAXYVr3IHO1OVtEGy24RDu/D/nOi/cEa\n5ywKKVGdJZjhs42hzKF4tkOgIaNpj8Jl0rv9U3NiFmKkCBkuLSElhWgX3mIo\nfxNJJsapBrgNUhwECNydR+GQgxnnxE1C/eYsFu/FzmxpNj1B1vvrdyYDu+UV\nbGMx\r\n=qHjX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.f83e00898.0","@material/shape":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.f83e00898.0_1588870168223_0.9518860793999127","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/card","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62c582474024d13d94080b0ddd4ad9afe3c77966","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.047e6b337.0.tgz","fileCount":19,"integrity":"sha512-xYArG/OMQCn+7sJ+Ngt3fBmag0FZiimKCGJrtp952b3tLgwisWLh/yRwE0KF5JEWLUp2cGdExay1Y3yo4+x56g==","signatures":[{"sig":"MEQCIEqLq6i6lW4PzbXe6lvKQvaBdOQm0an5cs9A9zOkQ8aDAiA3SE8YvT+qIQDOXsPyfBDp4jJMo470EDvHMq6SKsuSDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetaceCRA9TVsSAnZWagAAsRgP/1cHqerZ4UHbYkvEGMqt\npSmPaDhW+ffTZVxIOT2c5o4CIdi4Yk/I3csJwDP9ufiiKl4eKz2DWkt9KDI+\nvfblWFj11hGj/S254/18WOEXP1JZdZ++eAzzYy7x4lkZkA0M70me1om8xny7\nNKfpcfRB5fCWWvUKGQYoUtqcVoI957roOI4+lCgeo7CJKOuPvWuo1/Q1+jDP\ntAAunQNjzzpUlOpSoi+N9vG72qXBRtrf/zD/d4w9T1X7WK8Mu4UQjHLKq9UL\nzAGJDNZVBtdr7Cz/+kBEwZefzBRWp2apqQFXRlrVEBaYOSHcDpN5wTaa2Mks\n6ynkdXp6m6ehavDKONCOSL9VPmJdB7FKSI4C5PAw6HU7RMj7k8iTu3NQJxnm\nJpuj/yzT5ysdO3MeI38vrIurYDdw3+72OAb/q4nT/Y2xAtcM6csRNNFMQVte\nc5tR8sG7bAudDIeDTnvfisWRIsUZL3GqHLrF8M3A1Z4rLpcaRA6nxrQMbIZ4\nN83hAN9GM0XV9dNn8tBELc14Zp+5trlzCWYaTFZS4/+0Gg2xJbgGrIhUJnJ6\n+7B0TL3LBSrTYQztBwJJeKGZ3X+AppZjlhFQqfRM3ec3lEcOEy30FWMGXxPC\n46gZrwCZUWfxjyRe+jRjM8iXKsIFQcd7Xb3wl5UdAlhS3xpaMmjKSvIxrOZ5\nMgsw\r\n=S1oN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.047e6b337.0","@material/shape":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.047e6b337.0_1588963102256_0.8330258816167118","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/card","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc65c9c30dea1a784ca9aa4dbabf647170a5490","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.119e21426.0.tgz","fileCount":19,"integrity":"sha512-7v0qUm46kyc9TJXcyb0CTKRfAIEswSGYw0XU02LCgclqScb3HxWBVyw8+Fq7uXJRASvkGgTJV7+Yz0XHshv/jg==","signatures":[{"sig":"MEUCIQCWHhpBs82aXtOw1Su1tvpsPTyMuB78cnQDKwgIQje2mAIge/A64qTzdp9sYualrMw9tBywDN6PSBX59UAkXJuBQ0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+TCRA9TVsSAnZWagAAtnkP/3TaCYDYoWHRbt2RQl/H\n7sY99zlbH2CD30kBb+GbdOYeli139vPRzCbMyjLJ/vVrvB07peOd2q6ByH+7\n3ehe6Ti0wnaa1dtYXZ7A4sfOG31P94v/yc6GsewW59Jm0Pq7TgirTlyNNEJR\niq2Q8wg7yCwVuSDfktPvVfUBkc3HZq1AUmDk+1XjpdfGCUtSm2+bb115Rg39\nbP8ZtN+wQK/cBHX1WprpthPz12yKOyQJkITWNJs0uyF6hhOhE02JF3hRqQtV\niu7rQvMyHXKXPMwOOADIPci0EscGezN1Sc67fhDmSYp8DLAQJs9Obi8TjyaA\nNCeHt1bwj8pgnpNDEnMDmJqtfBxlC2AveQLhtdOE2Y4hSTEhBRydPeHZ17X6\nZVMGlHSpkMwDJ0RfdpxNrwNkfZ0VajaqEH5T9d1i7z09QxmfsE06NMOln7gI\n5S/Ox8KTPYpkZLdY1G6FeLxzveKYK0Nyl3NPtC5KxE6EgP8suawtU5dK7N0b\nDHZ4sF+cXhweLlxLgFt+DVcSxmpP/G32eYUwpnaiszHieRsr+7pVe6//DtcV\n+zeh5FMHbyf/FtH3YZCTucIV7LDIdy0tG58O93F9+BmLPAJEsHBihtotdv7+\nR8dsw6wpMquV5o0OzoVhK6q373ytdDVE9pXMaKuXlmBQW28wl0Z1afkkCClR\n4rPE\r\n=4aoL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.119e21426.0","@material/shape":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.119e21426.0_1588969362693_0.9970449931050067","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/card","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"924b662f893be700c04745cc3958c4317e862a9a","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.2f052d824.0.tgz","fileCount":19,"integrity":"sha512-WEtPpKuMG/l44X9pqg6agFYT1XbdqQcJ3OC3TSEnn11Pktgzja4EQnOCZzweaEebZjPDsouNthOvuk3HT5xkjA==","signatures":[{"sig":"MEUCIGNTzSWdQIqZq9jw4+6XXBnCieHSMbMR6HJ2M9lOSatfAiEAluc741v0RJufHpPFZoQxywKLLnmVJgIxRyMdTKySfhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoLCRA9TVsSAnZWagAAnGQP/3WjWkct+yr3AUdYGSds\no0WbAH126oaPLikem5Tyb3j7C/7uG1rd7DC+x/ZTm+I8J9wSd/O8f/Ju5/dS\n7GRsHwsPeyhOAzWN6XJTwHH/X1v9044Jod0CYWr0DQe4A/CMgYs9umRGhS1w\nn78Aq4Hq9TfR3+FZm331C2Y+z+AIDYbpotocv3Hmc4jkOwaQI9rrh8N0OL2h\nltA6wi2DWrZcFMO2PfbiULVhiDWXlKX5tJeXkKjy/6+M1d0XenIWb0L523/Z\nGQey18TYu/KNjZ0+4kWVBNe8tU9JoS/bAIkxRu5HzqgXEO149ELEhU91zEoX\ngH0SFpkyq84jri6QUmsO/NI77Ty2J2dM8p2olO5wvFi1i4m3PHhP2KXctWac\nVV1oYxXbcvDqhaH3fmSEpfJuc8lt8XXtE4RGTmRV27YCtbYJV6fvMaERnTY5\n1hHLa+/RCfs9pxQuZ2KyaPv6ktohGUPuk6tQ2n7z8aAsfSCzVpteWYs6YvZp\ntZoNXADsDyh85yn0yALjQljkEsSZIwSvtmzIjjHVpcUuCU+mZNLYuuFquHbb\nqTk1rhem+3W+ldjXzbQzJ+luNMz2tXwISckUvdQllvyFbKeI1KPexikOUNpY\nR1vyHlfKgTH3n43m0KFwrkEqQ40cS/Rr5BycyjqMr3A9PsLKeIHsCtYI1c+5\nN9Tb\r\n=x7sJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2f052d824.0","@material/shape":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.2f052d824.0_1588972043284_0.866537131114796","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/card","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"183f671368ecf3100fcb9eff2cc5a98e7b7cb1c5","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.e84444387.0.tgz","fileCount":19,"integrity":"sha512-jFXIXEeHhNLM+tSVI/IASN5oEWdgEtA9780BUeMiHnrDC1cXRZFq8CSFSTfb6hf6ytM9e+7e05X3Xgey/3gSRw==","signatures":[{"sig":"MEYCIQCjBiHTuvEHsncKHvTa3mHGN9TgKIjpEba9jvDGfa9jJgIhAIP8FDLGCOofh5tOUfyCLcNrfdWq4UF9k39N9dT0+tz5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+2CRA9TVsSAnZWagAAqDkP/jPk2GvfFNdRQ9Vy/IFz\nEGXqtAnEX+u9rW/2lECmZnBN6Y67Wl9G/HXv02ErunWW+EOKsyArLTbNyWbY\n0a/NjuvcFFwJjDoXDqKD5kxE97FbAzRI0rYo9iNpEc3GLbxaALzxuP2ecUQq\nLdrEOwhhqeY1AdH5ksZT3Vw0vH5PxJtmQr/VfDiNZEcZzySI1uHFKdbsQsj/\nsTAhKn5HsWmy/edRCAYx3uA4pXTg9QfUSKiX9MBEzvSRqXkvtrW9M2A4an5U\nhipMfURW0fuLXkT36Dr1nL/U3fcW+2mYekqo5fvFY9OGBZuxXSCo6eRMfFNB\n8vrOJSU3RyyuVMo64LeRGqwTetdSZDhGgJJnxVOjy9aXfdwO1uxL0giysG4d\nbyhOcmf1xBNvQO5iGNWAd6lGLlwKNXartMEPaJ7SPBOjjuRcl+vUS7LKYEIq\nOY+DrSLnVZmkgg/TNS1aDFbzK9CeU80yAe6aRRPp+iX3vccEEkg8W9pa2Kcl\naChZ/WSTOujkd9aMZSRvt/cAjl6iGBoelxvs5jWjeI5MGzSOPwQ4+qYPQ2J+\nz39LlMhOuJlweKuEEmWy+Uddd9iAxCXJvNI43WYoO/hrub4ecjcsAifkvvik\npFqqzk8LXnpY9kOC1rWQ9bpdIpNDrSAzQj+8DyRSUnXn2MKHeahJjrjJPZ2d\nvW+6\r\n=ZB1V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.e84444387.0","@material/shape":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.e84444387.0_1588973494300_0.3884573424033504","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/card","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ec9988aaa12254c40e543a283fe58a4b22c45ff","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.893eb1876.0.tgz","fileCount":19,"integrity":"sha512-Myv0fDVKBu9XU8PPmwPkavg9ELu/CFrWgdiKpWjB9TZ0Iv2kaAW5c2p2V8GYC8qWveYws9wO8FkR4ICrxbkhlw==","signatures":[{"sig":"MEYCIQDSE7/l0nErhZo+3ip7VUSUVybyMDhNxbBj5Ju7bsRWmwIhAOFU4G1PtEriyQ71IBB2TtfDyMs5JNfRNIhWqq1UXWG4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1zCRA9TVsSAnZWagAA5lMQAJzNzY0pubYphGMd6KpF\nJ6quQ8UCTAP8UDh9MaehRPfVHGi3ErMzcEhwqElcM3Gn0pMN5GBXxd62qi1F\nBZ3WaJFkRDtCNJpBEeARpRL5zZeMqZScCa9tMP7YBuc63qzeqZsJAM/ug0m1\n+Q7QjCV4PoE6z7kIt0DTpMcVt0XNn3NSLhEOoky+O9H71TmQTYSamDF3QHTx\n/pk88xLY/j2NADtHt+jpQwY6zBGzUx2AbZF46jaUhwIidqLmhQtN6fs4Qd5z\nLBo9AptE4L4pnlaIXLheAmqwmSjpdAoUbcK1FGlkg5AN4mYopnvzq/RWSIlN\nHGk/b9G1i/ZGW6sGXV7xZrlmNmMy03Px70Y6v/0sunbyyb2AdkzSRsnIkBLZ\nKrzjNAWqYZYyB5uXjNy3+NfdiY7DAhRe5NQeChdfmKf84h0Ejs4GyRC/Rx7L\nsTRd8ukzeoskkAjSBsQrwYRRu2La401HfPmdOWbZipKphQqBDC81SI/TkcbB\noDTj9kgxG+jDkIEKgLtRo1mc7eOu/BdXBFzEuMfMrlUhz0OfwXWFGrJuVn92\nsiwZesiZm1/8iHQPUM4E+SWRbSBL4AIO/XDvfH9WEHZp7cgxurAPrD4kwHXh\nj0GkN+EwxIRdcPKvPkmyr0yCz1Cei/FZ47esmUfBPSkhGR7yVJCNiiOq1Dll\nfAPq\r\n=3R0f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.893eb1876.0","@material/shape":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.893eb1876.0_1589206386691_0.7707197468891924","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/card","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"872800b0d73a40397ec6689c26a8f3f06da61af8","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.a5aeb3001.0.tgz","fileCount":19,"integrity":"sha512-cArKwZOIRZqT52Dr2Rd1f0TpaG0ossQ6h/oKjxVpGYpYdgX2qFD7jeaRMAaG2ZWcauWGNu7HOEQTyE46JLIToA==","signatures":[{"sig":"MEUCIQCP74dILqNBHk+iyKHa8Hi+smullkPVkWLNWmVMAGMVSAIgbrd7JaileelXYtbkq+TTEk4XcrWl0TddnjIJfT/iOwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWEsCRA9TVsSAnZWagAAq5QP/jVD3o7cGdTvZn7lK9ER\nJM86JX0VlhtuqXQuKMbhxdHIX9wLsmu7eXV/pj81XRvETFhkP9+/O9vCSUzy\nnKODjUvW8dknK7UWg4sIkc9NAc4oytO1J67pEJM/zcneZI2a7JWlBxuK76UB\nKnIGD+VQQNow/xqLoFeGQPwH16woo7ZpkjxqyrnW9nwnJWxjg3qdmEYBr16h\n7KuQR6A9ZW51v+JbQz6hHc4Wy73H6GSGwZRIWMtMz4l35MlqUbeaHn6Uueaf\nPxVfqZmhEmhdyzqrRsVLTM9CwWghfCGNeM7mnB72RGXd3D6FZDr9B5T+s2P/\nnaVlKxjVuBkLGDe0QTuSn3eC9XRPXZ6NVMBiaZ98N32QRzNHEdipladARdCM\nOmxvz2gClyEhL3oDytMCQUnE04L8vC9+ot+BUGDYAi/9e+HadI0/pDrAbsXO\nLdEayrMjOKJJF1PXOf2GdbzBr/tNwUyT19uEX2Ef0PuD6ewzoDQUV26EQbDk\nsmyT9oS4fS1BrbfE1eRawAY3U8s1ZTD+xwngABGH0MkcpqtkQ1QI+B8ezYZe\nwfXkhGrAr5Vlu3q6HMR5mdBpRuiTZilcCgrlHmUKwvEMcdQp0x30d5U5yDeO\niJWBXXPi70sI1UY6T44hKfhDrCkKH+XvVneJ4GMjnY5Rw2XwXYTbh+iAUhBJ\nrv+v\r\n=uUB3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/shape":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.a5aeb3001.0_1589207339859_0.9127549966749031","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/card","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"598c703316040b0c8ca0eccbac0353dd29dd9f82","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.610c68d97.0.tgz","fileCount":19,"integrity":"sha512-Fh1aDDVaCchqLlEwPM8CX9Vzsbk+TdBhZiMB0QWkwvH05s3W/TEdENHRgBMp0T5YgJNyn0CyWUvPoHAvJgKVUA==","signatures":[{"sig":"MEQCICZYqewPAcK1YBN+qXhOosYYSLSVj3fN72LMSZlavxWDAiAoriJRhO2qIeSjP17V5jDhjEFyHhPDgio+JyLRmeB7Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahNCRA9TVsSAnZWagAAEZgP/3PdbzThABpDkavWS/M1\nP3BPW8EJhuaSbk18Xtg7L9JLFnyD7KGVIKnd4E9wOj9PyrgshLdJr7sOZimf\n5Yhr/E1bWF/YuWTOhL59x057XbRsWtvaD1PQ5mw01G9udIXPnEo5YxzeFnW/\ncOuDZcWlh9iFFRL9GAM4ZmU+Z3BY1r6v66Udza4QEebYJJ2o1OjUBCGNZcf0\nitv80RLkLO/Fx0y+i/Zkb1EhD560exrpPSCW88jsDSE6L7Lib8FsNwFXVHiM\nt3n9f40sYgnGV4E8RFEoWVOs0/mWuZIRJfR+NYITZbQjJGHN9kujA/Dlqv/L\nlEhfO57a2DSqTJcDMpSNGg6d+O1SjfTiLswOWDVZEvFQBS/MvuLDimFPrTVe\npuGjpCibsmxHVEuo0XU+7hyTblzEdP6Yw8d9K7Vk6TOHOUs2/uATKPfwZHRS\nTVrRBK3oNKm4mKt2uIXfDwTBt+MXDlUZtadCG/95MCV9x5VT8tidwPgzmJh1\n6zvx6iTmoBIuTzDorHZaAVj9K/90hwh4lGY5K9sI9MiKITC8W5besuOqxdBe\n3rOCVUP9kkvDL2P2UvFbwL3uD8F5FUCJHhWvXMYo93PDykRU9T6KmsKGmYhS\nSW/y2fFJwO28iJc0XyUpWpO6Lxx1nxCjf8BPp3tsnWrwFbP52It8y0fU/wdw\naOBb\r\n=WvhH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.610c68d97.0","@material/shape":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.610c68d97.0_1589225548918_0.7157639870061114","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/card","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d5eed4547fd9f5694a31fb13f70a69400f05f78","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.ed52af767.0.tgz","fileCount":19,"integrity":"sha512-P3VFCmzAClmXFpHB8G2HipWp2FM68/2yXRAsNPNJsXTT8W/+/MrBZo+p6yRzf1n9HUhb0pkj1YXATkKOf/3cGg==","signatures":[{"sig":"MEQCIHfeYldKl4aTjBjVl1i8lsXhuilMbTg4Wc04WVxloCcYAiBjygldVTOXasJIeUJL6FbIx3BsMGwZbEYRHarS/HAIWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUjCRA9TVsSAnZWagAAB9EP/jUsbw1fgTlD3oVRrSkE\nFW0spA6JiMIHPV70iYbxJk5j1GO6IO9iOeD+bFJ5Z9O3g1e35wZ07FqNcPPB\nJFThPEpQg1rjBrn7aHhVZbWJYKH2IJ/PI3E8AYEDttO/gvNGAlFOBybbPJzX\n2+XMeJ3u19n6TjkgELl8fgpT9HxKQWVYEbMJxz/0GkgdCoz47dAWy5mkOy4v\ncdQAkoFBeIvsbZYkhUbSs5w1qdqDGyrU88tICRnQO978wFk5KGDl20F4Uk7x\nXFB9UvplQjJdJffOc8F6vnt2muY7hJ0wbtpb2A7VtM5J64Rym6Bn4HvQi1qV\nGidQZqUtcRR2dKo3dUoBMZI1/jZn+T301m23VlhoqRKHc90jQPT3zFcV/T5V\np2h+dAgV5Qe5AvjXjp7/EuD5EsRFa2bopmWlNE4mIYKGqzap/1vK/uy4cY0r\njjUO90e0f0nKLMYWKSRGFkaBnmgx/hV1L+hh4AbE+bKBxjV4vO8iY7yaf2Q8\nvkPvjOUwwzwv4CC330OT5UihUFl7PGlI62y1ZODvYy+h7eUNUxleMD9bFFMm\nnn59eeyUlqCoQ6GrsR7mFusFhVU3nZg8hQ5TTX5FLGiFILQzYiX68s3DPTLs\nSmA10WQagcDJOrP+NazpNuEJzM2WOjyG924aFfVxaIaYVJZzzm7Aqba3M26G\nOa7G\r\n=QKHJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ed52af767.0","@material/shape":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.ed52af767.0_1589228832496_0.6608318560693744","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/card","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94320ff26c0461550e4fb338fb52b7805e3ca0a9","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.058cfd23c.0.tgz","fileCount":19,"integrity":"sha512-dCOvFRi5HdeXHW2x5uSDaoo7U9rN6U86EJ34fPCTOkwg0nLGGAVgZbp/eJryxNY6fIt3PZ3o6IsNpJ7JJPcOeg==","signatures":[{"sig":"MEUCIBrHCVZ/RfyI297F6Skv+dFKnsswmM/5N7HDgS1/Vh+3AiEAnjPMTNxW9M5PTeUKFapvJh2ZaMzG4mOj33l0AYdDzyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKwCRA9TVsSAnZWagAAFJYQAIorxvsQMErm2WndAkfW\n578rJPao+ts3jNHXfBlqfQ0kWZx8DD3meED8C40PprE1CGXIsDwHccYjgPir\nwwXMIGW6wJiPdGfhlkp7lYfDVqrbfqohqJOzeu2Q3yeTokux1B16Oykkhm58\nulvLtRhbdFFpTdMooT/+ZWTNbJfZXCxTV7GKiyM1ATsctWPJXeht/250mjqA\nYubeGZSj2YM+SkwAsEK5ZU5wVfZQ2uX7ITCLW12rS6hxZ6TD9RvMzlMErKtO\n05sz26fmBwdWIWNrjLpwWKzEB0XRmhVHhn9DaFyGmTcIiP8Basktlvz1eImN\nkvRw5QwYcUGf8mYj0tf4AkH1DJuxWZtj1EG0/3wqLMyiz91MeRYo5LRTgVSm\nWtrzZyucgYM5o4UA9lUxrDn9/1RC0unWoz5Pz4oe4CLTFHF9A9AbJh3mi5Ko\nIJmHNXnuSrMJS9l+GqfzmDn3zejRKN0b5EtxyfnoYZ9dU6xRWDOjnPafROcc\nlvZwI2ysPlN5VC2F5kiuPXaTA/3Xg1GaHK3POrlCDn3g2DwifDKsfzM6XdsP\nBDuymUb4GCFoBx7tZXgLzqovCofk2zJXHChLqQ+8U/MXfENmBOff3F/mU5U/\nq2x5NF+ghsZduSvUS/j+uypDN3Ni1ncxIdX6urrphNDg5LouKpC5YDFqqrQT\nEk2s\r\n=NqEu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.058cfd23c.0","@material/shape":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.058cfd23c.0_1589232304444_0.03152231239186132","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/card","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9607e7916359b03ebf455d2c996e1aacee9875d","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.0a371b4fe.0.tgz","fileCount":19,"integrity":"sha512-JPwCm6ALbn3T8iICBvPblGGztT2Xk++AT0GPCkDVCt6SnGpxeOvM7vklIACvK/abCqii9ihJiz/allwd1a+IXw==","signatures":[{"sig":"MEQCIDTUpM/y4+Pu9X8lbVKBXaHRZUSiUab7VjXovSXTVu0vAiBmBOWyiqpavP6TRmofauvjXKzmdaiNn6PzB+ZYEKYMDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6wCRA9TVsSAnZWagAAGJEP/0LZDbNCKbJwpdPgPFAL\nGvuv3tGmcjTE4KQEJ5HqGBteA3/fLyAWJv/PT9YdRLClGEeh4Mekhf4/AAMe\nDptaYx99TI+UYPXq50UNlbtC7uF69BmnHQF1cxoy0OeOx4/aeqRS+srhDT+O\nd1rhFzfdJWqG2a9PwF066WUzAMHe4ZaxlXpUC0MBCS4MVHrwtTdJFvxerIEk\nfKMIymqVFRq/kAaAPkxdgrmCtHMMkgbxDQPpMN4N4LMPQjwefzKVeh2G3p/N\ndvDmNRKSrr+HFIW0owxRHNQyElNcbcqzv5O54Gn6K6ILsjo30y/0/7US+Iqk\nspJdiRmpzp5h8qm6SKHymIlNH1bPX2O8fqAnECxt3gqjlgyIXHD6mqm+UGPl\nTzSlFeNrJeADEQSnNTN2ovbiqn6P3GvNYGTidGjBDm2ayaS87ZO7L3mwNjse\n5Y3JuxFsrrcrcLyv4eOZy6/FDTUCf33RCcwTRK0V+pjQXk+9xnXG0Mp5Au2t\nrS1O5wa6z96gGGdvSgDuLXt9gaIxn/4jMM0Wnj9RxTQCkkRIM3xpise+yoFf\nZztsrsAquHQTDHWx3nglvTSU5D/bAAH+xMdcr072FTkYVLq5O35uiDL77oOV\nfcraNLrAXbM09lndRrmlPpRjBV4djx+Ssj087aBFyMVNyDHt8KyBJxjr760u\nWdqG\r\n=mzWk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/shape":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.0a371b4fe.0_1589325488069_0.05372712857886719","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/card","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f588e53e06cceace40e7a56fa13e4c58fecad22","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.2139200b3.0.tgz","fileCount":19,"integrity":"sha512-U0ufneUFyWFyYfa1cjxCbWwqT0MH47A/CFYZj9IPf2sOeRJOMynF1KHCWE6Gr8pQmeVANl5dQ15g2UFkUtvNrw==","signatures":[{"sig":"MEQCIENstfDMGC2FYAdp95rxqj2QjeMYZisEqTg4D9IYn7u0AiAIncIGOdIFoy+iPMNPeMmFxjOktEbvVhVOUjGed5k0GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAhyCRA9TVsSAnZWagAAUZYP/AoCOVCT0PsOYOx3RFlZ\nLVVXM6E9s5TS5YiSG/FvWJFzlHBQm9+RcX3DhzEQd2lCnQ0BaDXgHmTiOOYX\npmiEiOZUjdq/IEd6R2qjjP4rvd1r6AVEkMzO6IWicHhXsWAhq6rzsmCM+3RF\n7Hv6u+DlrPTXMTlVcePQWm5kVbN7wQFGdaA3jJ7AnCJUjtNxh3swY+iqnfId\nLicUroi+iYTqseT8+AefHtaS7WkUcRqPDHLEZ1fj9Wab16EhQUnXX1AJQQf6\nG8G9e5y8A4QSpUbpmpCLirqD2/UTV4U6kHcR6+JPDn1o8kbXH+cVRC0UbDiu\n4nztLaovlE/04wxugqE+dzhecI0MDLfyOtR4sxfga91e4GNuaJarVYPUm+g+\nHKrQPJ+/j1TroICLSEVOKfIYFCoBo0bMJUurkqgveC3YvmUfYNjvSCTRt7u8\nGwQO6zgEIR9ECtK+iX2kpTWySasE1ZyBlZbZy5GHhl8Y3ZEe3I/6r7V+nQh2\nNwQoKcJtuCc3gdNB6pUksJTIPTLGAiH+3UmfxZ0NIqvIQ6jBVUD74oCfAy1x\nxH34NDLjA7ebhge3+tmXtY05VRvN4+4ZgWdzVBFnzEO/QEy2jlMrR75utvvN\nTuASiEoy7tKWUxE81jFdCPV+hd7GQb/Tlo1DrsrneHnqIKJDf7uXxRihMRmr\n/qsD\r\n=3q16\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2139200b3.0","@material/shape":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.2139200b3.0_1589381233580_0.8048833047858117","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/card","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0e67b5a992233b10754c60e9132d0e412d471b5","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.744d751a0.0.tgz","fileCount":19,"integrity":"sha512-msMbWQD/gKk/+IYnsesVh30qAumPCPWgZP1fNr6+SwaOyG2QnQ3AC3xgxny5PcjPrH+mLNrG840OYpeZuvDDpg==","signatures":[{"sig":"MEYCIQCyx78lwreUiuevizH3Z1GgyJ0haKoxDznY+wOkIohsEwIhAPDm/BLgZnw4DA/BejlvBYx9jbYSaFCzRIlyzGwUhSc1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxFCRA9TVsSAnZWagAAdg8QAJicsvzch5Cw58Z28HJ/\nCpjRihsKf1mIs34JlqYhZfac6tRoCfaLoYX+GKpn0rlFCkexCddgpwh8W4FN\nMYTIH6eDmbxWbE9PprWqzAabOWd2jCVXKkvOfH1kOuo2UDcm3XqzTiiazWJU\nKI+wjn0p7ot3E8CVNraeX/qrJ79rJDOrIckMOLdSr4kC/4CimyLK9QwvcNqZ\nxacRVGFiYwxAV3MoilqA8/zcxsqMF6EPCox0vnnFBvQ7EMp9zrhNYGcKi+7D\ngdwhLfE1Qr0bQk1CW5P+XV7BxYDz9G5/66Tx7UeoYmxOXHzKH5Nlct99XSes\nR7Y2nrjNXQ4d3RxDaLOFypnmiC6jHhaigK2Iu5fDIjHORx0PM/g6ZvmnqJjf\nu6bMfXL7MqOp+uDv/IOeJQT8jOTL7uW8EFbSVHb9YH9N2eAG9AyipJ/KqQti\nppZ/RpPSmtMv8ldffeFDdSLjl9x+ak+oFI7qwlHcQqHeT7CRBmbYY0H5n8Nl\nLc5uPCDe4NAnJLdhSGafNdcdeji7gKt/9CrhgG3RRvv6wqBCtWcpAJgeV1QH\n28tl9FqDXatZoSx3pzJ/jSTOHG7iZxTDHfQtbOr2gLntAvScCJPfCjwXwmdq\nR756bIldW1iMoICxv++BXE0F0fi5y+u4EhiaBLgUYOV/30dXIJYIPbDIuWbN\nFD8c\r\n=pTUU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.744d751a0.0","@material/shape":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.744d751a0.0_1589431365153_0.020849729858912314","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/card","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51496bbf67d3903655049bfb9efb7a4a9dfce619","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.ad0c0c103.0.tgz","fileCount":19,"integrity":"sha512-VPjl6g2u9fxEaFD5cSu4AcEzRTp0oXrCOaNPnhFi0hGMJg0UEYKmaZT8Jur7tWz/Vwp4xm9jgB3qW0PhokyVEA==","signatures":[{"sig":"MEUCIQD2si2JNQzJ1Yic4UzWEJti7T33UfTNt5BQ8NZQZOFkwwIgcMWdYSKxLN2AtX1Z/9arygRhVHkUfZ9gviXKmqfW7sk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVrwCRA9TVsSAnZWagAAgocQAJ4gh5fOIhNVyNZfOJE2\no3aMiGCW43WxjZTl0AXuVcwr2xgaL/PxVGl8JwqDhdpOGLIUqZQB2qg1wKSA\npk7IBJ27H5USGTiUy8S/+vZR8EMbBoKkE0oNiwRkrzQOw9irtt6gvAgDlcUr\nA4nxGYTaXsXHdW2KsAB/w6ecUz7nXYOH1FGbOJN6ccz/LFszATsqk5n6pnM8\nhX2d08XxjceUzy/dctDCs+gnh+on3/jl70EF8ujC/mWTEke6oaQqus7ZnLLP\nv/vr65zilEdj5hPkNB1GpychUl7eUlUJ1VCcM+UlA+aZrC2fTon1hRJKkOaT\nV9Wkrh2HYGJMQv0iIUzq5nnsJ9ZdczXsvi5HBRU5xjXQ3youD1PO3+gQqdPb\nxbEEi4LgxAINZPJzfxQlrn2EOXrkb6K7tCwt6dzL2LawoHNVqLrTvAjWRlKI\nqrs2Wjf5WPRR46zyBJ1vBMljYj5NQKKHSrW/ZFlLjiETf9yWoMi/Ttx9Tj4x\nTioK2AL0KzDa3aRowiHbad7a1SPlTFitFWuKLdUdUGgEQl8vNlzu3mxzRZQb\nGCl+4R4Bfcbf4xmNJtgvwvdjq+iqXS+55O9P95rpQGBLWBLIOCbNVmTdcJ+9\nrIX5SuKxwyI3bd+oWW1hrWZutiWBc2ZnY7cavONWk8EyBYff4Tubt+3qnFLp\nu2JB\r\n=84He\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/shape":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.ad0c0c103.0_1589467888075_0.10765788449466895","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/card","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81ebda84164b35731712981ab0548bb58d6a4db1","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":19,"integrity":"sha512-nmhULwUA68WsdwKzbm1V8VINCDuABUdlGZSzqz1pEMjSUXCnAXn1z/YyWwb/cSNclG2ugxd5cMkWqMVC9aQ53A==","signatures":[{"sig":"MEUCIGFMX+ruuSbuef6oj6XHWyXUelz/jhfDIH/mwvYTYffiAiEA+umsVpLrueLyuKYNrIbT2aYTqamMSPFUseDt93kwaho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsuiCRA9TVsSAnZWagAAR40P/37ELcTWFbZ0ytILbCWG\n7XmL3yNgpQX3osGke81/nJhcyrebH7wZdyetocw4YKcKGVKoFKGGei6JgT7M\nugvka1GefZzaGP01UIx8sy6j2QWPEM9Jq+DOfvfYoW4009/Th29H0b13rGK5\n5nNLZ7piiCkAEbfziCyMoyJAzAotu0zTGdHha+GqvhlnEAXAGn3jMa86Iz2l\ndh0+IqjbhV/dO7rtCYfSUN9f7Cv1zmz9aXp7qUL80TgMA0SUseV/CkE2fW9u\n0gFV4yuerEr3WJO79lxUaHz4EG2xuAVAd2u9ZP+t646Au9U6BjCwpcRUTONo\ngzWcmTFLPEtgnzpWNCYJib1hFX94SktF22L5QsvEP1EgHyJYkMqtdvY6xwEu\nGBFmx9NqfmYE8M4GNdlF3+WvsYCsxaRRV0+V4afLmv0s4uWG4kNOth5jFZ9U\nUCh6tp4PPUpBm3FMB2lBsmXtVT8tBZzOB0mpy8euzp7ngwGrOcLI/9LYFerZ\nVmLVXkPlDSZTwFy5V9NfVcYnZtU5cyBqqJYX9yIfTp2uc6njk7t7ggDhsJmD\n9PwqIJiE0ovZlGYUJ71XqjhJUlPlCcNKQKTUSWR2EQQpTBbYiqWS/w+sJjIJ\nkVmQtjWSK92anx+gwsfdEpmVcjPpmnhu6TljRMXQF3s/EZyo0Gi+MsMplL+5\nBEAG\r\n=tk/l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/shape":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.fd8f8f2b7.0_1589824417935_0.9182135310327468","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/card","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46edca5245d2ee7b2f4286df9619b7b9be7eb5c6","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.730920fbb.0.tgz","fileCount":19,"integrity":"sha512-GYGo96RizfjX7GPnn4hih2uKdxNtkU7y1yQ5hKYTDL2e64g22M3aAX7gh70Jyq7sjORjyB+sWtCTbra8g9n9sA==","signatures":[{"sig":"MEUCIDf8lGxpHoijeCwPzBm9s7H9YpyqxPTa1Q6XYLt3wn6RAiEAuud2Pd0Xx6rmhEKJ0ug8DTStOvNEiJZ02ZWHIdMki64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWDCRA9TVsSAnZWagAARGwP/i4G/4HTy/YpcvZusAz0\nqBrsuiadsisqAjQyHPm6mZOPLzFFFHkfPqkO+9qbPha6m1pEcpl12S/wTsWX\n5hsnnq1ahILy4gIKBMHQ/rhqq/ewABCpzMsFNM9XWxleXxDwu1E1cU/KyO2d\noYcOePFKdEhjprhCqiR5EcJTW/tWaOhD++5BvjrPyjMQEjkDgAsQqsmBCBpe\n2zwdTTdd5WtCVpD7YoW7BIMhdVVk4qHuwEzs0xnLTKnjAyNz/mBHTYMTKKJw\ngECeFu55MHCalF4ysf0KG01U9qa9J8cnJtlTA0s3RluQxe+xHAkE/XuYf3Am\nr+hy4G7bhYpPQSCafu46TEefiJ9RGAtXnyWAsZATvRtD+uURspp1UAwq5CMv\nzLl2bJ/0sFapiTiy6s4aFmjEESgVGORROEx7geeptt4PxWiMHSjsoewoAfzY\nlJkgkRFOfsg3J0E1q6xOKC+Ly0uh7Se+ZKWVVKd1enoLNIacjrPvZVQqfNoO\npQpQDtSwDcye/XCD8uHAHzfzw85whSpTT05BHcShg5xSb5D2iPNptotNKM6K\ntNP7fN6KQkCmfSfC+ijatP6njrhFXJDnSQ1vqnyHDBf3d0agqZuf4tGhk5eZ\nx4w0D0h7tBWBVna+2z7dEKcjQ2ah4EvoJQQ2G1O0jnL8IkDzXkxVD5hSHQS0\ncFLQ\r\n=nrXU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.730920fbb.0","@material/shape":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.730920fbb.0_1589831043438_0.4990520846992015","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/card","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00926f29c30a1894ac0ae3a717e3bdf6ee825c64","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.bcdad99bb.0.tgz","fileCount":19,"integrity":"sha512-sMgaLEBIAVjBrK5y+/BPtzgkBST+IgzOX5khthxxjtkDyEjZcWvv6QLmH99OM7Mkfs0ITePRKJFQi/6zAi7UBQ==","signatures":[{"sig":"MEYCIQDTwQEB4+BpxZ/pSJkPPbukEOCBjutNlCBm9UdSi67M4gIhALUDCuao7vQ5zkgb4EBUd06qqh3UKD4Uw7jJUXE5Dq5Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/pCRA9TVsSAnZWagAAZQAP/1c5uG5ClIg002XAxcSb\nrf87krFgYxYzgJ8lntPAgQ1ZPnn477iA7VuihhD/WZxnMbe/RLiy31lMohkf\nf2Zt8PUAPLUiBHA3peC+2ZFGaxnD8X0s2z1X/G4DXATTUYedQ4uoC5d31K+d\nSqJREhuVUtc/SgrJVajqHXBeLuu3M87/yFCuUW2q0cAwbaOmCK3oF8aEnlsc\nOHghj7XN+oSpsNDTBWkckYAUVYmn2ty0IE6CvHvE+8OUf20zcfRYRxO2BN8S\nhseOPBMPqDBfeTbimdBQSYjX52HXc060NO0QufjOF6JVPcqxJNHzdaJT30Df\nDUtikBarSAbEXMqcwmdtr8Xz81mbzFdJpKUu/MXiVtOuxDlUInCAEQZr6LUG\nu6rmEWSL71LQekicsx9V2LOArKR8OTQivtJdf2YREYOowH3/7sBvovqbVKsJ\ntGBSoznnH0u376klwGug8XqecawHyTd4p/JOfrDQ5cxYG4Z/8vsYiELn+uo7\nuZJU2dlHykCBTyirb2QuYyJZ1lBstga3sSJBeaB8o6347nJ9jWuikX4hliIN\nefkvWsrBMUfYVwf1bcAB/7aIhP1x2I0WjASw0J3iZGUWhiibmhfOQSuxr/QJ\nfmnD7P6rWWts/LRYrJZAfRTngQi1vaIZQm9nhlXQAWr9ogsxzCMIvGRLB9jr\n8AKn\r\n=sO/e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/shape":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.bcdad99bb.0_1589858280881_0.0011424513531594904","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/card","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"989556b679b50306ed32da1ec38277b7c8539529","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.4497b86ed.0.tgz","fileCount":19,"integrity":"sha512-I2b5shDL2JmxavEuwg87+E7JoIWV95ywzzR1Uo9WWwU8kHHWDa5QzcM0ESEkPzacD+4lsxOcNUHsDfZoaAWgaw==","signatures":[{"sig":"MEUCIQDqN0xEKSkvMQr1nYJwpbtsANSnjN3KE6YhUZDCwESTwgIga0hQfPJUYvqVX8YoKK34+blT4LV74RLp6pnKWK0+rS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eXCRA9TVsSAnZWagAAZ60P/i3TOr/4QsWixqU+OBwo\nhk9mTxKsrDMUbdf0hgv7/o4YqWOTNAAofML1mBfM2BsbbdiG5K7hTreuWoAh\noO/syk+tc5l0UhIVoV7zwB4Cy/6A5vum29WuVHlwN4SzHp0rNAyDZ4QoAffk\nEesDjA4uKUDtCeRmBPNRYxLV+i36/GRZhXpDSub159zH7iChqGg5h4UYD51L\nUrQ59FTOH1+MwVzmhy/kevB4CsrjH46Pxp/SAgNuEO5BlkHNGyY9pOqnew+P\nSHvOY8AQJwnOB+kbHDXLB1az6qzvSOxIZ4LvpEIAfuie8DvODEm+28YbTGWl\nTSbL1PelZAVoIfTOmBxbdEZwiRg0U6JV8ZPfdKHijYW8b6CscTxxYgonusq6\nWBrffLRcLIw0QN24PveQ/vkbuJbwlsj1482FDsQdLUqk4RR8mCZeXgYs8EXW\nkUSHXhZrz7igu1w8CuSowR0XxGUx5dJJt9Sc8f/fc9ONLDwZ6QauwmUKO+Ja\nC7d7sm8K1fF1BDAhV/REesF8AvgIDjBU4zXjZpH0SUDoMXZwi6ZQAQczrwPb\nTQCnqhpeIg+6uCeGc0Z+Sqv5mEpFeTRgruU49zJMmS7F2I4iEfOsHncy432i\n7+pcVCPJku1HiZLDcWTyiB+oEkjYr3v8PVzzCQ5mP5VkEpzLPcslwtM0K2ny\n0tg5\r\n=7M3j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.4497b86ed.0","@material/shape":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.4497b86ed.0_1589860246572_0.36182501619428176","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/card","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d81544d92e092f94e8b776df6afc8b755f0b2519","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.2e60575da.0.tgz","fileCount":19,"integrity":"sha512-oMIvt7xAvrCt7anSmzqaJNyh7exRMwLX3gQbpIOkhqT1i7z9GONE1lFJzB8kGqNGpV8I9UsxeWptrHTiAIvHaw==","signatures":[{"sig":"MEUCIQCErMzieJy4hymbrDFd3EgJj0zEQIX38xvy1wcINZVpjQIgAZC/Rg9+pxOkp9EIP05UevS+wnvg70Y6uXFOmVPxBmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAStCRA9TVsSAnZWagAARrcP/jq/kQB7tcrIU9CVoTRP\niAZsh+WGSB9Y4t7YZMwD/iKcnN7ouY4UqMIcX7E0HahJeG6nIIc7EZn4Gf1e\nvjCPsN7/5mm9uGhAGWoilGX/nKtU/S3bV8lCyWpGwLWfjqtVsAcAN2WEavpP\nNqwPKCsWfzobTxL1mwCuwcAw2oPGjF3bl+9H4K4Tt9zVroY1fwH6uihYfFF4\n1LqlBvbbfm7ofKvwwnQ6y/YlRPY8ygcB9K9TvEUlD9GZ8caZ4YXww7aiABlA\nuSDdlX8oqgvkyWdbEVWg/lnSFCx3/RP4yuOrWr310sVxe/1hCtbTL7plJ8bc\ny6a96Yy2elQofkyVE/wJbJH9bztrPJv1N9xOBt4BF34ll+UVgnCrl0R2Gjqe\nfXLSFZH9yR93YZ6hnSA4g/L3uAs7/ptvu5HbsLnSAJZ3xDL2W7Vd7iJy1EBU\nXyx3VzvLTkk+gwbbIGC2N1d3StNxavSPtW3oPOQtJS28YJHWLiaNS9a2lDeH\nBB9ede4zeTS14L0q/ic/+MSC3yn5/cgXD5ylF10Fo0ydPfVPD/VGsjCQHfYx\n/2Bw8McwMD3K03cQRj1UCfGuAvG6+o1ljLofibydFalg1XDXMf82lAw3JgEs\ntMcK/8uW6RNGgHcLYUf+Ye18kaPHmAHSLR1qNrTBcr36y1bc+2ZkJz9vLZ7y\nH+Ij\r\n=Jqjz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2e60575da.0","@material/shape":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.2e60575da.0_1589904557136_0.7245121364068818","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/card","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d34937efd179b7350c0286f33483953ac3a4399","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.e3eacefcc.0.tgz","fileCount":19,"integrity":"sha512-CqRHchdjVlef03ria+816Px/cXYmqrN7DLyzJ7J+QcpgQbeswDJLzbD9tJAfDVvQ9NuwmxvDGjr7qhHK5zqCdw==","signatures":[{"sig":"MEQCICu8aVTQpEe4mTaZZ1wFuLr1HSVemvCi1hhQPyWB9mY5AiBAPdOB2LEnfJK3V7yu3RTUsg0Ugqy74DsDsEKt+Cvy3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmDCRA9TVsSAnZWagAA9lQP/iFkbJYAarFdIUMLjCBl\n1o8iAqQi/FEDnqNGxSQ1aeJhpzMgAUi25C2gDWKPYA300H1ITpcmtXOFxKkt\nM62t/DO6JggNsTpujdBn3JV1mbJkoJcivuYeeoOXShulpxiytcQJHsyAhmeM\nuKYx/Gi8V8v0XRVdMgulD5nTXMoEU/ffLeSr3BYYk2YqmzKQN0RGy735ow83\n7kRbyOBEyUNgrPbz4S9mvZMbKAvtIPj+HaOEBjOgVcIP/NlVa6VlWiwnadX4\ni8NBii4FdIoKFkJ4nkbnU05vtbMb3m+lwLrRDyg+TK6hviiITLM5jrxXVKiw\nsLeX2qfhMyTM1G9iTvu9E3GgvBmFcOw30MmyjoUY5nBpO49hGOlsTTvTmUlP\npBkw3vnLy4ZpSMd28dHNi7qXMzLoNkdIrRgx3O2TVN/Pv3UAiNLZ/Wm/Wh9i\nGzq+woAjR7OCAn4EE4mbrFHaSZEtcPAWcF9pc33v6MvKdJiwZilh5srsh3Ex\n/yQD6y3wpV3sszYxyun47rapBKCs02auBGV672469VrZFAR7csRX46iE9KOk\nmSEvLH1HmZmjXS3liIVXcvQPau3Aqb5nFlxZrX8ajKF6UiMDGAbK4f48LUe/\nutoiGxwWKko9JZ6U7Ft2nHch2LGzzOpwzhGYAhmNjWX6h2uIuQkXm5z/Qxvj\nOZyv\r\n=maI4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/shape":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.e3eacefcc.0_1589909890617_0.4204069837004045","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/card","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8b9c5d44a34558e1cdb9c8732b79fb16557b3b4","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b065a4d2b.0.tgz","fileCount":19,"integrity":"sha512-U8g1mCIoHpLD8WnIMlow4OF8nUBSyEfsWUlFYTT8mlIg2EGul5pZRKtKNVT1/SC9ul8bEzXw8AHJqB1SKZs13g==","signatures":[{"sig":"MEUCIQC1ahuyibNp0P3rH4JC1RU9vCS9l6QsoLpyQlVXTvA3YgIgHdKYfZH/lnwfP00k1/UXK9crb/47Jg6+vOBEEW4y1Hw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBvCRA9TVsSAnZWagAAFrMP/1F+EBpzp67MzjuJC//J\n9AL60vBCDrCIAg1e36/sD8j7HHGW8AG71ru5dP8FociB9WzfmIishNXup40U\n0SADbAIALbIWM3XBRv2y1uhAFneiW/fSoBQc/0rtqlmIFIumK+ONTMHC1Liy\nVU6rzzyx/fnfYeH3CigeGx1K/OD70wUMkULmeGi9L1RCyJyN8kgL3LHbQben\nHRUBi7bMdKMju3mOBkAsyIU6H/Kg3WhzWPEy7BgP+saQag5gENm5Uux3PMJT\n3ZYAMLLseQ87S3IlZxBrzRF+wKmDsYS9/OIB5bkAfuUUtp7asaKR06jGdUrO\n+O0PEVtKisGNbAhmt8Gg8UpW/TzjOBUo+hOKe58Ul5xR2Gu+kgFCie5tiVIF\nowKD2yKVpxuYPhCI7VFML71am5Npdn2KmmmhbhYR9DSn98Waryg1+0Lu9DLa\n824zG7jKBitoZybD6vQLm0I0p+vqVP/EbaiyPKkVFXe5n6kXfFo00HGwQwtR\nNo3Ldop0ITER5hxb74P1HmSAiUeCYV2+VnELhHkPxTVR85ThZ6qvJfv1eBWI\nVc+YojwIttYtxvCPfnvLsu7COMq0NiRPnTy3hXUiEmDZhCafMYdbYWIHT1Ua\n8MQGh6wZ2lyTDwDIBh+VaDMRn7nHJBW+s9HpUDzhWVM9scHNq/06vU3e25OD\n/yTL\r\n=LnhY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/shape":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b065a4d2b.0_1589985391425_0.24076659706108883","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/card","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9166385b44e7674fc8e22e8098a86884c51129e","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.4ebce8d78.0.tgz","fileCount":19,"integrity":"sha512-657Tox7OuTDn6FaAQ1LMUIxKCSUilC4XKNiJzKytabxEbwySgXJ7SKHz2n/fjvHXP6vujytKgWkQJOur23z6nQ==","signatures":[{"sig":"MEUCIHNHTAx24gCHMbJwGfJAWAgzFvkqeDpzeHqp+QoTbEVAAiEAlBQFo5sWyW4FrxRBl6pVlyaJHBdlwF3GwVTQ6VmyEl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgYCRA9TVsSAnZWagAAb70QAJRSQt3Ky0TdrejwjAAO\nfrwUxtFk1/dJ8ujozI9lWxqUS7PY7BFLM9GdQg+EyJEbCxRFeN2Kq7u1V3Rt\nKe/ohqrphnvph1A5CldDbCddWFiSX9LPaMBrD41fgFkhtVkq0C5wz9IDLHkJ\nmtNIw36CpZuqcJ2KPMaj4aE4/AHlDrwh3yzPL23O9yuurRq1nu75nz/gRAaB\npAMNkxyEz+HWOZbHrftsmI4bfgyJo3Iml8c3AK/v9arzy7OYUtgcy/UfFqhF\nct2mrdok1sCGeSAGZRSraal97BeVNYb/u7Bz0eEIzuzpReImTIdV+Y0ABG11\n2nL3SKaGuDvivJfPfySD0TM41lIVfGUOzBIOikoegJ2iPQU98Wf2OmPnf1Tm\nu0HgOpzN77D8ylI+YmKsiCUrYPqyW4jEQ/w2bnF1xdyKR8Xf+hFG5E0PEf1p\nf7juK+r1h+yDo8Ty/PT6VZVTjc1BNPOp1cl4vnmjnE0nFaAX9K+qYfpOvuJZ\nGWXfcPcX9a8S18+V7PrJxK58QJu6zsXrlbvUaQo811ZBcAN7ClmupE/ycyL3\nTSZkjmR+50lxTF0oAJ3Stzd5c257gINgnW0V8a3znDYc+MZmQUsizrzslAYD\n2Rit22wRAKgS8CklEZXHfLVpiYShzJaWvSsP8L1hIHp6cOGH9Tf+RiCWm+4R\nhVEz\r\n=IgIw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/shape":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.4ebce8d78.0_1590007831442_0.13395639488152966","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/card","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"312af3cb4a5f13d8b20f751767b1678ed4446289","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b0fdca492.0.tgz","fileCount":19,"integrity":"sha512-wMaWMIMfTEtcF86aHe6MHyN/dxlwZhPgii02t2CCXG282qQFCASsj7bTO7PwQAqV6tzVddIxgCf8bcAh56n9Cg==","signatures":[{"sig":"MEYCIQC5hY2t4EsucFHx98b+o8zazXPTMxVUW0jklhykAhs2/gIhAK2sokjBFSa8EvftuTH8N9cS/KHIrYcWvdYU2SHru9Qo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcXCRA9TVsSAnZWagAAg9EP/RqdXKb6nV5yQB/o7J45\nITqkubLskJIXkwGfAXYPU8WUwhjSeRh2I8pKNX9vTS12UCk9hqF2LvOrFFua\n5By9clCQoCFVX76IgG2fTqdU9x724vSQILPqpfnD2dWiUFl6k78eU4UPu3dd\n0bg4huD60oLZiteD+wU9B7buyg3NlumXskMvlvOzHmuesyraHqh/wff4hZaU\ngzL4YS3RKfBe0Qpe4MsQ+8Ofa3qrAAKFKhKTIxSpB4ZAKs3W5s3NhpH8oFMi\nRTSi2w/70WfHHAgcZzLFhz4OxO71y4DUXtgR587AaFDzf5Hq5YphejN7h2BF\n7wNK03M+gmubmmnvG3OK4uulevyQhGcj241docuIofqjNqM9PFDQonLYqppj\n7PkC/UKlj1csQrtYXi8W0wsO6lhtcv1EUfr0KniVFsv5GjChyJ56M/Dru3WL\ncrPLjG8RnBcXDw0SDtOjayIBMqoMK7gjyTA6FRh7vJ3YcMbMc1vJYxzcCTmO\ndH00SPiAc/VV/Udh242YjcvYjkTK6vz5gFlyEYHgPVEmPSOkweeZiQKLR/A2\nbwMuRx30G1WtjE8LBkhTfO07yxj5McQMhoNWdKVkByR18Li2N8wTGmcahFiB\nvUH3xAlJef8ME76xUe3GQkcr8mR4IX8e5yXltyNdHhLhAF3YD3AbvGiAn15E\n7BXN\r\n=bhsl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b0fdca492.0","@material/shape":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b0fdca492.0_1590015766897_0.1438053276612774","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/card","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10a903f64e2e4c884c565d79a880188a4bf50a4c","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.c67667e8e.0.tgz","fileCount":19,"integrity":"sha512-JBJIbYY87Z8kxM6VHMWgUx8q9XC4IUOo2tOoGtcpi7SEBqW0b81HAZbPNcFLwNkoSUvg2u/IXrGXIoQPe7zlkg==","signatures":[{"sig":"MEYCIQDG13GK237NnCabqrH1X2jD8FMXPeiSbFVshKOOIp4ZUAIhANqaddog7+vonw+yU+wE8dKf0HoDQX6GqQJtssxEbHAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxaCRA9TVsSAnZWagAAvL0P/A+U/y/zfVYEEroOpuRg\ncro/3aLE3R1Dekgij+PUkWjw5OEILWBchabAzVxMi9/qEO9iuwlHbYXWlTa4\nUaBS/Pe5QMjz68Ufcz56jVamJMw71vDWfYwBwVcq8MMLoCHS90I0Fo/BcHlP\nGWqQR4eoGH28z/7qbTS8W0jo4st+wP+vWGF+o1JLBWciXvJ53JoMd6K1p2f1\n6xUxOnRtpxJryzADhNy7xZjYLdtDP1Gh+g/cNl5Rqysc2+Ty4/ExrKNb8QKN\nkn+znWZHbuvcIbCmU7a6nC2SOfvxQP4Ynz62KM3yDUUCk51/i06vNubTKBN+\nFQ3jRBZ7GjRIGJZ0URVRdUy30mGotThUptZGtdVOSBzscvj810mSbhVn84/X\nnKYc2GcG4FfQi39EqTOE2jWHJv+/zuNcFD+JwdvuGqLBFtOcdjjlV5FDOj0h\nqsx9ZqJiTAiv9xVZ9BNPForTrNPhvz/ilcGYFNtNFTEHqwIw14vyXfEqarMT\nuQaLU7ImGrUr0ZRnnxU/uPPMKk9f8qf9o1AYnGxQYcd64/Fo7eRnxmakMcOh\nd0EdTuvATMhbOVYba57F3ykDR4LQDqTnOfpc3/4FazqAc7b5EcfGvhcObZ8Q\n2YCrJdi9ZaHEzG3XMxhbmgwq8mIT/tT9SroXnp9WMW08gqGHPaRIeb59OO5v\noRK0\r\n=qjrP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.c67667e8e.0","@material/shape":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.c67667e8e.0_1590070362170_0.13327334599131513","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/card","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28eabdc744dc6d39a5a8e13a30fd4bbd8901bf4d","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.62b5f37db.0.tgz","fileCount":19,"integrity":"sha512-z7pjYfeICcwD+HVk7BUPtki6XSpZ7uBtY2DSMcgOmXvy2Acl+FGNeBwEK/gxHs4mUmQRtlBg57fdZKZ9dc2OIQ==","signatures":[{"sig":"MEUCIQCcCcjIfNXvH55hftdC26iQ0QCs7e0InCrPsNQ54O1GZAIgP2mjCF934xQ4uR/gVoEGCoMaHqfWk6Dw3WlsE+nMcZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8nCRA9TVsSAnZWagAAOQMP/AkeTaZA6GxzFrA9uPXV\nmFnD2Yu9wKn2clHIs462NkdrPCDSnbtxrJeWcPB3le45FbBPCOSNrzv809Hr\nhxja5dsFTKYYnWAhp2OED1ChR+IdaPtpS8VS6bq53kir8VjvY4juCCdyGeJn\nvDDVUbOBntTM95VuvdfEjNpoF5uAp/+7JX1snVaGB4UBaGQ4zOptOM7opiCj\nq56ttnr6IR7C3lFGeYs6vDAqpXy+iY2xszG3Npi6FSZHgc79N+RYAsxcafrE\nRCNy7otcG/6t0ISnnxDhCKvGyuIe4GGS7SjIIG9WMolLEZhqIxwUnZDzlgry\naDGy5zjZY4eA0TMQetBqKK+eHaxSwj3jSuC0M0LyO37NIEvkNuzsfFzILFlO\npO543QCpo0d8fJyneZBHEOhY+Zy6GrrFaUWYNpNUJb531EYfljBmH7r5MccL\n0T1re0rLsSnH+/Q+7il29nj0in8RimC/+VWVQXrsecMasBgSyH1LrxAiJx/V\nXQR04CiAPTUnjOpRjQ0oQeILnc04TXA72GpeRpUh04UBTnd3lqqQRPlQVMIt\n+zLBRoIdJd+YgSQM0bdbddJu6yOXmjiY5nsL1weB+uZiN5Y1CAKfaXid/1KN\nGR6s1Mhw20QY/nPXBMy/b8AIOOQQWQjDUr85c8HYdWxH7sWTqOhMDlf/dhek\n5kZA\r\n=8YFG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.62b5f37db.0","@material/shape":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.62b5f37db.0_1590079270453_0.8956450485948253","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/card","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2464a2f6025548f2454e5cc8dad060887f04320","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.2e218dbf8.0.tgz","fileCount":19,"integrity":"sha512-P9EBrJBEujbQZ6tCbW/NRmoc+LNYTUUtCJTNK59i6LQ92MxUiL8SqUpidxJxRk/Z2JaDhhi/i23E46VULEC5wg==","signatures":[{"sig":"MEQCID4XYDoOOm8Qy+LapibJ4uibo3MQG3lqGJ+vqMNpcwCZAiBZv9PC7mZImhKPpDBTBkz/SvbIaDAa5P0SPYzWWwmhtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQMCRA9TVsSAnZWagAA7TQP/RWppIwnFnLiaaaU6xMY\nwx115vvoPH1iMzSqWAXTgEHjE2cAt4vOT92uZAnGFhIYvynpIlgTcGG9LtHZ\nuU3brfLAovA5tDyFBIRKuEZwfOetjh/PWe2UwK4EXHnaYTN+Jzd0ZmjJRpo5\nfwL6O1tCHT/mbtUAMN0NitSIouw5xvXojuA25ufVkj0VQ2jvBpeOjfkC58hV\n7ELyp06h+NT9/K4Zuvsw3yZYmyW+aKaItowxlWW1FMDMbiADASAe4wbApf8t\nAjtdV0fnkBaTp0xJAEXmYZUgD7McaOosV6RWfVx9UANfp+Cf6nZfm9dBP1s1\nGiAfGBKNsPrDffQG53Cz4mVxK28MCif5g7JrGSyYH+V6n3Qm6n9VlCQU9PT7\naa+/Ny2R7KikzwwQitj/JSJi/IyOxczeLEkUqBqLYe5L4A/lEmi3g4y2ZHFm\nRxCtPTQpqFprtniuhCR1UVxfkNyXX7ZYQtWKM0Aj2cjOIesXPRWsCHZQQK02\nuwI/leDW3vviexdRbJ7GOiW7+ColLlg4dpNaOGRbxXkYiAVIpluXp6s8Xpgh\nr0Yh0wBa51ZE22wkXoNuqJEztry3He7wDLDhyhViZ4+dX7d2r8093tqKgDeX\n4MyYLJDGGsctRce4QHSmFuxDMnjIr14dzJU53zvbGGmpX31fBl00Wgkk9wkB\nrpKx\r\n=W/jH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/shape":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.2e218dbf8.0_1590080523746_0.7640847478251798","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/card","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3b41c0ff005c47f61007231bfea37683ec1feee","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.7fd792bb9.0.tgz","fileCount":19,"integrity":"sha512-AWmDuw0vZrut0qfYcxWxTfJ04qQp7KIRTAUzbpo2WTyPPP6Qk1MvbPhcsovNq+LfsZXrKfvOc8zpuqNgU66qnQ==","signatures":[{"sig":"MEUCIQD4OUvPLs8teCYBc1NJBmi1sxCXEmpnUh6Gt6pQyGR/dwIgQ+s7oSTFF5sfqckJQKBmJXEPUakeGbMOlKQWe4uGd+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcKCRA9TVsSAnZWagAAL3YP/At8B8qa2Hl7hKGMB7HE\nhv3gKMts+xEk1vujUDaMX5mD+q91JmUtrBjFAJBUgXz2/fDbuXZeuF6Wel8F\ny0TXQDeSXLoWjObC/lz4mzMpE0JGdXkLEuz3WV9abEjZ1IpFOmziYTqjmKTG\n6ooCSdSkV24Wdt8vukPQ7Dt2DWWd7f4RcWobiJYtIjwjGLIPJ4VJeuwvKOOy\nbdXf0OAi63GRyyt8rj8d14BcaGlzOWaT+rrW8AY5DTrquV1+8lAT5TR5RKsg\ncxU98FF/8dzgqAGS/bvNKbnV4PEkpH6s90Qd/hfX6bfTOCO21zZpTzpBOQxy\n2N7VGTpWm15KMi0PmbZ401K4wflHOlGHlAyVnP25K/EmIL7KNNf8Zpamc47q\nDANYdwX29qmyF8jM4HpxXBo4bL3Qg0cwI3Kl1Y2tseOIk+brrP3N2l/6dKlW\nFAyN/JRQd9KRqkHGT5HTY/C3ZPRaWSF+JUti318C0IqUOYIHrPsDUvDHZesH\nZk0XMsMNy3NBEyTd9sPymH5bgPsB8DyffNOoDC+XROU366lZJ7gTXPdZuAeM\njiDnaE5GE5psyr9ISwA7LmrGCPjZ6Lrx3YrAefOCGJ5n9dDUL86kf4vsnQtN\n1qfYFqhrdRLCx7kkREVh3TEO6FT0/G+DIJBPwRZ/4Arru3QuOVIB/9bxMDsX\njZoF\r\n=NJdb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/shape":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.7fd792bb9.0_1590081290507_0.4652941697651798","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/card","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02872198115d4b6de641df2e5549fb626160cb67","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.a66493cd8.0.tgz","fileCount":19,"integrity":"sha512-aDRQ0pX3A+ry1ozIiVwxvVjFBeVWfLzEPhLcZTNaqlDv3HJ3KCZ+27QeU7L7W6j9WlTzW/9Lsdf3L7aA4xH5IA==","signatures":[{"sig":"MEQCIBafK9go2OI8aahXKCkZ344npqlKfNFBxp7rqtP/r88AAiBWGYPQjB7l9Kas9ArjT6S/XtmMp1NnDOUYWONLkq8x1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfSCRA9TVsSAnZWagAABvwQAJhxddRMVY1R51wKEnQG\nVBPHf2kZQNthnxecugXxkXmQL8vVcpidcwnnBMAdvUQQ7/3hONbgLT5TgR1M\n13OqjbdLEqTPKwy/swroFpFEsfu1VIweQui/RBgka73yIy1QyJF9fZDFb9Mo\ncAf01gSbZcJK/6U7ON2oAN96uivb3pSLFb7Q0j2LefBjGQK4HMkEp234th7B\nTwEywNQgjBEcxCTx9hon8XOCniIRhK5VzQOOgSUyI1+JoAHRC4mYQgkhTqhv\n5iJtRD9oS8nnEEE+bHlTPRnGkECMjy7gK5d+0EPMyBjYQsKPvU/r+4YhrG0z\nX2JTU2IhYnIPcUOxwfRmggmuIEowOVyIeavM6FklLFCqKohUeU4K3X59BHZy\n1RY1b9fONwoFeUlJwfujFxi0Ivp5QBBiCYS9otvyovJPqeYGEkLpp5Y7qUBs\nT/rjVAfsasY3Eecgtd7/+KaEIg2PqyPYwDvRjarnbGax1ezFgoEHxMo7WA1y\n2jOmrN2nrXkmHGtK1D7YZJXh18Hlb6uVIh6OhrFtGhg+oK4tELPtrZ6QlFpq\nvIswmV3SlVkCj53hB1HmcTYe7znzaVZ5REyCJzs2wVd8SUJfwIVl2vVSJ2El\nAUYJBd53zwyK8dYKVXPHAz04ZFNaLlADJocrkQqaXpZDFUd6sxxt6sKfjY/e\nMrNj\r\n=a/8Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.a66493cd8.0","@material/shape":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.a66493cd8.0_1590081489797_0.5052416616529463","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/card","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aff9b38122e0433588af853cc6b23fd1c4d0aae0","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.da05f66e1.0.tgz","fileCount":19,"integrity":"sha512-E3SIgc6798eR9EkWb6VXizjVPwbJlBrHQt+U6l3auKwy1qE1ZlecPiPhn0ZY8AO9xofIzKiiwqZ3NHA7Y4UBNA==","signatures":[{"sig":"MEUCIQDBzm4wpSOCgDPkMlIhdOd7nAIvK5z3B408nvNev0PGAwIgPxkB/thwmgSvRyE17MeDOGaBKL0i6pukOczFmylxs7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhQCRA9TVsSAnZWagAA/aYP/0QAfwrL768biPj4JvPH\nyXTry92NpHCoHraomjk1ETTxA6RA0iLlUVfXoXybAKhEwh0VvNMsLh4SAjVY\nrUf+6ydqRZvcAGfK6fjgPb3kxT2DAaT0GpTPYMsEu5VQN6f6YqlaZ6yzJBfo\nxb4bKWzM0smi39Q/Ock3VmtcpzAH5baNrBU/v5MG/xmw43gEtx/yBAgPYoHR\nm+FZ1LypGALlMWFUYgKhyKnMwFb2jJ8LUQm0qlfqAg4pP2lqwokfr5oFJRA9\n2I/cm1vjI0XzHotEce4YSrhFH30Ie0VNqyyI/N0VKCtirm09VGCG8oD51tMO\n7lmHEzJ8bCO/bOAW35uuGb+Md5JMlW46ZYpi4Qwp4KUVFyZRB3WOnIjSIIZ3\n3DoTqdTJHgyBhGzWti8D0QFVLsr0mz/+nXxOs6w0nFZRZ24Al8DpCSqiR4sI\nNWL7p+aHxQln2AmT9EL1ZPSz8JQNMzg6kSQDvakit5rKVBHnBT7QMeVJY7VO\nt4AEiex/dRChwDd7sl8fONz/CeGKUw0wg5Bq3MupEUEYUtYOWRbOr85+cr+z\n+soJZQ+aQGnbvSRFrHfzOHKB1SXPo4vL7RCyb0+uiXyzlgjZ7ZBJpL2O8WVL\nIV1DvTUH+i2UT1E0JQwG4gjP+DyuwEDe7iXriNpChfHSmeTVjGjgf8VaJSV4\nuTka\r\n=CrEh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.da05f66e1.0","@material/shape":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.da05f66e1.0_1590081616217_0.647525170344667","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/card","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34e814d6a20a848a5275c02a454c8c9bcf749843","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.740860e78.0.tgz","fileCount":19,"integrity":"sha512-TqpU4XeNyQP12vURudVEvn2aN5/b3g5DyE78an08pen6hqEZA1cBY2xahji7AipRD1vL6S9f39RfOtbkHjKW6g==","signatures":[{"sig":"MEQCICrMkbkd60DN6m3XFZF8l9ClMPYZWOUjtHuYk6z6qxQ4AiA5XaZPDPQjzx7jMQCh0C/np/30DlgcXPx4aonPDaR6tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnRCRA9TVsSAnZWagAAg/YP+wU7m1+BspTgTAdBkfg/\n2exxgyU4BkN276y3mnKtrJHW9FeiN4Ph9NwmUFgr6xlEqizjdkIj4WgjtrME\nRfU/Mes8y5FJ3x+yIZEORiV/FkqaB1GNa4p9PwPeTUt27vcKjheA5qLVXuiJ\noWIaarEqGHwZh1BcKrJ/YLDImaf7a8omeDowa46P152+LtruP038lNNKLex6\nlqcSyZz/DAw8DU1KEkCYxmiN7UXCOTXhrgEVmERv2ImTATJB8rbVQ8k9YbHC\nRnYVZDlqSA+SR4Cq4uBuI9mg9Gyiyt4WSgXMLY8l2qw/68W6J1dBg0qjreny\n9ari6kXx+Bpr/CeBwfFdxnu+sKkF5qj+jjE+zYTF8vQgEZBrs049LujPLUQ5\ntumI3j6wMbatqL69b92RyGZt3PhL3AFsR82AUyWM/CrgOlFjpjLJiFbOlfU4\nBh7BT1f2nrjnaRh5b/uMWAs/GidJWYaJxqyFJIIdl38mqwLV8QMAdH3EY/qI\nY+iYogjNlrT4fuFgegE1hIYDnj4YtXjVxGoT80YJZEwHfP+4xpBiLgJeFUG3\nhf7BNgLM1s+4hBAJknPYxNRf+H/tYanIw7OFhSZvdQSJMcoEd8CjvXZgT8dZ\ndfZb85yRbthZk7XJJTI1/bp4AoTTb8tfnarA8rujJ5+rBD6qh4n53zheK1Wx\nitnv\r\n=G5by\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.740860e78.0","@material/shape":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.740860e78.0_1590082001134_0.617468959040884","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/card","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8661fc45dfd7dc337a55a72ca8d08d1a8f2db9a","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.5cea2610f.0.tgz","fileCount":19,"integrity":"sha512-99Dtmh3ZIsnlS9jKDj0fp5K9JUhwJoqS/8DsFOm3x71Xa1HSlLeKMeSupIZUgUBeNdaZ5yXhO4VIkJWBOVStvQ==","signatures":[{"sig":"MEYCIQD+zO4pZvd2XsfL2uGCUwhDYqG6IyuctqcVWYlK/GpMcAIhAPuHYgUerLvuBPYunwiv/GFW5UlBtEa+PNddwiNMvllt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpKCRA9TVsSAnZWagAAVSMP/0l2AtFfi17g2Y2nRXXN\n75XQyLFglGuY1e6cJUV67Yk+5riAf4r4zQMJSjQMpahmflBPb/slf+IXZ7RV\nI+dRdVx3raroacdePmur5zmkw4RDX1ExSTzVXAWZMl5z+haneIcWoyEOXy6o\ngymPWVfs2iUnPrsKQZCYb8CcQGTBXfZR7pMb4IBSn8mcehqbld+3nudn766U\nXLRUCc4/UvhUbETo31HjOL9JZleXyD22G4Laq4ygg6akz6XkchwD/r0GhiMn\nYL06142sfObrq2BQ5wEnuQ2RJX+1JSslWkCy/0VYtZlMlkJxG4gqYIIeGAAv\nemM+ym4SpW62pjMGzK5o0S+WfJq+YSj0eWp16xL+fb2LfMAOijbMeh2/f4/W\nubJIr+qHRPLUdk+e5Kfr6FzZDqk8Ekz4JzGwCf+/KdhlwJHD2vDb1YUG5ZPM\nfSQLeDrTLuqcb4zoMT8g7C0JW4Dziq1dfwyR8EB+ZTVTAhPAVKOnddC8uo9J\nViqqpj/nXOc4EYf2LJpt13V1Nx7U0T2V94lOJG1t6x+XZMuOaZi+qP0N0SOd\n5W4xnQxpJU9Bu4nLtRNNwJ0pmDJYKn3VPlFEVyo3Vv+ubVqZhNkTGSPQ44sR\nhjbAK3j6mtvkQKzj0UKYnSA0xTzsQJ/fkvKphuB4/CYx74IlIq7GbK/AefBs\nTU4c\r\n=0W1K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.5cea2610f.0","@material/shape":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.5cea2610f.0_1590082122203_0.6874958308194623","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/card","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"332f0db5c5e27f4a4d3f96400322aea88e87b4db","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.cf7747ef7.0.tgz","fileCount":19,"integrity":"sha512-QXymB+3BTSYQXsAWOz1u0M2TvxPtPWgiP2dZg9S9ckzKAV1EzZS2dtvzcmRRyW/KGxn0bNZnmuxBlfVMuNiA2A==","signatures":[{"sig":"MEUCIQCdqSaIuyZq7EwJcBQOvAzpvOy/m0ZrczD/FIl/y4XysAIgNsBl9bsYZcr+wLgYbm9OcstyeeI7razts17u2t7TUBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpeCRA9TVsSAnZWagAATTwQAJ4OuGT3HLGADwgFMDJP\nPVwtWXSiiuq/Wj9JydzU+YGT09UwjaVLLsna897hpgo2ex+BcIu3qhPuzG5M\nH5K3y/P0Ec/iugtfzI/lr7dzjhD6ygdnmy5laRlMomx/nDsyL5HPIjQ845+z\n3d/rzx2RbuSxxXIA09TpdqoXQamY3qDtYTr9EYQ3/kE1NhcSRzDq77KmDoY0\ntQ36Oa5MJKk1w4K51xqGFeYgLt7w7sJFXq4cl8xi3m9VyscbNfZP8zOZXuPs\nlNy0JfaVcis3qE329qqCgBu8w7QNyTATzTwdkWngY8A0lX82u48ThwY9rUZ2\n44kegmrhcoKKFtH3lD9UC5cshedOqtGhMYcz/AnQsZy17Z6yH8F4U3v9VnuY\nNihHzxRueyhx6wofV+S0+KXO0yr/9sosKeDb4gNUpRqqM2I/+KViw/ic3Z0U\nh7/VN0BsvV2fKBFNtgwwgE1THaZyFncxaHTQDnx94rfAo1U8UabEu0uRZ7u5\nBMzt+sCd8/QELgfce82DZsP4UOHcL9gN9/cJUy1BVmaO+UAMGosBOAKrt4LH\nY19GqJqbnYBnavuwp93TumZ0amfHErJxZZXf9llrMDPCpUQLjbQqt+y3pg8Y\nTMVtfsqUPC4dTCNA+RJc21glWCAcBwaOPnbjbYrSEjdFa8zv23tBOvBZKlKT\n6CkQ\r\n=LLy2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/shape":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.cf7747ef7.0_1590082142326_0.08672934750790229","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/card","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"780f8b1740d8e40d58217514d068f8ca6857e383","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.862d0d7bc.0.tgz","fileCount":19,"integrity":"sha512-mMuvDx8ystGQdaCL707tRGYlxsjm6gDjbel26Y9W6k+ZF0wS0Tp2WDJT5YKsaow46D9Y47VA5sbB0ltb/bDaUA==","signatures":[{"sig":"MEUCIDeqdiEjsvU3J2dtFIYbi0XFXEsMjJZxiYZNDCwYc2suAiEA6pVlSXSTqTXsY0mC2MwO3b7tGHFySnc4+iun/wlCXEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrr/CRA9TVsSAnZWagAAdNIP/jxwMUdKeuBkq8Mxx8Hw\neUc/zIsPekfe2HhSiStOZriYLAGhTvHm/TeIPgfayAZvDZ/5tJoGjrBR+kGl\nt1qLiNP52wcPro1xfJ5TZ/+TToQUELPmb/MsN7tEpjTRpRFSc4XbA+SyiIeW\nHPAoKcN/OffVRMi7HFu3wCZeKhg2X+6R2YnCUhjaHrtqlr6qW9UYlFUvghF7\nW56ceWyEpP+46jDuhNpq7m0do3sjHv7sw3dqJ7QKQLOdxUPt3xh2JpVko5KC\n2FsCETsmH5wKFo/7zP4oadBsHRwWVXEwGTZMz8iOCM7cQS5Ck1XJUOAwO+ou\nY/yk0tODuo6FZFWrw7aBMdu536qh8Bt7z//ehlP4JEz2NDhmg8dwuKLv55Kt\npzObY4G//3+WFBldUZpJZyZLNTSLtTu+YTmr+hqvD2b8KmSeLYry3jJHOBL+\n0exw1o5hWwLH/FJGR1ymm4o71dlYzS0tzjUi7u7yRFjq2OD57XtTOTTlnE1S\nozYI+el92ssjN8nkBaZM5CO3+CmrTlsiR51rCmudUakdEGZ0J+sudad/HJwW\nENEgxm51mGegYUFg71VjmFxDEC1iNEx3xtTm9PT2dISZCP5ULpdQd7lBfl1t\nXaiG9JujV2T5vfzvcg9CUwFe3aoHbuBCVFdfYxWGAaVJ0cctRaVYXMd1A2M5\nKt5D\r\n=FneA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/shape":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.862d0d7bc.0_1590082301964_0.8429753743137733","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/card","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b831b4f351eda4d21a88ec77759a2e8d98e12852","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.0008c8a91.0.tgz","fileCount":19,"integrity":"sha512-rckofiVHxT3rqXCaN6eDY4Xuje2BBbRin/9N56r0p+5lLZ+NdHb73TDBadCGgYIM6cMcwR7eiFeehgI4+DiFEA==","signatures":[{"sig":"MEUCIQDAe6Jms0rHoDmrfNp0T08/aCpcRZd9R8VfUFyC259L7gIgULVNcF57ktRL5TDL27kVvlFUqtNu27XlOPdGrG7/V0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdxCRA9TVsSAnZWagAAfs4QAIg1g9tPPA4syfJCFCAk\nzCUupLGt3uR1hlhZp1swXzHC4ja+/CWgq6oCxe55puG6pxjmfTJ1Pmedsup5\n2xafGJGfNh8O047RyiykEJOPfmxn55e+rCHE01jXI+qFayNO7UAildRljz+c\nU0men8VKpxmaYe/x5cujg9BkYSYY3N4rXN2coURDNvce12uxh7l2PX5D7upr\nOs0ovDyDRGxIYX3DnQxQ1PrEBXVvj1BvmD6aE6moPJmjiYIDOuJzho8MRmKx\n2pIni3ft2Ps9KRE9O4juu3LviQvdIjwE2V+qdcXA6pfX8KrazCZgiVpT5ioC\nRbx54WEQSWDinOgdlB3l571/ldgEPCASg2pkRfbtW/mdZgkyL7+/xSQHwBEQ\nQqENxjc3Bdfmzsjvfexnoed5lBPkTXpMephcLZ3CeYNubKdQI3kDh9oxpt63\nIPmafuw2tjom+02wCZ72JI8QClb2TDKLW6QfW17LxG6i4N34KJSDFZ0fDVEs\ncMKG/6+lS4u/7LolEES6k7wtGqWwTAvcaDEmbdH8bJeMi/4ZtLwrRaSBwcBi\nE+cf8lFY/AKhiS0H+rnev3HHF7d2gza9gBpK3gcIkgAZ0d40Gnq4PSqgNNi9\n6LlCQqgdWkwCmvdCWPu8/TOTaXdPMwet5rfWNPdaVGzNr43gvHFLMeSH8VCH\nkDbP\r\n=H1LO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0008c8a91.0","@material/shape":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.0008c8a91.0_1590089584634_0.5220533552040751","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/card","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5810f7e9b8bbe0cdfff8d61717d956fc26f412d3","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.541638fa2.0.tgz","fileCount":19,"integrity":"sha512-+PHDjPVHLbAW/OOj1WrQuXvnit964TjgZ6wsHBb/IXkGJr32HF93ZouH74QHElHhcikfAL5M59M1QkeE+YH8EA==","signatures":[{"sig":"MEUCIEKslDbl7pr5M8d+ZLCioE4ENAg4kZxjzbmyN8ngT7+iAiEAnBfLtBRcnD5cxwWIl9a7fNYerqlOS3baBWA7gb7xVk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextryCRA9TVsSAnZWagAAfBAP/ijskcdwR16/+lyE1i1W\nj5DOIrfUJgBUGBGudLHjgTh8VtmWkMPIL+ZkVMIMehktXFKAdx4rTG+vKBzw\ntJCQhCEl9hEzY92zbTs+pIzcg0idSSBNxw2+p+k2xaHgbwMCHsDL2CfIfWkh\nzYDridGaf+aEO6xm/HANQEQyXceTBPcd7MXZ2yvWIKQCs10cS+oisMvtXhv+\nCHuiEpaO8H4AeBa1eLFVyofUfgLB/IFcqrf8aDe6jRPnD9lvcgj+BCN1kzFK\n8DFSdfGegpPTVHwt+hOEZXc8+CAIoed2saxRcLw5s4UIKvXlQ7DmjHxhcevt\n3tHmHPIZCGw9AYnnuIbw7aJQcG7vN0sfMONmDL3TNR5dZeaxLZ2uqbvLgFHk\nfwBoQHEHbFXekkuq2z9aQhbaexwk23pCw0Rsrwe+FUBbHQ0RuD38d8hsVHQ1\ntsxS+zMq8v87RIur/6HjgPlBaN6HaMAuwnG/HcCuJpYpNwN7KDqYFrmt+7VQ\nM3cInG7J35DTcfYqzGjgOP95+6oBM3McnWFfKQyPEPPnX5chHEq9DaTN26MJ\nshLh5f3RCbkR//BNpgFPbZyxRkMrqGghwiyHWdN7zF8qmNGxQxacrclLX+5A\nCA/KBg/S52ka0C1Sz9VKVH/ecpbM+3s1mrPOIWAyXK81PfyJ1nt0xSwpvrp/\nwJJz\r\n=5FP9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.541638fa2.0","@material/shape":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.541638fa2.0_1590090481545_0.7777458421108143","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/card","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4df02812cba089cdd948fb83c3e52bbba8ac911","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.6167cd075.0.tgz","fileCount":19,"integrity":"sha512-t3YAAEQ20B250u6jvnuOpeOqbnVDgMBw8hj+OYtxbBn7kDPJyF6v4TEhatb12FExZqmLeSIAXUQxXS5DFxKJCA==","signatures":[{"sig":"MEUCIDKFQ1DLeX16nK+IGaXAhiZiMPDuTdFQvtBx5F0+EbhCAiEAt7Jq9Rqe6Uj73m6/b/XruKQmWrhAeGH5j/fGmv6cd9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKuCRA9TVsSAnZWagAAwbAP/jQQQRJtCIRRFz7KkmeM\n8YjC6ItKsv7+5avYrZQI41kiGK4cdcNucA/YC0W4Tqad8JXVGodr29YYTBDQ\npu10AFk0WsqNPg+L61woY95GzSaggpGfNp7olKnMCWM6sj4M/sd382psAboL\nrgv/C0/kj4WJbBb6c47NbaVnMZhPMTWa212kS124DM+DZksE1JlHkya+emDK\nvl/23LPm1X1wddUs7oeXFze0LjOlgXapeXfJYPmwecy4zn3CXRmC2zqfaz0H\n11yAdsfLaWF1siKC8EVXFNY4wWHh2Jbzu0tRUYIoHmcwDmYALN74AhUXyjEv\n+0HSIxYpFNv7SU2Rg0x1ypXfPRiq3gx1iqj7sFJe36Ng04hI19yXyiHaOg37\n9MkA6L92HMkSi+67ELHBf9uLUx/KZeF0y7oZh0C2U5LdaaESqgCekU1Ah2YD\nbiWX0BPn6u+eZtXp6oovFHavTKceqx2T5fYT7Lv32nJ4DjBuSE2TXSL84IVb\nAVmYoXw6PGhhMwriEuRg+09gpxoUQoIPjHmZ3srhW4PLQoRW00PZ5UfP+w95\n5ht9LalpKYQZGA7hXiX/c5vBnME8zyZmbqZDLNLeoVEUbinqkCQ67x4BSmxS\n59nRBGQvtO2jnHj4RQgk6JNOTM2Lfjw50Ed+/1xrLTBGx0d9C23Bq2/2l8Ev\nWR35\r\n=HghC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.6167cd075.0","@material/shape":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.6167cd075.0_1590092462349_0.881213161039758","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/card","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caf788ebb26ad00936e2bdb915f7be0036459f98","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.863ac1b0f.0.tgz","fileCount":19,"integrity":"sha512-ZGoeGFjBaCfY0Rf7K63rzgfzViqoTFbKacq2A2Ey3QrHUKBzjpHqn0n/0WXZr5fJhFKrVI8FPCKrs4XvLRp+sA==","signatures":[{"sig":"MEQCIF3822aanvVP2MKlPd0eHt+wJgANzAYlEJZOC8lRki5hAiAIuPvLP62tziRdTUTwIVnjpAnOiXO6sSNuggeEZxRHaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvUCRA9TVsSAnZWagAAUWwQAIf3ktnP3QxH+7Ebqza/\nHPuMwZ5faBRNu2rWihzNQ8Ayo/MoHsrhsCixYBjR57EKNBkgSSbcsf2PYcd3\n9fCIPP4Shf31jDUk12Ct/JhmHaP/WyaKDKNOgDmUK8aSIQydteVGgRiYxXHA\nolb8W1b1SmGsvFfPz358NhmQ4Z2bFEm21CiWtxRQ0OjLiCXA7jmF51ajQ3v8\nZp07kFYNqMasK/RMmcMKDq5fe7Gh5bB0g69JychsvYS2Em0lVURSzln0KylV\nVA5jGf/7wOu7Ni+eB7HZIbt5vmf+QRu2s+Y6+XbNFyzG6PWNvXoQaHXSYFuC\nsikoxXGxdrECdbG/CvKe5PpakeertXpoK7Vi/rkgjv32D31LUv2PFN7tXsY/\nggppLQGkeuJ/a2bWRo8us60nCDbuT9kdq+heSk4l8+xrauiHIFIpMQaXbJQV\nmhWKtEUGFDMNWeUUmlZ3V0Tr8Geumf1xkCaJMJwrfmRWWesKb+ZxuiZERo6l\n3RsYO77o66sUVbivj7GT7oe+ElieMzef1b7l/t2dTWFejB1jA7CmjrwFCVOW\nKP991U3gUNf4w0+qRYRIzT8QJCpb5iVOhIOe/VYOj7IG7LfALvfFnSj/5MPI\nyz0ioAIh8LQ44Ur4zmqHaW0BBMohezlytppNmwY4oXgwvqVdm6KSLD3mlu3P\nTcTq\r\n=QRRc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/shape":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.863ac1b0f.0_1590094803567_0.2270744256279391","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/card","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e7fd35c01f7ac655b81cf184484efd2ebb84aa3","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d30a214ac.0.tgz","fileCount":19,"integrity":"sha512-BKd9Ms1lviGRIQTAMPrXUqBD5G9KQO+8bibNACGr7FSZU+w+EaFYTJIFQejxYgyUsEPliIQ1+VKOU86cNmqB3g==","signatures":[{"sig":"MEUCIQDZ/ac+vQSBBvRDvfw7C6XrQd0H9hF8ERiYBK4MuodpowIgUc4EAoHzO8EeG9bEDufA0O7xkbCybSMy6vbPbrc167o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuy8CRA9TVsSAnZWagAABP4P/Ao+kggskcMOLqB9vYhj\nBqgKjcDxfwZg2fPbTkX6kqsSS+xN8oTvv68iuj7oenie58uB6ziNwiR5OdWt\nOPUbfOLS5MWLVzzoC6prx/POrLbJCGm4ycxLk87jxvV+I9jodQ6b2s0EfiDY\n3fuG7oXXGlx5MhrslJDooZsg6w3WjSHpemTJ+3G2QUWRGVJ6m3OzBC95WfKk\nzHJjJhq4aMg6gFvZwSLse8qkAtQAUoJtZqi34n8QLSajKkiI2Abosq4kwKmS\n7L4GH/o0g1p8JUTkSFVTSIFtwJrnNH7J64zsYvQVsrpD4vbtSCs40c1Fd45U\nNctCa4qG0AgM0g3lDz+s/5DCostxpFzoN24n9iQCmaa1A3oHr+OyKft9AduA\nc6esi7nhAbPwkyCE5XXIxGTJC/cVsnvfVeVrJZoUn6HijuCiJj72SVUjyKfY\n7mCiinA6F/ZbIkNYWyuAiYkeRRdqkyhkFYjhBsmLLYJBn7BdDn927/JQ4akx\nSEkGHwGHRhDgG8ywwy8OtB2tgFWH8MpeZj2mWWzead5L0nnG4rcwb/TFvM21\n0PTtOEhefUEkkrX/Ab7uq1487EmatxCTKQQe2opAj0Mu03N+Yt/uI+GZykSW\nbFfV0HFVZP0QJOlwkRolo2lnRxogWVUOsn2/RJVJ3uHErRSz2EVJ7Oxw+sAw\nTWa0\r\n=YAV5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d30a214ac.0","@material/shape":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d30a214ac.0_1590095036102_0.6891342997566723","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/card","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3027c3758aa5e1d42ea6eaebf18db85134b8b036","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.62abbc8d7.0.tgz","fileCount":19,"integrity":"sha512-eL/cmWC10Z3zH685v6K+T7yqmrWW12vlgObC7+cSysHFXeW3/B742T5VEf5iTvx6Bqnbclq2dqLGP/E00VO5Zg==","signatures":[{"sig":"MEYCIQCo1rIDASEj+3ALjFWmQXP2HJfmkNLROcoOEEEheZ0lPAIhAMi9V1iAb5uz5CnOK1kAYFVYdFtSEfH2uE/BNk5ZAgSF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKECRA9TVsSAnZWagAAAsMP/jrpA847zA9SG2gwMV/7\nU31E4JeRPgNrp+YtYYDrWYUrXzR2YkJTbzy4oLm2QZOgWAm55Iyq9iyQxJ9j\n3j9fk8VkrFKNYYIyJ6dUmUbu3pLdt5Vz3hlv0itMdgQUZAQVw6sqekiRFIdk\nvQx+NpySX+sNmTTTjtxwDSI3Ejxu+6UxhqIeStU/iCkHiPrG+nua9oVGhbjE\nWvC2NhQNMO/M/Abj5zQ4iFLZt4bOWzZ55R3LL/nag4Mw/v6ByCGKPW3BsX4k\nQoJ+DJOJSpxXpe+ZYec6jdblmgRmchPWB2ssZStfMSX76QPctq1B0CLadbk6\nr3TH5/EdJpsTYAGybYLMT9JeA037LgL0f4h5Jw0kJ3PHOKZqU1JVo89d/Jar\n2Hz4fZpJDY+RHXqYO7g8QXmlPJerp1nOiLRiboVVZNrZu7ijYmNWl0OwC593\nofvBpcUCIv8b3RvlLe0O+H+ybfMPgSbS9wpp5H0Dr26zB3m5hGiK++FzT7Ow\nUnICBdN53Pi7dlhdKrhmG18G/LPGdQlnKHI8aij7nEdPV9pnE92JHDPrAgca\nB3rHoCtiaW5nxW3MpI/FuOuSFDMVwXthWw4luS+PuVsIzj/2D+V294hpxozI\nbhNfOa83SpiGaqNx9f9nDoHZepM9ATIdZsShiczPlOmEw9zF4vPBAS0KI0nE\na39l\r\n=WYlr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/shape":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.62abbc8d7.0_1590096516001_0.2546403689809109","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/card","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c88327d9fe41104c5a0e253f7205e780ac08f1bc","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.49bf31d5c.0.tgz","fileCount":19,"integrity":"sha512-8WAXRdWI4jSj4GpQwbRKwTdtUdf7hLbQObtjvcy68fX6Yk4vf1MoPHrVASjgfGbbh9XzCt7svaYZ0M6dDxLpIA==","signatures":[{"sig":"MEQCICfHDD1LfSp1m71DkFvXvdIG4alFms/ilXFReF2z8x1CAiBXrPNOEXIS5tJeGcN+Uoq/MUH78U78HmyHE1HV9nmMKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNOCRA9TVsSAnZWagAAdo4P/2HhCt//ipqvOlPKK1or\ncrCQfnNu1/WkBTZC4IbXiF1DHXYvlAFnzZVySgvR4LfC/Af09LK1am47m2Py\nyymtMxBT7O8d00T1r60q0RtQek9M5oFRY9++otHr+Qz7k1ET4MJQPlLsxlwR\nDzmo//shHRW+DZrlTGgauDfLLDn905cX3NWuvdI6Y9DJTXKXqNd84QZuA+D3\nHNnFsYHmkr59+yRWTEZlWAQqfQ6vYF0sZh7bTy+zIEGZ6FjDQYBrzFh+zDIS\npzIWDpl07l8ZzLG3Tm0LtL44Gf6QNoAxV4DAxcapmymO2teksurEdXXhlOzZ\nYS40TFqqclCVFxn/fpFp+uJ/ul18N8R8qJ8ezpUh9OhyMrcpuDt4yass0VBA\nCfmfdOzBAFq+1d5/Kd3JABxMAGE2AoeYFNYs0jR5rt34sufOoVMB4qB33UaA\nmpIwKGBmj2t+pWp1MWwIEUd9HfUkip3SJv2X9tKRjUILn8hUhdvN7lJPqiT7\njxSyhgUdWw2IHi8qzfEp6DyedEyTV0LfXFjAM9uGAhpMTyFKVitEouHv7HO6\neUvGibSsGAtp1lFlI+IvMjrFvzZaGt/yK2fEoRyv7ahEZdUVbHlo/Shd68hq\nNkYABJZwlGG6Yg5E4AG//IxY1E1s+OdWa+PwCNAsKb3A0VecxWORuF3D7QHc\nd8LC\r\n=WDLs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/shape":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.49bf31d5c.0_1590096717834_0.09377589852235468","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/card","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60fe9d3d35ec73e3f1db57917f35dec9303f5451","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8e17857d0.0.tgz","fileCount":19,"integrity":"sha512-+B3moU5zTKTm/vcRJ6/Rhl1QbHq/PkLRuSl440TmW69hBLP5pBn0+haZkqPN5ofQdk4z2PBI3cHS+S0EAtMD3Q==","signatures":[{"sig":"MEYCIQCNJCNqvQRsgXfFwJHSUw662Cd2gJYZpljoCxdMyvZ27wIhAO+W4eRZaTyHpgZduq/+9XWbgGji01WTwXSnHurmmvNr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOGCRA9TVsSAnZWagAANfkP+gIqU6L6poDyVfos2xte\njgmtCcxA+z5iC5efIj5m2jcNrfGAbENcDaUgnVqQkfW2lgBCmGNIxmd6xFY5\nptpCWwUJy0QeInnSMBByq6SzAVfQt3HJU8+fvEdk++bKd3gJH033t7hwuDN0\n1qKJUaJA7mF7Ixh2k2VqMOhixKYdJ77LQqxG0Ow6KEzQh2HCiqglkYp30NyY\nbSA385mh/oYFM6TdZzkgwDflCwaQ+N1qjEcxKpCYPI3TORRgLyPMEh3/bi/W\ntsE38nsBosEw2swW5iDqC7hGD1FnO762XdJvPi5mqZXIhad5eGpBu1tg/yqr\nrYS0rsX5gjkLLCiekqyHLSKCQAGvc+DhxtdFQ9fJrXb22Qtx9swWh3FT1XwR\naMZg77wruLu4AKaV81/U6RiV0vHqyJnix81RXgS6REYOCZ2sp35Wj9Fm2Y7G\n2C0iFkrafNkMDavEZSZQTjx0fGEJLlNypmqMBhmIYrn2sgGKtSu3wjl1IXaJ\nDJcDTTtA6Qv6Qek+bmU/913I0LOo3PGC1nMM/L89cX1f04lU3I1O/gDxga4V\nGixecqtNwSIKh/Et/mAygdeVMDA34sCrzFNFzvu9CYZESmqKEMuaVlyhmIXx\nDklVAcO8mEcd6JD6Xl9SSyUKS2F+Pb1xykevsmSsxuQ1HoyjWmSxbPb8ABv1\nOeRB\r\n=dpBw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8e17857d0.0","@material/shape":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8e17857d0.0_1590096773876_0.13803058475203578","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/card","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f2712c34e318b6683bf5bd1eaf3c1b122cbd9bf","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.c113fc942.0.tgz","fileCount":19,"integrity":"sha512-vCQ6dnzJVDy52R+oMEhOBOiB0//croTDtijCiavEcImaKC6K3QT1ABLz3s+tCRvovlK+YkCiSSJMcTWajenhGQ==","signatures":[{"sig":"MEUCIHuPgrku0HjUbC4B/8oVrJdXz4auixjrKxF2RnhPXwc3AiEA1Q1UwL7VPmT7TLY3kUDRN1eg+mwnX8nf4ylcpbOcovk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwS+CRA9TVsSAnZWagAAeCoQAJ2exC53bLI7RH57BDLQ\nHq5DJ1Efpguc+pKRaZI9k0dq2BDjpFZPtuKUFLjUDFvIwXdMcRwnFfGzaVSq\nh+FGMhnRKc3X11kQH0skqLCPnTM6hMx70n/37pvOp2IgkFg7rhIDqU4yksU3\ng1R77on4jGGvvBnGmo4/fHjR7dQ/w7f84wafMH1kNIOYJ6fmnRJCebwgiclG\nuvAKUwDhotg8UEnk0wEXzmEqpRc6n5MKfUw4v7depP0Lci2NYKMMtgc26f/z\nzSUBzH3mhQN52aTFve/V7a0UbT5Jl/ydeRxY4wGfw89ACA/nJzh3MwV6Jd2r\nGAj2jflvZlb/ODcH/8ATW1sL4Q3hSBYISffGG7ljNZUq5n4cIc8hgvEIh0TK\n9jzuTuaENYjssbejc6pzOPROeWBjoFAEcUnBYGGK6ify14RQd0CyEEJ1AoaF\nxLN3CiyqpRp5ziyRq7pNJ2PeZ7ON2Jwljqms7Ej8ujxbjNtCjuXdsnC9YO9y\n3N7v0i3wnfUXZSYD5POu+5RgsiU/Ti3MY2ydELtXahfNREd4bsQHoPFb0Zvh\nqOYSFntAXzJIFzLN0vFP21lAWb+Ks8/t+1E0j38h31Vb4hD1x8GXlRnAuLQt\nYUXZtlpxs74wM6tsa/bVsLM9p/XYDsjQzhGDFSUDFSbvRi1wWwps7iwGdAwU\nsQQr\r\n=M4lm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.c113fc942.0","@material/shape":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.c113fc942.0_1590101181425_0.9883276311837108","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/card","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"714b820fbad7295c9e14b67fba4367af5a90dfb6","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.912d9021d.0.tgz","fileCount":19,"integrity":"sha512-7JOVk/ZNXqMYT+2d2N3y93ISHhMh8Qgsk1PznTq6mAc6c3TDZCaVZIdJHeGFyTrNYmANIA/0WVihTqul/0oC0g==","signatures":[{"sig":"MEUCIQCBxNG5ZEBjVN7MH13LypkJgcck2BW6crt9gxAVFYCuiQIgXMJwx0/pEpvh84haHOTIJvhRnWI/Ny039nMDiDSqoN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWO9CRA9TVsSAnZWagAArKYP/17MQMvojfw8StLjAFiB\nVXD/sWFRb+fE9xi8KJQOa12UqaESCgl3gXKl5aCE4MNLOPFHS2PzOgWva8i0\nR7wbSkcLTGQyDmnNUt1NJn/fikOgJy88YChfFCKlb46oBZ9i9x5B8l+JFkxP\nmidD+6djrzDnJGu64fxS4+db5Uf0G9VUZcmFsN0r4CTG6RxBlFsxoJohn4PU\nXR5+yKRmEr2+ZiyJ6owQmAIRjFRnXUumtSIqxMA2dXug2fygrISBSpyssT2W\nDMdx63TR22j8wZJvRhbZvY7Og5DW5r0lE3JoW5fPh272kTHOM0lYEuYLS8ua\nw8gvJFRQ7oECw7RUEYLUIjSmSExr+3QRo3XJlEG8ecpoLfmQ616FyVu9fVmj\nJPGIdZoUBbfuUC92BgyiiWsXfp/yHKFZylwkVR8V9Zq2pivbOYodp3bPcWzo\nWDHU+EBRi0gFtahHPX31QWF6v/hvElnP0b0JOba69oun2En3tYzfXdE1Y3Yu\nxLFG2U9S2ffVvcN5FSvsZ6ZWOyuLPihWySx3f7ie40zN9BSxinbL64QZQgL9\nr6el0w+XntOFolzMR2c8Otr86ToFXBZ0d06nNxaJcjDzgI9tghW9bEhb7D1Y\nNd7fquZqWkKrVXd1sBhmqmRL7qlC3nzO0Mt3Mml60hdj9FMs1ynxsWeeowll\n6IZx\r\n=wc68\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.912d9021d.0","@material/shape":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.912d9021d.0_1590518717466_0.8165803482519236","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/card","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62ecdc01d4aeb32d571fce5385dac4541e12f3fb","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.68a2af131.0.tgz","fileCount":19,"integrity":"sha512-DRPToLnlAp2V4xLl0/PWiVYQWlwPrGvqXs7AyxhJclMk4rMA7OKs9l8Zjjb5W98+8KimB0q+uCyihRhmyYbyzw==","signatures":[{"sig":"MEQCIDX4zpiJ+hcEb0xL1VNx4xplucRtYdOgQl/L8dpTwUruAiAQ+uV9Lw5Ez2O/1nTy3j8w/XcuCkFv2s9n8EyLDJaTkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWj3CRA9TVsSAnZWagAA4aAP/iAcXIA2Twu53b1q+Im7\nMblSGjyLA2twAlv0hiTUlI+hAVzW3H0/yY6xYLLWjgIJV2fn7lB/azAxcrPT\n7Rm6hhEdpMgm/JVHhdK+RX1zi3TyQ2EnUR1t4fCmbvUljJ+kRAJtFoO24QnQ\noNCBy8nAWZMCdDfs/LjygMwh+p3fEdBFGWBW2Yjl4rK4gM2Bf4woTmw4js7o\nKL0cl+fOEB0uJghWOB82XG1CdDnhSOtMbnieCf0yIFRoP//1WBmdtVWQgb3M\n7YnKZOO4A5mSjQLeFr3tbxJQdVAncTWLUZk2t8xIlwpSd4ojuiFWeegEgd4+\ntIXFUQDy4s5w5u54Vjp4u/7hF6WQ3hWSUO2pEetQ/MliDLqBQ9wymTcJ2uef\n5l3bVLU9/VSPn8KjWPptGMcW7qYXfWRIWqYvqq5wDoIkR+SwRT09gIZK308L\nmqQYVKGx3ah7CnVhcVusAbudmVxKtKy9pw/0S1YDQR8hb962nwHwbytgO5f6\n5oeO/S4+l2bejq69GqOyp1XGa2x4d1xrtF7qX/ETkpqAozrUrpmfmS9Fxs12\nPob/VO2g02yv3ZZ0KsX0F2oJGHEnhNF0TKA5SLYgb/mJld/SWbUjd2zRltD4\nhGJF+4FkqmLyEzkIx9uDlt2xjrNgZYRDEW01lbyKKhMDG4CoDKAD5o0KoiXp\nRPyJ\r\n=+T9N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.68a2af131.0","@material/shape":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.68a2af131.0_1590520052575_0.24503197899761742","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/card","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1929a3c6a97635875390197897f8f1edbbe08fa7","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.01de07011.0.tgz","fileCount":19,"integrity":"sha512-eFp/HIMLvII8M4zH/XaVFZ3jD7k6RS2SlETSQNnozqrm0poD2C1pEtWX8XZ3ySKVaRrkZdjQXnAod8NDw/4zgw==","signatures":[{"sig":"MEQCIHd7DreqN3Vi7dhUTYf6qxk2sWiAOB+wVGEKWw5np2bIAiA5zlIjX2OK31M/kLAEwPuPpl8YGgfP90BW4uP4xcbP1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXODCRA9TVsSAnZWagAAahEP/2manqpA7HxXeMdoFBVy\nw1gz4PsWm1Mu68zfICUzz+qLIuG0ls8vZxm0RS4Hye5EEAVjh8LmtnMYLFFe\nMMslyXahc8WZiQ2Ub+462j0TRdNAlq1A9x8ivVWcA2YQnZ3FdLV0CmLGDoeD\ne0eNFOeVNmrLfPFwyWJh6JxdMpl/35pbrgYbP6iXdYQ8n8aAxjQDMNdoqVym\n4etHe/1SjBvNAnXDGcSgp8c4kQjlDS586voAhHl80jm61u28vge9ryUXmWiM\nV/V9o5xox0qh/pvQaJFIiprPiQR9LTMeSA480y1u0RYdV4h8uXDW61hWSbIq\nr/1R24s2AK4uqo7FiHT6jxIR/nh5gPDFa8vLWaGaSp6IpZ04g1ScjKgEYFYz\ndFuwMQE5xexjO+Yoo4SHqppO7LsADXHXVV53j6bZ3gI2hrO5+LXt7QaAyxzy\n6ip6gkM6uUCMKUh4J3sEF56bIj0Gr9SAlL7bnWXEmZdHwHuPM+KTTsYFf2Rh\nxbMeZ9M/F6lV0C7OAZSAcyV833NeNu3OXv55DAbiUe0EDgt4vZ8noxPYA6QP\nKJdKiGiOZqBdqCCyUvlal/ocl9pWY1OkFqJ0959BRzvHPqOEhMKIp/TNaxMt\nN1AGfmvFNSWMc0ksE1S5fj2p1m5AM9+l+tQqrt9qANVkaxmInWHxV3+CJk9k\nsGiz\r\n=94n+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.01de07011.0","@material/shape":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.01de07011.0_1590522755399_0.027169086292942124","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/card","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed7be959b34946dc8ccf0c5fc70d60bbad4aaf93","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.51d4535fe.0.tgz","fileCount":19,"integrity":"sha512-SdP9Sp3eSJoRvf7NL02RX5C+aJkguRweXsd9hfJokIvqjSUrjdpSWQU+u3mQnVkk5svf+MWXLzAGbERG9cERpQ==","signatures":[{"sig":"MEQCIBxuC2vaBQJJgjHpXjb/olGdYPIX2VIfzKVKguhFLWLOAiBVGu7gikj+0BuO/WOqksBJduhfPL0ww0i4ZKFCj8uAoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYuFCRA9TVsSAnZWagAAjTcP/3QgOSk7a5TFQlzmXuq5\ndNBNnv6UDUGnmNZCeQVEayykPcfzigNfIYjXF8NwanOSGCC4W1lzf5h4hBZ+\n5fe1wqMbQMX/vb+V/TUWubOCjGPA/+aRtPKcqAHs7FIVVBYHmIUS8AUIT30k\nI8cS4MSv27KaXCBYF3OuV2ZcxbQJ0d49YTXDcSHoNTpGwtxVmzOW1UJSmSCI\nWiBUTL/z2BcMUh07tipmN2kIj8C20TXnW6jtijZcegyjsy8+knYJ+UuBFtRp\nYc1vpDoSo9TDDE5W5f4pZaT7GHGhWll8XfEGlg6nGS+Esz1tk3gTby+i9+jI\nq38S+ovlebS/QHzlHGYsUyBrPIg8yZv/ITi7J69cWOtnnHc9nsm5NdIK6Tok\n8UeaE8iIRAVhMkB8e7PS3/qzH98+r1PxjYLP5gDU6RL2+JT4DF1loNPKQSLh\n5l86m8dO6A5S+G/oH1Xpv5V37Y06/FS+75AuNflRgrfpMTLgfe2Hiev9uYQO\nFs6amUhMhCn4Ko83c8vpR/Yv3FKBn4C4xIP6ZS5Yo3HIqsUuLY2ooIIa7f7Q\n/DuRC3im+DWXP0ZfF+iAG6FhbW/7Mymi8HNsk1d2gaM82zU+5k8QALPA/iQB\nxqmZIldevtqB4YSKUKYYev5W0auk/AN3OCh03bmm1XkSAErXzq0UOwBDKqQ3\nh5um\r\n=NoDX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.51d4535fe.0","@material/shape":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.51d4535fe.0_1590528900720_0.07884806064537453","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/card","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51fcf7971a56712627d8bdbd1081df9bb9b93df5","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b86d826b7.0.tgz","fileCount":19,"integrity":"sha512-Dn58pxd761zBwz2Bl1CEq7d+4FrMNxOS6kLKF1RncdUyi6R8D5TrkbExb+BSgS3m9/KWwrKZEQhRa0i+6bKZaQ==","signatures":[{"sig":"MEUCIQCdt8lge3Mq8EdIVKFN9/0oFhtBFJHx/NLX0jJeAs4T0QIgXEHkwa8dj8QJG3J5abu9HNSv7QxqOurYgH2oXYI/yu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSWCRA9TVsSAnZWagAAKp4QAJVb0ZpMs54TAfpWaqEt\nUz0sVPg8h0qJ/swdl1agOrc+nYjKewR+ybzftYWUOGkYz9YGwNuxjMXID84j\n05LhYA7l/ADh/nPmYLAb6bY44FapS39Vi4MJPCUoABVaN9ikMWCcBTlFmG68\n8amc72WRZzRopMaqWeSOLf4DscF3D7UXfBVHfuRGB0gEJvsojHgWvpWUJQqZ\nLK8OmLk2dixHnNnR7k7qUdsjPJPebI3IEjvHu3L/9AZKwhHtMQ2NNaSgATkF\nCoIlnj/1UcLSda4V6KFgd6lA1aX15XJeAR1KwWFV3dJeGmxq/QOcEsR4KXXg\nmlXVOtX/Cm7w/lrCUeE44rBXPPVGLzFuYoYyBoNAisbL+DlrPmF4hZc0vkni\n8+JJkuGMP1hxkl1tzGhSSR/jWhe9gubqpSNmNPW+ntlmaoIzPFkEXWgxDTM4\n2gjq2TPQDsbzJG+XmkSuAsuNpTEtXdPt2WKwI+jpHGeWmcwUDXvHvcSquGYj\nt6nXLVFcSI4+fnPDNubMKC4U5DAjEG6G5wsEuKsK8ZKpPtZG/e5i/SCgCa0s\nEWdJ58B/NDw9ZcY+i5Ar4ZtjlRRkyjsoFvLC8edwdmT5JmeOsrDOWdOAi4HY\nXmaRfr40G+YPElGrNhC7awRR7FIqGrR2LsPU7mHErMzbZm8CPRDop55jZTXB\nDdoW\r\n=vK11\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b86d826b7.0","@material/shape":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b86d826b7.0_1590531221387_0.7275291235232355","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/card","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6900080d151ba9d665ce4d11ff974384a4e541ea","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d91794c7e.0.tgz","fileCount":19,"integrity":"sha512-J+Sl0chWf/GkUW/IeMVtLKeyWQt5YKzqPRmCsdVBPGg1b51EribbUvwDhtiO7EjJMIe5QYtUuSK/Ol0tRkYwIA==","signatures":[{"sig":"MEUCIFUOPq9gSMhpjb6bCoz0x9Bc9touy+8985mmdFGoDkV5AiEA7rjHQIilGZjud8QQC6a6hwjoGMuvfdYfd2WSe5AgBvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxOCRA9TVsSAnZWagAAn6oP/RP+oiBuzqj7IcbUHDOS\nEda7oLvvBiYRuWflijxyeYH4tjoc/bG/Yoh4ql2oHdYl/uPyAG0rbrFaNGHq\nYpcauGEiMGYGem5tJvhaHlyEirsRu/lhOLkXZ+e0lATcYJXEGj/3jZ0cELr+\nkNoujJ10tkIwyJ9V2yZmg+EDPYhnOoiEKj39THIvGou0hIuZ4oBv6808ooLR\ngml8qld95PvDI8ZwZtQ8W2RpoRLdvfTxNPNdvpyNLF6rTYvqZiqTMsAXsr+m\n+3rD6XS+gJjXpNzjbmGjiI6SIf2dxTI1MgfWkDj55xogTPKTrb9EkYFSNTSG\n6en74uPN0QU1y5EQ7lHfSRX/xnQTq42B3to2+NTRdrM8qlD3XCfm6QCJGrgt\n6E2TJR0WbkaGzpJmTHUFs+244aPa7t0+toWJ5geIqZ/TrCdjWmlXOJv8S99v\nRY6zWLBzNsBRGXlgdwskOTV3RotuVMqpNYkGeetBoaIR+h1GV+2AprzuvteW\nuWu5s+vkYsbUazf3imL3AhWcnGFlkmaxfikuARjMM0iJ8h2rhQPgtdSQTR2b\nO7lM/zit8j6lKFHEeZ/7dbKZ4T/F9/NGO8fKmp8vKyS5uX5RgDPh/ixWlWKR\nPURLm+uHrd0XHjeez1WKrHHf/jsS7hkrIyTZ/RDtfwHp5zXSTAyHznmkII5H\n1uYW\r\n=mQyr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d91794c7e.0","@material/shape":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d91794c7e.0_1590537293953_0.6656674738708883","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/card","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b351f2435ab387dac50fdfed493f635116a582f","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8c6d7e076.0.tgz","fileCount":19,"integrity":"sha512-JItmA9jSlF56vVoLMGHm14YtIoE5CaJ8HO/uyPvAuPfBIo7qKYJlXWQTUJFzaTvJJZg73k+GVqumlysFOFjokA==","signatures":[{"sig":"MEQCIHnKcZzHS7aIisiXlIlRhj9/+xsoN5frqlPi2pORJFeQAiAaob8nCZ1o59xZFmv5zOHw7+0sl1hPj6ybjvVJ/niXRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriHCRA9TVsSAnZWagAAjfMP/j+Q/veHRHuNi9RbLwiw\nyRCtH6a0TjiCXKafWDb1UdWQq+UZVRn/+/lvepLhtEv4kbh18yf6YBYvWrb/\nG+SBjKuz5gw03Miv8NFcSjUOJNwPlM/FwlQSLaWDcLqvHh6Jc6FCTAVAD5H6\nPV7gOkp6/rbayEjZxxsXKTfF/NjkvLxJidWcY5bIx6+I/BIv9NdQnxXlTjC8\nC13U6MUhSAdN12wriWOEWWiyuWpnjF/E7A5oZY3pAPdtKBzr3WEKKsQBsd3V\ne8XmQSTnEdhK/yy6pEUiwrLJ9qnPiRoNYQt/xgAlp2pLgcZdila3z5WJqezi\nHvpImRDyXRtr0H4a+TsHZriX7BtvnF8NcJ4c/sC/zoyWk6u930Cwx2OVn6Yf\ntvWKYebmF0a0QUW7KjRPi85KTX00dsV8qRJaoTZYhFofshAYTgxl44fbLCdR\nA9HiHzkYeTejZxH7HPBBwDMZRqPebSeTkk2owzr97l6I6wW65dn4ksg+aNYn\nI6eEQ+Ln4M8mHevp4cL0YxVeDfNcxfKft8lTV7S77+gAWlQquKXikl+VElrX\nYF2azWC6SsTTa6/Mo5hG60Sj+qEJg/WnpehtO9O4xc5R4qf7oTfCz5Syenu/\nH+0BI9+VRhheUMDfuoXGJjVSnlcPMqtrgfook7IC7d7EXI4G6X1tHxDUSRzf\nUljo\r\n=b5Zf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/shape":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8c6d7e076.0_1590605958533_0.06516398548134705","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/card","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25c5e11e09ff8c4f96a4bb7e2c4176599009f9f9","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.5b5f62f93.0.tgz","fileCount":19,"integrity":"sha512-byYIL/HXlXKcwJ/YcBd4VBIe5CsFDOGe06c/o++4hy9qVLFWZiGtuHDI+0MQGn7RA4/7wehUlmpPB3tKGID3wg==","signatures":[{"sig":"MEUCIA3yvqu/JHTQQKch1G36RVJZ/o+GUWnrGnZkfv+P9XdYAiEA76XBaZJTjI9dN3kMHNcqQfbXdbg/VoZ28/HAH+36vb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezryXCRA9TVsSAnZWagAA8boP/jP0DTT+tamr0m7mSLxL\nr85V1ttqznOBEKuDLhTRTjgtZ1C4g/vYOuvO7KVpZ/AbBPqPl+EuRksV568X\nxidXWjAoBFXPiZBLrFFukPnQbAB7NRp7Dsy/BGpbUuaeUA9Mzr8XUrXhATAS\ndF92akGp7tGm+86C6bfhnmEPitSNa841/dxGT6OmHIlU/tOmU6/hNQssEimR\nmHOHAF1ER6YvSrLxdzRG5IYmz/uuMhHjrpeOfSgQmbv5ZilEOyoNgcVMf6+c\nJGIUXZ6C3rrgiFUJyJLixSC4PxA49ThY9H9S8Uo7Noer4Pq32b3f5F5BZfIk\nwskMOrK8yJdy+RYBnyIsNAovh1unoybGKdWRFylS0SWfjzk1P25fj/C1yXzO\nCUBz/NSMj/AoI7DhTNlMsL3uJ5SsKmczwomSF362J7PXEZ9BHDft8QVYdiF3\nH2h7Ql08gZpiV1fcN4mR1lxtLMZsg0siAudn763rqXFBkgbGON6jd5XRfRLL\njIlpMB5DLzIOKnbFp/t+bE+3daS6hBAsAiOnv+kXz3Z3ftsLHjOJRhsgnJBb\nT9dh+mPDHl7X26vcKCuL5nqT26obLRM5fgzMs90RQIKPFfmTe88kOVANu6Z0\nNRMXgZIIDZne/fDxseOHoplJis6n1P05AbvjrGfcHT7losGw5CWPE59Zdlbe\nXYIU\r\n=lv22\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/shape":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.5b5f62f93.0_1590606999052_0.9962088423494069","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/card","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91af92bfed4669c61f9d168019a521bac3f550cc","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d9972abb1.0.tgz","fileCount":19,"integrity":"sha512-gZ4SDDjIp8LmObVwQhkp9Z56Io1bLFcTiVqUatZuwoY96uKWQAb/3WbjDU5uUVPj8hvjgqqSLer89AWRHiJ2KQ==","signatures":[{"sig":"MEUCIQCgILUNR10G1XZRJkllKh1h+2HGkrcNsyQ3EbqQjtui3gIgQfmD/CTa8rnbQtO60DiBasndwXMNaZzkKQ2ZsMrbmm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsuiCRA9TVsSAnZWagAAQUcP/idTQ8mgThUiPCARkZrj\n85kuZv/+vi/InD8tZ7M/mjZLGGXf/MrTcG8S025kizVgd4cbyMDgXFUctvob\nOLJPZbwlD22X9zZWMndeDIWwAMt1EletUGHjd9Afhz3Kfg7zspeKryytxzXN\nBVm+PntDs9KC3xgK7sfZm1Y1Ah5ehNVx/7eqP+q601s1pXLiepgPYwE4HWy+\nXyOV2vDNET9lPHJZVNKaWqF2KDnVycSHJvaaxk0FCW1WdtSJb1i/K6wPmjVG\ndXA+06nUA2myKmNA/EoUJzWetTqyi0DMMvRqDlD0WIbFrjLr9aLiejfRkSgt\nbSFQApeS1zIPiEkYF5BnZBU5rspZ3wGm7RpdE7IuEunupl4hApsKCbgutkyv\n6wfVZej8SMCrqGHu6JJmEwiSqNyVSHEJSSeUfQ6Hbc1iMhbcerbQTRz2SJAv\nCYlhZcZ4FazeIFS96qupoSd8QqnaZqfhKAn0CPPWU5u18SZ0oZ0COBq61oeS\ntra7f6FXakERX8TC1FyKyFWcxgYb5s/jx/xsVWvOl7hgJL+VwU4Q3BGjQxIY\noGb5WIb7qLTf0Ops5m27nDfr3OLCYRzFKgt1+DbuDiy3QaHS1gpB3xKo016B\nnWnmC+BkdGFCymtHePS9p5EoGyDDFx0zY8KGtvtbAynG2GDVsTIsMvdobM/H\nXheF\r\n=haeq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d9972abb1.0","@material/shape":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d9972abb1.0_1590610849815_0.48973339318134523","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/card","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f838ba5fc36d054be1718e30dd7abe9e8fa9bc93","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.6556eda2b.0.tgz","fileCount":19,"integrity":"sha512-wPJdhBNpfI/RBWKKP8zyndyPj89rMa9By2HWwW35cmlY9JgGoKGFkRRKci79n1f9hG9PBVvmxJPw/w/FRc3L7Q==","signatures":[{"sig":"MEUCIB7a2Xtv3F0O9VWQVDyi9aS40KWk4SX4ZILGlMKUjZJ9AiEAmh+XvQET3Oi3X0o4GFMUUaPEt6WL67V9612pLChjYVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3ECRA9TVsSAnZWagAAdXMP/2y2neiPBv0sgk3v0Xam\n4c3pVZ1rk45TCojkxaG0rSo27l8uvfCBXic7VGddRyktRGqI1fFHPSZBQr12\noUxUVMgieXw/Ji1sPvZ2M1v2mJIK6Lg04LY7oGPNc7GpL9Vz27Tw1W5RIid6\nlkRXFlz6mvQAPQWQTR9l3QwyiWW9Nv0kz0/ECl0x8+GIiZv6KcZ684dRMhy1\nUadvkk6LHhtMk8NRxVgdDV2rd8+NQUW3w6Qk3UypiihH7ONmsgr9XAWAuB2l\nMwYBiqJosKYsEfYyqlf1fwon5AHSuavbhpV9q0RYVwB7/DLDoeQ8O8ZPpVzM\n3U5NERO5cJQQGB2eBWJVR99ZJDvH/dq6joY0nOFlFVpamXgCurg6bfBcRaXA\n2xhbISrbt41S1NfSqIKjvzLNeFTbGPTVg4jJECQYFlzniyMUqt7Jw/J3zdDF\nwP38SqVEx2t2Itvuj4lxIeO07Gtf+WFzMCQjUgEhc0IdMOnchquZ8lEIap6E\ncyonE6GWyI7TvwLUMgse56O9I0RG5c3x/n+Az1uT8pzsAc0zEtHgyYVzTsX0\nI2Ig2+6FJlG0M06Pove4nMd4kOD8+iNqoAcORxuvB1yZef0+zH8MJ0pfxM+q\npPcD2fT9u3brfDSAE3ihPKfZYrAD/ReIu3keIG7K5KUH3+ltshxB6OkG5W/v\nKIt0\r\n=ypQw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.6556eda2b.0","@material/shape":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.6556eda2b.0_1590611396188_0.5528030800347465","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/card","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30bb9595eb2c18e254a957a0714502ba304aec31","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.32aa23641.0.tgz","fileCount":19,"integrity":"sha512-k+zNi4UjzetbBJw8gKOSuiBqkKQoGAiIqLIh6VWkxUuYHUrVTlWal+HiEx0huIpFRwSiumiMTGKPz1spxFi0BA==","signatures":[{"sig":"MEQCIDoOExVyoeCl6X2TWLYnbhwiNuc3/FpfhcYmdMzmrc1wAiB07+RGWcTttCBz//RHdsv6LGBY4Cw8bvNIOQgi39Ceig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3GCRA9TVsSAnZWagAANk8P/jFgGkjhWoMp3uEUTgLa\ngXXujwcZ2HPjvNZQeHnvnAm2D6p8VpALUVx2kmhj6vD3oGWVvGpVvtrsHVQG\nIDRgUGXs6idMPNXl5XZhgZO1edQF/YV5yU8OpaikY/ohJd4/2X4wDlPQ0kCS\n8/Sa4mjE0a8qAhKWC5GKKHAXJVMdFxW6HFVB4WeVWttudzFRI/bg7bLa65/x\ngL6h1Ngdb5vkzI2vvpJqybCOPcjeMLuwN8MRV/xSQeU+dKu/RdLaExqecFUx\neyCEmqWipSvpbetiLLqcEiHvYbzqced+piDUk64eTjEdGHaMZNbuwg7DR6IX\notwRf/Dc5ruIOWFNn2K1r7CruUAuWKBE7DiFNPnV8qqWXX3Ye+vo6XDi2HMh\nBFx5pWwm88WZdXD/JL229spPtJeKO1fSgEu9E44gxtfGPw6CKFmr11U1VoTU\n6vLH/BoAI/GDaz+Qbg6lRUdMqu/62X42enSpRNrAywO3Y9vTBoUIxf/cqwYn\nCL9BfvL1idlT3k8EgDqGr+w8/JOqw1WQFuVfB6S8nlp6qnASm4BWShW//UYc\nHGZZ7M7QRExnVfbcVliyjv/idzE5BbFRlqODvRcSsAslMhCzNVQdQblD4B/R\nvNc/firZRDvb8oIIHZBnbhKqCrfxd8lrH01aYR2ZlrSo3cSZnlXD4o60CeXD\nr134\r\n=Msoj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.32aa23641.0","@material/shape":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.32aa23641.0_1590615493785_0.17470233266627755","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/card","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdc9a4ce857a2f65d949926742adea1424d977bb","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.654934dfa.0.tgz","fileCount":19,"integrity":"sha512-DWp//ss8+xKT+G0hMyTFQlHhUlbpR9Bm3/QxsSy3f3kfgJpcrjq8Os0hqX3rSL6MK4xYiSOcW4D3hQF/HzrSeA==","signatures":[{"sig":"MEUCIBsWD+9UgK74iI+0PyK6KnG22c7jh6f+Z+rNxwZ8ia37AiEA5RiYGKrXTREphwJLaLjgK/3dY0H6BAiDSYqXUIXmFk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwejCRA9TVsSAnZWagAATqQQAJgbFo3AH3vZV/SVpqHV\nC/BCq7Ljvf5pLHL6dz+RKdBsTd75znQrbWlvWQeRfy/4Z672ZpiLf5CsIqzY\nAuL6FQemQePovwduJgj8d7JhMy0yXMqdHTErTWoes/l3vuQDlRyUe2lf/Rli\ndccQurPasEa6KjcrDGb4VHD817zC2WfWxbw8jiwSjQH6Tc78TJtpTePN9SXi\nB6gEx2gPsm1Gs50t5Pu33UVdP5UjuzzfWY7huZe3Yt04AR7ou2WKmn4jeb7H\nHyZsDZ4cukMKmGQfm8l4kAmDx8kBbVXOPI8rKha8dgArAy/232EzodcSsaLA\n0U6gm131AHEn65JltrufAWhBEjKt4he9zYDg46gRiItU/nWjwCPEMGBTJSI+\nm43wW5H+1MwDFwrwel/AlD4gmnm1nROEyYU9kDHpLQvZ2t3WBj2ZZIT/yIrA\nflNYAM2dw10c4cMZrtaa2/IGcIAb+p5GqGOY5JMdeq27EKmU2DJQBf4G97ZA\nwGEtVFmorR+DJvxhmJJE96N0a/omr0iRPP04DHqfeA18Qzfe8KAP2r38SwkZ\nI0o0HCdHneFXW2ltEQpPMt5mLVUo9Oa+weidPYTWzoIYyHTeymQ3ql80wUWa\nxxliBQHrIwXqHsgk9WkXJPSz/dJ8u9HLsfm5DoqyD0oTWMjR+TYBSxmlTJSe\nSd7B\r\n=bBWb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.654934dfa.0","@material/shape":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.654934dfa.0_1590626211235_0.7318086619534767","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/card","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f48ab656a37832e63063cecfa8197bc2d941a073","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.41910b8b8.0.tgz","fileCount":19,"integrity":"sha512-hVtVblbOYqs9lsWbSQLJD/W0rHV1nc6dZiZLmqhl/efqM06DkTDfdLtCVza4P3y9AfWD+upHuomj+Dc1Qi1jAw==","signatures":[{"sig":"MEUCIBIOvyI+UAFS4QfMmAWMijLlbnsgmHWl4CVm9DR/ukHjAiEAq40Qpb+g6hb/9g6doguv+l5mV8SHTpyc7GEfHn3UXb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsFCRA9TVsSAnZWagAAECwP+QGBNMIH6oMDiJElIubK\nFDToHvJQaSsf+tmDiAzIxozFrNZLxC98UCo3YxeVI/v9S81sZa0AsaOFYn2e\nzrcgtgTYTr6KFTSLMxXLJvEl21C3b3fef8XbNTX+Y9GsZty/44rlj+AsCENm\nCdh5t/wTkl+H/2d92gH05PHSGQD3js6S0bZDUE+907tPHcduMuQbHbitfINt\nIE+0uRoVcgoF2/peWroI4PSmFlBoz0XPQi31cbdaG+ctqxakD5UBeCatrAXu\nDEbCDpRqvA4tb41bDj3ybNqdj/bW3nwNzCTI+FXyaJvYGDXGoVgz4SpABW2R\nKJWgC6pQLusOGPz+CXcP1UX27dJBk6JCu5xpT8XMcbmN/ZmpJlsVd8fk4kpE\ncah/8kqOHhv2FASiOTQCwluC57KS4BSDcgyO8urM9Iu6VM9x3lV8LbaGM97P\nUZ4hERAXSP5tdqmre2UnumEWASdAZ3pYbNYCZD97nkf/n5eTfIYN6XnmahT9\nYa5OBAp9iEzEaPppbJR4TbLxfNLRo+mjLcAvm1ZcHgbTe5QTF7ByexPNKRlW\nsrFI++wnyuG7QXPp0FqZyllzUBdTFhfinMlNaJhTC46rUxa2z6RpvECiW+fN\nL6M/TUhf50ImhUQ8zuhPIN/eZ9Tmf6JkIeJygtoDJ2o3jGcgHmegm9nEX5Gp\nVcM7\r\n=gN1a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.41910b8b8.0","@material/shape":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.41910b8b8.0_1590627076724_0.1412324761177679","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/card","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f8a7059788ef8c4bdb2164a7f69ec79dce8a480","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d66d22bf9.0.tgz","fileCount":19,"integrity":"sha512-yfvp/iqg5uUav7jeu1Y0ah/sHe5Exhj+IQCeXoXguWSLhPmuSAy4yPE4xQJqnWo3Wyrk2oCrh4hh0uYVVPRz1g==","signatures":[{"sig":"MEUCIG3Oc7nd/VD/6DzCZgXYFGDr5nfK8o9uRBaN2gtUt4xHAiEAqA5Hun3hxbkzxgKcz/uQzbJ+x2Z3sntDA2rO3JrSfvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcnCRA9TVsSAnZWagAAt4MP/0d5nlqa3Sm8RzFSzrH6\nkOTvTmT2T491W5lm4Pg5KqEqLES4o2GnUN8vA4Ipu3YEbNVaAPYFxn3UAnsV\nsExwrjqz6HctepbmjgnTx0BvEz7L9O2IqJLGwo4lhFg2UE9qGoHU1SFQMoB1\nVC+8X3DBjngZ2SUMK0Dl9zvXbnCDso77BS0kkAFwadZDNFkSkv/E8m5bA8ob\nIpJKJvWRXGC1x+aspjO9mF67akyEHb9cDuP5RFAhjXwDM7tObUOX8FOIJWdJ\ndaOuJJg2woaFFoTRXtWYqtWajDy3nlXwaX026FGobfGo6+DfEE1CD8Ptai5j\nZa6UfbOkQUQp6KDBVZsQRrucbTYz0plfEYq2s3pXVEKFZ1ugagiS/RRP/y2H\nLDZK5BK9M7ToC7t9FmsMWtI82s1NR6WwVDedE1gRlAgJz8ZbH6Qio6AoerYv\n0yWsWEaVJ9vldBiqfSr/q1E9EMR7dZKRp2d02GebMLagspO09E4QdQgfI5XB\nmkO5bGJgMleVTni0ncyZyjGyRLPx+y/2SMcMhakQUvLd1/ImSJ3KgoP1FxMY\n4K9yJbd7ORjU2QcH2eEezEa96C0WybTIZFg6hsUjTkQPxiXC7TiL7rqLskJ2\nuIh+KLekwlzSsJ7roqOKiEOh/ZpZWJgHb5heFiA6sDXSxSDjqo7uIJEYcHGS\nVDPN\r\n=Rt/3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/shape":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d66d22bf9.0_1590695719288_0.9967090614954552","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/card","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34bc412ca8a19d1cb765ec16754d83aa0f8b13b5","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8904f3cbe.0.tgz","fileCount":19,"integrity":"sha512-qAwopbMYL9pXuI3p6Xt3TWFzcmySF6stNv3Mzm62pLgmYrh1tqCyf7bU2yl8GmVrnn7ULpgCK26NslF+qXsHWA==","signatures":[{"sig":"MEUCIQC/Wu7FKQfr1IQmMyPLLC5AM4z0hnmlybSQ+SYwVZNSGAIgFWFX2gTxxaY9qP2AFNLydJB355L/r14gIXvQ0G7OgIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":198452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1KCRA9TVsSAnZWagAAKboP/jXyS3CbCIiMLjXV7HR/\nRyiROw8ic1Osj3iKD4MtTuUo0r4LJ4HYmlsnSwZ3Shby2wApy7yC4lTuuKVV\nc5/3VJ/98E17vfVe1sld3kjb3xc17fhs+watkQ9V/5nBOR7aQA1Zy1bKMhpo\nWQbUsn3aaVnXID2y+8jOafDclg9cric67w/Lse/3w+8sz6YTst97OH4mZ3sH\n2oJAWF/0NsAbRlqAHKYV6G17h92ApNjF2p5RDlHApDlY0GWa4vKhQ/tbyCXa\nuf01uTMvWZnrhtaK2KaN2oUhtWGaFZD+XuZaN265w/ladQNLOUr60pE2/QP3\nZgZzZRyYwixIrim4n09JQqUp4ZeZwC/3jeBH03ADwrVEg6MlblYLc9tscyry\nw8JAb1U6B/rtx9g0d0VIwrQKv0aHofjYAiEZQcjD4dlPnd5eUxmpsvVsvoHU\n41CGTFUGkWV4z3ajlbxQeyq3dSBS5tCDcGnBptZwN9p0l08B4rZoxPWWW55X\n6V2VTVMZ9J6FaRy7jgh6AkhR9EaZ/P7wdgyO7YgLwNWS2ZcKnCdko2miHEU+\nm2oqjhou11xjnBkt/fxtUShiCJtztBSQd/DQEzxNcgp8ssCxqpnHFAw+aqDz\nErHXn7xzFYlVIBIVHvu00dPsIYbBGLIyvnmtbn+uePBVgO+6nMOkc3KWWA4w\nGIeC\r\n=sw5r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/shape":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8904f3cbe.0_1590771017771_0.6770539437694121","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/card","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0a3acdd416ae113ec4766ba21a5cf989807c44b","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.51512a4ac.0.tgz","fileCount":19,"integrity":"sha512-QS13sJdTHFAT9Nw/EkrF9T1EXShBb4EUgHIxYo9B3yCZ79D9uGQC1KXPpAiO8P1KkPapU/afM9lDhx4QYRHfVA==","signatures":[{"sig":"MEQCIChPmyFXvOApXrgnMcoR/X96qYEFt8eZn82emLitZq8SAiBGYt/uXh5zqGsyZk6DsYTOQGpxm+e53zaAgCR6aXhEIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V86CRA9TVsSAnZWagAA+u8QAJ5TdBvkEw47+4SEdUfh\nqIG4AZWKLnhX2/68UmesDw+rGx0UJSINsW4KfONId3AAoYToVNIBQE4+IV6b\n1MW4H4raQ/4u+TFh4/lciLSMZ9WUr/Qxu4Knef/NKT3dnvFEbSOqqbDKrjQi\nuQ624FwcQAJCp4d1VsLUDo5Qar5MtOhd+LeoH5QD5fF+iWiB3/xSZI94gBAc\nHuBvwDlfbxr6cwy8YHo+ar5t3sJBtjMio1vVUnlQYR0cz2twbSZBv0Qy+0jb\nlTmWbjh9IZFyqd4tbmFtey8OtbcTqIdjd8HC852H1PNc8qibiS88ATyiI0kr\nKbKzVuB8FlaleK6bzWZxAZOZcePBpyw5jFchGI4i1uHpfN/OdyI0RMIV8Uxy\nctRAxUxrgd0swfkGVUpUnao5kLWft6hc+c9Epe7ngMMXgz0XXR8lQxv5DNzS\nJlN46AQ5b66q98opqhvUVnp3R7rwIFeQHKE5aZEN5DIS1f6BXaJx2edLmNbE\noM0DLFqs9whO6pU0vPVzlPTVjcAMQlbURZ0zCJlvMm9E0prhjYvDO126t4x3\nOcmxvJh5TBlqKcHwRQFfqJoBs5r44exTvZDyOZSb8k3Ks2+NmtsB3qzywqD1\nA15yZNiwU2LXCv69G+kmo6iFqX7m5HEKul7yBPGmL3NVfFd/BBNCv0LOGP9B\nLdMl\r\n=UokZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.51512a4ac.0","@material/shape":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.51512a4ac.0_1590779706060_0.8539598852291639","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/card","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40929c29b73aaa1f78f20620f0c0284cfccbb0df","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.0743288fb.0.tgz","fileCount":19,"integrity":"sha512-8JYQUazhswtUtp2Xo9yY/HKyzdFoSJcJvc3r0+rJAJu/YNqttVAN7cV4oqWGJ39j8XDzoMirHxuF9O0NWJ6LxA==","signatures":[{"sig":"MEYCIQC4eCjkc90EJujT7tL5JdsqJ5dX99Sq1QgHB6cpc36PXgIhALWJ4MuHZI0BVKB3ejYqOcEFtadb5Wqqgyen/NmQg0dm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Wr1CRA9TVsSAnZWagAAfbMP/i2ORHIOLu6DfQq6r7cK\nw08lrdixRw0tRxdfB0h5avNeijHsRBWHfkvGL1UitlfYU+ssXPDNYfwND1lj\nDayA3H5Kqu3MzwMAR7JeSNfbBqv6+sRf3jLnqHdtfo5aT1b1kRnFuNqxdQWM\nah9TQzrzMrBl+U0mKsCMnP3vLwEycdCKXPd+81J8HVO83oCWufZIqJqJyofA\nWkGYOqwYsMq9egtlxBryAuj+1CHFsYXZlrPOTHHrGJSutUdVeMCyfmwP8QUz\n+Op2awbXhOwoP5fYVL6NPcz89VQAB1RviAevL/ncb+TmBtwzslHvNGKAK5Tp\nRadVQZewHDu0AaZxCnd1nd2UjoNIgDanxTgeEt5MLtsr3VQBGxGoY3Qj4bmq\nGQqZLqVNXcC3PLZIzFkvYDUK5DRs/q0oY+W0Rh2/1k3G15NTLF6eSGGZsQ8x\neLVxQCehaSu5btLu6lBlWhbGLyTn8bmTn4Q1kb9VMY2QY36boAckI9ZOphLI\n1SSU3dh3vDNzLOc16dr7yAlNpSs4O+razgxFx9b+hgtS627cNC8FKHWC2719\nKxISMIHwCfhnPxOCpSIxEXC3tC0EAoSzdyf5pfVsfMm3q4Y+eGiU3v046avZ\n0+k7eUdqyPtkMNxSI2YOrPd6i3pxI+Fah//51NNLiQx9pAoRRYkfMCtOUAzz\n/6hJ\r\n=I7hw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0743288fb.0","@material/shape":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.0743288fb.0_1590782709429_0.8501681810405943","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/card","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a9658ebf0d11fa8070461c313260f5a99c5d9e4","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.06ef147b5.0.tgz","fileCount":19,"integrity":"sha512-tS8tr4B4dDra30Z3X4fCIF5FSIUL7PZQ9sPDaCWDG3SSNyZ/qWl1q4wNc8cF8fyk7i48xOKl2l5UzMDVa5FdMw==","signatures":[{"sig":"MEQCIDnzYpe8EhunYBgS+iliNtJKltFSYhEOtAwUOmHooHtsAiAoIb0z/jBBCa0LaL7arrvJ4xNZlH2XxR+eUZx8Dmrifw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNPCRA9TVsSAnZWagAAsJQP/iQqFaIwUrVU/2y8+lU0\ns9UQXyicyRvd2LKJpW5G6MeDv+KAzowuEv/vSxddmrdvCd91MidZMzlupmvT\nhMaJusz9q0SuRoG5RZ0sMzF6uyOdRR44cyRmgVOF3ghFrykNPXOnlB2EMubr\n3O28Vmb8HoBfz+SS3FCiA1wBHtBty4a2mbEdETiI21fin8EDQdz6wcBEIwH/\nmnw71aES3VEWgW8MYJv6G1wxprUdxDXmVk9QE+rjpzUu33FpN2cwBsg2XaD9\nLODvE2dKqPt9B6G0LgcnAiu1lNXxqRJ9mw37X3SGzWTUTVfoZhGa2JJcyK4C\nlh9tb/jhQdkozTqoUz+S4Wpdc1Qbfhj3X3f1xhboTEduWS7uQcwPt7LV53Ty\ng/Ylaxfs5TZKkENu+t19xktRj0d42Pw6JO2f7NXyzESNznEo2qVnskrGFk+2\nTY5zq/H/P4EqSiNAkP8VsrHFU5eYJyZV/y5Risd7mUrMgpDTQea6q5TGIcj/\nil9v7P8FesizHTlUoc0vkBG9FOhrMtULaHz+epGNpus5yZB54daYVtPVzy5G\nMfqR6fKqW55YVNiINmNcEVlJ+9PF7yLAOyAPjzCY0vPMxQM13mMnp8P1FhPN\n+6KL61ms5Pe04GgQ0UYYo1cSErz1u39+EO5yuVajTWJghKOQjlgtIAfKbCRs\nry/T\r\n=24BM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.06ef147b5.0","@material/shape":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.06ef147b5.0_1590784847374_0.10637233081675723","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/card","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c66bd116413cd0fa3fe180275a750dae48a633f7","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8073a20a9.0.tgz","fileCount":19,"integrity":"sha512-ypnqeUqcTouEBhTwj36FjtxlIGCVq3dvJpUKZrklzaYoNKvIpNm09TtJKAUum1U3wuV8Q59uQCSgYZpgIo4Ylg==","signatures":[{"sig":"MEUCIQDOR+1CinG0gnVrY98HBhSJgQgbVYaGprxAQiwoMGTfngIgFsc5wGlx6GoL9w0F3orJ8+VDj+8mqtzZyRH8eLBFe1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Zn0CRA9TVsSAnZWagAAI0oP/jsMdbSqu5lI3a+LqYa1\nU7O0bJA6mKxy8SNk3msPcFacRl/HriM5oc/mA5ytj4R++4VSVgrfyg+X8pUC\njbeO4uwgm01bQEj0o4Mg+n1tVqsP7SvuKRp+pCeNtzlnJsc1OslvPjBi9tIv\nRvuoOk3I3yurk8avmBsqvVpWZ0VJ51NzE0svxDstk9hqrvywZGb+tYaoRTlE\nuLyZl9nxU9nGhOufgOB+C8hkab5RBh+QnLQ4D3KhQ/VH3YIdQ1T/E8D51zla\npV+bfd9w89maDJVJ2jd3VPK98tAjBFS9vjs6EPeyGH7S5rxP2ulPpPxEKMBl\nZKa9UMfNgzQeA9S4W2pkrf08MxF62cZ1ZSKCHVAtXa8pM4Xzr/gIaOFnebAg\nz9vF45VUoVS/kne8+vm1/0gQx7+cvgOMLPmvaV9LhwiUbhc2mXtzdoucWPPC\nSWb+UyHFW+5F55DgezoUDuKBXluX3W2PnuoRAQ+hGieUzhQC3WWoDSMCm6PJ\n5EBI5cMfhusu1gn6S/UmJViQ1qmTapqmBFE/mg1DYQSycDWB95OXTla+DOWD\nOYeTbIx5unSsMw9JUS/ov7mDAr1h9CWaO4CL1zQNRUYXyMXcl+YkAvraiYdx\nNBH8JN/FhsUEXbiPkkDwlkoCVt0bTeMGhxU+DijZqgW56sc+Xj5uME6EtJRk\nh5wk\r\n=w0W3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8073a20a9.0","@material/shape":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8073a20a9.0_1590794739602_0.12550400676783635","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/card","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"163be1795b22698c9e94a10cf963825e71cbc7f0","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.72ff42330.0.tgz","fileCount":19,"integrity":"sha512-MGiZIROs74l+No9Uf6cMQwJfSBhEYBqDvwxPpHCeaRKOxZrfvSOonKmc8x3TVzqQ5va6JzbWdFCZuzTPOp5Adw==","signatures":[{"sig":"MEUCIBBE832vYJpxauh4St6Eaf2IWQz4NZGwTXuTNddoqbYbAiEA79XF3Uexw8yN87naB7vRiCYOlYZw93UYQr2VfhtniwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBpCRA9TVsSAnZWagAAGHsP/0Gh8825jZHXeRsIlkPY\nPpfSImspV8WW2Wovxjze1P2AIHXLQLcyNPlwI7CylmyyT5EZy6zz+ftnMPB3\n12UGkXyMFuSMhEraq2CN9KF4dCPnGov9B4GMTjSs0yc6xMWppT0LiAN41BaF\nsx6wgchaeNp2hcSI9RQ9VwAwS54p7oEiAyoL7d7s/t54wlLW6DwXauNY8L9/\nziOl33HeRj7Fe8mhd0KKl899jhywNIMd6JCKJWoO7Mowm/INxzhrZXC3NooY\nk9lRmxm8A1tfIdWjoGTN+Mtf26NGNa6fNAHuo96bqrUOvLb+2Hxfbjle3K3z\nmRWYomWY51c1rYx+/L27SHG88dxIqBzNh1cmPa3ZFInqWT6kE8nwHW3CTVKv\nBMjT2Ug7T93TXWwNAeFTomKXG8R9Ox9uCNUZ2TPcDx8Q6X2CN9qQ83IL/sQz\nbgSWeCTuTqhw2tBS+NBSlanL+qdCaMZ/w1XfQapun5htEJ62lb+F7O5dP1Vj\n9y5yOBP38jdMlIdenUXbyReJJqqOfwRFI6VPJJWS8YRE9r0d1P7M9d4b5xjx\nheDUww9abMmGZBluMrzJMEFZKSwmqscMROb/BOrNgcJks2A8vLJWfMEXBU70\npOmd1E7XxX6SoLrHQfv5V+8c2ZYg+yGSfFf0vt+pBLiMKBt42zbagpGbYo6n\nz/3O\r\n=qzZm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.72ff42330.0","@material/shape":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.72ff42330.0_1591029864610_0.8135080885504073","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/card","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e3aa629be833827d81f33fb32dd2270ec0eb313","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.9ea52070f.0.tgz","fileCount":19,"integrity":"sha512-nAOtMWkms44xl97qFagB6+EdiS9JjXkkxA9AV7aoZDwYjJUc4Wa2qi/7UP8wef8rC2mse2URyh+7N35P8c8xfg==","signatures":[{"sig":"MEUCIQD77Ol3/HmOOhgN9WpJnZ3yd+/cM51QjKc6Ez/zTyZuVgIgDAWBRnfkQYcQl4qz9DE38apj+SLWhl06kDskL9KRetw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGFCRA9TVsSAnZWagAADFQP/RS6jOmvNimpvt8ib+Bz\nCZJ5GEvL2QV8a8bJN0hdSPCLwhSxvXhRDEPVAGN+IaxaD10j38cwQZbOq1Xi\nnPKiiBmpALAHRZFgSjU7ZvbUUIwufyXzG6ChkCQjDc4n4FWG+ozzNY+yBcEZ\nXs2fXQkVFOJh0tuvnXAkiYg1TjExuVlUxubn2YJeJn4An9hLC7AN+2WwLUXx\nhlLLT5/d4vJgfH76umrvrL/I0XNZCUYMibqG4cokIm2iAzkxr2tBO/ob975c\nHebmtAFXFTxwGLy9N3K05GfQE6NOa5PvDOjAyoFS3uz2OnRxzfGJ5flclnx3\nXCa/V2FO90LZZLva3kwLeef7LWg7LiuufMUwPXHa2lqqkXQqPyFtBYTe6xwp\n5l3KZecbwlBjP6GvdEAXux2uJki/HgP2cso519wlHidEgyC1n/WMKJxWF1MX\nVesLzJ89AKaU04vbU4C7fD/+AC503C06KH0uiwI25LeTbz7r2Ytf+z4g2LFO\nt10xLNsh0tO3CQ2TnlAzhM1loSno/UBYIHq1k/A/QG+s1b2njuhypXbsXHpp\nwO4TleipFdoalRra77BjCfbgyGG2Ctf+LWp3vGrOr+IWHFuDn7/IB1uE4gby\nlDQcp9agrmbWmyDKxuWZACELUhzqTkWJBEd/76NC3jOq3XWAn5irSYmYUOjb\n9FYK\r\n=v9W4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.9ea52070f.0","@material/shape":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.9ea52070f.0_1591030149194_0.9260293694538715","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/card","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f34b937616427e52e63eb506fdad0da6dd0306d2","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d86ad3b60.0.tgz","fileCount":19,"integrity":"sha512-jZPuiNncrvvsRdL5IC+UIpCy8p4JJJxQfy8bPUt+spn8/l0Pxj2vbSsFDf4XYoJkwmv2p7VhTTgA5f0FQMY+vw==","signatures":[{"sig":"MEUCIQDofxjyV/Lft0nL1f+HZOO/OFDkx3ot/hVmB30pZZrduQIgGsmeIZv05b18aK1vVX7ZUEFr9wk8g6Nztt0/lIFZPzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+JCRA9TVsSAnZWagAAuL8P/2yWUN5umwGV3AsjPQow\nw/V0sbU9P68kCbpdRnq8zMVUfZoy2MXu7OZpB/IytzqDklJR0iKkGrDTU2rA\nhnJ5Pp7GH/dHff2MDeoFi6rynbrN+QfJapap2PN0+Lr3o5VP4rzpUY4fekzX\ncO9HoKawZhiZEXpmQP2h3AXkDz/3bcTTRxlDwGEOUffZGjd7K5xBzZ+Grk5A\nKIg2tF8sSELHk3ePIu8b4oN2UaUmz87JsLPG1puOzuXTxTMfNBGhuUr9k3Qj\nDlSQKTmKxolw3DQ1ZpOY30+j/eAEdq7/Ysu6AylVi1UTuUu3MoldmzWraEQT\nUTU6ZvYaKVIOIgk0uHIQr/x653/cSAROX+OlEOENqOa9wGyqTiHIvI6CIyYy\nn6IO3mC/IL6ZjeLM8jw4LRZ9HBrNJgsbcDThL3FfFVlIzZjh3u0pdyVCI6H0\ni3I/+hOo6SQQvLFYZYebIl3ng4ggSyYM07XSoVx0c/0nzJjUXJg3n8v+5l9I\nbVNiX/QY6TYNh5RWror6n6AF8SQ8sHf+3dS2N8cIsg4tvMfPNpw7iKzZR7AR\nC+SOiPh0UI1Fmpj+YB2dqkbaS49X9PdwEhzplUhWk7q0DfkJswkL4LbQ7QVT\nqBQbfAdmFt5PtPViStkkyUV6eRONLNxHEjXgOiwJmUjp6tzopzHGncStPv08\nVwZc\r\n=ylwJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/shape":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d86ad3b60.0_1591033737144_0.3933659814880641","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/card","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e8ed9f4b027cfd495d7d92c97d90122e1acdee","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b9776b1d0.0.tgz","fileCount":19,"integrity":"sha512-Y7aTFHMfCoeKLP7QxO2ZtVCituh6t48DerfOkkWY8jXAAXaqlc8fxwVnQPTvgGTIAo29AUtYDRD3xlsFL606jA==","signatures":[{"sig":"MEQCIHCnpiwk5wFOicTMoS8jhp1S7zweqKXSHs8NTxp7OoqFAiB2Hd1V9/0QAxaC+rBTexH4TR+vSn+ZiKX+hU2O5fLxnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Ug5CRA9TVsSAnZWagAAf3wP/j2+9tFvolyp6wz7BDaD\nlZbc7hzb3vhwCXNCVi/tK2hAiXLUeT0sWBGk/z1bXLgY4s68cjdKnI/8FfAq\n2HjJP3LjquEPpX0Gofxe1UimQxGOSDv/vyFZjy2lJcvNQouX9GpQE4yLnNMH\nP4c0Ralfv2p16ryPXfrKMJTCvVFot6e8tjxKWGbdVBouvHs+JdpN0hCjd3vX\nehOsn4kWpHVU1TpqdJi3lwKelbz6xm07Ey53W33rObONxhECCMe8KhcbhmUe\n2kOITRVUibMZ8vA9xZJ+ayHbrT8eTlKlhvBITvbBtjLMMkzkCS0Ja8ckI18P\nqyyEIP3jUJsydNqhyWmPxlJ4C1AB/ofIJUlBiHiTpA5j2bK0AB5yNgZuB7Xg\nI9nobQBj/im0jNjgCwxbQo52HAzJX9RiXcbIAsj2z3iuhZ59vxNT6IdVNlAe\nhEf04QdDrGob7gBuXhC4PVPNkPlzOxm5dTuUXpW1qFgikY4DQH1vv4PSLSaI\nOa/GI67VW81NAKL9vARkhcjdEeTz/sZTLFTYjezAqC0J68nCU4y5Sq6JnfNg\nob2W9KN3zCQYq/jRdi+ZkcrspOflQX3w2fU5UQ/g39w/zGCTJmlef4Q608c8\no6ySWqgRtxI/h69VlowB9DRzwFykAMu3aNyhnz0Lj9lWUkvlPID8mNRo2l0g\nkiv6\r\n=DX5p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/shape":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b9776b1d0.0_1591035961159_0.22993520900294695","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/card","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7196343bc3bc61ee83dc502e80e7a57258f1f8fd","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.ba6f7c294.0.tgz","fileCount":19,"integrity":"sha512-1AMVnkuztzlkKj6ejhr0jc2kZMBf7rX4i0whU1u9hGs6Bp1gdRk4zQhzPLhF+MkXJpmu5VirYX2Wqw94p4xIjw==","signatures":[{"sig":"MEUCIDT2vAKnPrCCxntK14ZKekc5VCcdoyYy58nF8AkvrAfGAiEA0ZSAvLZs7dmqlVj26djvcBxwET8BNXOk+3260q+ubng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oY7CRA9TVsSAnZWagAAGb8P/jXb9Mo6kt700Y5nmW5g\na+xUGqdjL6WnnSbpwHToMSRNEl+lUUQCJwF0iK/WtWSr1iY4OAWsPascT/96\nqHbh7OaYGtpKqjtqm3cmVFBKATYVsUAJl8O4wMZVPxa5x9pBHL4MJsKBpDZJ\nv8lsTdbegliymBb1Ia8JCq/zfHDs1gjJ356OLv9df07GAirVG5akjO/teXLY\n/xv7dIlxad/5uaDDqPvyTSCJEpEAvIXdxQmF10fM2sdYOHLGDvM7gU0TOwg4\nYuGlUbHrXCGX7GBgYERKXZskq34ztTSAzz6PlCoz5KPk/GC5C3/Pet/AW+NF\nWxNqoUx2GfA7y1xWBSzPgmbTZMpViG34WUYovMD2O1d6KnYUeLB25mPy8DRf\n/wg9zJ/a2IUfal4YNhuP0sGrvVWuYWVcQhYDoDm3b0X5um8NLs0VugaOMoT+\nTdKc+QJRdut4i86HZsdXsjptZufE0qOChFLZ8dtIy5Oy8lx4Z/H6lOj0G6PI\nleJ4tcZHcpKdqeydRfgLMWDr6wyVpiCXfgxbs0Pp9iZZRrS03yijacyNiihr\nZiU7d6iwsqJwahLfPQCuFRDA3KdK/Yx2p7clVdcMzKlFD3g5dGyO6S9NPhZl\npqWuGYEy96IXV8J6zpEB3opT26kpPWiNAbuz6wTu2U2zmk+nIdA9+xzkLc/h\nvcni\r\n=CM4Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/shape":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.ba6f7c294.0_1591117370844_0.9319275666804989","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/card","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ef6ff5f3e7084a59a4aff60cd64e0511ec9f827","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.cf3b664ab.0.tgz","fileCount":19,"integrity":"sha512-UQ4JcRJdkm4jXftpLrfL1R/P/8tXIftsxxZcKbe9LojvWw8yJcips5OqSdL2m6R1DvHZ6K8h/A65aNUSgpbgJw==","signatures":[{"sig":"MEQCIH827KgnLJYjjq9VvOMso3a8ioTBwAimQuvGwWJukuXFAiB090R/a6F/4kE2YNzCUIsTflxOGLs3Qkbxys+mrMYiCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkwCRA9TVsSAnZWagAA/QMP/38lH8j6LzRtysSRoDqt\nnkhMsiLGsC0zdX+yXjC7C053wvW9VGcIHejiYgSYRseHz59q57JA2j8HJO4O\nXyYneS4yenXmpkCiwTFRp/JvpH8woGI+bpSNUjIHbe9KSg2+eYKwdb7wTEpu\nG3rsAUVL8wAt7VlhkkSz/DjeFBa9Sb0D7UnQ2uPsxaOof4TAJlG0t41WTYf+\nOglxYTiMX/ZtkxRT2Jjrn5j1A+XnAWJZvBmTdOzZ3w/rYjOlQTwS71vu5drk\nwJSLEejLTNCAdbBf7dVKw+9IVNWtz5tDS5qHAJaMMytO1s5jV4mikBCYOs3B\nL1RPYgvQdtvpfhlCO6ZFC+xtTB+LJaUiQ7mwMJwwbtyDPugQSf/l7uqmEMoQ\n/N1c7qRxqxOt+KlNRh7WHyE3rwDmIbY9RHZqdt4p6qPb8Y5QREhJLQ7wksb3\n592Tc28KiujFoS5kipvSLblYvDfEiqKOg+FXa++2hyA6iyOlNPRfjtmHeGok\nbMd/TdinOdu/wHJnSrbqTLGLsdQFtn0mpYljpltw9ujW0QSTUOGqmKFmpFj9\n9ZMlROprJPAaYcfojzXK56333K5m1K+ziGrVA2UJdCxcrXeyq69o9j3PUNHP\nl7z4eJ63bx9YZdBw4Wxj3myZ5dkwap3+l2EtIf3HdsiKLnR4yQB/8gs39cG6\npDHr\r\n=jcNU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/shape":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.cf3b664ab.0_1591122223539_0.5332569929747137","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/card","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac0a521636ebedee8343133980ad9a1b26f19dec","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":19,"integrity":"sha512-P26WdggLqyBkRRtmd/3r8kwosk+vB/+XecrbeAC04fwndbXiJJErDhu9gsVFr+1WnOwPgpbnr3vB0I5d6iJdpw==","signatures":[{"sig":"MEYCIQDIH/YNZGrcM1npmK+WQrT9Zs3PQRp012/egjrc4b8AggIhAItoLGDbMLOkpuL7VGiHOf7d843alZhhiaUSMWnWyryI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYuCRA9TVsSAnZWagAAMLwP/j4IAk9cHeuMZz8uMo+6\nAVpoDbxWHRi82cxrgqNommx3LSjFgmF3XAweiSU6TF+79qfY+hUcGWrV0wVY\nfAixA6BIPRZwd2rG87+JMyL9dNIELM0PIPJ0Aaq6xHU56rjsWjUxxcn0tMI4\n1H4OLBTl+VhyaiwLtzftaqfI2fLDajz9ZY+ZslKNgNxo86MbhWifsbFyillg\nryaFrNvaBE5oOL5OLyx7xs/gd35YwYpWIvLXdgoy/WGdAB2muiGAnnNtnQsd\nzhMoSqDt0HLzlF5qfHOCwzpVsBGd0/Tgfg2Vddnu5L2UJmETIyy94eHf0dOs\nmq43qxMEVQF/lDo8pb0BoIu4t3l56dfcxPqS+pK8ygJ0Dk1T/kGQMOHUsTXv\n7EXXOuQFojfirwAxrcObIk7zs7YM8VRUy+xz7IGVMUoibPNTlY5azsaJS4s+\nY8COZLbBhzvekPUUrmLhMjYkHX3gTpKV8PEyBb7XexijdLOux5p8ma7h7qTm\nmV+pZd2fDvgbnBpMktp9yGCvNgJDrlVpxFG0nS25ek1re/XCJ1i13B/xMNLG\nkpmnDKw7rt2jFU8/K9R9lBUmMKbzX7k5qcRn23WO9lHkczK+sWTHmhQwtBoZ\n9aRghkEMBzTfF4vqbhHEPPHLK1umbzdlIJ+EG+w7abbzNjTq4HjlwBGRRY1Q\n6a73\r\n=fGZW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/shape":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.4ba3c9a31.0_1591141933674_0.6862906105364495","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/card","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e73772efa944d1291f42da6d078188ec02ec832","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.388b042c7.0.tgz","fileCount":19,"integrity":"sha512-+mrWpGZgB/tnKfMmNYZN/sRA4PD8dyfNxnIVyPgfPBF4UkWKpVwoOlaUTjuqrCfw4+bMhao+wnwjmeus8qJyGg==","signatures":[{"sig":"MEQCIBwTgt9RaizKiLMcKrtUdLFc7lZBL9yZ379AxNeCKfJjAiA2hfD4e+j6VS+MI7JbNR9TwBpdtWxnzV/ZCMCxzbHRNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16m8CRA9TVsSAnZWagAAeWsP/R6UHlo9lF0JbmjGNiGU\n2dYuczoT0nU11KoplQsGcqxy85WMKQDYkTbUiWApOoo+V1NLl3UGVwKGJ6Fb\nGTPq4aYyNwXaYmOcrHXItXYvWRJhiNXos+kzFiOq0WzAMRz4k7d4KGQENts3\nv6VlnOvCdLv2shw3Y/CEuYT6EX0yNDdLXRP4wUMLMxuvzcwK/V8uo+FaEOP0\nHnNFmXRAIoAETUw6u+9ate3nr0GwwD+Gqi4AH1XI52/9Z9HXVr1kbB6KUCQu\n9hgf/W6p6iBQz6I0Uw/megcAcuc0Wq2/qqojpBuOhH++UEFuAFwrNwQkyjN+\nhs2XBdZY8PMJD8PF+jxTsndayvhHVJvoix9bsHfl2X6guK3paHY5xFlPTCl8\n+Wyl3yp5cgGIW7TBw1Iog1Xtc7sBz4++q/03mbRomuyRAn8/leDZ7GEHepiR\n7zASueLNDCbQccFUi5fIgP5R3sghmPVv26CYdMh5M7HbKwEBjgz+xOH+qfOG\n2Vt1PU1ha1WxvSo1OnU5RiqWpmln2Ov0/G8vOyjX02JLXWCMVus9b/pTHeEF\nCuB4RpJFtwR50pcV4yRdV72Gdy235m34mavR1zwFmjjE/d6TdFA+9q9qUa0L\nUS34mJPtOYZWeVFPo06tsF94FUTt1g/H/+Mu8KFTfYtyqqiHNcPIzfChEYZ0\nN2ua\r\n=oQlv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.388b042c7.0","@material/shape":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.388b042c7.0_1591191996398_0.8051686231428423","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/card","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b721431300fd59866a96d7a55253d795fb5352f","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.cca1ca84d.0.tgz","fileCount":19,"integrity":"sha512-vdXlpx7UVkRsqdpNdSs1o71fmJcfnVkCphPIodBucw3eVwDYRLfjPHRJnpdWcIFp5TM6VAO89XtP5CURs3+flg==","signatures":[{"sig":"MEUCIE/cT8BAqr+xPcr2UC3gVWjGxSvE5Sn4pIQbuqI50GDDAiEA/3frnuXLswJffaWB/BsFgYHx9mUAcOkJRqvgwE7VIW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18nVCRA9TVsSAnZWagAAdp4P/02o5ebZuojmbsTESX7/\nRv/dHq4MUfNTkVDhDGG3FNZ/lJHcJMXMr2/B9hDNCzoAgMJreKbBk8bIDquv\nKEiwXQyVZMqOZRmA0dqudtdh9as1GLqEIMFkwmKtxiyS42OkTebo/GIDFVxA\nGa1UagqHJaRp7cLGb4mOy11F3ZRDXGqw7u31f6a0Ygu6CbPTvdr5HVNhMwcA\nmUb3GMxsibzCFNKLYEPH984ovzX/excFpCGfc+FfXy06nOpP9/NWlTakLWJ1\n06NYU7zXeGZTRUS+LYfBE+8/1x1THxdL7EOOiLB/nsxpCA+DGQbJaKV+dWgW\nZWqdxa6QihXPA2M8WhpsRoUpdrSRafvHp1otOuCTeBwvX2MnzCl8rt4gRoxg\nVKQcTBdGr1Lz1A+8nbDeQ9U1Nz0jnP7il4N0ysJLdKPFG5lAagyKmTUtD9ws\nKMyFNA/XLJTA9i33Iu7pUUnk8XJ5XwDJYJwr80+CIWbzOAspThxwlH8hThAm\naC5lwGPso/lUlUKVY5eFIaAPaBm2EAsNWqd6489xSyMSTrfGbEFpM2bBdpHP\nZHNj3yQSBqRICnDYIbMBPnXd5QKfsKiXQYKw6/5mnf7LSb7gOL1U8uZ3TmcP\nxW69OIjWTzO5ODBgyXuctJIlejnZHmanourqBEGlF9RscyfPjUHKkaCKoHdw\n/bsw\r\n=TS43\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/shape":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.cca1ca84d.0_1591200213274_0.6733169310632192","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/card","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65b58d5dc9c1588f0a5191751d0046f83a4090c9","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":19,"integrity":"sha512-F9xupZGRcKUW0kOAxnVILh463QgJCYf5EMXMh6nnQK/RTqyKzfAeVbGKBPYTAzfF0NxlOEp2JaBWW6vQ7AuiYQ==","signatures":[{"sig":"MEUCIGk6mDynLqeIYVYt4rggpX4vrgd+wwoNWw9VJwimPvEpAiEAllt7+sPpexlprRNEdE7h/uCT4efVf2OCdG6s7AN7kOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KhCRA9TVsSAnZWagAAz7sQAIu43Dhf3eMmlJdsTnlP\nLFo9MO5Xu2MaYJU8ApnY+bS4MU26SLu1sbXuJT4LuB/Sr7IJhh+xjyNdfCMs\n+NU1mwpGIrJDVHW1pB2B3gpAfh6MmrVYnGHibylMUbaN2RgNYNfgMaR5LhBg\nsBBADd+Y8oNUl2WkUkr5fSAtGF1Ct3HOQTnKacUqKqepD0qv2jWpgHzpA8ts\n5u5BMvGNwBuj+HiEPrPrOCksxXXXwl4cMtq43z3II+IOg3tmTRPoolzCt6GP\nESH/2S5/l5tQcDsKNgIq8TZLivYx8h84B4nHSOLZl2jD6FkhlqhBHUpKEeBa\nMkeoUIhSp3AqkRD0fGjzV2Y9g8vEle5N8+YU3Cq0oJUttCYZWFdb1lRUS6i0\n8pVCRGK01SRXVbEp/HqMk8dn8gaIAs9v/Jc1aBnB+wR0YSAUqjEZH2Tt/LYA\nn9M8g55uMJYkVUyZtRnNqiWQOBvPODZgJMrzNEolnTw7Z/7S7c5CXWcLx2b6\n7bz3+Ifq1l4OQSnShmjC5gp1KsX+iLV17ozMQp9EMOaLuGGQsWo1N1+8iV3L\nYQwxf8g9pq1opqmTUDhdp4hw8LGlcLDllrSQ/I8cEBYpD4+GOiA4n/coysiL\n1+X0h4lndEDWoG7HvNnzbZKaPlcU8qGfzT+DY3ystC1WQM9vxrM/8vNsqdlC\nAvmt\r\n=1iDA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/shape":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.9b0b5f2e0.0_1591210656742_0.9578897462241396","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/card","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f0e44578c83eb4a4492e3c5c1d146557030f1f","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.0a7895f4d.0.tgz","fileCount":19,"integrity":"sha512-yMIsVtqNWE5lWHzOlKiRkWLU22aMBYKxgCYlEh9msV6FdmvTgOsQj6ENio+zFesqge4HJaX+4IvLTP9TJ97O4w==","signatures":[{"sig":"MEUCIQDDv+o0mTpI/K7s+1AG4nRcWeubTZjGQ6kFD00t6ri3agIgXHdAw7lVin/3pnoL1KWRIHQxbvkAkAZnOYG9n9RfEVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BF5CRA9TVsSAnZWagAAgT8QAJ9o5c1HZMmGx4G1aGvo\nsqOEcqWZQqkIHu4R5Uqq+eN79r0lMggNjF0SJw+bAiZbhvhJII6YH4cQRNhn\nv8HQt4hGPZj0POt5W1ntbpwaw6LOZKFsXMpiw7tTgHhIeGuxMYCQUj8eyqxf\nkRGjTjGoZ31DicwGIX1yXyncr7iaeQGC1Geoe0fjWhjwXMcupUbBuOIG5i+u\nSHZlZwgYRIpj4jRdohQfCc6bhwMwnlo3ihpFryWrEyuZdB/7+SatQZEOZB0R\nfMpxsWGj6pQUWNWSu4bPyu6abSNuKharbMBMkMEZjTGJVgt/G3mrRVXSS69D\ndF2jJFc7ChQ+nIjX7BwUvZrrQKFFkPHh8qjZn1D3Bx0OReDVQZMjgemyd6lp\nduW0FR0NborPUDGt+ir2EQuBVzaABFL5OUVfAWadpgNb3YbTq6a8xMCo8cY9\nBrMk8bRkYZh6Sj8KMPXJy9pXqdfDxs8bgvt0ThlbJBZieLfZLP2K3+wtLkOm\neD2TBVMX3j40PiyxgQ0HTrJCoNv+S6buaYYwR5dKNitp02SyLfMjPU1W9EzX\nB2GY3T1ivMZwzDgeyA7xg3a6uMefmOfYkpVo3vXiCP9knaVup+I/f+RZ17Zg\nMRFKMamQ+Pagl5/3yU+LuzPYo3OEzuBGpjBrsmlAr4PtRRu5Hz1Q2APFB3Xg\n89b5\r\n=ujso\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/shape":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.0a7895f4d.0_1591218552782_0.8421329844270826","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/card","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5d30a00d5c19bd3d4f2b942f60e04c6198b66cb","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.7461aad68.0.tgz","fileCount":19,"integrity":"sha512-NZZHAnVFQvteUYsEw1V7X9GzxtWz63Nm1yXk9atGteQV1h3sdKo3n6n3M7n6S7w69PjpZt+ngAx1CE79ci2EPQ==","signatures":[{"sig":"MEUCIQDz3FvCT643lQxCcuFAr1E9r5FYGdWqZZobOiWrGQU+vAIgQpQP/j7zHEaPXwdR7t3lml6PUSTkVX/paDyosIwWCsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBXCRA9TVsSAnZWagAAHGgP+wSGE9OPMs3M3LED+9ey\n3GrSC3zieDj7Ht6LIvKWvAqbGMUL4GlpTWO9OGJ9D5rR+kar4OtaLpBK0X7v\nmaYYO+t9LWqttqPiGJYt6se4YnJxnbg11ZUP4g6it2vHlkTWZKZYVIjWO61D\nvVoSx2aob5DUynz3QHUXNah3cpTGJwgS+g0YKAAl56l7MxbSIaYpPF8EAezo\nCprJx50p8QAO74LUcK3r/MtmCw4aLw0UU/rl98iBRMFx0KtiYuZsxrObEer2\nBf05HjqMRtn4/28qe6C5thvBP/YweD86qKU1M7f4qvCS3dPE5DvL1R+qt4py\neHJJUqkcHkfvqb7vMQSymcoDa1g6foqEUdLAyMdD+8vBsSA2wukulxfb4G0v\n2D+RtRAvMFc1cN1Z/XLs0OwJdEdTV/IuKynv4xV7mIEA6jOzkV8LBLdcVMu/\nAETvnswEIG6GcVkETMwBhRyl2ONGoppzn/ZVL21T5z8LmtRfDuH1To2XGRfd\nLHQessWLmCB4bWNTN44VkQ9go3AHOSV0B6mcIabg+9Huau6AuVhpbUI/cyTE\no1HStodP/Yf2g871pwuixvYL1fPK6y4DMGc8rOAW6tTo4DrbxUHEsImsKQZY\nIJe8XHgttGDFpApK1utZKGyY+UTYwwqtpt552Io/jJgCbWJGnmePzFoC3LEI\n2JI+\r\n=ZygC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.7461aad68.0","@material/shape":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.7461aad68.0_1591222358703_0.7398622308691276","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/card","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34d911841db90c36c8034e888569a0871ec8cf9d","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":19,"integrity":"sha512-xzp/VBGOb7LIM8MW4Eq4VCnEh4eSAp10Iac1BTznYgXsq9SPwMMw6jFe9w0PcV9tB1J1gpCs9CMgxjsnVZ0Xuw==","signatures":[{"sig":"MEQCIDGUfKZYMXKNkj4KxuNS30T1lAM1BQATTrIih1wSb9xTAiADtnwolwWsMO/e+HAqnCNuZDHkMjAqnoDjG79yn2uH8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQvCRA9TVsSAnZWagAAeAYP/0zca+MLGZAyJF/AsSLH\nxVzmluKA62vl3VhnO9DnBBryE5JrkLRqEwqODstFHhlFF3wUCCanThciA7P8\nSibSXYDu+9z94Fl3iFTwGTPVGNrkzg/uFC+NrB9GQAu0b/su8aw/1pSOFd8Z\n3YelKQZ+XlcQcd69aIubtIeHOCBLtx9uYMX3Y3/W7EafVZlXGVIoZMSxO+EP\nOrm4To9HEwCtqfttvEG+URYG1CTCwPIA4PrbHEXj/1zZ5/caSn1uj3rBOvuL\nwlh4JY0G7VVFfifqkwdI58Nxjpk+X3kLGilZLTYe/Rf4PKnzWd9FLO+yMQTf\n3Rn9vqq6IMPomAcC8xq7WpdZsdCa/vnAQbpnrdc6mBGiyxLPwKGRFzlwmBVi\nnuDEXqLEItHdFEKZyYAlTP5Wa8duekmo5GveNyG/sBl2bOvRmbLTAjYupsDH\nytkRWjpsYrgusNsLubm0ylaAriTzDRZLSIlPIXvHXn2lfJMNc7j/5DQ4CiVq\nR4GR10U1EJXBCvukgEgMH/n+U89rygCNnyVczX11IYaQA6Ybs8JLfwtfS8Qf\n0K291zlDAVfaBre0Wo1G7CqsXcxOOqAaRquEoThbXWXN3rUQuMb44PpZOdkl\n1lGeg6nJebdFvdMYoFdQ90Fa7xo2xJAN1c2oW1B6dfMtIEe+G7wZ37FoC6AY\nDNZA\r\n=+QmM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/shape":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.a0dc2b5c4.0_1591305260319_0.9738748491259364","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/card","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e9827e8a5fe0fd60b66fb1348dcbdbc3cb1bdd","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.2b420c5b3.0.tgz","fileCount":19,"integrity":"sha512-ZiKEL13OIdN4RMKS62bDq/gpcRUssmcBukBk4gWvcaJgggGHNASkCBNQ6KlWXI1d8IIpbVL+mjEwShzkbh1XMg==","signatures":[{"sig":"MEYCIQCn1jffDRutOTbiLdGK2eKWe4BnCTcX3BkZGItlP/lAvgIhAJLtgi9AyDYw0oFlB7IrroTGXIjge7/WexFk39x9grZw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPiCRA9TVsSAnZWagAApMYP/0EauJ2d2Ono6waxaa0q\nesFqnT0JQOANnEswjWhRLGOn7CI9h4mc9hG3/GLjdljvnLhN7VovugSaREQA\nA9rTUlaEYnSIf3U7tb3hFX06DlNaUYpqlpfC9PGolCQiyYLN6rdgZzW0YpTl\n32IvUwlPcMmosVQgLfpZesdcz3tbVr2VE0Zxkc2g4Kiio/S2dRJJ1g1b+Fph\nkOg4dtkoAWpRzGic8wDx+LjQIc3QUa0berD3s0a/MCNAzdTFb2mE1anJL+nO\n3QeDAFV7rpyVIkPorA8G+wisjba+ysGl1rc/8K3ooGDInOaMXz75c+GLy3cS\n2hDqvRfH8DOJ4AnbSVbOguLgad60C3DriTeIWLAMlVe1hCAYJsFgZoSVXtU+\n9Q619bMpY59Ccugo/h6ONBhK0ifqZOZA22+rIjekEqGmkOk0HS9PI01PB5h0\n5rrSsjDLhwIge4ZablfDlEpDsKn+r6rHBpXQl/QHLPwiccm8mJObr+E1I3LW\n1+ixa0CWHXKslAg3s1VlW3lZKXCr6mx7eFfwmb17PhzfueA9U1R3oz6EIHYc\nB0vj1+KqfEfSSfO6FteVBsCqfsefngg27L6+wGJCBNgE9twK0kvkJzJAT0xe\nGXbx8iUayWhrHA/ALw0ytVT3mcFFRCGb2D1x15R7jVnw1fNyd/E34m8aKHWP\nXtXk\r\n=jX5U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/shape":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.2b420c5b3.0_1591632866368_0.5545522588550367","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/card","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b6d906b0cde4654df2e333896f97b7e06d0d104","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8fa22aacc.0.tgz","fileCount":19,"integrity":"sha512-UHb0TgBRnPVpFadJIjcOb2rbxEs1oBAyPHbakfLQBnhT0Y7khkWT+5hvww9rXtjpgD1zXo+92k8Rlgu0AQF6gQ==","signatures":[{"sig":"MEQCIFgID/cCeqziExqvQVdsoHo0E4/jt2akwg5kC+QkE+E5AiAqZkM1W39v9D/Wq10bZoD5D/uISXVHxe4EIfuDYbq+xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n26CRA9TVsSAnZWagAAg7IP/ibDOJ2+bu+RdvB1U4Pw\nAg8vXw6MxNyPL6qYtZvkoztJ3P1pMLOwFtRxUYJTgNcVAs//KEz3O5ELwv15\njSdBREPgPElNju6GB+NVSjnRuLMuIvpyZcLPYOsuKRcM3FmEtkLbkm0njKsF\nEpriKX9QnW2e2lh2VIHzfc1bY9LlgBqtS45MXTomibYUmZAr5BX6w0niY7EH\n+qVreop8Ef50qhJpNe0tT0988KqKl2PoSFVwJqb5+bbDsH0kYmBZCC0Na9YG\nSvJZAXu2QQ/SitIUm2lQ68ZYAvAz8/Tkua7Piq7VetissVQTqwJqhNejBeXc\n79Kdzmp9OvDnMStmiPFAPD9gTsygVtTQMCX18tLl08VnnLXojJUogcgt9yJh\nlnKcsZfOepvaOORVpvBHnir6VgWPJubwfq5PVc4XLz0RSJIN8snIeVSGMFkz\nwj2AXWmgIR+TSWIyDMEzJH6lwCIqNStZ2Ivogf1aUaL9oGYTzD5k1BZhQk3t\nsHyr2IFPF5gmlx+H4NociWgpCEI46GndRhSLiNHcixLhbuPJFs2oQ0dUgeF8\njpKvxOa6zLTii/NF2Rhnapveu9Hjz5aLyGogW140m2lB52XpMLNOAZwyaB6f\nciuV3Az/1aQPd5J6MuomneFAykqWmp4BTdAhLuuhow4BbuokVVc/YaCWEZ75\nyRDN\r\n=ot5b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/shape":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8fa22aacc.0_1591639481580_0.12073177050535899","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/card","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfac2af687565e79279cab711f2487e482f5fe76","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":19,"integrity":"sha512-ACP1Twrm71GMYxShwnKgUbb05kuQxFRpGbQ0ox8HkEriGLDU9KxmjA9F2HT54CxIda71xq2p4E/RUVXanFBM5Q==","signatures":[{"sig":"MEUCIQCErg/VggzNigXxMr9XpL5p3czUOst19OImGribD626igIgSatIWKAw71zfMAkQUUvQ+66pVsMzs644JftG7W8PrkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocBCRA9TVsSAnZWagAApRwP/A4EUvFi6k16p+rio30W\n9QZRbBfyyngHpyedaHW2zDdU3lYcncbFtyV0kGduIE7Yayie9CeTIMW9YecN\n4cRVkT1rOSWqr2QjaV1hQKqnVObalLVoJO0jr+xQF3fHWC2Oq/XP+2MPShay\nLO17IcdI+afOYjKkzv0P+dI0CafGDpp87b21Wr56Tlhedw66FI4AXVqHvDFY\nIcMMaUCBVjlmD+A3+fH15MBmci8JPUiAUvtsVFdoxF4iJJp4s/PjuK9CWLwY\nv1yowahYXXDt+/1OdXW79hCNKUHWDcyccnlzqEHVWdi4XZ8j4FQqdI8eBnx6\nNpqn3/pW5+mvDBdyotfikAxEpf6z369Veni4wZFwqFaGb6Cq1hIuTjEXywuR\nhCT8MQihJ5XLwPXhNBMxRFCEc8Fvlg4SAdREa5sVI4kMS6FNtAfQqkZrE372\nAGfBCKJNBWxfPSODrtT0MCoP9yKBVr+8gdgz8wOFJlcGS11TYtQCw5pWDJlB\nyufx4jbBxgwrEHBwrMaoqS9Reb/9P8+Y95EG0LFryzYDzaSwXnsPKcnZfzsy\ntAHj9PG5xQhrkQdwy1DHiyjYOvEB34Tb3IVyHEBBGkgWCWjPchL+UHXjeXRO\nA5fQ3BmVriuCxnXPkYlfDBBl0iuV7OFuEYO1LBS70OLJSd8jo8cqQzafSsHd\n2RV5\r\n=PPoR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/shape":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.21c4e4ed8.0_1591641856911_0.06817115565648058","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/card","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1785731f5ec004f9ca131758887a6dc41e472e01","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.dfde46516.0.tgz","fileCount":19,"integrity":"sha512-7GNA1QD7xqqjHz2C/ZA2sWqHHoX86RaWMNBOZ/fISu0cFnjTftmutRXSqc6tMUbZGJvSWA+lLhI8vhMUSj0pcw==","signatures":[{"sig":"MEYCIQC1tKUy/155fzOvFPAnMXxHHOtaWWGCifexMhnC09yKDAIhAPO/oUsNTCSscdXw277Rq9QdvSWeJqdNyagCFSbeaeyJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSFCRA9TVsSAnZWagAADMkP/1gIhKje4cAXmCMcJzwP\nPPdKOjSgaZKQFLxYFQmz6Nndy5uEGlJvo+gzXcphkwQkY75sZ2LXbz178NTD\nl5WPwCiM5KvfTFSx1LlN4WzE+Ko9vvwD57eNctD2L4kZ7/7Rt12iwCRiG/f0\nehyjV5uYfqZjt0sETsU/gCCtLrsU/pp+V1P9ZJ2XHByWVjIq053YH3tEdmqq\n98o2UrzDlleg29F2oydaEBrQ3MJ8FK1htHzmVFXbPKvIC31jK3o0ZZlpLBg9\nLtS20VgnjCJlkuC9v7m9St4fb0d3MesNuPC16C0i1wK14cP/+gmnLJdeikj4\nbCqbb+d+MELAwQkYQQ2xpKmYrafDgA+t+ZvA6pZIGnyazQ8xZmqk2/tHF4B4\nUfCaXyqxn8EM1hBkcI0dgKJtDRpjSozRQdcFa2SJ+C0qFxbyQ8BiCxqhrU+I\n2IBt5XxsZzs72gU16/OdJJyvtgO41+E8nk6yNBGD7VBhPdFn/IRbLreVL3PG\nux4qSgd/FLCK1LEIqH6+H3S0VsW4/bOjL7Nv4hBAY4USiPPJZcfgp6Zhu5Lz\nr6B5LXRUUMh7UBBCWa7+lsphdSyFgvdiYiK0NSsZaWevJbUS2y6Sk4nYYubd\nlE4opDYpw1x1WrCuHiQT7i8XrfqMfNyFfaC3KUx12FvmCZrbssjIActtA0Vh\nBMkf\r\n=oPQT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.dfde46516.0","@material/shape":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.dfde46516.0_1591645316663_0.019265433635567986","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/card","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"713e359275e852d4d96a1faf12fbd131a187421a","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.05cc5c206.0.tgz","fileCount":19,"integrity":"sha512-KCIJX+r29MSGNmLc0ax4Iouxib63GppdlSKyaYwlj9ztiPRqJnppCALu7ouAhO3Nj+4aDDWT68ihG6z4kjLJPA==","signatures":[{"sig":"MEQCIGPxe2bWnP9WY1Jvhhw1nGifbkQV8GRYZUmgqWTx1/EEAiA0+E60uKb100IjCJhjqN8bkYyKXLWbuK3m5059UBG0uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYuCRA9TVsSAnZWagAA/9wP/18zk5X6x8UaJmELwQmt\nVj0ydt89x22txdoqn20gDNUujrzOedKxifmICgCXGlylGM/7/jDLV6JDoXTp\nGRn607AZ+6x4fwyU4vFOtg/AFkfkhfRwteHIHzJxB3ScVGL8YYKIOeMfNeSG\n32wTkku5DC8St8znOhJE+kXM+IvCSo+MTiJ9QSZnv0cyZM00S1UnXtb+z/cP\nNZKf/O5JNqFiJJHySSkJpby+YwW6KHoUW0phV/U0/+gYwP52byR4cuzMpBGH\n++oJS++KrAEzoWPWgzkJ7mrvpqxkoH5EPohQt4VOYUI6lWP745IpJjRtXXvW\nyAo/dLFa9aYSmE9u8qcsezy29RG1bvB48Z8KtnEMXXosJgqCKxF+lXSQJ2Hx\n2qsrjy8FdaBnRlMHbFwvLjJV6wu+fTlQFRCZXxBtDWaMUCh3Hi1XkjmMw6Kn\nDnk4Jg0FqZ5qpqpfL4N7gIz8vylSNaZ5XZaNy/OJigzYTYDQSK4JUgVXDdhk\n59LlXaYTiNWcAFvy/QCHavoCedU+hRMIBgYbx4wpbItpR2fammkBMsbhzqbp\nQjdJaxHh/ccjmaYBkKlsyZaT4AFc3Duq4yuA9ehhnneb89UFLGvx3Rw4evzH\nTPbL7EPWBSi50O/E58TXKCcw5mjnY9ELmymJN8UPHn/qzAUMJiGXimr9sc0Q\nqHc8\r\n=+gO9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.05cc5c206.0","@material/shape":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.05cc5c206.0_1591649837632_0.5817815374341302","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/card","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ee72ae5e8316acb93dce481e2984e1337435d1","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.3ee488f1c.0.tgz","fileCount":19,"integrity":"sha512-eVAEOoLF7rhU4C0IqkgNXlSJhpoNyhYCU5oPletsyzeqocxcwptMpFxRIvUa2FeAe0ZaJ3NwJV5mC0Lb3Tb1lA==","signatures":[{"sig":"MEUCIDnCobntKRH8cLMjYedcbgXIcbhnJf/jTTmErKHHp9+gAiEA8ePb1qcylJTm/nNxn2dcd33tZf4YpuyjQaD8WxTocBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KLCRA9TVsSAnZWagAAiEMP/3NcUJ+f9iuavvssZOD1\nI3t9TWyw+RI/FU2liawIx4Va9ms9x4iYRWxHpUdjEYS36/LnGI2DvVdmdK1n\nucrMIT6AwDAMuifBdUeFlRyO/Th7ZJJ6Kj1GLV3pooLtoIJIFMPp7om27glt\nYWKo9uGYkSiAHpsQbBvZp/QrKF6RMV4ORVpBS5NVZIRmIp7/JHHcFy2GYmk4\nUNdtPr/oTOUnFnpeGIVjfYJgbMRgwO88lLEgP1HM2oCjTj6VV71/6VHi2QBX\nzJPWkECTRfWrXfApHSkSowBkiGYm5djDgK84Z2528n+mM3VyUzk0LCKX9jWA\n1ow95VKRhKz86Wff7RM9Fm5jmf3i4XPK7IBEhAUCvkL8OEfSzHcCqRPGDMWQ\n62sT7tUzhXfxt9DvK+YTSYAbll0/UJCLfJZDM88dbDNQom3LPaFhkU32s6b1\na5DUAFz9dZi7hNHnXF86xxgI7qHjobPXGLTV/qtZRUsYhTuHIfiL38dUQj+t\neMegBwpouNeogGZXEuobV/nXzg4HMkvJSgJv71P8hvqNcN9xZPJqKRQFPaQw\nnkJc1sgn+UcfGMJumG1tdeHVyV6csJOoLD2HSW6owtKAP3glMHtM80WZuwzD\n0OQ9xef3BQVN+kSvcaWtRQ7l6iEUYwoZ1hFSUTpdz18AcspgZYRseIkprWr6\nJFEX\r\n=6Zyn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/shape":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.3ee488f1c.0_1591714442535_0.5763551905329689","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/card","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c1b0cd3c2b5478f3df52c1de7c5e3bb120a3ac","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.b83d720ee.0.tgz","fileCount":19,"integrity":"sha512-c9RlkeO/DTS+znBQDUb4nTvMvfn08B7lIlp3DMAkUEcPqBNgSbqklnvj8kYHTFChiq/TB1iYZtbOGW0vEbgqPw==","signatures":[{"sig":"MEYCIQCE52MLpgufyhi8+Vitdg5PqJRBmiDAJqXvR7poNVAivQIhAImLm0QGQISQIpvXj3y/fnY6rzksD0jQSto5VOub6AQq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZACRA9TVsSAnZWagAAYKYP/2Y3T6UlyGFO4bRX5bYk\ngQwg+eL6iHqY4T61cFaMCNhI5NN2R8Sxxle6I68/UgjHWf9s5LZlJzJe+vNd\nlzI2LYDjpLGrcdHRsNRGOfsN8eVRcZ6LbQFFz0PMB/W9iraD289vZJNUTs/x\nMOjf2iMV198KiQHaIxmJeeenHePIfYjK+L5mMminGMrImksQDJ5PV5jigVqo\n3i9ScQErES7d6MkuUuwf9Tqr7I7Y4gPb2u2mcMuBGi07tILRPPJcZlTb6N28\nbzKy9LLtib93F6qGzihN5c4aSlczR7OsTc1oNzjYliyaFXEJoU350qEfzy1m\nU5XTlQvN/JKJR1OASHPhqCsqEz74kI3QCFTmUBtDh+4p0w8NHa1/kVRkjn7n\nCCHxEePo29UcGrTy+cY6jvbSDrfhZu7V6GNPuaeNksaXpF8OCLTd5WmziS0a\nfLliw+mjPWhG7MBl4fDwOi5IJzwovHUTEIaHNgo4CV29TMotsTlDBVS1KdvY\n+QvNYDfm6H6e9iIGFTOa5QPJaBW/VgVouP1zIN+DjWLW76lGPdsPuDpR9nQL\nkjFMhTDnihf6/1yPiq2HHP5DsNndDdZwoAIg/ZXMZ6/lFXwh+VdK7mep7JAn\ncwUx4UIU+J5wHNkjxXKUAum3AJi6YMPrea2BzEhsakcumUBTOVBYn0ePFFMd\nLH1j\r\n=SCda\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.b83d720ee.0","@material/shape":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.b83d720ee.0_1591723584295_0.5572482740687128","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/card","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aa0468193877be0148d0959c0cc5d49c42ce2c1","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.afb1c11a9.0.tgz","fileCount":19,"integrity":"sha512-hdOa4hI2o8PKXKOQMJkTRyw0/czSLco/piDb7rsND9447P5cVsUM2TG4BPjvhIcMajzy0lYqeBJrtUMli8I/+g==","signatures":[{"sig":"MEUCID8ea9ZkIwy5qGIP6UpR2X3vWm5/xoowGRzMBwkw7XO8AiEA9pinWNh+YidWTR+dZGJTn5gKYBF7pdM0U/TugPiJtbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+43CRA9TVsSAnZWagAA/vMP/0bV0puCssJOKZylzort\nOpMCWRM4AY2U5XZbup8boqqFeLD/mIMQGzARMaZriv6DZ1IN32WQIIrvgZHT\n8OZ1qKjoA99r/wZDPLorEe7H+kIK+ijP8rcH69WADZS5W3hjgNE3PmOROE5H\n04zo6pb/aX6HkLXQmIleVcAp2EnGBlrDQjkk4u+ps7cE2TEQvVMdtyC4ETKi\n0Oir0w1xdzItCHvMAfk5+rSN1B971QMl72C19c60tTjUIRoYmkR6Tfjf6GX3\n8ZGk9I1yK65hB+ep8M4cX6dIU1cMwGufJ1MJHa1i2O9V3Tr65NMFospitVQW\noYNJufiKEur+c/EdVcU2HrpunNerelDKKJWky7uzB4WWjRmhHuqPsSgXwbz6\nBTGPO6K/tyCoKSAP3Y3zamzD4OAozwGa57Q91s34yprpUq72h5swUy2AYnPE\nrPVgO62CphB78CtahinK+GJqh+GqkuhK9nhn5UCfjtgzcv6tB99kQa/F5R2c\no5cj4MvbpiaNiHAY/eVgLp2BFrmHIz/OflhI5E+LYimmyh1kWtEuhe6ZUW9x\nqp8a7fWw64PzsdeAIPN+SGR96Y+lPgDJggyNXIaZUUAl5xwH982bdEZxHfeg\ngV/pQa8XoEHnt6kBgCylkPXZdsH5OCCki6UPBs5pGQ+YbFeccT2iGqkcGdRE\n0dhJ\r\n=kq/a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/shape":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.afb1c11a9.0_1591733814920_0.53419282228978","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/card","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c945150517dc9e32629a234d67920400e9c735f","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.39e6f71e2.0.tgz","fileCount":19,"integrity":"sha512-Fb1CnU7aphOeMhJocvZ3BQ5B+Bhb2rcMse/a0dXfLzV5+lV5QcBGR3Wb1JVT8oTXLQv/GiOP3vxurq+8Xq6vIg==","signatures":[{"sig":"MEUCIBJGGnwwfr+sDYKMSw02NP3+zcUwH8QQ/vL6MuVHY382AiEApFpoY4VV7k5E7A8S8CFkd/N82SqZPu1p2T2d+5rZB7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3SCRA9TVsSAnZWagAA0cwP/jQ/CwFwjm1XlCVW/DbZ\nguR2faDt7zfM4G3E0T4zw8y/MzVbPtSt9LLMN87po1BL5/N+qPBzH5xLewzl\nsv//DeehwPRyx0+n1D/CCSou/DYbPVRuFutqygTf/x+Dh/Rkk1v5ZxP0/Lkg\nfWDH07dANGcPd8I30FxupiaAfh3c/d8RZIIOkJLcujGVkOei6VevkNiYto5B\nSl4C59DuqNwgvdUejkSc/ru7/BsqI7AxkrxXwu1ySSdG+q4CW4EnZSP5rU4x\ncez0keVWUI2v6C2UfHtBoTnuKmq8GYBYmJFocEBy2P54Y8lF0AjoKBmYJM7C\nsIUprtPj4uGI5a4dVA+zsAGgMgdtr8sEzbpzl27HXi2WglbUTaKhQAT9eYFx\nm7ICd4qEPXQWBGC2u5ULeogk4PvNwfZnZsCuPO3RRD5BpeLOZLXQK261JOUx\neIu3PKRORlQ0gPJ1TJQhpEQEQBPNyjhg0D51FRT6czebL+l3U1cV37u2cTLa\nEJ6widjDFC2L50QBFweBnt0+j/ZOUOjVRzgOx5o5p526K/kViVKtk1K2+5D8\nW7c8P/OGbNl4zgrpJ5UZ6LKXbUOnRw8qC4sTeitaEeHPpAGUuiS3xB/2dLLn\nZ+uHLXgtzxhzx57zpFKglPjoYYPHBDTWSt7zFvet7dckJ+hiEMQXReI2CX55\n1cOj\r\n=tuAo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/shape":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.39e6f71e2.0_1591746002168_0.6646540241868921","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/card","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5de44a0dc6dc3403bef79e558949f21a99e74659","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":19,"integrity":"sha512-I8Ar6FSfPi/kC8gNbcvgguWmh+5Y2GUm3wiMDbAklQyF7a1dCA5Sv7P0lmeirUwJhPuiBKqtvd8UMc4iK7+M5g==","signatures":[{"sig":"MEUCIAOgCmafKpL/xZsswcR9ES9tb3BNfS6DjOH44mp8bMUZAiEA5dw8TwRaAz1/LGPlMhNYYYmtJsiDRBfZWUIHC+FVRtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4VCRA9TVsSAnZWagAAJS0P/Rsex0k3/XJ8LqSM4Yts\nkXCUSCS31cO0PwEWAysQF+pSar9JBKeLX8Q43j5R+MBMSmJw0NPSasr1ai0E\nTP7H9b8CAFcDby1Mq8Hu5E/msTDLKsRsiOYJebFdCGhvyH8Bra5D3MoF2evF\nTVjV4nGUdZ5spO/eqdVgSWO+SStBQYggUKHuOvmkEG42GJL/XWLu05ubzw3O\nmjyWZ1OwTglgl3NWa3YZvree1PQg7pGSVWFTqrqxK0eXQeLzE7epw9h4jBX5\ncrR7pmsuAqxkMcDCrh+C3tQf9RHLOthcA0r4jmXdPdVn5vwf/H/GTT6Na6ds\na4oivRxcaqpIQUc+xNvotRT7FaONPY7MkpQ0FhKTDqBTEtqPw3Km9hQ0vXS4\nFEqgtqD4Z5gZ/E9i9Iccjaf+U7AG0ozRbyaWA4XJWaLEsDVj2FVx6O0AcvRH\nfiV/Av7Fr5jjN6uYdx72zGUpQcHJ47bbgHm8zl/k3y/eaSSPRA5iPjLSYb6N\nuby2bJGbe3HGl5D/F1+RDduZoVqDw6v0h6ayCkpxwyxijoOFiDVla0Ty3QI+\necexqxReLJ+N+rBuSHpaoJszIsK6jZrC035HYsR4/p+3CsUeeI3AWVr0CgLc\ntU0MI8BtyVuJoCGzfhGge+OGg9VkmOOuKJlYmnObkgmlkp7KH8CaXtt/wYN4\n8zp0\r\n=/GkH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/shape":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d4c66dc7d.0_1591897620541_0.7010117624932526","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/card","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15dd5fa820c1acccbc30233a0c446af4e1f885a9","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.be4a19f9f.0.tgz","fileCount":19,"integrity":"sha512-dcyH+kU4y6GYFMJKnKaSHvLOP1pFfHA6e5DlNG9kVoNIVeAMRFm2Nmu0kPP1gi5XltlHRdDkHd1SqKOWgOlfQg==","signatures":[{"sig":"MEQCIHKKS6W8FjFny8oUCR5dM5+aPwwNrD/lrD6JuxJnj2qwAiB3Fm18bWvc7mh7bA0MTtRvl51DWjiZDsZhtB3fZUsmcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvxCRA9TVsSAnZWagAA8wwP/jYP+7zJeagRqxHemxBR\n5pPiyB2/rpUTZ3qBAuukCVLB5YuML5408Ps4zkZS7h85B4ojzUOsaT9UG6cF\nLw/UCICxhhe5zrFPG4e+7g/radqV1yaKvA1PZdIAcmpOv7Hz6qloOr88I/S/\nSCmxqAgr0ak0QXOfjAiTcmjdcKb1QToCwKH6vwGuVgWZTn95c35kVNJWEAQl\ngfro9qPhm7tNoU2OqGymrEkQ85ZY1/h095AsQdSTLB8WNcuSjytH//3Apq3V\nUQhIJIeQ4zl3nxdO4S4chUiJpbJaspsi8d6O+zUyhC40TvC+dbNn8HqUOt3O\nVrt8ADBQEU+gLhknamkrxFA9D4Lv18e6luB1ZJv4j9hwADl2iyTg7zoBPKU0\n38xpERxYNWwJoTtxuP1Ooywt78/65wQgwGXNT78FN9Fw5btbWiaf4U9eYdts\n0SccurNpSYDpkW09L+MrxW2kaPltbzLH+CkECl6a0mzXZdVUw1ZLOQPe4ZGW\nyCxG4A9uLJkZDj9iIQerVA020WO5/I9wf+0SLaHcC1dUyBTk3crgNIvoVdnh\np09tsDvUmb+TicF3XzMulV7pRgfL6m5adyR5hx5R2tXWKfel4ZenHNNf+Moz\nP7EMy+v/rhfhKL3KhQ1vaQWqZRognpDanR1/C8X9ns8AiyDTcqjLHwekZvQa\nFCJu\r\n=N20w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/shape":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.be4a19f9f.0_1591942129171_0.5128665077990489","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/card","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40349de4d7af61add37c5fc424deaa81411fc6c6","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.a6ac8f629.0.tgz","fileCount":19,"integrity":"sha512-e5i9+3hTH4hT+RtMGNq9E0rsbajkfWmY26splAt5c+402k5K2Qp2aX63gq3RWUqA0XR2ApPenScHlL7IiQTavA==","signatures":[{"sig":"MEYCIQCi/VRQwAt3Odrx8EMxOGgjJdfQ5r80eQ3/yw4WlklumQIhAOywI7uDJhwxfBEpTs+yBbi+U4JS+7sLkVDjDdF3PggX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iZCRA9TVsSAnZWagAAi38P/jFgJryS67f/fi5g/pSj\nllcCJ8tVEBn9OxU1V6MzTnobkBw6ub66ewuVrEJ//fly3WvT2dtD/+NglrPX\n4yKn7mUKQPxTXgfFGfGAQdVrnOImSXhMuJzjWrTAmDNBrdr30/yw/lN9Jymq\nt4J3MrT5MLGBcc4u0R0gfSD+6MoTCM5MqkEwIPQWmAgen6hVzphFbV1PEX7d\naQh4IMnsgnbqY2PV5R6f+8W6tvq6L2iqEJjNkY4mIu2uEX7OMYMknsrYKXiA\nB1m40VeeBaSeI/LBDRVRO19MHbL5GFMzyZQAByp0nHycCrpfe7x+Dj/hbuKl\nx0G8hI396HXPYNbV825K22aaQK7E73ZhR+92Ui9FXviZRE7FfzbY6AN96PuG\nDBl57222oOVe8gTgOEeAfc/awE/aMUvuFWMYcpDWIJTJl2Azt/+3sIFetiDg\ngpgOkUCh7ik36Q7ihkBjkisd+32TSr7dl2LCBKZ6Q1rQM7oMTdb/HV4ztABL\n9Us2A1rT3JJwtr0+oxUksuzyEtjQFQldzkRNRqlykKK/zu5iqZY0/bVkBzGK\nowXKcMXKBpoXFk2ETygqNg1NmdAgGkRUx9ImZtTDKtyFX7/xrZRpg0Nsv+Fq\nGxD+TynsqLyJuBh6yTFn3PEl08zrCHYuUoajm8+KinOGzRfqzvzh9Dg3VwVY\nlVjU\r\n=87rs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/shape":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.a6ac8f629.0_1592256664710_0.7385959790548338","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/card","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0001b046b41cecfee945d910639c57c8589bf2e","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.9833dc287.0.tgz","fileCount":19,"integrity":"sha512-97bVA6NWv9AbScfjK8p9N7HEhHEbJAdijnYfhgk6F3V+pGa4z/SiSTjnKZ5Gyj6OjZDI6seg5R9Y5FRaCZrCSg==","signatures":[{"sig":"MEUCIQDCTgu7X0aDHDifvwVKsIl46qQO7T7zuZme3T+DX4fJaQIgAx2DN2IXnRTTPCjROKBidRrob0O0kUJdRiXor+TQA8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJbCRA9TVsSAnZWagAA3g0QAJugM0A2pFD7lDuNfK5T\nIl9GyXYSQG2do9HPdvc/CiKcB1mpKpeRvKNmHHrhIHuBuVs9Q3q5WCLTjOmT\nN12eH7b1f6tr08AFG+KH8NZ6oYuDHFD+SPWafZe7MCZsX66iMwkWpodEaAQt\ndxAmUgfptmOwoqircz6CtAXhyB7Ou8AhDX46ioWtAAKKctCm06/78MAJZXbo\ntus34NroV1Jvo8Bgc2ym72f5z1RsFhHwTwrwQ3Gx7lPaHWUTSPoP6TLtzeor\nK826LpogR1FIjLg01BkUYY6v0FNGu5i2Rb2EWc3/JSUN0ogqiAJwMDel/Nvj\nL0xk/kxKa86RUdhp+eQIbB2r1UkVL4aB3DyOfpcw/PXmMSGhMvs1myL+UmgU\nn5qb8FCnUu5ou6FlMkbyIXnvg1xml+GVCAXvWc6unA4hhfX6sg2GBAzR3GP1\nTroHojEYLGEBaDrCELpNB8EU9MhqqFpn7bc88L+JycnmpRtsoRtnw2WqVr5U\nWFrwRX4u7CBYRIiihDUR/HdONZJu6YQA0KJkvfWTaWpilRV+9KbMs8QIQe0e\ncZtqdUQfbpraVjNQAKLOfXj5XRAH7zkDw+lCnMuI/xbbv7ArWgmw5uDasdLD\n2/u855k5USZHNtFZcDOG4L3PsVs8vi8+UfOVmZ9n5/KjbDVZFQ0XeAhJs8s+\nVnpZ\r\n=Hg1n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.9833dc287.0","@material/shape":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.9833dc287.0_1592336986686_0.6095797668135721","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/card","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fa8227476192542d06c75e03d2509db5d7d9581","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.3aa33998e.0.tgz","fileCount":19,"integrity":"sha512-pwGwb39BzXoADWlgFl/1wDXG720Vazju67Lp69xSs3S+5BYqD7qQTXB5a3+Z73i3iNHxUTTy8dZoDmKvkdm0jQ==","signatures":[{"sig":"MEYCIQD/f80CpJKdEKmwqxoMkx3mst9AlvjZB4Gp7WIFR/QzbQIhAOhmDP6x7+wTB1EyVVULgJOc6tBqVwo4R1ZI9EiI7eGg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SnaCRA9TVsSAnZWagAAziQP/1F5gU8qUluXl+1MWpXH\nLEy8l0/Dj8ASDkAoZaCGijVQoG70hCmxvBpr7niLH2xzXnTp0BDMgavU7KWe\nn6N6z6QQ8aeRt9kcCxYLvrHbxVZ9lEiIPjNNhJFFQvKuCA9QJffUWWVCjw0G\nfBDyffJ7uNwN3+/5whHwpzLSBvt54vT6zqohFLBYlA4pOVD0qYP6NACRc71d\ncT8zig3ezJOyTGyIAX8Ll6LxbQ7l/S0fwdegHX0DFZpAK1RhIiFSI+Dr8gCE\n3tfTKMyLS0T02Jny60TeUG3xYnACQiAIVzl539ucMC/tHOwoBO30q3WF727h\nH7mzGduIhPwE6IAkpxF2qfa10nyRiik44AobSkFzJQyHlC7/+Ls7erE188gP\nPKdvVD2B54ZZ5G5VGBwxKu3ynp+9rTQLw5EmMJsjm6TDm/8dNJFnOX8qRZrz\nNO4USD1Z6lwwG11lJ786reRWQqss4zZGhvAHNAv6Jp0SqmSJ8c0X9EIcXdpA\nN2bZdkLsBVgx7+RteyiFXahJ7R2xUIOTkzrhaVLBzu8tj8stBKNCyZMIgSPd\nUpyrBmIHCiaj3JH3cG0kofEVFN+aMMahJu6UiybTH8WXM4V1B11wooM4kNfP\nMpRiDxK43X1WedUn5C/yEBnbH0bKNAujbOgXpYftuKS2j8Mgp/ld9XpEDNTp\nBvbk\r\n=jquW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.3aa33998e.0","@material/shape":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.3aa33998e.0_1592338905390_0.7218872816963728","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/card","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bce76d45173c007a612ae567859077f502c52f2","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.d2b54d183.0.tgz","fileCount":19,"integrity":"sha512-WtkoudhEyYs+Hk+yTwfhzzijg2oZ8HlnR/p3EiMGd+hULmYPNs6s84brcfxoEpXsXg7B4QcDcbooMZjzysltng==","signatures":[{"sig":"MEUCIEm5Ud0Jkg5l5vqDk9bksKz2uBrUE4GEPe68LeZy/fCaAiEAiigy2LGHmGI9uilRE8xUa36SQB+iE5UmT0Ei+rgIpX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBVCRA9TVsSAnZWagAAYe4P/2f9j/QIlKnuv+9rHHWJ\nSwwAUClIqSXxncqLWOiFTtIcCFfITBc8asx9l4IGBuBa6C4n7sF343fDXr6O\nZ71/jgEecf8EAQdbPKPKlnvhz9sfkCr1XQdE3pqCvkF5Cs03aQlbQpnAf8gO\nX3jyTBZQVsIuX4LfyusXjn4e6qgnqc7/OmJNSQaOXuH0RaNmc3xNMzP3gHj6\nAOoeCE+/jhDfcMTw0isA8oHCv6CRDfAZE8F6rmFIoYVVn1Z8aJmIQ0jRvPDw\n8VOot6W9+a2MV15QTNQLPKb1PZIQcnaZSrqOGbPkGiXqEp14uepbLnGe9W8d\n26CSHcVubZ2dqS6bYHzLiIDM7vMGZRTw7g64mmxZAtWsbo/YrhKcumlcs53U\nCdjquuiI9ZY5WfMd1gkETg3u1sHLiYCQp56Fmv7k4ppbxuCBWK1PYCHev4FK\nljWgJ1KZWMwd08PDNPbA4FKvLpOVffSWEsFZtnIkGQ+SleSFar96L2SmLV9t\nfOsjLVDVZ7bPgXS/efM+r2nB8bKETf/cheiPj9x8Y2oAoFdhy2GeXGXf3dUO\n1GfglST04KJONkmWNpFDIgvE1v3HEvJw/NqHMDZl0xRYX/cK20ZRt1YWk6fK\nNwRiN1DOaBL4erS2c4iKkJfvLEnQV8gAYG0vzVBCp3BBI8FnAScQwfyj0dQ+\n82nx\r\n=d8xm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.d2b54d183.0","@material/shape":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.d2b54d183.0_1592442964910_0.41049424074753293","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/card","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"269002fe1e428b495af38ed75626a5c0deb0bbdc","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.f2a488e95.0.tgz","fileCount":19,"integrity":"sha512-RJEyuNFIOV/MVUKCMa4AAM0WyuLzpMgoSNlY/5RtxNiC4UGH6n1xch9BZSFayTezkqarwzo84yp7oCTXIlPYng==","signatures":[{"sig":"MEQCID7zI1GSSmiDDaKqjML168Xsr7RJMs7ES0Qo13x2IlWOAiAGhD2/8KilbYM/7vpu8faEKBJSiAvzqRkc306iUxT1PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KLCRA9TVsSAnZWagAAKHQQAIoIuStpAlWdmrzlaShL\n/yrdY78eV40vbT042FmGVwv10BRGRE9xca/qrMSPo7QkNSTQlTcZKzbnrur+\nJGZR99L/1b25DvcNmtGeSDqvqtRlEr6N4SvULLuBuXGItb0gmlyWOoF4TvnE\nYEQm0Xd7SwdoDgIvaN7v6UARuSoTh2VJbvswTADCg5J+yfTfmIugKSXGfEsm\nRmS3vmic4FBsOyDfHZDWN971w2OPHd07aJd6u+TaV9wbts/Ib5JB7N2r+jZ0\nGO5CqBQnY9hl8jwRJ7bVAuHKb6CoU+URT60XF2TmJWuOcMxPn5sfKOOGHsag\nWrl3BleyWEBilna61SZej8d+guUAmITZ+nS8sQ7pEqdsrOxrGCB5KxNzIz1T\nvku8l+grFM/2B93nzQiASxau3DYWKVRlL01vWWznLy1hq1OqqFRUjf0JOGU5\n4p+2ogKS9LXTBn0ydJpWEj1seQCRQ78FacQaVr6bLh6r0ZgDoOVr4a1Bnw5I\n3J/0eE2KXJN5wuz91fGbyBA9ARGP00D3Ck3GVuhjN0CdJ8yUxCRHeDCZ3CrS\nC6hDXq/uFfRzrSvELFe5FEy50IfRYZnJQ9lkloZz5K1/+CSXEAoUud45b4n6\nZB+JQ8wKjfVysRu9/btxDpOMqdtmXvz2rEJ+77f3Bj2YhRZykraKx8Muu12/\nKSt5\r\n=qy8h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.f2a488e95.0","@material/shape":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.f2a488e95.0_1592492683083_0.8672452066810092","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/card","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820fa713bdee62a9efdbf09496788afa033338c4","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":19,"integrity":"sha512-3Rs/57K8vTK3UkHIpheSYAySjo5u1IP2yemvOXrhcGMB4T3d7BTSaMIj/TD8e5keDLmC5rbYUwF9/8PYrzMT+w==","signatures":[{"sig":"MEUCIFnpwpaJcAWNm4za4u3GOyg24L1Mtr1DIY7Na8SUI4o6AiEAp1gTEotqC7jqlRDiKloxpp8LQktIEpayag5MdSmL6A8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VcCRA9TVsSAnZWagAADQ0P/i026nKeszbc5fKBIc+Y\nBr76Zk0Xej81AjNuk0ztlgmZfzw7/fLgVxBFDnFbR7rbxPFkckOW7kJYZuYB\nW1fgpostOBMd+9IZrzof9Y1JsQkWswdKOl5QweNqzhMbQGbTMSrDkCCywFbA\nYzVswfs3rz6qrIauW7w4Bm3/R/7sIHlRtsdYMCIntFvaCL+r6fFG03P2kAj5\nzUYv4xsRhm/9ONPVPAoe3f0z6ISCn6+dQJEgPbvxLYVt2C7Ily2+zD/xFZtv\np1Y112MQNdwxSxFUxQrOjtzwi8FWVTzbcp/i68hnj101Ad5Khao1skgJT//M\nR2Jm4kEcTuBb4jYLJjtL+P6G/Yj87QmYeYjIWYsUqdlhB276d13wZJ7hblO/\nu5vC7TpXgf2d5G7O/vNbrKpgJ4o477iWUOpa9rccLXAuWM1O+IKDiAsi/Ukp\n5lqU9yVlM5bd/g4xIcSXxxVbiGnQ5wFZ+dxOEV2aWWJFItIE5n1eEZ6HsP1A\nl/wSU7VWzkyatkBuAcmCYhRF0B1DKZpbIw7/B4+soJiJDXS328uVpeEzcspK\n8Roq3ad9uKpueItPITibBkQ4d78POdJuL87T6JXXT/sk7KQJmoIt5SS5CVZs\nWPK50TI1nkj6s0cs0L68I9T1q+URax82JfFvAO5WrDFQFKhAOIuO1/iJAa59\nSupC\r\n=voyu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/shape":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.bd8d1aafa.0_1592493404178_0.941407529391671","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/card","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3935a14d2eab87cfa23424a94479b67422753b0","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.1321eb968.0.tgz","fileCount":19,"integrity":"sha512-sWXk+uE2XF21M59aLrQiVNLHHQoX+XkkhjFzUNmXHPOLxVQd/njqVaEwAksU/j6O+xbdN96XezMleBO7dmiKnw==","signatures":[{"sig":"MEUCIDsPWFST3KpNS3+5wwuTBOtazcXx5yjn9L+YCEcVLc82AiEAl/MzMzMdqp3vwFmkZcd11EzZOtUs8JlEMw2cqoZY0zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBJCRA9TVsSAnZWagAA4LkP/3J7dwTlxdG7BB8RpX7z\nrYQ6jqZVGhz2Ry4UAv4oufRFNber/kkJ0pRrQSIKoAYIew5KsoOnHO9r1kwO\nK5AVkYaxd5p/DieD/mupbo0aa0y3uBQEbmCqNQhvJx0s9BN9xsEPdUGY2ei4\nzyIOZ8Ql7SuAQDOWDWfn0XQKnnB81Lj6c/8hZsELg+g675DwjPTsTCW4660Z\nGVaeKsbccwHzoDcSXfVCHFTcuEGRHuvmPJi+QvggeooRT1l+cs6VvdZoAzjW\na6Kj5geSlkm8LevqCromSBWUofbVBIYi1pO3QBhxbIHiwrA8mAQkQ0fe47c3\nqfdW7U4x9h5zlFbjooesXQhabtw82zkTzv267vLTHDFS8AzlLy0C33pVV90m\nBq/pLeSo+0mItsP+IQrnQVkbzuncjNT4JMom0TWt/8fzHmgBJanPZX1pK4Qr\n9H3RrlWnovgCLoLvoahDWFo14Ac37AsTY1KFHs/yi89QsaVyMdp/8+gHhJgJ\nGSfkTDZG0R91otOxA36NEDYJjlDvLDXaKY/zNoZeh7aVL5CiID4cm6XX+f3R\ndOlh7KweCvPFEyiDFA3Un8iuVEFB4U9ywCvOi3iCElinEfh9CScU+GkcES3z\n97KF5lYz0rG78tUlLMRAVPD9apYoxtZN14VJ1alHkXGS9loYT/3k0YsnO+zJ\nbIj7\r\n=yXRo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.1321eb968.0","@material/shape":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.1321eb968.0_1592594504638_0.3077993647376127","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/card","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a97052cbbd5776ddf63ad62ee06950b36723418","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.db5cc0382.0.tgz","fileCount":19,"integrity":"sha512-hfP/vGFUs7HwTz5KPt7WT/bpymxT9annSKtUfnE0lbTrfcHH99Sb6zzDLhOULwLQvnFzhYXL0M6PmtwfF/dUdA==","signatures":[{"sig":"MEUCIAjeacVbTDMYG/SxemYaA06zh31o2cKAj311wVjH0ucuAiEAyloQ2k8Qi85Qup7JLV/JX/cSbLV9ZauJJ0M6EwQtPvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHMCRA9TVsSAnZWagAArgAQAJp6AzvnN0N9Y3sn68BG\n4AnI+53TE7Ix1S9OMx2zKpG0z9L1UQBDrredJgdnTvk8FbaAONMWxKb4YLYW\n6AQ7h87BxXKnFuicZgwsfT16hwBhfMHzIpGuMlIYH2LYawCSOwQWQsHaf/N0\n3YQR87Aj4/uAqamJupIUYHYVFi0mt/Sknuvb/+FKwS38OgyPApU+X+82Gnk1\nJnJBRvzsJJqj+sc4Vuytyc2+9v/r8gI0AMNuOMZhERKC5MsdTd9WUh5oUPz4\nNBebd4aFH2RhzM8HvsSdLsLNfAs2vIFgxHuonDK/LU7D7bTsr3ctVy4MY+J4\nNSjoTVHuFGdxRBPc8qsF7SQTXOKW8C/1xt1/AwB6oXem+eU+pwGlWKLJiQBh\nWBDop4tfr5Mxw0s6KXm4y2h293WDHn6vMsoQfEdXfbBl1f1NA0DJTceRfOsL\nAotYDCIeESAMz+95HL7lZVukOCIuk5UJtbVeAcTV1p7L7jX5bYka5Pq/6n/y\nSyW343E7E38VU9feJLlnufzxiLhexQ1VUrVi2mYpMiLsOjkoXpF85ptKZZJD\n38ZafnRpeG2W86x2jlLi6Jnjb6+13in/DTrOi8iY2plboSLpFOBScwgHOO/6\nSwHSJGotF2++dJO8YQD+XyfVJUIOrma7bDL/VbQ3NwVukqG1gQFj+Vfv4GSG\nEScv\r\n=L4za\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.db5cc0382.0","@material/shape":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.db5cc0382.0_1592594892310_0.09581815118796233","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/card","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09479c20c48699992cc9b9e55e2d5927feba4d9b","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.6ac9bf031.0.tgz","fileCount":19,"integrity":"sha512-DeTjIoehf/XL2oKiIXJrSyvpySUAcW4EzDT82st5wYVFhpkVJXTeDDe98MUtmcvQ+NKM2dAPCQ1F8im0Cjup6w==","signatures":[{"sig":"MEYCIQC/V4L8cyKov2Uc+R9ffdTqxy6l5JP484ACaoTyRoILLgIhAMQmBYAfvDDd6q8YJ1k0+YikgYYXFifxSradumR8peVm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RaWCRA9TVsSAnZWagAAPuoP/izu1+wDAwlQi6vrWANk\nSCeETyu7h9E0Z/MvDAlF2mNxj5DinnDD9Rexr8U2xDA6k8lHEfso09J42JjG\ndxyziRagyHHbuGIB5FEzV8KxKSPSemvqg1/nZDRCA2O8UB9fTkutxjNVSEau\nIn1HlBCvyGE2j6B2FcFbTTtd2gkKccF9hec04MkYMOBCbf75t3VihUgwOMqB\nPhRkP2UX+WAzOpDZQKI/7JoXz1gYiy3d4BtzkG8CZjHG0W+pgtc4JE/7NvVg\nsG/4XRxBi/nRdWICIpGNl1YGLVIDLe4eUQALbbdPt8gjBwaPoKBtpUSIZrRn\nVuIYhBpvptARwlG+AysuNPJOqCBstaBWyrf64g62E23U4DmRmvAUW3ZjOfvq\n92/5sMVo18SdaxTM4oNgG1rQtOrpQYcHvNSeb7UnU+blmL8kqGogLMInkMrf\nm+3kd5yaXQjnurJoxd+VyLtuCYl1/yI3cpnQtlflDE5BCTmxqd5CPD6dtaLo\nFXwQMp545Emk3nmjjzondeT7e0w5zR12BnYK7JocHKLxsJADAClUMtQu0/U/\nhWfwgDP9NW/lBmqDbC7ue7mo3nt0D1mnxz8LXnKmgYG0cytsvOIn5Ydf9zd2\na3SBLgDsHqcB4IFMG6HYzRMfkBrySgUrGGusu7i2jJ/x6l1AiaH0Vf/waTpX\nyEPb\r\n=42Sa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/shape":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.6ac9bf031.0_1592596117658_0.3896258918715483","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/card","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32c743887ebed7404f61c8b7802f65773a877197","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.c21b5c367.0.tgz","fileCount":19,"integrity":"sha512-wPAe1n5PJt/LHb+Fi0PTg2AnkmMX2v30hwan5Nxjcn2sSfEpFo2K/R2n39/YhTeis2lZr/zS/JapVIyHyO+2Jw==","signatures":[{"sig":"MEQCIBTREsKxfa6746PGBSUiJGwnRZ+m5VQTtXsij/6SG34pAiApLb37QXY8SnlGczkQr9kt8Duqp0/0HuTymx7aCZlv/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvVCRA9TVsSAnZWagAAxmMP+gNp/pE0lxDHhuUe3P6g\nKIPcGXgDvlRMPwYgU+ecXsZlB/ACmaxtcNk1Or1kCKzgdhQ1kZOYpRjiGx6b\n1kzw+C9v3KAYv1krnw9M5Jmx85krD+rmM0vmaonLHtDn1IsMD3lAbm8auJml\neq1V0OhveHkrTNKuUXK1WztwZIGu1/aqEhqm/qkgE4DiV2o7CAQQ6Ro9slWX\nFbV8wmmDzNNNIwCv/nZK+rDDvGViKDGIXUjQbDSHRIrft6GCnTKTMLKctzvH\nEqvbrfQ+anBdNTv5j6m4xTduySz3soCrIensFvYBvNxX8Eb8AF/BEBAS+yML\nOi+hhxjlr4NcKfKRmvvssCw8wjFC85mu5VHowC/kYISI2YUcVzkeR6YZnrBO\n55fSfUOc4ZCFbHhj1y2i4FTb909TxaTz+M/O1dJsKhX3q/ymcPNOHAdGuqhZ\ni/JPJB3h+pLrXSY0neDAlDWjkEEGsVo2EjQBus4cIoJEP1use+Dd5kMQfjMl\nrgAHL76ylTM0pDF7hOwPYPfcXGURIXCSFVvye6KoJbTLtN7LBKhfklsHZuFe\nANIYRqPQBfPY+vDBMUl12XS5wENbd6oFDG8zhmrRIDWBUUPIRNKqz7llV9R1\nxLOpexlBe6qmbfboMhcJIsCu/YAGcdQmpUGRrsCKCc3XTlZVD6n3w3r9Y+Fx\nZp2F\r\n=zYnW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.c21b5c367.0","@material/shape":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.c21b5c367.0_1592597461216_0.1336819819315589","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/card","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06019c671b87d1ae3a544910bef424bb41a148b3","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":19,"integrity":"sha512-I7OFTZ9MTQO6IpmWIZDSPHtkdaXsAP/42ym/qHRfpvR1OWZFGW3CDuXEbVwwx7p3TnxQjAaiB6NMs+S8vAfvog==","signatures":[{"sig":"MEYCIQDm+/rWh3b9itKqK8FU4T0BOLY6T/kIzgT/RTPUCLwYZwIhAOwFXyUMriHcgxlys+twHbItSMZQuGzPrvLRyOmfN9kE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4DCRA9TVsSAnZWagAA7iUP/3ds+xQ5WxGj2GINooHt\noEiFI+L1neowD7pgutTcgm/xqspLpjMC5g5HbfF8sUsHoewbeKNan4IHiexX\nl76xG3JeIqFhpPy9SwtAHnMw2p3IRmNPyvQnL9GfwQbyaPDiqx+nfdXSrS1h\n9e2SrTq2l5tWcgTjMUtyq98FqM6AYjGf2UXGTx7S/QHn5BQfmZ7Hfd2EdtL6\n2ftXmQD3s8kCsqE+S8V3pGQM+GmAEh3H7ZQO+T7wOIaJ9rGxPzV71NZd9jX8\n0KNbSSgvkhVO+ltm5meurd+3au3nm2YifVgJvz2kFppWdKfJfpsoCyxrhHN6\nCyoz2N9PSBL0AmkVxY5H1ZGu2Tep/ztgrwKxk7Dj4EI5JgdVwyRplmdG8MAY\nFa81/+Miz2rzYFqI3g+bgIol5huDAkRT0vbz1VJrXpErUhta3wTi4ugAA7mv\nKJgLQCIErnEdryjlEPSZV1M8fvn1UAPQ0W8CC8hwX1Mxk/SccmTMfd8KJLc2\nDA0kyRabIIkivjgpE9cOl6hWdDIGJpWvhy2TLskIKdZr5UAFIKh/haxN1BoY\n7vvQwM/8q4VbAYduRpXe+DNLeB9JMtA43xBF5nEeZnpHt9q8yHXkt/KEW1du\nqJDNjBI85gGKQqoG8eBGNEtecf8TgggbDQkE05LScS5rdYTSW/a7hTo88/je\n1sxN\r\n=J3zH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/shape":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.bfdd7fd39.0_1592598018583_0.9814046613064247","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/card","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98f9dc85e1e5d41a123020f9ac55d00e8daa5d23","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.10b505785.0.tgz","fileCount":19,"integrity":"sha512-QxFJqrpWRqb5RELJXYCwmjDuMK7WflD6DHJV9F9opBiuAi9AcRKh2M/0EPnMOgvS1cIwd7dVCl8EyzmbtHIzEA==","signatures":[{"sig":"MEUCIF41F6zvvwRDShz74zvwzWuL/EDwTUSS0TT3MbYD+I+xAiEAihpTKqN7Y+vk9GeFBWM8rfL0W0XMjBkkRHqVgcaj1/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5cCRA9TVsSAnZWagAAMBAP/1X5ZU0oCPMMRfcDyuyh\nymOVRS78F4jSfbq7bMIUHV2VTZ4/TRx5P1s6zVUNS3rm0l1Yg3y2VOOWfiS/\nFFoniv3imgFY/I608RiKiIy5SJgNFJOf9ZVtsnOQd84R4iT1OOeOKG4nOLNQ\nv8SvmeEbp3C9q80FVW25ZnDSHAtS78gSDbyQh3fgX75quoVzESyNqmGoN1LR\nGK1hlhSWV2fl1gmiuclHS3P8wphx78LajKEYzwkxrGwr1r7VIiF15P2cgsX4\niruV15DLrVkiC2opXOdBVtSxZg3wiH7XHBxmoF4YKn/wkmmh/eJagNBomvF/\npt6RCItRxREN2tudu0byjRu+xY9u9WEyoraW0aQt/moQBUCWEmd1GUURHMoW\naQUNlL+esHMTHzoQJ1Mlp2RCw+PpDqmANHO6IxwaSroOy+cxhOgbZEEea1tY\ndGaNgKoE8eKAjE1CpVSn2sXbs4siTldpvHE80eikfH0QgxdLRkesG90pcsKj\nfOqHjGNYLDfnRBK6VzzdgNI3cmV+/sFOUPvvkM/9thUlQ0I1MR2f2ugwaTrw\nzjLdnEpTuNe7pocMFZAHMUhzNYVJK3AexB/1f6YIBMAf3wIqwsDwmAprwQKM\nb19tknj7jNXh9sKinhp8bLHdij4+mOvhYVBOZrRp7bVWiX6gLftkI3yW35rn\nNvR2\r\n=VsKh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.10b505785.0","@material/shape":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.10b505785.0_1592598108269_0.21195969346836407","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/card","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6c489aaaea7bb28138526606bd4d1357239144c","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.6483d3f44.0.tgz","fileCount":19,"integrity":"sha512-uhy98ELxKFHK4XGGra9t+YCTAgJmXJGFUw2JkFAkFr5npLfF/rhP5fpBrEk988N6+8fjca+g/np2PisO9Nx/1g==","signatures":[{"sig":"MEUCIDzrZoOHIk2RMWZUzibPCQ+ywv7TXWn7eLxl+gd/Z1pMAiEAqgQE7ncqqDM0sCuzsp8KtOnhIXsNKaP58Hj7R311b7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SItCRA9TVsSAnZWagAAJyEQAJN+/x3VH4mVncZTifMJ\nYElTs6eJQyBN5tp84PWsLBDrqllwFlutnpnZAU3l4NwxKu5rAdM2+DiH+qed\nMy/n2jPloZzg3+0zrI62q311kc3L4U/YztDFCkGK0zQIgolJGtDzB/RB72kw\nwkHgUY+VOUy0kaxUsznDkvwS9DISnie0VfoG3NhG2Px/Isc2xd4Hd30rfd60\npG9vYAQcTEplM9Odj1sMJxcEKdkb0oRlvqrLdBtzwNYvsJv9aE5S7c7OaSeL\nqjtwwrprDlmBMj1ybTT9B2DzUU0Q3CLmxsCWBEX/nqQgma1SOiO584Amn0sF\nVRPQVY6zby//RHoCsBjR3FXdpm2ReP1mvXkElHDsZeJ8l0NjfAp2duJBd8wz\n35DtYEe9WsdOhvhB+NYNa5MfURDTST5kyoZPMII/6ZMmbwRcDCCczDddFwjY\nYjkqOCy+Fq5sspINNjoIr4nXySBUl65QLwKt1/eppOY3nkRNRMqTJws53o/O\nk6qFrS1yzEsrP4WYiPlAl/MiNqkFOZrDH+QWaDD0lyhMzWc7iXAXu1Sd/ZQR\nh92WlJA03C1VaAmdAB6wS+bijWOC10WIacjiITozfwJKiT4VvRfIQSN1INoy\nxPD27loSfb7duMldRc19VHLvS80uV89Erl1igoJsPT5IVSsxEzwqxSVRwbiD\nLUy2\r\n=LqaP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.6483d3f44.0","@material/shape":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.6483d3f44.0_1592599084615_0.08798113527247664","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/card","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa4f0431cf23856fbca1364c3da3feaf0fc2ac6f","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.30a74e921.0.tgz","fileCount":19,"integrity":"sha512-7/7z+sfUD1DfAfh8HdC6+FtMUqSm5bKBc+Wo8Zf9NWK+wa7tVFXvfgx5cLW+WABXuzKgNq7ZAF5DnzfaaKwOOw==","signatures":[{"sig":"MEUCIQDr3qukUs/k1XGMS9/Hh14JIAqaSGOf+jRt7+G85QxmBwIgU5EPOXEbuDguk54XmDD4NLaFvivoKo3ya1v6pUBCwXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKxCRA9TVsSAnZWagAA1BUP/1U8gxrQXmlgafM80bxz\n40bEgl+M9dsYMMjG9yUiiYdQznlXwZ0f53YeF562gn48CxKHBGVDPsIjppmm\nftcSy87OqXB/iQIW7tTCQCo5XGd/Whs/STmw0+Qv80ZHDapKvhVA3QlSlm/V\nBsxtCD8u9a9nhDxy4EEqkZhYsmOU+K0o0l1GJOqaQ/XYl8DFNOu6VuV2BKt1\nyGPO1yxCHy47e7eqbI20vcET2f71n/rrsg7gJnFqtbFWt9aRC2p4Q9yfblcE\nuG6wrzwZcPDHjGRkRR24NQK+zK9WN7ktbSh+ulxpK2iCbstbuhy6DenS9ncV\nHdO6vweT/scwfZ2QFWlfqyawMUdAO0JVfTjbOTTHtEXOsSlYJTbyXkXDdo/T\nXbV7uEq+alHKCss355jf+mrTyMLliy7Fd+oVPmtIQfqTQAlhsfSHLStK8v5q\nrEtEXNaJTbR0n7OiJmh7BH31DLlblHqRdX30DLM0JbGSvhAOYnaa907s7fsE\nBFxyq88xTEud/Jo5C+n/1dQofXs7gEXcVfwAcMr82Cy5elSGlUE97pIeBW7K\n5CMQOdsNifjrsKJnmw4lFT9wAChmnkX8q05frmfntqgf24RA8Qr6LsvF+GT5\nOPSoaoSMs0YSDlGcyogNI6bwE1Jal+WF76FMcKZgz6mSXpQfnnQ8s3z2QbqW\n4QzZ\r\n=XT9O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.30a74e921.0","@material/shape":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.30a74e921.0_1592599217095_0.4352629077093464","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/card","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77fa6be6ea7a3575d01cec76cddf416e070c461f","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.c20727498.0.tgz","fileCount":19,"integrity":"sha512-MKVLVHJC9eumdgo2GSVTNHctcZY8KHAjI/JKXyNdcF0pOrBmpVuF5obnooZI6DgBA3sb9UkTyVY2Cnunb8u7Ow==","signatures":[{"sig":"MEQCID/t0DnlqM/WSjh1z6aJNU7Q2Vk0lex8iSpx+ipqSGnlAiBUOwyy5Yv/aVwpRf087oksxPdAuovGsnGkdfK7MBqQkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNZCRA9TVsSAnZWagAAuPYP/2Rd7pt0y/sawTN8R6U8\nTlSOFeoLhbmXggjMRyDKJgtAt/Eq6o91l+0nxfmfGs5IwH+MbRiSwzuIAGMS\nE8CL0hPCdKuHgZwMivFmMGS4c4kk3UPiKdsVnjOnhJa0sTZJ96jtNOoDgpAz\n0PmY1txIZggyQlrgFZk/aBqzMwsSXhTjuViay61N3SQTSBKcMZ4CN8pLFlEY\nUtXAY9/Lco7E/w388w3+xjHoEcJnQWuKP/UOMY8EoWLasIM3AD6GXnGdsb59\n/OrvMOTTse2ervjp8OMXw3UjmBkp6Erj4MKTMroy+vS+a/UVsV1cKnpW99qp\nBKRQru7YCUiyN/giRwRt0cCDhh1TwwSFdFtrE1hvRTDQrdliVYQQXabi/Kxf\nwtCQEeY3vCs/KDt0xqgfelvWZqHjhYNc/c62yCMWqRRbOCwJE8v5jcolbvsc\nIHAJh4GKcFw+XlPYu0z2sQyfbr6lBsXU0cQffm54RIHYZt741R1Nygw70k4K\nHkwvJ1nKIU7O4/C5+35aZBqLIsNapta0G8YesdJAyMSgIpDGBzGidXUbQGjw\n4L4OrQUxSyt/2QQrkd/fPjjpb2ljOvpUkf/O1u+OGVDFrIP3pTBRufz2B763\nTPjguPlPK/r9Fp/DK6vqcFzejIQvquSds3Y0WaEFdEHoSuKywl6Gor3ZLGQJ\n6CvD\r\n=Jo90\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.c20727498.0","@material/shape":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.c20727498.0_1592599385025_0.86637326729194","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/card","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"202d773ca2227a29a2693c0e5c6dde7bf7481300","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.4e360ae94.0.tgz","fileCount":19,"integrity":"sha512-nT52Zh2xj3ORPmFStS6udGOUm9IrcIlL1nrcDrX7gBH/UmmMR5NAUDTE2FGTdNuOAJ2kHRjncS02T1yBnD14NA==","signatures":[{"sig":"MEUCIQDXJtttZedMAUVqbdqoyn9PnGtRb57x8sswclyRE9NoNAIgagrHIkpFKkhGIizHPpjunuc/5kg3jar+x4ccFoqCeG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdHCRA9TVsSAnZWagAAcdQP/3HS3u3HZscYdH1KTOPb\nmFXC1h6ULij3ALaIjiiNslum4UX/m1UyKZWgt4vQ5FzhCw40tyb0Di7NtXwO\nVpV0nIceHmiZpJI820+NLeIb1k+zgjbmHOfumycTbSi2PxII4yGWA0Kv+sXr\n8S09GJSOwEwXmo/u/tDu+XwCe8h1gTZUDTWbVFWbDNVfOs0aTvid8yf2GrR0\nQherKPjcq6J37yi/W9sNajbZPo1qQIEbZFa4aPgy2Nbza9FaeoXtDYcCWllK\nNnSGc4qRK3xJjilYzHUdNFQL0BFVKzRlVtBvKbsUxnmRxsAlWefGG1bQZa3i\nu8TZAtsXauiHsEHK1A/FMQ80K2Moyi5dRGPuINOWM90APn+pZUrvJHN+AMES\ngd0q6p5Sp+nd6JzuLBPA9K6fwferkjI3WvTIH/e3H4O51exXplV4xEmefdzG\npnZBuiga+eP5SbbpbgvbAheVCRtMmXt8TRx9R617pfv7Gub1/QhLrfro7asW\ni+xo3Yp2trpXkAbKZ47GyawJTgPpNVAkKC129gCd5MuOGlFb/miZ6YY30rGc\nwS57cn0XrBAkFLPXEx8krGRQH70m5xTIr5MHznrUsWg3hhX9qVBCaL0Zpf0v\nDrFutZ5G2DR/A+S/su5szjdZYE6p7cejovmQuU7PY+kVujYVv27c0ygcKXMd\nusOH\r\n=NH90\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.4e360ae94.0","@material/shape":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.4e360ae94.0_1592600390697_0.38891842609425775","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/card","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a30286ff0fa9380d2ebc94045429d17dfe81a07","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8550fa53b.0.tgz","fileCount":19,"integrity":"sha512-/MYQ/G0BoCFcMPoCRxr2haa0yfPaA7c74EJxVr7y7rNDtzi404ZeG6WccLKx/eAe+Eq6+aYHVyS7Zlo+TewGfg==","signatures":[{"sig":"MEUCICwGZRcl43+R7dEZWd7LtbA1qrrSZlDymMUEmvPPkdz8AiEA4Qk5e/zXGwAH+gS4ELg9d0QhH6QkAP4Keb8kF9I00Z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfXCRA9TVsSAnZWagAALZAP/j1ps250MKpiCGZN1c0d\nruob9KKoGa5IIOBmg9K6tPdUhq2WseG2LHCEgbmuUX1uQLoqGguoH/QDZRbU\nVdqFySsFw8JbBmHC9cOum2vBLnvcQSooSOrEtNgsEoQTFVKPIKR7yCfCTI7y\nI9rEf/H9DG5S55Ub0w6Mgp4S3xdT4glVCibUWQ/i8EH4CX+cFzM2PD/9m8FY\nvKegGAs2pTyIEvvP5b8s9nSmHBn8npjsNr2ShaKNuLqavJ2JIWV6Cf5P5rxW\nWhXSPm1qp6r+DugO3AgJmnlEOjTqInLdKB8ectapfarmH1ky43Q+f4DE1Za0\nVvekD9IT7YAgJfY+50rt2H0G1D//bBAh+PdLnNxV6+DP0fNkDMneQvCb4Y3F\nCbp1EvNEqPRRq/fgtQW3eRua17PDERkBHqdvYj7S1g8mrUeIf/V6oJ8VHo3M\nO3xmSuLADh0AES68YVBLcHdL4aHS1If6587ZZtTNIQi1ebSy83AR0pKna04D\nzQfzDhk8ilB5YxXf+uogkzkxkNlQLzBHhj00jSzm70LgK6BkyDKaBi4Z/22o\n5EYyjB20Hmc2OPtx5TA1s34g+bPO9zyuIq63BZwdqd0T+aSXAefHwg4704zA\ne3OD7Ux+Lg+EQyAlQb6U64CurDd8lpysg9oWe2VIwXWrjLR0CmS9nCGXqvtQ\nSZfs\r\n=GZCM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.8550fa53b.0","@material/shape":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8550fa53b.0_1592600535005_0.33973059336995415","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/card","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3048af54c6f881a731441c445318e04915c52d2","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.93ade142e.0.tgz","fileCount":19,"integrity":"sha512-xUbj5WET9nC+TiQyeaOeNvkU2HhAB1PZfPt0HiLGLYxL7FrhTC2WefWvF7UyeN+L04v8hLtjVyEHVVj5gZhaCQ==","signatures":[{"sig":"MEUCIQC//bu20IfpTkSNww68whcNNG62ZoMfI8xWVcaNIsNX8gIgd2apfJsGJK3BQSbsoEczTMI/z4NjFWZ3Q33ObEbtdrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgYCRA9TVsSAnZWagAA7iQP/3lr1OUp5p9SgVakrbfc\nh7K6YpoPhsK1NOPJlLDqRK0yRPatg/2jksZTYAAlaYTW6hIXWiU7kd4BbVh6\n20z2Exd4CP0uybT5MGS13+Im7jinUDUxVYUR8jHfOnaDUCbfgC10K0BFn+MM\n6VEuH7jiI/LmNgYbftsyZqLo6oaunfggwdPMAdwSLpVIh6kztmyRCszSvPPC\nZmH7s/WpqvQQm/U6m//sBFIrugIxuYsnKPReYWU+1mmlzdSkNCBWLEXmeTID\nBnZnaybMithKhOR4iok6x+KqhybEE7qEXm8lH7dAmMVp46gIniQm4ughAV9Q\nU5+q4+qrOp21gxStfpnWr5ldUn0JZDZlG7zek6IWC/ozwTk+/NSh9VHBPeXH\nmVqB3AGbTEmvYnfvdyKjwVkAn0BQBaEMxbBZWurKNOJvg3tO5AqVpz6zuZhJ\nTjK+i0RFRh+N+Q/bmf6/RlKEDBtS8W+oqf8nGni66EyKWTzgUTm42btiTK8A\nW+SvW+Wp+LJIyMjXS+9Yxaa/wYVfUmcnbmcjz9VEXL1zpXOHAOOjEb/CtFKf\n2X9D8t8u1JA5WIGNv2e1AEgj9SzKKcyR5rKl2I1btsD4ozTbUMO5vgiynilP\n02sl0iRvY9j1moNlZL/Q/mlsuaSRfvgq/3zg+PSFXWvLui1BawmkaY2u0v6D\nqDp3\r\n=OOdL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.93ade142e.0","@material/shape":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.93ade142e.0_1592600599899_0.864955118931489","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/card","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58e33c3a6ac00ab465dac5bccfcc5148b6be35e2","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.a0032f5bb.0.tgz","fileCount":19,"integrity":"sha512-NJpmzNYu6NWGHQUmPYQaUPxo9KRyo99mP/S+R1ollvoZUSNnJixdRn1hqQ+c5EhUZajmCZnBeyNG+AwSV9KoaA==","signatures":[{"sig":"MEYCIQDl04L8Hacx2QG97+sygnLC3gm1ekeYPIYuQ/XBBeER1QIhAJkLemrkfar+AB9fW13G06k28IGgywNuRAITyPJPVhW3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3+CRA9TVsSAnZWagAA6VUP/2UFEgRK0/I1dWoOBQv8\n3Q377L2CPrKuEvS24D51eODCY94m0oIVEJdnqzZpkfUhVDIa6tbY3NbjuRy+\nezoMhchFm+IH95loulRU7zrgkFfS1D5z8bh1qr+ZqV8Qnn/ZvrYpBuKZxDzZ\nuaeXFn4RFeq6Fwk5cYh2ucn7sDDYThmmVpVdYC96s98XeWmZjOQxdVA/aayK\nvgZDpqsjLalWWhDygW3FdDulqas0Xpbyd6HosKirJusXM0UoWZJkzj4GLh6B\nLmwKWD6dfLbV+jyHLWlYJDVjtNCFm8Rwz50ShU4YKg/2Yzx3BqCQHnZyNdfv\nRNipY8pmAbzWMLEDKWGhkyNWlHeiV3VFPezWrfG5SgZvfY2YpKRTOBjBZ++A\n8JaQyR51GvRrJyvFdHZ/uh/N1hYLNERr7BY4K2avcbNBpbXoEajf3agdK0FF\n8DgjXOtD0WfWTvBxz+9Ee8+51nmAk3oU2FBiMK1opk2MEySnzo2cyzRu2Bbl\n1UJ7m0U8PBPd1KitasltuuX6k7ZIw8f7I1qUXckq4iie3JLvFPVkW6AmcGqU\ntozF7r9Oy6kQT/w2GwXKyybNjpMhbAup9EV2E3J9nED5lJW4rc8ntj94khzI\njmKbFZpQDRRcJI12g1E0H/B1Be4/fctlPjzJlPCxwuUHbEo5x7W2CM5iXwfU\nCYp7\r\n=tg7S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/shape":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.a0032f5bb.0_1592602109485_0.34532937367678107","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/card","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b40654028b24abeeb4d70143fe3e748852b8a8b0","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.3f342e721.0.tgz","fileCount":19,"integrity":"sha512-tE5g9oJ++rTaqBFewskv28DOzR8sy2g7RUPts4hgyECAk/drXCLW+AsBhOEjW+GhooF1MTGtgepgpH2+mwTbDw==","signatures":[{"sig":"MEUCIENWQ4VRhMmLvo+Qg8Q/Sd+KwCiEtm/CSXmtd4mhTqydAiEAqqiyYbl2Kxw7oUMd+fI7loawDoeZ5le4juJJdSd9J3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6JCRA9TVsSAnZWagAAQw0P/3XXzDRffUdJlzdjSSOW\nsSYA7nt9EhUrrcPh4nbQQPZqij/4jTGnJhCqFjg7KHY3VWJ/625kU/wgjZnl\nCy9OcwWO+oUbQ+j82MLVCp7BHMljqWMSUh5okIPt5jg6zegZbbPJ8PUqzaaf\nlkA9isNk9jldz0C+Hi8CvtaRntNdT3wHY/9cPvUMlb+bhhGKluDnfqgvSA/e\nHxCFH2npDcZ8L+tnFSmS4YueGZ0Kj82e3snW7GRdoYr1eEGX+p7emAVZLpXZ\nFDsQGk26JL6sbhcnsp1yH/4bzIIYKwYuqilIFeJsuig6rmET4asuTqDqKcxh\noTckAEB9VJ28MN8Rwpium6AXIW45oBTfcOUGvjPTPW2rPiGi5snRuKEcE1yI\npKZ75Ok4Hba+IeZLfhtuCtNuyfbat7CEjiOcjttzpkL9g/RipmzQg5lxTzu9\nMuLRkeSqB7sXCsRe6Fqrue0ZWk7zrKJICzHucbfk4OHIwIarP3/tkyG14ThS\nRfb6SEoGhuB5QCwaHw1jo6LBROiaiBj+uItZhPW+rxBqAzjYQ/nyWTvugmRB\nkMLBC0q8U8wm8A3E+9UGwD8+V7o55xCYCLx+jk3NpoB+vXPHpKoFt1FXPs/f\nNgUgAhvLZmMBhYgZjM0RWuPWLHywk8LgJRJBxYYCwrsbs1HuhRZR4ZCw1HRf\nciel\r\n=gMM+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.3f342e721.0","@material/shape":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.3f342e721.0_1592602248364_0.7726204698081192","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/card","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3821484866f10550c4fa8becd503fedaf0731b84","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.ff89457cc.0.tgz","fileCount":19,"integrity":"sha512-M4eEbiFuWk31SGfhuk2SWFxU7hV+N9+bj/uNwPMKcE3N92lK+gqGtwmaW0IkQfA7u9g/brmT6L2KHhlovlxJzg==","signatures":[{"sig":"MEQCIA+jS4brAF5qI1Agi+30Q7+rcZbZwbOQto4ZewvQTIj3AiBEpM2GVUMG4u0pi3Enm5Q2hGDehRVxGsxE3VpUIKntCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7BCRA9TVsSAnZWagAAPoUQAIgXITJKD7t7rrOKusbb\nKvG9b+GYgIC4kjlXqdh5iAkovyVnOQKEBJ2uYGrDh5jpOEMTr23HqOd4kkYy\nkmwB9yVHLw09iqW9RhZdxS0m3DDxswN9TaMTyGCmYjuGG6FKK1FTU2fCL/fQ\nQYDUfV5rdhFasMRR2JGtMvW7lwJuwjIUY7LT7OY1aH7OxrdNgvyV3UCdn7NI\nj4UfneXCcq/jk2IwpGCBhnUZQQi65qxy2E4ccCTeaEQUN/BEypj9qeaHJ3jt\nUTB9WfkbPwCyuFF9d3F0kUzURMccgTXOp7BuDxfuvLoqRke2LehvuRmAyJUU\nKNL8b4OHPcU2AeqFK0KrTmjqS80bP8tv+A/xPi8Jq//LAg8COkyGR339ATUM\n1DUgO4ewyPgmaDwpVBEHWVoIdQuqmwlQoypW6CjxEIenOvNPfLEqEjgJ3Pwr\nBKcpOn/d/JQc8GyrMpPcyLYmfnDl99piC0GY6xnHIaYpVroH/hPOCXSJKGnl\noXj2+q9yxgeqln1hSgPdyJ0Ci5Zy9VK+TM9BW9/MF44Sh1pR6im/w3xsY/7/\nd9TGuVgD7GuwwS/RlrxtGAn6kvlJli6VfzGc5FwXS56OWelLYC0DsKFAw2Oy\n9GyiNHqBAHdkhNT9nqv2HVN7i20MXUiTYKsnpy5toWawpMsmwUpni1424d5p\nxcNz\r\n=7yF2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.ff89457cc.0","@material/shape":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.ff89457cc.0_1592602304799_0.10830760045842225","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/card","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b3b56aca4489647b05f6cf6efed1f63c6194078","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.4a1855cf8.0.tgz","fileCount":19,"integrity":"sha512-cOD1XEQFiqkeXBrlo6UZYD0WZVFWI0F0ivNwETl1kvQ3iMHtAVy+AGn4bEeVnuSBmyA4IZLCy8eyoaB3y144SQ==","signatures":[{"sig":"MEUCIQDNjWVM7nTxrSwRab+73qxYYGMzKucz1s7wMgUJOJQYzwIgIGpGkeM0uH2gYO+WG7wJ009NUSYZFZs6cBmcAr7vdrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9nCRA9TVsSAnZWagAA6soP/Rne2nmYvr7YJQtCCAtl\nEWxCLraiAirSWM/jc8M57FKWOEAsNqoP5zfrKUM4tpYeaGJLcUWxwnkjXfnY\n5xFOzkDguf2ck/AnrgDWyDzQFLEQedNKXlc+uTWGdZ3LmIdEi4AGTIs7ejWX\n2PEQ1EggVWWf9oqmbI0vqL2HVgG7ZGkPkF3OqebYQcsFZviDH2bCoTCIUSk0\n8stTqNv4LAdOmxeev7qPAMZXCS7wn4SkVQk2VTZxaV8ZWAUkODld6qZs0pzC\nvhjjplOysRnPae2MgaRDC14UYoQc0eJjy+sY8VmDnIp877xHRmlqnQHFw7cx\nH29Tztu1cnFHaOlX0dc8YC5K2af+1APHizINBkMmYkxYJuu1pC5r/OOGUpcR\n/G/RmzYac8GeseYQSp8GqUyIUoN09N9WJJTyrFreK/emdPWBqnHRVIWkqii1\nJnL8LCou/1LbpTpdx2Sh/3929ctGcRb1ZFfSgcjaNUWTHMwiM+Gb4ryBJroh\nZ/61/0Ia8viWyKant3DamtWKrp5/3l1UaIljaC/6UIpSSjmMi5K/+T5Ooey7\nZIDyuvquNBslYDTU513pttbnKUdcem9+YCynAuMwcTZjSMLa2TQEuzXbEIVN\nDt0wu/jjZZ/mdxzIPqid6Wje+7kE34ekpV3/czuDsWKdCJ0G4FwA9NtNYZvb\niZIz\r\n=ChRy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/shape":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.4a1855cf8.0_1592602470927_0.9309337430784592","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/card","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95fe08cbd24ea66b1689d6adc2b361a73bbe63d1","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.8602f1b4d.0.tgz","fileCount":19,"integrity":"sha512-t+asqg1kA82IA98esHfgu1qkqGME/+hgKBji7Iow+4dqPBbJr8ZwxCQwahiwxBj0Vigvi1VzgF8K9zBY3XnHgg==","signatures":[{"sig":"MEUCIQC7vJU3/ve3yJqJiUGW+E/n6fSJKfJc7ixVIAmzZ2vTEAIgYLS8uEroBk7+7xFoA8lQiNoA/kDLCwCF+yzzOyVXkrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Ok2CRA9TVsSAnZWagAAv/YP/1dahffEjjFIAV7J27Cn\n4enrJX02OclBjWj2nW94wwUiKS80KZUwfy1MWc+JhPpe/CfcbPAxk26vj+oJ\nhkzNToZpfMRYKLH+NCSIOWb7Tn2MnQyvILdx6DxUcAfGsMigQUruc0aqxIJB\n3Ic+OsvKoDff3XPRzM02+SDxpiOQjqgpa0j5h0Rx5bBbZSpyell+p0GzjOqi\nbK3nezXHQ/Hhmt+K6HNjTbBMofRuRLHsD9rMqn0XKnTD8UrrljswQ839e1eW\ndGDyMUgf2Wu18Pg7Oa+bEiU28f7WW5xG35gCQF3iF5S0dss4xy6qELfw8LEJ\nH7H8tJe6O4xo7vaUDFct6lBV+hhCUiv7uBGbHmN5v7EfHxhmX1tFFv404GI6\nt7UqayYDQLKrw/P521cxng26vcViAGS8DFFLS4/EtA2QSH/PrIDXv//CxT1z\nz/VJFGpslyla/RBlY+KazE9A1fhB4S4KQ3Jcdjp8pjJNaSVac5t/Mmh9nr9q\nNvH0IphoHGxYAq2dXIkVlcmwnQNDhLE6J6Qfq5C9Y30nkfy7clwjMx+Sg37Q\nBesuVnAW1d/lXYl7WNiVvXRe5ZtgyqUKaqJyY1LnR9t5CmEy/cVtmhQt7Ng8\nZrxa7vj3qID0LY8uMZtkx160E0QweUT/BTk7Oai1UOLP2AupPC31xSG6kwcD\niNJ0\r\n=me6h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/shape":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.8602f1b4d.0_1592846645791_0.3768634167560978","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/card","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f17df226cb5422bb415487ad08a41beaf8a126e","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.69f9f0982.0.tgz","fileCount":19,"integrity":"sha512-rxRlB+NDDmRekoeQ7ZRu4Mnb51VXoaXRbcfEyDypKNB2mrfQsKM+WL6Zqwrdr/oxqapOCjrB/Wm5vkRJoktUtg==","signatures":[{"sig":"MEUCIQDiGcGdsuTIyRo0IizVzTiOo3PtqHsXtyawXxhC3DGgCQIgfAHdusqmgjKlMeZ7CNKBpzfqaXopWgFz8sQhworm9tY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9TCRA9TVsSAnZWagAAAIIP/24XZqtS4PoIXzPasJWj\nmnIniAWiUhPuvf1PVYNyFLxuzO3V80okT4wR53TdUs3n7ao+hmYu6HG7fZpP\nGPF2GNYiAweFvba1nCHEH5LSeBLPfkRyWjkmbAlYAJTFHqkrly3PVn29uOg8\nhPvjllzmd7FWB5weoe6SMNVRcymmziCR7X9LFxiefC/D/+ELWkuH+s99ptaD\ngO5L8oYzogzn3m6P0UPdi1q201Ow0YnFIFt1tBjkkF9mCZOkVS6QdHCu3c58\nq8Uf+kzzSYGWcmKNfxeYlu2/iYyUFrloyGd1T6wWeJAsOdm+gH/w/VWbGNj/\nfKX3uc4Nz3aZGiyeaDbDZEyBjCrvzZapVF9P1VZp+UYeaTxMTDhMxkPD/HYq\nXHz+HxjBUH2PoT4rTcPMS1+FSiQajaaTv6ubvGLez57GfWSrlHqnQPmug51q\ne00d3w0uFdod59EKNB+yuLE89bufVAgGtlnH3yF4QgGAqCyoG+NYunE9j7vS\nKqQvcHS0xmTJvFD5NviAV9gxQVcQ8vmCaKkMh6znB+i347Vd5lLu9mLhPu8D\n3DyC6QixOLW7DXxBObQaDl31THM2YXMqsmEv86oHg45BwbfqJq7FOVt9Nlja\nLwl77jxQUt/01n6P41wvIuhONZlOI+y3zskvtLyHmoINRAclUS7oTudAw7+l\nl6ej\r\n=H56Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.69f9f0982.0","@material/shape":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.69f9f0982.0_1592860499320_0.7136271746491214","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/card","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99bffbf63a3ebd7b04c21e169b9b0533e9603de5","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.369a293f0.0.tgz","fileCount":19,"integrity":"sha512-2mblL0HEhdwMTwnn4HvBMbm2Vhn6yfBvS2Gf3FWvauufwqoFD+3FVjVMTxMfsMNhSu9bCUrzJ7Gjsx6E1jy4MQ==","signatures":[{"sig":"MEUCIFQkegc9zGzSE5XRbhr1U+y3yyg9181Iq86tE0Oh7CUoAiEA0O68ebMHu+hxFD8brsYIsIZnYI4nD7hBjr0gjMjdi1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R/uCRA9TVsSAnZWagAAUy8QAIQb2ZwnRxyqMm0Smypy\nOMI/aiooOkuV+fhMfJPqNR3W1F+cOclCdTeq61Usa+9MnMCB19xi0eXBihZ2\n2ZLogBh+2dCqo7o0/SZWghvH53u6gW8imy7dKs0xKXJkngJDgekBdS5IqqQS\neyefI2bsyCsP6w76iZ3KGIezu/W3CSdSchPsn2fnDJSUrLD0in1/ud4ICLxH\npW7j1h9wL7k8lsTiBUPD2EOc/PQPbei5aiq+gHAop7e35t8gAQP7zp3ogovl\n7ZfvjclzbxqkELIDS9kXgA+f45+1sUSboyKYUCTu4M3l+VWq9NCxKcDRazde\njTUlh8aN0XQqBgzd5L2+NIORKUWJHZmzzvOrfSaLhT6IncSVLMlDl+dxqQBq\nhMBhDvrukFJai4FFhFEKMHmgY11zdSiofAOqm5zn0Yyj0c3qkpktPpxLbSBW\nfs2AqHWLGdw19/LdQJ0FQtLnkGxHd9oUoVoKT2WKOYlZrgaMD0R3Z4dRJnex\nl9SMDjsJuGTpoxaUvAgwpozr32zK+GYamyd9BqlnezS11b8dMPBgj3eShob8\nTmaNKLDnizGx+jJausQjEyuQMdFBz0ZQ85/Ee4E8PJWdh5wz2IFi7puXa9F5\nOC9scvhrFlOyb8fDqx2fmhG5w7/6uO8qHyb/m6KV/GxMpFn8P0pzUu2KRlKC\nJbBB\r\n=ahA8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.369a293f0.0","@material/shape":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.369a293f0.0_1592860654339_0.3951598206866027","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/card","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e2d61abe306a8582aaf052de10ff29fd78fb0ed","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.f1432b5c6.0.tgz","fileCount":19,"integrity":"sha512-cq/4DqVLZv3YI9ZAg3JTxKEL+riy3E0IoQl8D8V3Mdp9QRQ753BT2tKtpPkvq+Pm+9xyglKR0HvO2mXMI4vghg==","signatures":[{"sig":"MEYCIQCKEje68+IMeX53b/dxo33qlszj8Sbi9fX5q76Amaoc/AIhAPcEcvEzRIOevcnHeQJjH1Kfn8HVVP6UEbUM21kBsM33","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHQCRA9TVsSAnZWagAA08QQAKNmvvzVgdBAAUxAo8eP\nlIN3F6iE+YNVe3do6ANoAXTtE7Q98LdMoGUyDdld/e5uUaj0C1tcmDFXzf2v\nisRCm5RVY6Py+MuOWkNGJAJUCEm1ylU6a538Q1HZYliV9hXDaiNh7ucG7OW0\npEVxzFrYnE6nbZx5aTFA6xZ+zvrXBoDzNQgdfxxVGRAU2Wzl2PrcecgT1va5\nKV0Y5kxF4ZxbHSjAFXuRwODsehI3BcjSXhnzNcCcp/H9/zPPrBgoAGq3aQ5M\ngZzU38YAIHHqwGw4U+RH20uROniGJPBRT8ukXFAH7OW4SrtahVa2wPU6Dnnq\n9dMGYxUYzynr37M+Gm7a7eFSEr3ObfRGVnCU4+qNvdVLrNZIz2Z/TXOkIyFD\nmiWmRt2Sv8Qye3IlCBsSTLibo+SRD6J8+YdBuKupPEcfA9Nqxl0L+eT8pjHT\nUqfh4X5wdKQR4nDcE0m1jMNs/xBUY2CauoG4OjYHav7MqjiRI/9zEd0vI1Re\nV7Aduxm/44RjdHaY7m+ul8UMkMmANDhpyfEFWAJGqHGIDQdTI33keCZdJ3Qq\n3F54McJ9KGAjQAJrs/g7otOh4oGeBy3aPEBstTXvqbAGKKGiBtGeOIT8RzzL\nPHL2hbvJQP5QnZuVqGmDUCxics9egOq1kXUwkG4op/geoJwAq88IZDMtBTlm\nbyB9\r\n=cZ0v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/shape":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.f1432b5c6.0_1592861136012_0.34391353063774766","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/card","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47dbf5c92405717292637e5c500dede47db027bd","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.4757a16b4.0.tgz","fileCount":19,"integrity":"sha512-gmuwztlZv91gi/JQfQjmbilyPagh9r0w5uO+tvbCwSahYNJMczGEnVIyPX8POa3wgOiHHSN9O6uA24Of0aXj+g==","signatures":[{"sig":"MEYCIQCkx7Lh+lINGfx/t1oYmgtz9K0nQgRPdxJAx6pwy21feAIhAJhKvoa6Z3PG+mTj0W4KHAUpwe6x9aut4G5fMrkwk8vo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShqCRA9TVsSAnZWagAAjFoP/1GDKXLc66dS9p4NjNry\nXrXPg4DLXjqxTrshrxoZDrxYMgHeFh06O31tPAeBi7OnnIK2ACrGFwwWEXxp\n1ZxhblyRNDDB5dSUfsIIhBM1pqv5cjO6mWZRx8bi9COKC9q0Q9s7xIHpVtz7\ni+dnK/0Kil4ZmFiow4KJno65ycbu+V+NpIsNrubmxPLKIAw9k62XMbkBmcYj\nZgPq0ZN9T2PTa2AtDBqGewYLnYzzuDZgSGCiOZfUiypdAvlNlNfrOQolor6h\nsOG0gkGEpuJmcVThOCJpeKkDNYJoepDycTUdAbnV2Jb3WW3Nsk+ynhxjrh0d\nde1b90BEoIa9pVZcEC+RD3+Eaj5X4PfMENUCt2uzhv1BDKvPPD/kX6MhdOlU\nKvKdqNeihwMjO5Ns2rV7k6UAoCI0x52E415WLR1TPqbcqoAmZAundPq9IEpH\nVNhFZt3YfNM52Kvkp2NDrpn8FShGMfoH/ZZTvhXyoN9kWrzmH9X2+YkU2+uf\nmDIVzEIMl0Kjf1xMKUhgdvuFULIeSx+yrdVUnvgW91xaXNGhDA4CPe5Mxdwg\n979Y0a2PD0VdE3Dpo/eI1CJj4qGmDteQc8VMXebqbFOEp/NfFd8/cyCeoj4t\nnQlfPhL8f2QmUCxignyv3vVMUNAA81IW0tNYeOWchVs+UIHA0aj9psjizbKQ\nu0yg\r\n=cTuD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.4757a16b4.0","@material/shape":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.4757a16b4.0_1592862826097_0.5711402647395183","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/card","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0480813c024685792331dcb4c4a0bab8509182e","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.f8f472762.0.tgz","fileCount":19,"integrity":"sha512-bcstCI7jwYqOoRPjXOUtoKLlV0raZnAfhekpzGVSVVJMT5Y/W/bRTlT7o4A1z22OuJ6RpX6XXy59e7+/oSLgKw==","signatures":[{"sig":"MEUCIQCBRHfk1CRYz2DG5IQR4ptVz7QmBw/jQNVCim+IZjArZwIgD3RBkuGuVOjoyJUtT4tBr7uaatpulvxYWlvr1G4edNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SleCRA9TVsSAnZWagAAkG8P/jbzRuOTpsyLhRUe14dM\nm96vWL6k0PmadG3OIUdqbVu1cWoRtpTUxXa3Bvx3zaNKhDVgvI+xPcVPvzMx\nsIh/imo9pPiNzmhzi+LzvsY0VFU8Xpf9VGJMlA4KYbrJoKdS1yMmasj3eLnz\n0hX3LExk5sV56nHJLMKGgiLzfnKMGqRwngszsk0izShieAr2tu6/CsqzaaTJ\nA7gDVyJDAoHD9iZjgBRWN8CgFrPw6z+so/q/wrTKwmM3JSE3sBoGCQ2j+VqW\nIxcpG6JwI8Nj+VLEiaG8UlVW25A64jVUNXCgD9HaekxXaDTIns+5hNK4gYF0\nKcxuterySnMeJTRIQNFGXoqjN5c9bHAJPKmO6H+/0XzqC9EchEKBzLrp/y/6\nWc1Ekc6KCJR4KnZ/Oud2xoBW81/6iZ9m25TPnRrZqAc6OrcVIIsFLEzvl+2+\nG8JcaEgb+cutEszydVmUIQcpe+tMHFVLWD3wcWRf5AQTMX5jy0dgPkbVoCvx\nLJ00oF0ByRcSCapOaoV7Po1YkMXIM+3rE30yEIGMALBagl+67AktcZb/O/cI\nut6O8FohBh4WsmeIVU78nAnQKoeCkS6QqpHZKM8oCKOhhbUul3wfduHY9ibN\necc2Bv++43wIGuWo9XSEfBlIPoN0y4Yc/C8ivUg29rwh0dosHIYB/56ha1+l\noc8z\r\n=Ugu3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.f8f472762.0","@material/shape":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.f8f472762.0_1592863070211_0.969350168424199","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/card","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee0745fda912e2f2c93ce30957afb06ce4974c61","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.7e4d55c34.0.tgz","fileCount":19,"integrity":"sha512-XnW8nL/v+EhtN6yfXnBTg02b+Q4tRjBOf/LFKwi55AYob+oihgbT9qn2Veoeq2DNbY4WSeqn3NK7ShV4tQKfrQ==","signatures":[{"sig":"MEUCIQDWqxI+DRHxTBo6mR31Od4sViVzPQeaH2weWC2ZnzrYPAIgc6tVFbxfyh4KO2AnZIns1WU/nj0gqtJPGHeTZFpgdgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDaCRA9TVsSAnZWagAAcD8P/2tJTB0VGSGsHdonIjbY\njOCZu2rxxHDcLffphIa7mhiSywi0YNjDIzpw52UQkFc0xW0J4WEoHp9wqhFA\n5z45MDOD3vm2mw8qIfjOT2lgYTEzvcLXARWHyH5UMXPDEiV2mlOVvigbNAiV\nwEbC11A3Jlon9gSwbKAJXIKWlnlwubb6W7EdXOaKodt4f8lcl0e1fAjTzM/F\nj5PA0lICGel/bfLdailFIBkx5PywhddAXrv9gR6caF/XhGqdfFjqgckf74sL\nMIcAjHCPM2GhFNeRapAx3FGYziFog8qIf52zPJPxhE+pgw9ZBcpuU8S3KQEs\nD0S9Ylq2xiTfBrTCr1vCrkEpAlQ/YdIII7AGafqn0IDQvkzFA13mRAE3aZ33\n6bKOZqHOdcHqISxRcFsZqEHShJwlmwJR5Zih7DTVEALTjHX8lQldaCo46FeO\n0c7MsW3UCcHBXwJ/fTMHvAccjvZKqkKRIe8GmXGYCdljPjEuKlyqyB+A64Bw\nosBLMYOMHIbyd7Mqqa1U9MdU/oJEbuPtJNxHuhbV9ZkXJL6RHovXwI2FCfSw\n6RYRJrlsJemrnSBuk/h+zsF955YmZW3IyV0Fx3tH9FDHBeqJOTdqEkC+73Mi\nhAjBtTlNsJ865l2LiCmHxC1F6CmKPZIomSPOVCvwFarxZH18F7ELUSml7ZEb\nn+H/\r\n=5tNV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/shape":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.7e4d55c34.0_1592864986097_0.5317570350465386","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/card","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ca79beb8dbd96b01f985efe679d6d99ca0e3245","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":19,"integrity":"sha512-NJjKVe51W1VE9SnI/8/zIsKZTwasKJGnYd6WZj6ag3C4QtDfYuz1WU7iQ0wsg3hNB6CyF+rgGapKo9NkuwLxkA==","signatures":[{"sig":"MEUCIDRB0dEKd/su20oMCF9IzjT2kK4BcyUkyqyFG+8F+1T7AiEAylBJYFHIsCAVP6LGzli2mo1Ry3QgxJrzUNA5fuStSH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGRCRA9TVsSAnZWagAAVNcQAJyOq1wSufPZc6ik/Pd8\nENVNNRfgi08kv3eTqSvkGUSa3tXMGQmJhkJsNUbX4vmBSeAeEIF/Hz5TDgVH\nHKtgLhLfV6WK79QN5c8b0hSJVyJDC3Gx/fPNv4HOMJqHF3JlTOTQqFkAeEbS\nKIVyFZhNrQfccQIJa0CodAlXyaF5YXdVJAVMo+PFMp6I8HDX2MnGbdeZxzeQ\nunHm6X8F5BumTsEVcDkz1+EDxkS5UTPVW6MOEoELDkiJl538IsNUr7d5ldPZ\nmU0qnqZWwvt7tJsb9AaETZeiXpnWtkKD1JkwBfOe/PMDeY22cBrCgCTw4+qy\nNR5Lmnp3i1+Wtqi/mDCbD+QkXfH2+5Huu9fN3+1tfa+dgvUeZULOCezbVfol\n1tTR1SCC/HtpqyAVA21ONkZCLeDfOkk1d7EJqNHBalPNmsEt2qe56ez43FN6\naHKUmCwxGzjDhmTdtavYlq7Yctbgpns7SmzsTmEHt/OR+yRUJbciYfTliznC\nZ1rxSuwmJqHFndCwszM6gc1X+1Pptqjsx1xB5q7a0WnbbI9eqb7HrF6NwRTX\nyJK86e1u5Num1Ora3aWZHbf4dd6SduP0g9mK66yc+sAbLVOxRbUcO8K4MeEU\n9q7AuRyRi1gkbpckg9mTmVmpwSB9aphf1+TALwl1SSPBIHJxN3URkwV58T/J\n8V0Z\r\n=4GV6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/shape":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.bd1dbc91f.0_1592922513297_0.2790769405826232","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/card","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb9f1e6ac1e696503dee52cf3af0f88bd8abf3f8","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.31523bc62.0.tgz","fileCount":19,"integrity":"sha512-Gdure8kTjxfgMpdSZzofiNUVazymc5u8iZzNnr5xbkIhWuLTH/JKib3XLrdUOi1Ic9sltLLZYBlUi0c+PJL3bw==","signatures":[{"sig":"MEYCIQCG2FPTowUNbRNMSXt91MLgSBrHerV7ugUyKs99Rz8rSQIhAJSbOEYOBJ8l58tuS6+Qt7w2tt4z2G9wnDiNYhIcGWiK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLeCRA9TVsSAnZWagAAJQoP/AqpjLOYxhriX3CNv0Uf\nqk4kAl9Vf7u5Rbb4hfX+zv7itB07mME/DsPIoWPixm1cQZ+pKtf5i4XbORbS\n7yKP2QAuXWmaedUWnm5fMWPeuTaENkpUVkXd6NhFVEED/4SyG3cS2HKZkz7b\nMhA+OcAaGyry1Bd4bK1FMOucsCJa9brN9Fb02YUvyVfR0sIN9BOmXRvvhv27\n9C6QG0/k3d1R+PNCTZli/XOUvzjDgvG0BQx9ITrY9rksJAtoDvPMkr8qKb1Z\n/3H9DjGyi9EYY9T/9VUc0hYglajjyIL/FaoClJIyaYMdolay/nBLEBZdhCND\nevAwFEae0QtHL5ZfyASKn9wVmCS8eA6L/dTolINBQ642hEN0P5b75iJ4xnBZ\nKkhaQa7so2zjy4P8onYsB7Paciy8t30B7YQ8OxIUMid3/xm2N5mCVFwH1dNN\nX7Y5oXSrgayn42BuBdeobbhCz2LMr5+/BdXrkQDWMoi5jl24Tp3eXlPaJWYA\nVLUw63KmHFXUwZn3leaXeOa6Ms3rSJ8TO8odf5JYEV1NvFGvWs1xYelbZ/3L\nralwQl6gBWkgLiA+Wp16mN0g51EWGK7fK4ASeusgtwM23yQejSTHqUHxPVzH\nOj3shRwyVw5Nxx4NdRJ5WqlaF6tJnO3z7HTf8NzNopyRre15ywgSmVgc3Ygb\nUkXV\r\n=sSoK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.31523bc62.0","@material/shape":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.31523bc62.0_1592922846107_0.04821341553295544","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/card","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2da53d2bff7f646a2461cf2e6c9e49c7dd12c817","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":19,"integrity":"sha512-a4C+EcmLqSUXsFL4QS4hR9NR7FlG1beh9V2jnY/ToQcKdNMLcCQ5sSb52IISXtiEWPe4vOKvDwmxnSaKls+I8g==","signatures":[{"sig":"MEQCICBJFGo4s/YtkyMDpDNchrsl8wrwI+uVMckykWysutqtAiBUBGmPyoiB5o94mRKzjjcBBeXIf9XaU5HlwdkCy40f9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRRCRA9TVsSAnZWagAAmrEP/2kJLjSQ7CWtKOf00XP3\ncJ14Ix3HesK0kRf2npODlfX6zhlcubLUQxY/mQZRuMiTUdo3rJKnLrWt/8G+\njRdDRcLedbmDdtQpu3ct3fya+iX1rzbRVlxkdqpsKstqBorj1VoXj0h9iVBs\nqi+Bx50TpThpri+c6Kk0YsOjuE6xsuFNK4i6b3p6mI8E8LdLwW1ZPI/Tj8mU\ncKwNm5E9lCviUe53wvP7mlyLnERwKbBIodEuuT5FQydhBbAlx4rXsiA/elfL\nQ5DQyf/MZbmNI0cQ7IBS44JSrRjLTXLyMV3JB3EW1muRz9Aq1+Ragj4mAGFS\nzJAaLucgXdhl6bvsMoAO0Eu1vx4ZKwNE0Qd7vMTcLQpMjojHkRFC5NhmlQd9\nV2dJWjAgMH9jQLkE0ge4NPxzXOTaM2Ef3kvuL6fwslzrSwyzOYTlmNqfYjlT\nsqmmIIOcbcFBdwCYlufV0+cO/HjhiNKMI7GDErvS/Q49EBastSYN7uNsOqle\nxNH2w0zODYTauB/NkWBfgUM6pe9SCPHG8g3uR7ydqPPB72faXYxPPmIM/hnP\nuITKwaeVa2EVTGYkXbrolfprvKy12CKC9KBKXeCRn4twRLPp22M61fjkE4lX\n6lU5NN2CSwSP2W/qHTgvht86OMjXMY1Qm7GeLWPyYbPckn1fNScYcNFoOcP4\nCAFQ\r\n=ffWs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"38539ef5e3142da419b89547f32399835fcc7472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/shape":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.a96b6d4d6.0_1592923217078_0.5552659727087452","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/card","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"730a655b6ec333478c624487ca2d08e5fd008088","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.ef3a09533.0.tgz","fileCount":19,"integrity":"sha512-AcNi5DnHB36xnXub5PZ4ynX+1AqydLvykfITwDfTKCnrao3O5n+Bv4/HMNfX+3yb1lrDOlfFpzLtYkNUa+K93Q==","signatures":[{"sig":"MEQCIE0BTPX6KFRpzcFzfBnu03CtOXSLiz54pTt5jch+KCYOAiAXxoGu+6KZWYgULCpAqumylhDsuXO+ZsB8vs3PZM1RvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZFCRA9TVsSAnZWagAAEWUP/RnaQ7guDWCrn3+LoZCr\nltURyatptN+ky55vQQEkuQaskwoYF+kYDzoKXEWQQLjqDM42jUcMp0irzCQd\nNzczbKBIaBmvAMlGQ/TkBq2f2z/qRnc0MLXEfiMkdSu45vkLAnkk6wW2zCDF\nzsPrAJnLNG3+Uq46TodP1ePc5KN5lCSW0Kuh7ZilqAN5B640yPfr8SMuuMUB\nZ4TjRoQqhd436WEKRrt66lc3kDL4Nlxh4fqNKzfthcVcryTovD4iT62nenxd\nVbh++MW75olnUsGLiQyKaLKCj9V1hEDJW+cZG4t5Ljap7onHI7rlK0OWQSui\nlUCYRv9eUP4hPB6ELr9gQ2V+XfEjvQ+cFUlW+9RMYcA8Lfm0dhDLyUQ2ygE1\n9+PRuWQxsqBvgCDkCwHjGWBKqkjMRGuTP6WaYTu6ls39eSmr5dOpy2blNXeb\nWHZOkrBq/kHTGghyMfiJzth1U/JFQ/VMQo2bOpRdTqAcCpgFPPu62opqamiH\nfTFMPV1ipDqt/u2dLKPi7C/UTsS33c3aO0MylcfpSnz4bck7mmCF8mVfXiZh\nrlAfApx/TbzB0C5KVD64NBFaCELYv5lOGSNrxV/CR2SJGOAw+aV/PU1RocvA\n//UkRzpVJK5Ae3mzYWESOgiIG471FnYuKKua0oKB8dChBHIni5YqBSftbhMm\nPHc/\r\n=3jvD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.ef3a09533.0","@material/shape":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.ef3a09533.0_1592923717481_0.8557211379441141","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/card","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"659b73789a809e6843a757b5269a82eff2fcdfbf","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.080965f39.0.tgz","fileCount":19,"integrity":"sha512-k5OCTcjCxOHErPBbMUSX/qjoXO29OMxpl3g42C3EE0Qh3JTykcCix1e3zQ6mPdzc5EfxhqHwr3YNHejDou2zBA==","signatures":[{"sig":"MEYCIQDJaEDEpYfJ34+eJNBx/9V1uHo+BEsXsCidBuV6OT3/rAIhAN/7XKbQ2ugxi79xmvXKKrRFpZ3SaUCneTsrffdcpodC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0mCRA9TVsSAnZWagAAh+kP/0bvwcb4GBUsyL3jGxu/\nSE5cSTq/UhI3Pf9DQd7h1kSVbPIowdMobLJEeBHZE8Z1fb83ge1yePz5b1ZJ\nkUfzLpkMb++LvZi5q+AygfgrwXBywcQdxsgZ18GVXSYg2Y//O9qsSToKsrru\nGdy6M6goNwRIFye17FbSuSF0Vzk5hU+gM+TuJUwUhG7ZKscRgC9cb6e8MPTz\neq3vcPYtJsMWxHF1QJANoXnTfh1vncCd+/s0ylrDj0K/HBkT6Q3f/PuZ7ADl\nCcTI+Djum47MPaFofNU5mt176WQKgrjwxfjLPwdEYcUXxgTVwaOgT7fEjGz1\nG3/gu1cmhqyjCQjY3lkklC1kn66gLXcdWTsW8XcapBTUXEm0y5R5+QJuZOC0\n0L7lni8DL7ETRVYmbu6CBQ5CL74UrmvYXYtAI7/ZX+Y5UaW5g1lrcicMxcYX\nqy0b47fYyi5xhwImpB9Xb+NrQZqEC8IL6uWRKPcvjJBO6Sc5kPrbDpZQsymi\nAlZgy6lBH8hNvUxFOrRbh6TymyEG6rfnQY8dkQ4iHuM0FkhF5f9dvSRK1RdO\n8R9S1H5duIC/pxQV/UiMmneqQr1FfSZgZWTH62iJtI0A+fknouPyv8rJ2elq\nsZZlbmT2o5B4Tl1HxND1qN3l+T+QlAZ5CL9FhaY9etdYh9kA1nyN6KNKdfJi\nG/Rk\r\n=BRzu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.080965f39.0","@material/shape":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.080965f39.0_1592925478157_0.9677251775896558","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/card","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f499ce0ad068a5b3f9b380df6b150228cbc56ec7","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.1bd67b65d.0.tgz","fileCount":19,"integrity":"sha512-DrpTNq0KwJ3sj/Ts6bsSJdwidHrK5Bg4/Xx4rR2+0dKfTJq/B05K3Qmu0GZpa7QkvAqt/r/I1HoeEQI2lRUrCA==","signatures":[{"sig":"MEYCIQD2l4lYdwJ3zsIb0ODSRxeSfzxRa6agqncZWfn6RmD4bwIhAJsghzm3JBpT+OudUucnSfA7/78NDRvEZPOsaS+A5EL8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icaCRA9TVsSAnZWagAAHaoQAJAs+0SIc/EWoaI1qV85\n4LIg7YQM6imGddpZxoPFaMCz+JtVa3gHfdMhdH0YZeV8bG2Q7uudGNONUHqC\nPK40o+Mmob6kIiBflaPeJBfbaZktip/BOTsyaW/OSZUVicsgydCUDOwX6SK0\nS56sDiiX6o1waVBrzFqg0M9PQ6Lo4/jqhw7uc6+AszM8/4E3R9MQrXRmb/D1\ncm/PXk92KwT/Xuvo1puDaGMhmXyGaKkiUfp/JQ6zGlO/tntn+gGdQS8XwTRS\ngWavl/8bMOodwIvHq3aM7QFMDwqepabFF//NyQQSThyKa6ITfdZWqoi02ZCG\nxExHqYemFGacOdYgSvnGSDWCycquFu17GigmTqXW+9Qb+nG3m/4ZzgPXXFaY\nCIsL+nLgeqUIkeN76paFerU1lAbNTMTH28TizHKx+AXzI03VyTBU1/qcJkar\nOlIBjdqH55rNSE6mfEdo703vovocmcPoU/1IQ5EH2z2LXme9EegiAbCUQXYM\nbJ+kt8sfyxPJ8sM8rrJ2YGWGR5aWqU9ffChXEIDQW8xoj3sLMhn6udRHNA3T\nZngEMH3rtmzjmXbABoGtwDmIcxNe6atTM4dMvDVYeWhEtgIshXBNRrqWSVbt\naQlPWKa9d4YQFSfzYeLiQXhu9DFXhRdj4PLZnE0LFHdg/hd44aZKIxfzpr6Y\n2F77\r\n=aLg/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/shape":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.1bd67b65d.0_1592928025772_0.9759340484807093","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/card","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df48f1de4fb3403d25a9e6b314c1cfd2e9b176df","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.18ca31248.0.tgz","fileCount":19,"integrity":"sha512-B3YG/UEtiDZMlDFY1S2j2zUWCDIp+AkPFtyLDu8Id2N+DnMAqmKVvnGzg2GG1We3eN2Sp2Pq8nw07V7xmMo02w==","signatures":[{"sig":"MEUCIE46IbZxD5Roexh5+Jbon7zMgrmcgsOrAk3y5M8azPcmAiEAwZYLJwXdbN+Hx0D/Tl+ej6apwiwvTVLzRNj5ZCGjZLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kkUCRA9TVsSAnZWagAAiXQP/0oQY5SjRIe9WGJSbhEE\nIzLzroWwx4JZQcxtNlXqmnxS0LgnHn1x3jzbx9RJW8StscHehCT1ABppqsbW\n/G6uwTLv1QYB8m4fjAZRUFTzCpWnC1976eYCBaTCrcaMSEdXRVDf4+KF2Jjx\ntbmPDhSGZAc9nEg5r0lQ7wDwtWf+W2I+Ao1vXhhlozyo1kBLm+4O74XfEboH\nUsPJmorcHK7KceMc+BHD6ixRo2X7my2OlbgyC9eWm7wcEleuSlWuyTJx5evU\nn7NKy0o8MoV6aGlWg58WVriIXi6pozebx3oapXOO8YGwCG752eK6WVrGRjaU\nbtchZtKlCkUIyPYYCObRzfTqrPQQFhDtOKKMcjT+aYe7RpDeCEEpPaeQx841\nAPOJdpNbqClccsWMhW7yKPyMpmoUiyo7jMB+KDDweNBkUTh9bsaGsoGO9Wv7\n4QjtciYI68vszmli76rKtFXivGHqjjv9kDP4XXrEg+8gSTaISpUSr+8aUXs+\n3/2Lt5K7pjA99/yPmdwGvlvDDX0EPIxd2nSieQ1NfvqlIsyrkHcF1j7q0RIZ\nSpYoEvcCVhlAonfwkf4Ox7NXEzWR5pBfqrWxGz5muNvPq8Sw4Nd+vdTDGrRM\niukSS2mTD32hRd9b9wEIoGISU+VDt6D25+kBC7D0Sxx5vSRx0dR5x8FxSLkV\ncPdW\r\n=3aaq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.18ca31248.0","@material/shape":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.18ca31248.0_1592936724133_0.8477778233065107","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/card","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52969f335f4a357d00ecd54fe39dcb86de23972d","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.39cf00836.0.tgz","fileCount":19,"integrity":"sha512-zbpiUp2j5iS8jl8A4Vhfef3iLAls5/lcIL0tJjy9xCcC+BZgywTTvdxnbjx0G7gXpLCTAbRW4ZIzLMJ6ZQqUuA==","signatures":[{"sig":"MEUCIQCTSh/mofl9JQfJIhhY8AT2N39LTcBfRJHSG1XgRIjCYgIgSKeC/3FGJK/r1CqdGqHBCohgUPEKonQfctwoZGsVEfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5zCRA9TVsSAnZWagAAir0QAJrA87+DcbNCbfwJdxcH\naw2pQpvJtA/Q/ZGLv4IMk2jSYNYL9cdflddjgahCze1uec1eKnqEZVchON8E\nkcu/an/n12Bk9fgGO8ZBSQWfx75I5wOQ+JMxalXu+5poyX/idEMnh+FONU2C\nPqoZjGKKuxiGIIvydaLH5pypT9qUhOMI3RN5UUDTheUi3iXzgOwF5X/oihEQ\nt4udBxWEZ1w6xzP0zPiQURicWVSlF7NP1iH4fUK/Nz6BQPhKUK8nwsi4jUaR\ntwibilKHoGuip7IwFG9AEwfqzcZe/P4UdSLF1Nhzaxk9sq2C10if44e4xb4C\nfJVsyboNmlwrA4sdYvxGBW94rmqdzt/Efgw6a173JmogEeZoWEpxzjCLfjE8\nrFrF3B8uYWTY6wnimou7uCVBP+dbtKSd0ehoArs+e9Ujo7vXISbAMrjZ5b54\nz+f60tacgj8YDIYyvyZW1lgIRUNWHy3B5l97UhKP2p4xgx93dT1C2UJg0dwm\nWhjExBQbfls4x4mUOm6v7yjxh6BRRUhTE4IVQQXP1nhR261b0XxFgu/q5TKv\nS7DUTBK1focjLWB/G7pKVyxXfz7Rd7kW+aB5p4hK4qB8b2tDt+90UtAgKuU/\nBpqRfnWdYZp3cGnwv8D1m/ePZWvhloeHuoAmaj+5cZhP3T/LyRgqlpj3bj33\nxRPO\r\n=yoM6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.39cf00836.0","@material/shape":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.39cf00836.0_1592938099011_0.633415801286086","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/card","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cdf84e1c49ca50e9b3e66225aea6d1868bf93d4","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.1bfda9e05.0.tgz","fileCount":19,"integrity":"sha512-aSJoG56KGtXhylPaAGVIGDS+yUn1hfjNjcO0KnvCwtOicoEIdVKe0aLSlvRxazSOaz+vBAnqhLrLfQeIKqAD1A==","signatures":[{"sig":"MEUCIGTpOjmEYq8kJf2OH+8bUo79QmJxx1bOeTmCPhqSeKxpAiEAm9H2X4yui9k16qr+d9jD7JZlcEKA68F9jCiVlMaGreQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFfCRA9TVsSAnZWagAATh0P/3L7G9iuFzAvMLvoFh2f\nxB9pYFFR65ImNIYtvmpZva8N5+rLkKv/WJiUnBud7GPgLhqgS7WGtFwcwtzn\ng/eyGl+P70XogpXrBRmL93/0/EzBxbMTqKSrAnRCY1i5Tz/J67oJ1bIcvSjp\neXdbRWMv1uhmAj0XQMJvs2GD8Xps/1diJc5rJ+JkXj01AY3lBcEGhBf4iG1f\nzm7R68q8pNME6Ry0Myc9KWIVnUcYQYGBGo8V94Yh0a/XNaFW46V8eFK3g0Dd\nw0nMsz+4TtD1L4MUeS1YfGu0gjqjgG0cZZHJkpd71WHrWq6CeADtCUbIaepq\nPn470f2WdNpWAexuGKuvpquCt9Z9NrFJYTU9I99aSV3rZiYYQVIJiw7n78ht\nOU41+55Zhl4ncmNfcvNosTvywC9JMzltmsL2pELn+GO29lvhpZUa9SLq3iov\nst8QSDqh5lFgCWwvHr9cgqpI1M5uurgxuSy41YET4IFkz50X0YEEQf4sC3Uk\nAKQdwk+YS0zlaYrM3wLDfBwAFWUGEIMWycKgdPbWzSWLnsFzx9opU7cE6eV6\nFLJolsz6XlQpJWs0AHiCnumVg2YA9kH8tGZKR3QtBCoj7uMKrHARPNwrBmHz\nt1l5Gq0fpgmZ8bAwSb6F1g8FrtOTJFNSU/w4NFe4oKuYSLGJH9GBmLG+b6L0\nUvxs\r\n=EYst\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/shape":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.1bfda9e05.0_1592938847224_0.4033070334635165","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/card","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f3bf05ab7dcc8a2b0f024d57acf21c546635f89","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0-canary.08731bd95.0.tgz","fileCount":19,"integrity":"sha512-A1XQ0DfL93RXD3MiCapPMBiwks0uPnAZqM9zD88toDofRbC5LrVNY+8CPYRe2b7sELGed6wsgzEakcRcq0Qt8w==","signatures":[{"sig":"MEUCIGti+uD8FM+JmrZklU4zmlnmzNvziE15v7qAVLz0gkyIAiEArv8BqRAhnvmlZgtiUJdKzrWM6VBmLcagWH1LiDuJb4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lH6CRA9TVsSAnZWagAAR5AP/Rd4Xw8AAwNEfzbD0qmQ\nV/D1DJr++6x3PU8EwQTv53p8Qa8dDZeZe1OUdqbUsPAEOpdgm9avGTztvspi\nSz/GuMWKkkVWoZxb+0jog2rrVz6Iw3UDsuCOd83AWyl6bOh1Ck7vlUVC2cPC\nvnW+Jia3z7KcrTyC4hk/AzkAH1GP6IBVfqSqPTscHppjcWnwW0dMaA/9v4Qi\nxgylkK3wyVKnN624zRUfCj7i+3YXDdoGgUw9PyctBotZ66pAMQdFfE5fvucY\no2eHasmM9LS5pXoPxuElYcycmtv3ybwj3bd4SVarjNm2uPoySiyRWVR7JkFU\nh89OXDtyfQ7qRh6dg8fcSOvus/JUocvcerneEMk6yL/UKh1U7Bd7wjjvYAYM\nSyD1YYZbUXNZeTOfFqOWzdQYkOj4VypaUfreKJsKkIEwFqYsrWdBWPPfRmlP\nbvn+wSSZ5mObNaSsNumQenUrodvJGKVpqI6bBFHadDgXLYAXeLKVRG1xbqbX\n4teLhhM2NhNmzhNq0+I8be5rSDaX3zdi52D28GNB5Ouh9n3ay5iDjun4JRGq\nKJeTt9LJA/NPDTonKbN8zlD3qQ7Rzs70AojM0729rm7tWaiL0Ypl36vDsY1t\nsRgeEjjWmECGWn98C+AFHiICx8x9P6aMZZeIPhP+zdlDkR/utwTZ9W+KMVoF\ng0F/\r\n=Y6Sk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"7.0.0-canary.08731bd95.0","@material/shape":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_7.0.0-canary.08731bd95.0_1592939001926_0.5440471262705489","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/card","version":"7.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76902c111f226fe25d0abc7fe1ccb15247ac94e8","tarball":"https://registry.npmjs.org/@material/card/-/card-7.0.0.tgz","fileCount":18,"integrity":"sha512-dkFIA4mrMOvzmTJOOH45dBSYJ5xwwYVqfmWak/iI2ykIHKPNLaWviYSy5zON4VUV3M8/Y561BX8pIt6PCGMxeQ==","signatures":[{"sig":"MEYCIQDhMqR3JnyxnPKVhdEB4rE2wIZVRNnJ2aOp8TlqmymagwIhALjuozIg9wZix1LAtcrQv5GLGVYjyoH37EsCObkuOECr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPXCRA9TVsSAnZWagAAioEP/1aFIGF7vbn3Ii8wv9u5\nDkJ6uZu2+vvY/cZTHtqSY20R03aj03ARXkyhwif8ai1QgYgLEfD9fyzHMNCB\nQmrbH2BKd7OoOStqk5+iIzzYB4tiCWFaf9Yc7MsanfZXrNIS9SaBAfhY5Wuk\nEZyboptaBrRRZDEwVrEcsEI30lkyXc3ucvK+dNnsrJKOIMKLry3yz8BiyORo\nBg3wn/KFegMH+Bj4/8ZrlNMY0E9Rj5OKdLBxd1eQUcFxJ5Ew1bPL6zu8qnu1\npdCS8l3dBJ7frJMUP/zJZUHeLKj+4A22bdncfrSqyH6fbd+pvJe7j7jomMvL\nVt7T71RvQ9WR+trYMiH1oSZSiNcpv65Ppby9mKSxzSQO2wIMJm5JEQhuo7dZ\nbX0k+smQ2jc6t7HrDJheSQSBl9oWqVg2P2VCVJP0NWvaga74W1OlN9XkQmAK\nI2QsCXUy9Ncr0WhNR6JabEDxFHOMnI4OyGhl+OTto6RxiGIu+1r+6Eszq8SN\n4CrOnRpEp3WSgwrkISumcRcSnZclwdCil10BMSdJzoHsUEHG4nata7sRv8vX\nXsyLjVme4fpMz82QCGuRK0bC6bsZaT2nmKmRFBsl6zapFabTohNC9AExxtQW\nbHNxNrN7cVk8+mORWM9nXBVlFRc9I5hYxHeorNPJQfpCe4Wh75SdpJuXmtGM\nzML4\r\n=sa3k\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/elevation":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_7.0.0_1592939478423_0.4467657382895016","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/card","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f217877de6b351a11feee982b828b662488e9e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a3212b209.0.tgz","fileCount":19,"integrity":"sha512-zscwtPi/vRujTH7bDv7O3c8MT+YQBv8n4ItQnTKxlzzhaP6x72gm24at9lPCpI3FkZ0y4+plvNen4A4pZukdyQ==","signatures":[{"sig":"MEUCIQCWy+J+WXNGBfTxfedHRuWGT/1b9jqFqGqa5MnooXdWnAIgHQfqWa57uMJ2IhzCbGgYMDD7k/5iE2jO6v9y6qigDXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQHCRA9TVsSAnZWagAABtsP/RJV4u3tk95bIrGDoWYX\nppI2n7K0B5VrSd1prdZ80kvOlyNUNCvd12LuLQwf+aM6+j8bqn3mo89Fdd97\nqnD/ya6mp3AqPurpon0lP5xEOXWevbkrJD6tkjNn1zd1dZjVt4uBMoo9UbUl\n0ee6Bo8B+yBmZUBlx8tKVifaNBBznKnkur2b3ofjl3BgjeH/WfC3R09SQybN\n8U13InuV5+9r3kGYBPgjkreg/0qy5+aX9j2DAWqmByDY5fmdG6QtTqqLZqgP\nSrfYM3ukBhOzoeM1+qRrYURdiT8eXKV5BqyyWn1n0sq7Lzs3uqDv7hpXadsu\nezYt6Hqv+LCS4/M9L9sLOHEY8BgwTx1qRi4dcxP4RSEs8em/g/XkYjMqPIE4\ndN/bkAlm84x6EThqspy4qaAS6zKP5BxIsQDeHsuWcNCjIQMPSol8dIaKbRzU\noAgmbJv4umUe8wO4nJt3wbhHp/XS1ylQFu44O60AwS7wi4od5hBtbYfbRJq2\nomz4Zp4N3U4HNcP9JTf8Pr0MunruR8sr233tEWJrmMSsXEnJeVsLFKtsM1rj\nxrLT8EqRtPBgzWQgLT4L+4aL34hiV7xVxV90gLTMyFWR1YCDgWhAMw1FdSoR\nCTiv3yKT+CMmnRCp2BX6Nu4DeCIJrGsOjrGTfkyOksi8sdvq74xrjEkq3VJ2\nf9WT\r\n=jivB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a3212b209.0","@material/shape":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a3212b209.0_1592939527049_0.42517744264012935","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/card","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"729742b1f0e5eb1d55c0da17484570a834a526a1","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.15e81fe98.0.tgz","fileCount":19,"integrity":"sha512-Xbm4KUquMv2zJzi0KTuf8og5puA36ae7YbxMCRAjwYwuWi04npUmWDcKOjrZzGx/uLJBwU1Ob6f6ibj89enrtA==","signatures":[{"sig":"MEUCICtSi9y+1Eh6lImbvHqi+H9VQdKx5/niOM9OIqYhtWqwAiEAkU2vmHIPLwImwp8KsKxMblc0yl5bIVvFVwuD8LIt0rk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrsCRA9TVsSAnZWagAA0bsP/0b4tzDCQQuWQW04DUfa\nZo4ISWiSgPO1hZX/WFekQkYWjyfwgUhDAWfwFiTVwjZgtGW25+wigq2xlHIU\nqRtko+ZYGH109YLV7tObxYv+VlBBE6NzL/imo3BGmOuK65D9+9rvjVQoNxXh\n6pGEjXr1MXkC5ET+JRc2oBL7ir8o9Z5Z1arigUQuUMHFxAvE+fqd/GRUf3KS\nw+a01hQEegP/Pqi5dwgHoG8n3sEopsvRTfBrXn73mPjFBTCl6eUhD4fphwNB\n9GU8cOgbvXiyw1gYk552856tTJLiW1uDAmsMc4XNOdcJQ/2GCJRQHDjBS6K/\nLUmkAZaLN5VzU1W4C+UQ6DAYHurF5sWlCv7CQd/b0Le+w5K5DyX8pSkmcKsY\nwmi8VvHUGvCJ+YEHl7EY5wwxeTXx95mHB/iyS9/zZJGOLh7NEDg5NEqSGIxY\ngg5lPoloWum0hDPjwx4gy7AfjZIwe5zpLadOu4Yr4EWpTOIpwBf9iMyy4L+F\nIJuDOjm8mWfZnP+f/SzZPxBFBvIyms1ceC4O2/9QK8QkoOAyKUMVQzIowY/R\nadXS5Pt0E8TDOohTZuLqCsQklcIeZVkY5lYc2cKBYYjpXy25r9IUW0Fx2fyu\nDiMluN1Vm03Y6Zl+OQzPQT3ASeeovDnXXX9plunFKtbrxr08NQGLGy7Ls6QU\nvUEg\r\n=NwD9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.15e81fe98.0","@material/shape":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.15e81fe98.0_1592941291678_0.17719801214955644","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/card","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6b5c3cf8eafc269b7b92f8e8d2c899da9187565","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.004c9d392.0.tgz","fileCount":19,"integrity":"sha512-37he34xRXIXro/Y1Y4PREa9YD5ancxzWIuC7DSLBPRde/YuAE4hq1en7tJlFy2bomL10v6pbNXPyCsVHLiEV7A==","signatures":[{"sig":"MEYCIQC5IawOE0V6qYa3b+9agCCqahEg5csZeNJArqgiDnl94QIhAKPQ5BmoGCCd8x09+uDMVPB5Navc56JkA5HpdkNRmxxu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oiTCRA9TVsSAnZWagAAKJUQAIKV6M8adlnBBcmLZGvX\nENlvLtmMPRcfN1q0TXfvCpcdWRwj2KiPb3+ZGCuNtIFLslrSNTcgfQ9qiLm+\nLVNb8v8WTYt2S1fCRv0MTrSWLQA8lwRvOSysuhk4OlfLN5+HlpFag+B80d2x\nxSzlZ1r6ie15PUSu/L7GAYaI/XGYIqfyy5diDCuzgHvLloYTqEDFZxo6jF0X\n9uMIIxCly8KRWrt7GpVNkml8cydW2BcCPubEFfOmNWDS/fGPG4l462TMWRN9\nfNaxGjZdiVCqH9saEbbrIGfuaySz5vszOx4pTVktaTC5DZnnID21ERlfrSF2\nomIbIO5rw+5LCIe0ObFg6pFtMg2bJ4kEYsMxwbmbueHcYlDAITOsrELy0oBe\n+yJ+fGMBPgJoq557hyR9ITo6IxbPkDpE/lwWjJSx5ZFHJ4gY2W6D85Gg+olm\n6FQsuIkHJTRZN0E2j7cwBH5WwUjvFoHhf7j7XgA0zyuxqK0GGp+XhMstkkh5\nqR+W+ASHK6UQlNrFk4OpkFNjOW5nURM+jfCVKY1ta8VlzF1wJIPY/sb4SXf9\nho9fQdYWBHDyZnEilfU9CL4lsQ5CNog+2VtiGpDr9KG0O56Jns+Exmi4pHrg\nap2QPs2hdRE6yvdHeX4/HLNIn+C1y9W8lRYuYVC/GlDPina/FmqJx0j0Az/M\nSDqy\r\n=Wip4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.004c9d392.0","@material/shape":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.004c9d392.0_1592952978660_0.010125891452638758","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/card","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a598e5d82b21103a94090a83f024e6dc73b13ed","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.03bde00f5.0.tgz","fileCount":19,"integrity":"sha512-5mnmZZAhP/m53L+qvOy+zE1GMuDFPV40eFwgFHguuZvDC1j3xVc5J68qpu9UGZreC6Pj7YITmwQYryQ4kRCmHw==","signatures":[{"sig":"MEQCIHJboBOYVae2R6p7W+/bdjPkXk7qBajbDWKK3lutUN5eAiA5HtsniGFgApgHMCv3bPTcBKLMflOwTI76sqbLdi7cSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7/CRA9TVsSAnZWagAAHKYP/A3EoeAn94MaHhCuLWgX\nb3NIKhdIjXYmWRXH+gLqqIDa830cCwXanNYykIEdJsgLo7ggSY7aE0ArVzwH\nnQ6wgQn9ELDIVwwZesBVZODsAq0rXbC3pL+Idta3eftsBHdNgeWGetJE/78G\nT2pd/bvH2DXjZDWSHEYu5XCahFiUApMPC7OhJHH9HTIciJSnQvv85T17Ks0l\nnFRQddbahxbYC9nNhATJMNBSdRwQsYA4QQye17JR8Wzw3EXDhDv2vz3ttz7n\n5i1w3ybLOjic3xLbYpXLg9wBKxVRweNjLnL68fijMtL9YRdkpfiEHqnLpNEL\nxYEluf7P8J3bKUcoMBFuxHUAKiFWzmiJ/+Fh+GU0ZURTVvX4y1I6JQAIQW+2\nJ3tKshCuAWC8qkTVkz2682NMGQm5XK4O3xjBQHCCw2HSGdK2BVdpcix0FAHO\nMjuN2YIn1vyYLTgBmGVmepMbh1I3Sf5bGpG5qt+S47i+N3CF1uQr2OdnAYd3\nwhrrQ0H34OsQrEnXtP4lOf6HkMhrjXVkuZ8F7IV8XqxvMXWJ1+0Zd/7oymrU\nQRi8QCFxOio4kEpvpZQ3f6drVLXnwsXwU5JkKbKP/7xTkLWSxaq4HI4TGenh\nzmyxRD5vP8B7kh7widQwbdUY7IQgE/fNPXptoTZOfYLQzeCmzgpscNt4tkgp\nLGlr\r\n=kiFl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.03bde00f5.0","@material/shape":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.03bde00f5.0_1592958719070_0.06355370674815641","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/card","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2189be4538731b29bba29b9fdd50292029fdbce7","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.599b8c319.0.tgz","fileCount":19,"integrity":"sha512-fM6spNt+JW1km8qe5U+azJaRJAP/zZKwBbonOrx8wtbHotHc9QUlxLOrAaYtyxDtSwSJkp9ps0jJCP787/Y+Lg==","signatures":[{"sig":"MEUCIFJvmGehNikdqshZlmTtIV2Edg+P7hFaGHRQaR+DLWIAAiEAqATeNHTuEcGDa5ZE5P2iDgOTy40w6EJ22777+XaeXtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82m7CRA9TVsSAnZWagAAKo8P+wUX79D2DWoVHp6ddFXZ\nepOYwN12rBBBHf74dlUQLZXo2F1dhmNmeIguAwhxEK0O5kaCKHBSY2lwmaC8\nN7cqdlAGokURqWrARqvJ3YZg2JV8LTuJ7OWBR04JU1omHoQxDi3FOQ2pLttr\ntpMfsaNTw+V/59wGeSApdjob9EsiNEHkq9sni65zKd0Sk18lDDaPqEum4D2b\nnaOizNUw+9dTirQ2VRW8HAh4S+ZwcQdRKOrWiJCpjSJGtCwclvucq7BYMsSX\nIoFUW4hpZIaDflgAYFvAq36RkyZHYIrDN5DTRZG4uw2ewyaPMJQWYywhFrzN\nwVb0lzImSXxD9ajgRkXJTuhAz0gMSGu0ZXqItWBCUUW/joWCK+YmErZdBJf6\nsl6L8TZ7IuRcjg6qKARP35zb+yfQVA+UylHZ1RblTatn4bKejRDqlSH/Pfl5\nbhwmh+EeMnYVy491eux4E9DR/uTrnAUFycFM5xjCYC3WZs5IMCo4IXuixk/p\nLZS5nW1bJm8pVyCZTXuQXoGXh7zGV6a6wVrdQmikJ7I/qQvOqOp/hnmirNNz\naqmzjxBMbu3/b3+ZgbDNLmlnJGpE1z8rRYQ2trmBxYtjNLgZNsA0NTlQiJJ6\ncE4HjgACEjman3D3JXswozu6O2oJeyBP+XQ1a8zMaqJinqgO2OxAOEf5BmNx\nV+AR\r\n=Cidy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.599b8c319.0","@material/shape":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.599b8c319.0_1593010618652_0.7264579148181267","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/card","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f34493566e55950447103f7141c966be2bbacfd9","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.87e3be418.0.tgz","fileCount":19,"integrity":"sha512-nOLoq2S7lKcQ3wM+Fp9ZUmVNxv/q0L9ivMmgusSfEg+WwPy5FU41iOLrY0lEYn5V06w7C3G+olzSgBYNo76XSQ==","signatures":[{"sig":"MEYCIQCPxEW7fiLDPu31vq2WGnQBtF2L34L/5eLVKuFye3EFIAIhAKiOruMGwucumn2Ig3b33p/fZbCQzsJ3rci3JYnkafP4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MkCRA9TVsSAnZWagAAROYQAIUtsVRcqDFT3YgAPUWs\nRSHncgRJPxK9n09m/9uxrOLze4I02aHHXR9LqKI8VwUTeLFdcXXbOsN9n62+\ni09wrIfIytVhwZ21MyVKUOFCcae8SLd9IpA1+VbuEUcWJS9C05BmMuLpjc9/\nkTOfqDBE+Tf6hyJHaGn6qSJaqNdDHExdQIq6sbxTp+MKagaZrNZyV3gXnEew\npmCPA/xWQnbHCCmQ5CbryCi0h4o1Paj8zjMSmgt/UJVdA63JL/86psbum4/y\nqOuEr/0btDcNiVMuuTOeHVyIfCgXGJ+JTmoXNSYFcgQcoKupapLxzeaQerh4\nBFu3bM8uw5v99AB44IYhfqpXh7jEl9IQD1WIzX22vEUmpB/oQ0FozEI3lXjT\ntu591MaVd/+qWudnD3wIREtjnvn68QRAqqycXgtk9JUStWs8636nOFItSvFm\nTEjDNb3LuQikV1/CI0WjXP/+om392cjBbaaZrxOYlfIIZ2dQ4QEQE3FGpeei\nseb/QKOvP01GC8i20Q3vj1BUJxjJusXaHeGIeoXqOPJmojdqlo+9r/BbsROF\nNPLb8DxziObrP7EcLnoaE4XIgOalmPyqXQjwiHe3mhH0bNV8m2cdeXuU3JdU\nE7WQvLUBgZUyAX868zfVTUrXi+bIODvQSj2z327Q5CMQhSzfqL4y5h7/Ig9l\n/lwo\r\n=TY4f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.87e3be418.0","@material/shape":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.87e3be418.0_1593021219598_0.08572315656788354","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/card","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"270c9ad23d8f41b32ad6d29d010a97c6a2efbd80","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.035cf2a6f.0.tgz","fileCount":19,"integrity":"sha512-FAREg0nS4KPDJmspW71s15LVQc+TGwE38oB4A3ddGrJNuzC7F7WdeuhIeQ7tZvezg2eXOPQb4JEro1ZCTiUgmg==","signatures":[{"sig":"MEYCIQD+LibZwt6ftwv7Ifyh7pQD+egcIJS9STvnnxFyHS6sPAIhAPFamK+rAoE94do6rEMxmxRwKt/autY38ZbWJxhM7ENA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853FCRA9TVsSAnZWagAA7kIQAI5M81uuUrf2KOClho1o\nEP67chjKJigZTjrBiUeljP7c/Pfj/7fdLa8e4HXG3/FZ5S4YZXCtm28mX6N9\nF1mnOQX6HgQA5p2ujp/psV/Zdag6XbXmi8f+nXZEwJbZ8ZvulYitCvB3RUkq\nJvolOTjYcbGoJLn0jbjE5O41i6sYOeUMzY5CDBGqP116DRBJ35YunyA8VJ9Q\nyA+Wcee3TSlN6dztwuB38tz2egrA2+jU81PW+EefRBV7Vbk3SY4LneXtxIwL\n1E9U75h+PA0Sp/VF9ma3Xw7dJlYnXo8DcUZeT3bCGnGu179IACRYL8KFcrNX\nAg9S3iC+BeRPPD7d1el37j/Z8REYHMQLuJdhQvJFJwlfizJ7DYaISIIS2AS7\nDqlTnBPw70Y2DFbRYPsLImDros6YMojTZSX6m19whXPrU1zUTp7SUJQi8t86\nVWdwZFUdDcy98/EDpciDA0wj6wPQ7f2AEuXPd6M8X7IvMVTP//J6qCBrXnBD\nA1qhNSBcWkwnecSuEYFNO08p6qHiAwpMbHdKdPVLA37MnCl/2qM5mH20IpmO\nPxY6SZP6ojQT8oBRJJkR1Cje4N432pU8kjpIskt3tkpN7wc+dlb4s3cP2sh+\njTGrzUt0vpZmskjmz0v7eYeCsIfWEdte5mrQNJLSqzqPdLBSg1kJwhMTYJvt\nmp4W\r\n=Buqm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/shape":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.035cf2a6f.0_1593023940733_0.6426472782414414","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/card","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1dc2eb816f234451dd5fc30bc60647aa6409ce","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2fed2c12f.0.tgz","fileCount":19,"integrity":"sha512-XM180Lwx5LAcXh6ehRnto3j+ubM1V5jF1J9wMJpbl3gCUg5+dGC8OhJ2EZHDgFt6U673XrXoMd1I8D3dvinyRw==","signatures":[{"sig":"MEUCIQCI6kw/XyaoIm12tUwjwyP0G0P9DKhstrju2zpiAG2i1QIgYKVvAfTecD0BJR+2ikS0EKJR6H1vY6OhPexQMgXLl1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLBCRA9TVsSAnZWagAARGoP/jX449+JcLFVZOvbCP/A\nEPxhMOZMcycmToswcyMH4vwaW/YtYqtnWXLWBL1ohxpRzNgVb6gGX2zV9SR/\nMLUOshKdYNZyyW7/tFDyL9zRdCV9HlR4+PbFb9dA5XqM+FZraAe/mHbNOeZ9\n5YLtWGlMpp9zqFEjmBzQqO0dDCI9SPEFyWdlJ9sg/QvACtAQ4Dq9+KNi5Z62\nvMRahQtXRnprPaL003Ays0HGogmhIPkqnLtkh3ZzLUMq1AGyajFSpvxF4jAp\n3mUcpSruT6JeL1wgxuE8K4T+DUwuu8owaOadLBEZRjfNUbRhKh22DbU0Ry6X\neMFxOTOaEcG/HRVoWjYazEztpQ8VaX6g87zMy4mBYnaCn4rQzjn5RsBnHGCg\nN/frsQYujOgxMWjinR+qGO0ZXPlRFyTuK6LAGyiufzBZgQ4JDixBqf+6xVdD\n5TGRh/LoTPoIPdoEdbI3LpYlTspld+ObxLTE3M8ucVzFzJP4RUNa0kkgiNt1\nbVPSf2/E9nGayWmb4gk8GcrAGfpYIXH/s3eB+MKwXoJMQk6kLc7UMSJbP8AJ\nXF8fHk4hVLT/C5Wel62JEAxG9mC0OqA8uFpImfmYJMzLqvW8p8k2XDdkJlYJ\nN8V1B6G2PUffZ7p58J3saE0Pu8p/W76Dwnsqh6DanaxKY/bIF5N6Ow50aLuQ\ncnE7\r\n=ERyP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/shape":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2fed2c12f.0_1593115329170_0.5505121616426194","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/card","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9733a3293cbebc6875674b1ac21c5683cc24b594","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.38197b443.0.tgz","fileCount":19,"integrity":"sha512-LSf/mDi7NBnJYlMz/wLRrYz60DVNgPgYpzYw1UgSBDUv15AZypKLHCU9JhM4i1DDvhmTOean73QgLhhzO4cQUg==","signatures":[{"sig":"MEUCIQDDLISY72x6+9pyJ4AGIxDM836BPbZPkcCCWmcw9oIc3QIgHfXUVth55vYsBO514X5Hre9iPJVzPNm/TSXEmnqQ8yE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWvCRA9TVsSAnZWagAAyU0P/jPkaky+1k8lEDng8mjf\n3ft7b0z8SKiNa/caiRft5AlF/JKusBAqOF82agoDtVtXc4vTg19HfS53c4vJ\nNzNUHPPfvpC7XmcVs/+0BLXDja65Z3Yx/ca3252A3CDnUaq4/JCcXSFyJOJo\ntC3j0HlrU+GPK+F00Dmd/bSIZi8xh4zKGtvgq2D+cq0gpI9wjxdJGHlAperU\ndTFQ4wVVfOe9+BVbJkuN+pf0fhRNoJvarnfaGx3PIFCH/8f8gbNzVaU/pJP1\nsheG2+cmXY/N1Ab3qfB5mRuCJayHp9EnFj2c8Y0G0P9XC8HNf2I59M4HJIdd\nQWpPAupKnLEtemc6dvTNGSK9EaDTRA+Aby8u+IazuYmUk5pSgwq8kwo6+U2J\ntH5WUfbKNHKbmAxYP7v+V2q5M1dV6iK/2R64oalH7OkFd3dy2oQxRD1726Ru\nFAS3UnYUwMxAG8LDORv85lksGiA6WoyySNC4LHfoFc9rDPwduOawlp5oBq9w\nVDXdpqupokOeEu+cRd38vBlFbC+5vGQL2ccTSJPzbXUETPzPHokIMkUs+7Z5\nXxUFjqn2fw5gSJ02M44APzLLBk7hGeHa4FrUd+G27kqYYVClnRrLmAW/BdN7\nUUCj53ugReSrHW/yAarh0UQ5Z+SebCaEqwHO2Z+JNS7pJmx5MiDa1KwLFEqx\nYjvr\r\n=mcHM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.38197b443.0","@material/shape":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.38197b443.0_1593120174735_0.1873165237891934","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/card","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585fb370292e7ba152719e05197fe4a54753fc9d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.69a35e80c.0.tgz","fileCount":19,"integrity":"sha512-tGojyQbY3Uti7oWXwvW580ph+Ui08Vkdx80RE1nQf5UO2e2xMtnAPhYzS+Gdi/suGtvKH692DlKCBRHEDIXPoA==","signatures":[{"sig":"MEYCIQCW8moJZOwBpVD7x4zrljwTldeL5s9PaD61eea8rxBs5gIhAN6ZIlk9lZs5MvbZyfdJQKysTcuXeNw9bgJJWeFDbJVr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jK7CRA9TVsSAnZWagAA9uwP/Rq4f7Btz3e+iG2Y+Wc2\nmwzRNlVqwHXyDdDTPJ2bmZ3Y8doNpRRm8PNGAvUseiFYt4vfWX5NCgEiRNVx\nZ1gEC8bw1tF50IOYy4QTPi3bzUAk5bZ0TUhlQHhqKAOjOK1tJlffYNU80zpu\nM+px3TeaVKyTB20n+blxOU9vY7wHiR1V5C81sv4s5kFVg2FbEOU03KDBVDIe\nr3NPUgW/s/80UjCCAc7uMTf5MtrpkWZCyL/Lf2nVPsyKli+k3+wYH9FZjz+0\nHDGgK/veURzngRFz5yoWhzkrWTyqNqmHsds1j/9sCoBEQhvG6Gogs4WIRnSW\nksY/3KAe3K6tgxtL0jVBHgx3XXoJaOJOR3qiMgLdPr4fm0onGrlWmLd64kiO\nZxqN9vO4+JaT6s9FMiYQDstiScFMtlrvRoBnGP8gVoDAtTHO2GtJRtHQBztv\nm8u77rIFBZWVSmJlQsal8q3XwE9i5hiI4JwqsVgfipfG3k/Ixqm9V4uAUabF\nMbP+0h3ydvB+4N872OrvFyrDi7Vmuw6UwIoXVe/zCIlcfpocJf1WOgVBZxCL\nDKQKs1t2qhzEcJnIzTe/qvcEMczK56OHtAXCulPvTeiCqU2SkaPntzTKaD5q\nM6S9oo70YZzJu0r+QbBZgNJJ2+IvIx5dE3TJjMUwLAwQTJkOzTyDqGVngR0D\nrpME\r\n=y0cE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.69a35e80c.0","@material/shape":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.69a35e80c.0_1593193147427_0.8231001959204607","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/card","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42e28941549c3b6fe5d4dbf851b6f58ce8c01416","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.df7154fb3.0.tgz","fileCount":19,"integrity":"sha512-Q4RNiteTqGO/um46IdjvhMn6Ux17zHxfGpI9UyKHpzAA+yvNFHfzLjPEin04XyS5b+uW3IjC5RrCdWQMHh8EnA==","signatures":[{"sig":"MEQCIE4GDKQJ+Cp7snc/WIy3AHvBrkZWbdD6tF2qtE/yWkBsAiA4ddLJkLTVTT0zmSzlNjlt+tVFI7m59SWqY4SGtRLyzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9junCRA9TVsSAnZWagAAuBEP/1qdYJ3Vi6qQSVABj/AC\nWajue7GEAahncqVhOjBXtSL7WF29E7QC3QDP2r7QWWli2MFi+TflV3lSyJ3G\n4K4OqBJ8QmL+C5XgtlOWEyTG6e4/BqeIlF1kgF7mscWnUdnQk5gxtwYREqUB\nPvfdcZFDxjMmVd0nr3mA1CsHNLweEvsb+SFLyTE0XRQoMDiH9JHEZoIOpVNx\nXOl4Wf9nURVvUPyCgJ2Cuax1c4Y/9dByFmQWIbIPUd6T3zPI6HvrBQpngkX6\nSaXk+iztQM+ZkhGq6ga/ijPK9qfdZ7gczo9DFMgjQrPpeMGBAQbI4Zhmbpjy\npwuDO0PZvyEi52mXrJwNvWtGWby3If4XWDPPNZ8IJ0AOtj+eqeUn+rVt8M0/\nIcPFIaNXEulxmy3YZbE04xc5KE7V17U2ynFFfeFH98Kpgog9gPWCYjxlvnZa\nPkz59BUpsON6xwtNX3v4qlgTDxKGpgx+tnazi7BJPeUieMq4uJNMtbc3zJsy\nc0ilTH7FGJ1bKc4lH4fWdYHb2ZMw6/t6L8rPvzWMzxeuh+SkYtRU0nFCxg00\nDQ9m6zAqAhcRl4ZT4toAtgOR0tC0kYKHUhCqwlNgbmL1LY6n3SWhW4HdHzWH\nTb1mKvx7tE4qu6HBeq8QgFBbPkXalI4gG+7ZMoF74RL9dUL2a9Xy5wBViSKB\n48em\r\n=xlP0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.df7154fb3.0","@material/shape":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.df7154fb3.0_1593195431309_0.2668387473729321","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/card","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e992364f19a6ef33bb2f2b13dbf0c87faae9b0a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d5618602a.0.tgz","fileCount":19,"integrity":"sha512-BmK7VtQSAIZKxvqfHSOUUeE3UOFC0QqnP7+M59y+QHW7YpeDJdsL9wua9G4eVpJ4hmpWHNeQPeD1O11UIK3YJw==","signatures":[{"sig":"MEUCIQCQIg06yx3kctwNdYL0jmdBrbfUPXWfkJxMzNgJeYLsjAIgNynGLHdV7bexV0YNa+dRI6AJFtwcd9MCTVqCbZ0MWcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m02CRA9TVsSAnZWagAAq9IP/0TnDUcIIiynZh+cgBga\nMzgUTcadnDcvW+DPNFg7HSrqdE2r/wDwooVMhSW8H0c2ufSKRa9M9xsYiEL+\nTjy9WDRzuRPXfXlizCsd009+DHQ6lH1JAtDcGlpO+6WQ3UNtnYW4a53+Z/si\n7xuA6qxAM0j/3qQJvV4e7BNMIGw399JEUHsmPM7Tw8D3g5Ymo3zGNuwEToxZ\n5tO1TLY7AKsFj1tMs2PK1oFm1SDCqEXBZQci+d/Uc8dS1uFaUw3g9UQH45O+\nCFhqeklnanurmaq/0c9o83KyHG2XkwnFVLjeTpVlFi+UHtoqnsjREEzWddd2\nlyvgotbSaNPmzGaz+zuCPggfvv6vw6Ep5W2/iv/nmjF7fCa8z+sq+GowyugK\nnZz1S9Rg1xU8uB2Z5yxb/+d1UEhnlJYxF/HiXU3kwOWsHZl21KaHmxMJzL5X\nYktd57eFH2QMpnN/ZzSYdNi6o13c1gXwrYUri97F0nIxxLjIy1E4osbUwuiF\nFVI9/Fyj5iCqjsrWK50sR125ugn6pcm8EVFfLWvZBpbzW+SyK51JWOtrh4ti\nrWQyG5Oh1enGeCsNwF+1io+L7HyS+XBtz3bviqPSme1AIZVcFT85LBlfJDMG\nmWTfRkmZThVMKt8+Cw4zOng8gQdgr/AbLHw8MIgdiTMI88auOKBKj+iqNu8w\ntC44\r\n=MDZ/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d5618602a.0","@material/shape":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d5618602a.0_1593208118369_0.8058005043270626","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/card","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79a06e0f473623b09bcad698c345c8e09a5f391b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e590b376b.0.tgz","fileCount":19,"integrity":"sha512-LeKdzmd3iEpZceHKWFoMA+XP0r+m2mfP/5wHbNeFbHI5oCuu+km0rMeAuty1t5SoLy11dZSJfFDzy4fpLA+SPg==","signatures":[{"sig":"MEQCIC0dH3rzaPpLN97ICICgUwGRAQZWwdsDCQBeWHCYI+joAiA8BGYJhjw1QnPnCytZFFdhrtjqXGVcFtKsAnjCLNgstg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOPCRA9TVsSAnZWagAAyfoP/jd6AImXyF/3apA9NRi9\nRXuIb3legEUS0g+VzQvUG7zFaxiiQuAaoPtgZPkSuK6L8tSSzhj490Zxdl1Q\nbe/cMWjUVsH6VUPKLLQf7ZOOZkrfP7Ye553NKmX/bvBGzvfYaowOmy5X/DTw\nSN/Ue3iaY6OnQxGC7zUFXk24BeswBtc2tWnbEeetFEHtODz1XPJZKj5in9oL\nucVSRa5Ulc8UjBB4mI1j0cpBZhQmaxPDZLnHZcy0yUVAEwwZdiugl3Tnjdom\nlfFPZ0uBFZmCxIHF5lC3qCzH9f/Yiz27bCPC5zGCS8P4b9CXCN5wrkpIBX3T\nYS6FcbLVbX49WWZ8NFMKKl3voD91dAf9wsMJ0RMYKHrwPUcxr1BIItS7VNO+\nIiBYDJMxGCIbbb2wqfhKjI8Ck5zyUcG6ns9FC1h87t5lvx5cGlEraY4bA3wO\nA6QJiGMOi0uxsvK/oIPjntbXzjt6ehDHYLCQpvCoCXsAqh7DPUdIGRKUBkwP\nrwX03PmUIoTNw6jxVTYoYtJyQl2lghZ6JPd6OVbZzu2LrnvOPZbS5fs4CuU9\nNsHFRp5h1y9bQUbJecSOiGTjeqCwAUcxuum6a4+80FIytKBo4zptRUiZh4hh\nwoCyO976wcbfgFcVBxZ2RSDDCwDR4YnjJ0vM2ms5mSiSplEfXSyULLogikn7\ntKLm\r\n=cmLk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e590b376b.0","@material/shape":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e590b376b.0_1593213839326_0.7865549978001731","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/card","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6af3b2b6657468f4b509e0268117ed967d2ad5d7","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":19,"integrity":"sha512-3feXc+oL5GAoCvwAaW/xm7PTylJNMr9hCQ1OCE+0iFTD4gSuad0BOPwp3EE3Lnvy1NghD+BqYHQR1koNMRlzvg==","signatures":[{"sig":"MEUCIQCN/tc/IrBU/v58zNIdCMGb5kqEZnirQI6sAeALokjECgIgAeYdgWJhdlye6ZJaY2aa2IG879q3ebx/ZALvmU7vvzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iG9CRA9TVsSAnZWagAA1XEP/3/qshFoYdMC8FdUKVB8\nlIRAw3Pk3znvMbLiKnE4yiEtMn6fH+LVCCjWvtnn8nwCg6gZzsh3fyyH9NEK\nq4LnpfCBj1vTuRG9mEri6U+VSJkOoW6Ua9hpJ2/bPXfkt83WwJFhsadZMrs3\n7MJKoPADTdQgl1AacsXNwEmBy14pcRa29p8/MCeEViognpluPmDO4vXrmrDl\n11O2Uk9PfkZ/ASevsCfIGW3eOtSrYBzmqyl1l9Yr8bVKnY5ZfqogoQydKVLC\neE8WSdFPno0BXzVVyms2V3h5XSp34JTE1PcjyquCJzuh3bqpsNvcat5y+ZSo\njqZlvDbieL16PVSTusYorSVejdYFqURnCY0yQIkcJnqFShQeCMzApv+ctg9K\niPQZReonKdRxjkZqP1HfC5KIjrtCebnKnhxG4cGiuzSLnSrSQYD0KsePQJre\nTl8uW1i/jamxx0J14q8ZBzTyhOfzGA5o2AhJijgX/LaLkM3Rm3RAcNxT1HOu\n7taYOkDbmdt4fISbskY9vNGNLDZ9n3eoemMtIdWAka8c59L36z9J6Sgo70O+\nzVpTbJ8whRHBk6+fNd2fYHVZsVxaAnlc0xxvEfW3sFcBOOiplZI/tHRKjjFm\nrCG+RIzknH8jMtuhDO7dqZ+dQUneskknMsQSRq5JVH0wbgjXaIXlq/4hlb88\nezyJ\r\n=cT6S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/shape":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.0c9d6bd2d.0_1593450941413_0.5112283632323216","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/card","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1afadf6b4d90d5b2cd520af77bc2036f3ff062e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.c1fec4246.0.tgz","fileCount":19,"integrity":"sha512-IbeCr7CgS/2y3r80EhtseEA9ILv8P3Mg1wrP3S2q1hZBtBMBDs4BeD7DxcYDilxEA16FxpcF2k3CimhKbCLbIw==","signatures":[{"sig":"MEYCIQDbpWEFLPfhGWTVKRu6G8NpBzFTxZ7TNaaLUg5sK4D+oQIhAMO0mmhLMfTkfAV5mV2ieAxAo7qRjoun6In8SrXa31Ik","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iVZCRA9TVsSAnZWagAAIHkP/3cv/Y6Lw1Wtz5XJu0Ab\nvoEBmz3P2+U89AWHfW6Y9yJIkhlD7JCccx2fRjC26m782wG4HzLd6P98fUSt\nvTxcLu8TQlmHM2bQq3zeg0MA7gm+ZWmfUnmb0QskqKbBDVPk0IhdrNvAUFt0\ny8Yi8ftnA65eMEm/1HgUaEx4WnEYWk6/dix63pYeEu40y2EcFvQ6EpdMzUSZ\nT6bhZCFUFNZoubm7D2je3eTLBK9dmXFZSgLsA/B4+X9EurgfhyVT/bueVtP5\nQjOmvIaPalJz7/I4gMY1DLQIOTNvHRm+eyFkauy65oQZTTt9WWiUA8vD3Gd8\ndNCRqahgZuxAowLCczLwVO2FhoC271FmQv4/1hoYZ14qvSynE6ygxGdvE779\nhzvJ9/NRRhlrxVSGzizzRT7T/1XTQ1Ox2+yYST0f2JgMzqAKGYAgGBzqb1Hc\nrIKxJ0OM7OSriVB7T3OCdDSLnJhE7+mTNfuX43lhnEGTjPDmn0J1BqdyFiSC\nk4LC1MSNYjN2gmmEH4zvq6L9nMRmJL7YRJesBKB95D4fODRzxaePx5FOfsfE\nN2J7HUsvfKmkOneI4Skq3vI2/f087NFOAfQUppRe3D1kLzqq0PM/vU4lZmXJ\nHE8ArsWPXuv/GjxfVD5Diaba5yB3zao1SYFGZyb7lCeC9+lnyzXDtN8z7nF4\nGBDV\r\n=YBCV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.c1fec4246.0","@material/shape":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.c1fec4246.0_1593451864985_0.4281997598952414","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/card","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f22f3e4e6a04790822852d9fecbf2b951b4294b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.c678a9d34.0.tgz","fileCount":19,"integrity":"sha512-L4PP2H4L1AvRyJrjlylXVVIdh7h/Q2lPJCg2agmveolStMMwyz63WvWNfyD/Sfv57Bp5Sht7/4MEd3782nElUg==","signatures":[{"sig":"MEUCIAavm3yLd1NihA4dy+cpwMjmLgCIg6ooAwYrBiAYTd0sAiEAk/YzA1h9CGs3Szm2fcS4TK0AKQYS06UyM0+GMV1Oi/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+io7CRA9TVsSAnZWagAAT5cP/2KCJG9b+8iI9XfNZy8I\nqogDtO+Nddn9xiu55yZHtve+XQmxzsd2YEfYzxwGw+pW8HrlEOIOmaMLeZqL\nwlaECnp1VpuyJYDeq4++yJMqw0H++ZIYLcGlSMpHGLULDcIkNITSRzcwhesi\nopJbZEW+Wem6KAYLNW849wKkln8r5RHOdALDCyEBIcLlWRqIknuwtGBYwGK+\nQoqULDOv4TWfKOIdMfJ72D9M+hBKZPaxgKRDcFzx3AoYxLQajXh2f2NRx8OZ\n6DGDRRowmT3TbE04/KNyKLLCSjdQJr6f08lKpl/TRPRfQyYt9aJ4wKjVutkK\nGAAjOyWF1cuqHQEqmIynpz9I0eTVBi9llesMt7MX3EPgJsYUTdSIbTzxrn4H\nqfRfHJsRtGfG88mWos7iOfcj6xsoor1gAq7kI/MJd5osblRpt8q06DrqDZjD\n4tAzWhfz4hANnTzUmYaikwe10M/GGbGtfsGY5ZYSC+4qJ8LXX9d0wm0suOf5\ngs0ZycS52cp+src5pcQNgBYaZe7c2zPouaolFeRsOmGardRmFbxMW+hcmAIK\nUd6VtxzFUmaaj2XoiOX/00f5UjyNxWwLHP+sh1OA3Y3upUcVjwgVmqNbEKoU\ndblCs6Ln9kGF3Y37GdKWkYcuxBJ996qdwJ39G2NrNWfmdsa2ei2IbYjGecGd\nB0LL\r\n=T+f0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.c678a9d34.0","@material/shape":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.c678a9d34.0_1593453114972_0.8688588157549553","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/card","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93bcd5e84fb7593863c4087a271a20c311bfaebd","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.521afaf6e.0.tgz","fileCount":19,"integrity":"sha512-yZKt7TmZLLu6hCOnt8Z116k9qcwni8lsRSm3X+Lmj1SVfZ155iC9iWx7s2sM0TvWO0ac5dOsNAL5HMEY5Z1AHg==","signatures":[{"sig":"MEYCIQCnEO1HWCAg8bE5s8PKKfd/s5SDuv5GHx0Y+ohUhLZ6MQIhAO736eM7E507bgFffzb/sOJYHeKQuQa8u75psAjAS5aL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1TXCRA9TVsSAnZWagAAmGgP/iUO21863MHfBB9EbQQk\nR/ysLEzFpQj2ucdYn7KQs/n6hpX2kR2jx3aZ4dOAr6T7skCq2FdPM+Yrl6NY\n5BhecuJpBSO7zrQh2WDj5ijPvK6XluEutBsPKr9fzaMENtbBXnG/dnNmL7kO\n48i7+iuCkDefOSxoutQUpmYwMKwtAd3vhmbGX8tgDRIsX+kFia90x+2rDZPe\no9D2ltmuLxjGHGql9WNwnjholW9Qq2Pqdu8+3DOvKDbJVkgvlD8sDYWTE7/W\npOS/PRq38JdVqaawOwLqR+kY8C8Y+QtEZzIbrC90ers6tnJuXG0sGeddevn8\nnJmLW+xpoRHVvpJvOYT+6u3Sn1m+GNzSWaklowN84b0XCa2Hx0Vl7JqHKs47\n+Plq+o+AsPBbhgGL4D/vmZ+LMNHprYgY/dfvMDMmnK4tLXA6v6n/+Wos5DMX\nagOOrPk9kXjayiA2CYZrP8WzIGP2gszO3ehZv1fmwSaeoastdxlsHvnlamUP\noaw/6oWFozdspw8eXKQKmLzdyryEMJwWIhv3pXZlCZNzxnTgXSHrjQMJWxpq\neKcLkBv92jJgLaC0cwO6x1khWybU26CDKmgb1KucxKS9pKzxT/e+90pBb593\nxZK38lKhufdCKs5h/OV1gMSYigP1iwqJSPiYAqHf7kDCoNwhfhpXQi5Y0hIg\nEYPu\r\n=KYVi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.521afaf6e.0","@material/shape":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.521afaf6e.0_1593529558539_0.48743268892802094","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/card","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b98ab018445461f5236fb3f2c8913c5563a9f5ee","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a2ad48839.0.tgz","fileCount":19,"integrity":"sha512-i40iHZ76RpIYRupFflLPxZd3Y4KV+58SQZn0AxkMzzxT04zpr4aSwfPwRT0r6iPvWP06IA+pwbJ4uGxz88ZMpQ==","signatures":[{"sig":"MEQCIEgcjRAg7rRKecJtaNUyzGJ4rcuXIwwseWinRj7SH8bgAiBjfAgrP7QG1z7TmwXMN/8nVAAM4DRd5N/O+wOS/qgshA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48nCRA9TVsSAnZWagAANwMP/1HJTWqCABW8NxC29KaD\n0kcDEGAzN1CNsqJUW3zkqt4SPwLezEnX0c49UQCj7ZuNlbxef5J4Lteg0YRS\n9wDKZUqchR1rHfdrFJX/6AKa1pL70yFvsINmBt4uoU2FVz6xgbbpuTLwIcg4\npqLOwgvstdCUUetXDlnPw5D6CORDfvbdVhK7cLPuFEhKjJfSoL9MXmHCRHLv\nEWLmBYtP4GLUE8Cc+apT2b+xCI+3B3IDrfNI9jUILd3DNJNTUcT9BP1PVOAR\nAArEIKsIdpNpKzkhNt1cbyCs1MO2BiHgN12ALJxjlSiVrXa2pzNzqULLUU1R\nR4k4z9eOhGRnZzaYtKFW+1NzDVwx1kI308f+mlpHHPdHRr6VzO5MuQCK5I0T\nkrOvnFfMRwjbrCASwy5H6X8cWmO5udeyasUUNTxPz7HtL9HBfAjFLnJFbd0J\ntIte5xXr0ajuoj5WOOPuAVvUz6jAl47/Zt8seGkgQpoAWuMPSSEN4bhqRSnC\nP4EqRzIPoQzD2OFh54LYKidfojr8/ZUbakfOjTroG5zPAuSERCl6GlNkuMJ1\nUd+uVeoZEXlkpo7XR0Y7OIzyP3r0To2p9BPparz9XYtO7VI21j7cK/TnqDzF\nglwXVmXvJi3nr7fag5i2rIUcmPNhlaEsjOfMPTTmYA6eypvd+FQ8C98rhftn\nvI8V\r\n=sC8g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a2ad48839.0","@material/shape":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a2ad48839.0_1593544486912_0.7725360780989292","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/card","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed9b3fe25f9aa6595cc7b862db7f9ac519ab3e2a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.ec2385881.0.tgz","fileCount":19,"integrity":"sha512-NKiUx3kxfMjm0aW7VTCka+epFog96mTnrFhw139rUuAMTZYss4rYgmLtPUjGxQ0A+BDVuQEnyRvzLNmQthbvmQ==","signatures":[{"sig":"MEYCIQDJB8iXHRnNOLIFeuv6jBOKTkZNQjCVzG8tHsqxm4zHmwIhAKFlJBBEyq3J+ElfCO5QJ6jU8YWlm6QvFTg7dK67rMTk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LqCRA9TVsSAnZWagAAD8AP/07Ql+xjobTDthTDatHZ\nEkxYLXJEwURMzKM1ImBbqI8N/NgfsXB4L5DF9bpTkCQXGUuJmmKy6Sd7BuyB\nMW+ootCCl1CP/VY+qB8pKXUl47H3rZxST085QzQiVbmt69YJVND/NFTS1GAs\nQDo5226aIXSCLcEQCxD6pXEioxinPd2UA9Pfhvr4xj1tyPbiN6y+ZeFG9DLa\np/J65RdGgiimGuzkxFzgk9QjXcuecDn07l++8ZTAbjhgI3X7ivXJnMgdX1+k\nUReWxRz8cFfg/XGMk+JicRuxDi1+S1TY6FlZVkBhmg2eB7uPkyAam1Ok+/+m\noBxbzSOgmLY6S1Z1UjTE4kqTRleQp3voA5icQJCkEvXmHbElq9m+frCNM+nF\ngbu4Gk44L42yn+qlEmkHbjLQLzYiMpBOIndg10TZCC7Q865oczJrffFLph+j\nOlnEWR30zTz/569fF8/6BH3hse47dOtzD+XNsDleucskLk8vajrnMdABoYBS\nQXHCPXLyIvYe4TlEOEiA/mPDuX2kzzbjUCtYQKLU+O+zNbqfz+aRVHxjpRvK\nAi7E8J2a6vAtZyW7ufmHYpitOdTpPW+tdAEJBqGWmFKVLasEFkgCJtTrYc3E\nC6djRYW2WXdeM6EYT3FiZUW4rlX7YrS/AqBdfhf7FMNLJVg90MIra6KEvTgF\nVFj6\r\n=a5Ta\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ec2385881.0","@material/shape":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.ec2385881.0_1593553642041_0.10070792717587218","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/card","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9510f29fb2c9098cf38793cbdc362ca066a401c","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.610c26c4a.0.tgz","fileCount":19,"integrity":"sha512-9F6tr9vEdUMFR52MnBnBLnBp7uPY+2fP22Os8qrWsrIj7uUaf4tL35P8e2P5ctvxdDLscHP4nim+TvmZt8FC9w==","signatures":[{"sig":"MEYCIQChTnI7dbfgWjoGF65LRxjvbK+dfHLFUm77+VXUQyXikQIhAMKW/aHN+WFlH2BvWXGhjTSR3poSDmOjw5ehRH+p9b6R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQiCRA9TVsSAnZWagAAMLAP/0w6fwL3DyngF1daA/42\nquKlYNwPfbmfplsWSTbZcl2bD1kctDAc3/b+FSpoSMwMyDjqCsZb36+DswHN\nbAPACdA8DwXZbTSOgYH99a7515FXKRgSRthSgKFz98kIPO84IebKhzAvds5k\nzdtaViIu4ifpzs5pDJ9w9uXScS/IvCkiD3/585G8t56CbLNHj5bCcKLk4s4q\nY+E9XRFdJuIYMPgbP++Nz01YQtnalOnBuWPpaQWgfobP8tBFIuQ9HJcYThCh\nKJrWqoRpXYyc+tRWCXrcVqj2swfBDJnHSwIXFSAv46HRhI+USuzu2GKl9/tk\n19ZuxxgXEMlfEJUJ2ACsEf9Xpd81cSBCfn2y0J5LrAQJlitAp1qVhdi4RVG4\nSqcd7UxLjCSI1Mgp/fX0S9mkqHMA9wtgJ55JADuw7csOaS1iq21Z6wfUsVtF\nE0i/YIE4WLx9uV3kITK0Q1hR3OLWuCSu0SdC82hPb6E8Q97nlBWkyBq1H78M\nVBMKWIAyiM0/KMC/8nlU9g+qvtQdCmwduW1fKCbnS8nsZNDgT+Ir5GTmsKzJ\nRmB08ga0Ex8miPKwiPPKjV+wW9hGawkmhJ5NlI0KyFvQErff70sTggmsk6Sj\npC98T2g7NskoqL8CMXc7TIKqrDB7VABblbMxwnGYZB8ZXxDQhs1Hhb3d4tas\nd1TM\r\n=EvuH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.610c26c4a.0","@material/shape":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.610c26c4a.0_1593615394539_0.006300724727088536","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/card","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61bf465129fce2f3363edd281b2cf0827c86d95a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":19,"integrity":"sha512-8K8dKpdPXp532up/7SGknWb+Sbec+hNWErxWwENRu+92VmL9/cT16z5vZZSup2BqZU90+VJmv4qAotAs/RMHcg==","signatures":[{"sig":"MEQCIHGm0bHzZIU2uT2gjBVdpFcoEzSNPuvlu+yX1P/pjtzeAiBhHaexwl1isTY4ghn/EnRWsrDUlrbi1kW0yfDwnQiOlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOpCRA9TVsSAnZWagAAmtEP/jJ2pxh6UYgZDlsdaiQ/\nR7M8UzNxbNxPEM1S4BvagJkGsp6paI7U1W7G+twmpQO2AtFmBg8HShuAXidW\npiYUIEKkJe5tk2Dyi8LuR4Or/GLKVQ+G//IYUa1Ecc5VTFeyZJ7rbwLr7h8V\nX9bhSdLOqIse3Bqr0bm33bADICaVEV5/zZJXuGawMZbRN0iRVwHKmd3zh16J\naq9AdqnjVUK9PSmPFd2zXyPLJb8qLQCiUQhg+ggoGlCBEcHJvel2yvVeiexZ\n3dwEUHZNkkQsL50fzACPWaySLYZLeSNiXv18wBR/tx4bHDCR0GFuNMDF1bY6\ncZyTgQqEU65H2C5IBVq//KyAbOrxf9vSK0nGw7bkDdPQ6+1/XJxTk5xHCgVG\n+CFDieH/JDFkZnZFCkkT/hlw7MqpAAFeySmExfmkSvGSWFHzZL3ExKx0hNqb\n9bJWUSj1jtcP8REWjzI/CHvhthTsR1oTeq83/u+wqhe8/d0PYUT942538hP/\nHdmdly6fvi7PrHmlkeFI/FyWhYimR6xv69gz1KbzM2BLgw6mdw2bLCpLT/da\nndVipC8a6Km8weloDaChtQyFgCojzfDGJPrzNw8Xvbh0XvzuHZLdKb76YBYg\nnOFctmM1fYhAjf+joT4CmjoD9CmrTcl1eYJL4RZRqv4JnIhOkPJcvWEPvBT2\nAZ4W\r\n=0csC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/shape":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e2ea4a99e.0_1593631657413_0.26682084928975525","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/card","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2f023b4cf0b711b64b291874e4fc1d905d9b02d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a78ceb112.0.tgz","fileCount":19,"integrity":"sha512-Wh5Pb6R4empWoj0WPfCSdBUXhklVWVGp6+LAeKyWIM0zYGkGSfGC/B/wAsYQERUGHb5TMJlA/4z7HQ5sE5aE4w==","signatures":[{"sig":"MEQCIBlD/C+OUTJku1+h/DK4nqstPu/zjBYysLMCGYGDAx5AAiB/S3hp6zhiImwdBTIkh57d0bRAL5KVTAl2zVlsrg9qBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZpCRA9TVsSAnZWagAAqP4P/3xw2HHvNEgI9faYDSrc\nwZlHerjoK5XvJb+bQEBDiftELL0qV4HQ8R92TTQBaLYtW4phFSVef8DoaHTX\n+BEFEyCA4ZcsjfjlOI3NVniV5dP5YwAsLbpbymNjFRFWqMzEb/tfPhPdV296\nu5H5rTX3cyayG1FQDMAkLXXDV96fQ7dv/2gUDnx9qYSYB/hfTwLIMmJZdKgB\njZgWv24+rIhbqMoJ1ZT7vpcm+yufT0tG/ZzQqMYFeH4ak6vUAq+X+crGv197\nZPAINGgwtYIqWHJGlx4HE2usAutX3VWfZOFqCp2xAcCoNa0VWtDZYNLVrcCS\nvwhCkHv0EK49eFdAsJglT6GteCKBhhOkrMRI/qURSmU592Toqz9Oak4NDGM9\nWPdxzUrcwsHmnx1JfnucNrLAVWtr2hvMfGA+kZZPkQiyY+lmxGnySgh67mWT\nGxYlD3niccXT0Xy9LZH/OZ01gzqtLlvk3t8tyc7jJfra31Jiuzh93kedfFd8\nKJ5cNB86NOJ1QvUnLXsk8/Xfvf+sVTUci1LBXdtCOXSto4GAU8jc3f+UHHY9\nkTMAFq62+DGc5axFSZ+s4x7oCRIX2uOHHnNDJ7dKN5HX7ngHXDsbrsB0EFO0\n8kJ7gQBriqnsScMjjZF917Nlkv97HF168RcE9j17EgWm+1NSzr4OfTU6UCrC\nZAGv\r\n=T3Ax\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a78ceb112.0","@material/shape":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a78ceb112.0_1593632361363_0.8822852989349976","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/card","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"143762654e59d46885995555022df3f73ffcf1d9","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b0c456d33.0.tgz","fileCount":19,"integrity":"sha512-PjrhX4YH+6DyfCeFQBPpSGOIefWegHY1NJ+IkD3oaRU8FmPgpm2lSrLn+V21cTP8I9xJ4groCpi5rg4vRW+IJA==","signatures":[{"sig":"MEUCIQDAxR2EuJXxRfQ+poOrp3DCA1z+KPLSyteyYEIXIY3BewIgZWoLxi3GWFI8YE7vfspTenvqs/0oUaAMaPhwUKTWxX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6izCRA9TVsSAnZWagAAnBkP/3mUOPtlLzpYpJ/g2U9/\n020mtIZBkynhC/QZS9C5AFYnf7lMSt7h4cFE13sQJsuq+QQj4vvsH1BrmLk6\n61XRXU4TWtjorZmgOJ14LvTr51KfXQCu4Ftocvau5dLLkc2bGqol3/lNDsYg\ns/9ugnVS+sTsK+XgPrwqow7k6G6fFM2BOuMwCJXvNGniSwWmR5ShsPk4G6jb\nNj4KeEWSV0Ryz+LO2KqBqmiNWoclbjS0jgvrs3/yT7ZQJgDfAZmJ3BavFzp1\n+NfxAlaCeDAyovh+uCP75Rjn8D6bMe/Sb/DdAVpAverUNe2CqUcNK3i8kBXv\ntEStZf/oEPXeZpk+wNOPFHPz67eiJfYpX8OJfdrBEo2r78PWU3SeNnGxsGlf\noM21VbBtW+Hrvuk3P99dNDXEXMBFLqEPaj/hA2F3j6mj8amySrQN49HbhIeP\nTnMajIWl+bzkU7wPn7SepZKdwVI5yTXm8+PVXd7DSiu+JtL2GUg/+ABEEgUR\nY92P6/GhTt/Y3VaVEoB9QWyMKh4q80xQordaERLJKWPAanlww9hUgk6wQJQy\nxniIHJLKtZyHy6SSsSK9nbg1NwlA1LSx0na0qRxERoz8HX3Z+okv4cG0zjae\nPF9tv+aCxrfeu813qYrWVE4ywwXgkcoIOcQ0qdWdZWTGSzEABuTupgObq9NC\niing\r\n=9d74\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b0c456d33.0","@material/shape":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b0c456d33.0_1594075315498_0.7982809572605509","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/card","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de516583e429cc85953378a3ed17f8debecc2161","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2e5711e04.0.tgz","fileCount":19,"integrity":"sha512-8rur7av9EO7IyeJI/P0aaxi+j8gHsl1mYj9We8FKcCZ3Hci1pHOqwyc4oe6orgRO02cTTwOM4FKw86qRadDiZQ==","signatures":[{"sig":"MEQCIAylLvCNRyuOwzvPHCS+V8hqZKUyNJurBg76u/sRE3nOAiAP8pZiUa1InBwsAttrPrC/jPKgbse56Cpg9szqzobT5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjlCRA9TVsSAnZWagAAHd0P/3/n3ZSz7HsTOSv8ZZCv\nrfEAR/DkfwrMCD0LWUwcX776z1vLj1KPh5o7HGOqTb33k9MopinM8KVroz1a\nkQpK//6TBapJTVoL4YQrsiMWMnwjhuDbjRzTBkb7/Lz4/18Bc+PSHRcfV1Jf\nukBOGcfPLb7JLRK7v3gHlPRuVr+le+KRGgeaFKIpmaJethkm6oRYOwRjtuK4\n96HUSHcfFGZQARAU/m5NJWQBpWQAparK/S8bmopCHRlx/BjmNxkoPDaksSYc\nNLKb5qZ3HRJUH2vxnyie+Glw33tU9rHLEHHlfEu6OgW4kbRTIsWu76O3mV8K\nBlHBzS3Yj7Hr9JDOPNjrzJRIoS5vQ3jxcJK3x3tuiI/FBjQZPnX3SCVjaocG\nKGqMlcQTEx27ZgbqeGpGjKmrStk/RPp5rOzDYSPTZ9MDGYQ7DBlyd+7Arlgs\nZiziaBJBhMtxaHTi1D85YF0U1XbUYwR8nr1pi90+CL50TYeWWPCZ5NgurGfi\n+TPE7sBCaR1qY3/VaMBnkssfgP/Eu6kLizt4Q+8ARKcqHiT+oUd4mFyZD7zs\nUmHnKrTWNbkHUrqAv+DifgObUK8l2YKwqBeiL89JIl5highrOSOq5j4OoS5a\nwg6LNO8SIux0+N8buWlc73gjDkZ2rf30MNJDCADJMKN5ibqFHTItWhv/JBkT\nkbaS\r\n=T6L/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.2e5711e04.0","@material/shape":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2e5711e04.0_1594226916987_0.6731238673741302","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/card","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b90ce0ea63fa96a1f710f938c2dca04987d912b0","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.811fc5d24.0.tgz","fileCount":19,"integrity":"sha512-n9T0ZWM+Cqi00f+3i2obNY5p2SgfB65JCIGl4DJqlShhHPltVSJ+nwScJt7tdN7xZt9rXoO4uyB4p7gBiHRSnA==","signatures":[{"sig":"MEQCIHRDAqv3LKMoQaEjGJcrkrSjMy8BaCcqcHpeFiV5Z9O9AiB3HLXigW+Eup21ZU3aCRXMk1Xs1FA/XwddJr6I5zL1TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9eCRA9TVsSAnZWagAAOUYP/3dpS95JzVubREda/nXl\nHp2LzsBpRNcpN0Wyq/RWkeIfFXsPrjkw6FjNzavbqvxYAyRX7W+qC3CPZh03\nilk4O7rkGSjUy3cDa67FnHUO3CIDENa8HUi0MGuWphER8B9Cr/0lidxWCWK/\nQkAHJpCdy8vgZsloLvLbFFYuIVY2CbEvswhRS4/Cs0acRaXw4jkNO3iesjXn\nffVgr+97l1Uxl+aHMwKRnoQMUW8KqVlnxzcrvTHytykz8RiJeC8MkudEm1EK\nWMiKbjKoMBnvZhI+IyrwoxljLpgT+tLmg+blhC4vvTlQJ1+5sqcPA2zn8x1h\n6yJmBcUuqmd6kKMZZkJ6zB9CRDawa1+Z1nSVHUDAocqDYs7YFG673069B6LA\n0bO0OILX4/J/LhTWz38ZKVlDlknFkUbRiBwoqOvcf3Un+ouuYLV7HvkM0tNy\n8U4zi1uYeI+brnHMcdOf7HdRE8WdpzmBMNBV3FSeNVBOJJi+aeYilglPxWja\na6utZ2bWePIOv6K7aGj/tttMjM79EzU5Q29Rt2+j577JtSL+xOtLA297ghxy\nCxfa9RMVzG9s5f2YTpqytEKlGR1L0XsSsVScQZtf8AQ99Xrf8haF4+oTxij2\ndBwJce1JK9SIqKZsT0CSqCpUuCP9Xsz9AkxbKV2KIXMJXRfTC8Dkqxe16pdu\ndunf\r\n=XzaQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.811fc5d24.0","@material/shape":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.811fc5d24.0_1594228574329_0.868387328747203","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/card","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5166cc299b989dd13e0410c15a18328969fb3341","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.6ed717ddd.0.tgz","fileCount":19,"integrity":"sha512-EYoB/alQz7PdVS5Zaaam7RkT8+LbSLCf27zUl/WTqNfOKGwsrzlJPY/QBL/EXxH/rU/njg4PnM7RBFY7u2sjxA==","signatures":[{"sig":"MEUCIQCETRDQny2H0vjkaVO8BpSm3Fvbk9nAzL+7y1GlTcmwVgIgRdyI26FctIR8xiRT6xmycOptWtNLnLIX/i7YAEHB03g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIiCRA9TVsSAnZWagAADmcP/AtrcYhE1tbRPhIh/JtX\nEuVsGQ5intQMmh7AG1c0j1aq6sWObCzZBJ+YW04PMa7JD5OwG5/HW75uxSyX\np1leGU6g9ER+fhdiZgW04ehHw9neY0hAihGEhKHUaZLZHI6q3Nl0ycU/uPEe\n7n9NEHZ+RxTXxMWn4dOag1DxVwtmipM5Pj6KH3cQIKIsm13OstD5WisInpYf\ndiGhVNygo2bAhBC8NMvlJm/7rKwJRIkEvQUME6QwHXO6hiOuAfxActPFD2Kl\nFKPHoZb/7nU5i9GFbv8I4dvUjeA/fPYPb2ZjVbMnzjhNuz5CElN41ycvygUj\nFLZ5BCESGhqvmA6p6WbNwxAjaOKZcppAYjs00JOznsFryxMeC8wpZyaZzZda\ns3A6TD3HgfngrX2gb/wu6/Wr7Bq5/A00aHZA4BoIbCgDJpgjUTyN6CHaIZJz\nOG8VtH2s6eXCpOs+3DYgMLNXR2Z5YDWtn00K1+NqQmMRmsb5Y9T4QRyYc2eC\nAow34c8zzQEzlYgnF00G6+v61rET4J0sre/d4Klod44cl9V0/IVHIsuEn/F0\n8DTaApZzwnWN4SVM+zsfy57xPfTtccfFqsGAhtEqspiMA+HrX9u7ALFc7Ac8\n2wd311YNWRW8uVkoPXdukOS/qB0eKUeB9uAN6zIC9b/fkb5YfepqWwtndyCx\nuEGO\r\n=Vbzn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/shape":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.6ed717ddd.0_1594237474171_0.3997594072032129","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/card","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"569cd332226fdb28e9b6d658adacd94cf81d14b2","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d850de590.0.tgz","fileCount":19,"integrity":"sha512-+9G2TQRszR5vePKXUfA+zpfHraLlypasDZGiVqW8i43gA/5kp/OqQRpBTgZ66aKHkeSXbEWPUrD1U9JUNEJlNA==","signatures":[{"sig":"MEUCIBdfeA5LYTF398kwm99yrNd4ttUpTKNet4N2ymhGSvB0AiEA+89EesCW4DvCL3sa9dUJtZSazNVGRa3+ClzYn/uSur0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yBCRA9TVsSAnZWagAAqC4P+wRxi2h3V9whuhp7wXXf\n+XIRgiW8ie1EG/TUiPiDF0zfFLs1PlUkVOCnwKKckboymmRHd8j2jIKNWhBc\nq3P1VUOLxIT+oSQ5p6/6A1/4adkZMmzEkKEcGNnAi4BhptYXXGNdDEsqsNoJ\ntlDN+z6bBDsKXPMueOA7n+KwmZpqTW1PvhdX0Yrfd5j4t5sH3Lh8TVFYNlIy\nRvA5Ds/HluEP6N9Ejp7NVuvx5liarimvLQzXHLggs7/1HwxjTo083aTqeqgL\n8V+tjaitDoxToumxeqgHpT3T93A0qGABdVwCvYndnqP0YlOUaMMukEcPTPdQ\nUg2j4at6dPCrEZpxNe0hXhsVdPuOhZfQQLmEi1sb7Li8wseVS3h1Qe5gS0c7\nhdxNP3VfvrNCPpBm7CCAf9HS4OIgXfQrlAaL4euGBWSTl4GSOUvhopqK+FDF\n7iY8t+s4I8XMh5hsL9n35ZeExsnUS6fY+qmiHN5zvKnhr9FK+VWsDU9ce/o3\nf185YMLohLDOSsvED/3vhhwnpoTp8sSuNXLd/qGQtgwMv4k+/p87WWuyyGlL\nrrHQPK2zL48bjuJf4laLmdr1aRyUnGkY5LUhU3xvxigYuwMXT8B6Oadgy1O4\nYM9jtvSE83+TzLDuLObgJbKoPMfzU+3fwSQ7DitjjcEi9QWlneljs5vRUefA\nUzGj\r\n=SGBG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d850de590.0","@material/shape":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d850de590.0_1594317952777_0.3126445466769683","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/card","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af961d3bdfc01fefea11c901fe251f781066b18b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e07a70841.0.tgz","fileCount":19,"integrity":"sha512-x1h8FaN+AE9jyylhoZjMLUpxM3vdhCdl0lEKdTPCPovJlaeSqreozJRifYqwKVnipl1DG9Oud3IzaGxhkZDInA==","signatures":[{"sig":"MEYCIQCgjyYEay0D8COUdS+G0lEVCeTqo3XYqS1VOrqz/kgGGwIhALSjEMVLJ04tHatrvDCRAiKwgSzO2MupMbqt+cU8a505","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2N5CRA9TVsSAnZWagAAyo0P/jMszN/gDm7J0nz+K932\nAiJf/5pq1fI2lX8l/0ABEfIbA2EhBXcP5p/GbXiIvNlfXNLS7cc+YEFc9c2X\nKaNY7eaBw9I5clKa3QgxUOohCaniBzOabNsNLWBXMBo2bP55j6bbS308D6l8\nHHiYFjg7Ps2/Zt9dRZ97QIOp7caKZ537aYTtomHkJub9xyaEtyllQdfGTQKn\nJ82Zh5sjeK05Cpk1WAPxW9Ua/wNjik7loBAI7NXOTRK3dv2J9IJBWGJzqshq\n2XdzCf+eS2nS+T0k15/iHHCZH2DADqU++E9eMYuEigmrfUWcd/vrom6rN1At\n254Z8pwtwlCFML6lKJjWg+4u52d3k1TJotIkSU2o9atQBPD53/aF3RXc6cfO\n1+QunF87LJ/TyzyRZH83wqQ/hOBcrfmzI9cqN3grVDy2fRnA9sUQ/DaaGfxM\nS5cIL/E6slRnx5Re7Kiy/d4zqENY3DuLnzXlbHWS1OD+uOm3+uldf/brg7VF\nTecH6P1Dl5XAb6VO+HZERm1JdkBZ4a34OYuzcnPWeFc1YJMzhvtD0sXPRxeA\nDm+OXG+RZuW2Ir2nXHkrvdhO+PriuuNKm/oRYZWmisBAvarVD0DsBi5xioPC\nHLMsL774nGr33XJ/xPBtkm+0NkJUahssJckLAjjY+UMFGx042VCq9a6q41G8\nVZcm\r\n=lKZu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e07a70841.0","@material/shape":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e07a70841.0_1594319737064_0.9329422046357363","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/card","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1de6347c3ce28f92da7c8110086e9321ebfc27e2","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.37947ed6c.0.tgz","fileCount":19,"integrity":"sha512-+bY0bzJAAkhskgEUwvIlHGl7N0Zd/9vgN4LnT/Glo6zcV312wMspwxw4Xw7Clm5eLPvKnLoYCWoqkJ+uMyC1tQ==","signatures":[{"sig":"MEUCIQCEmIfHixZUR0T7YySdZwmGefx4qYY9K5XYW2TOtESaAAIgHTZ276fhFiWQ71jlKttyy+rGyDj8pGphMCINzh1eFmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/HCRA9TVsSAnZWagAA3Y4QAJhkQfyboujudNi17xY+\nag+Ue153zyw39Ad7gnQ5OxA1+tqIp+bR1WEmPf8cYXOwfvcEE7zK7slD+bbd\nn2AkCNt0ctxY6bJm7s5vdJswo++3ntIJRK+iJHLDGAPf/CznO17EVhZHlLnt\nu3AfQBeb32p79cvIj5IwX7heoYU6t0ZCZCxdWzqNvUstmee5Zp2zd0YbQJqx\nX8F8pl7dLH9PzOTUhRqHx5/dSkUKs7ouPX+V6yHWrDg1jTl7xXvqmMKwhxgx\nFD0w+uUyXzC2Mk63BG/p5wnWj29BnPQlfQu9ZkUNTtPCamZaLvTpF97D7cSX\niRMmIzRBY78nqojNLbrWs5U4QTWl13nmR77jBihhKHzdp0Y2ActvkfLG2kQt\nnjqH8mww7oA6WbbJ3/x+vN0y9xu3B4bZeFs/CfRM59cHafQQ8g1/RFT5dnLU\nFWrwfh2/chSWogC/OgEWtQ9+hR8LLtLZEP6uG1hEIZ+BXVEeXm7nY+tDhTiJ\nkZK0HbOXR1qsmZExfdm8IV/BVxX2bGgWaTHTtQZlnYDRi9JTHu43XvSG1Dkq\nPzoLTNBnYs2X5q6wgehtnLJgDBk+Fcb8/xU1fOm0/jTw3WhGoiSp4CXw36Ee\nw5HLIdxLLy6B7pdyq+D39dNIT+NW6rmRj41yBM0VImRQgfq6tmFzuPZ3FOhm\ni+OP\r\n=Gp3B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.37947ed6c.0","@material/shape":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.37947ed6c.0_1594326983434_0.4047101922383629","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/card","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43c46c415178f481455f90c8c47a867b238cc884","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5d443afec.0.tgz","fileCount":19,"integrity":"sha512-KzQxf+hpQLU9n8nrixvO/yNmq2FDU72/2gB6QJVwiDClfIQV6LwnqoCDZ8iT1f0tw+3SaXNSYSscN/5gSbg8Zw==","signatures":[{"sig":"MEUCIH0WfbWoK2vTaEmDP1OVXQxK3EDkX1E8pCH9rc0tkNU6AiEA4iRZQABMEt5mTaoP0PSVOrQb3Mh/SXuroLfaEcxmMIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4N3CRA9TVsSAnZWagAA4dgP/0JMXi8B1LI2OA6i1jSM\nkVUKgR3vMqQLFxKaMZXpw0pfQ0zalhAsJ2isx/XYOWfLi+Sw3o7Lr4gjOhLB\nXWI0W80LUNBDm4sX2OfzTTV/Zyp+MELR1T2uv/xObdCFXR/sa1ocWPIfV9PD\nRJ38jXU/muOI5gr1TTio3zrOxWCSZDTcvd8YtFgO7yfDBoYNYNw6H3SL22+6\nXo09EXTEslXkwQ7Elbw/RZR9DNhmm+cReo9c5FDYZLje9mOTZTQnqcc7mYhH\njdA7bNN+1PAhX5eksbLQVtaqZy1UobbWL2ZwaSO1k1Vimdn0GsyHh0X+K25q\ndGptfypoVK6vLEGtJ9Tz0mmqQRh09ZrT4i3vGqBNubr9RBfp0npj+I9i8jVA\nxVTw7uUJhurY2jcEHc1jE9pC8WCONfsNKitKUibBB9awy9z4NMih10ZnBFqj\nZhumSTLVN8zOu9J2XnxtIx1BgDZDbSyf0yIJ3gga5sX4vXoJY7fynUPPCLGv\nytWH1LFb5HnJxDx0mFgfWFnwawNFHTirz57uunvFjAm9VVZwXQ6qX6JWJiOM\nBB3Mv1GYrCSluAuhP880LeyWc/LAvmE0eZykMEvn2v96lvLAVXGI8JFB65r6\nAVTi2hh1WIXzfQMMLCPycEYJB1zjGoNqFXNW2Fk8gAOerbnPLn67L4Ypgm1m\n/pkk\r\n=7oM3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5d443afec.0","@material/shape":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5d443afec.0_1594327927457_0.6927700078881653","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/card","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f4134307a5472ad4b4573432e690aa7aa151dff","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.9ac1ed914.0.tgz","fileCount":19,"integrity":"sha512-0OZh6Lf5ouS2wpnThSyZ177+4tluKZbrevBFxbzGDwoEgQrEmDq4WeKn8qFczrt1GPSBOXSp/u5ws5DxCh3cXg==","signatures":[{"sig":"MEUCIQCIPGuF8N7rWb9Xbehzl+jiBzeaxmXlcsAG+F/S6ji7mgIgJCrFrxRLO6J0Y2r3W3w+RC9jjO3Qo6LVTDKah5xf864=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4o8CRA9TVsSAnZWagAAx04QAI6KcLHhVtOp7CjxI+Qe\n1rLaYawl8G3vt1bethC7L7WurED0pu6QoFokvLK1Dvlo9uzQb6J0JRmliBh0\nsZrQlo6Q+CjcJPfbaaEAvLWEG7G9Cm0PdADHtn60DLLRLtd+vBjXlruxHjl4\nRZLyLAlIloK74QY36BAFivk3VsfXtCHJcTQssHYCRmmLFe/wPPVea4nG9TpB\n2qqYrv3IBBtRv6jYhBjpzlLUrrXSuoAUAv3fHAD0QH1fRV6mjRmHbu1YVCNL\n9gKnxRbr0YHfkQpfrQmmmfuDF+6FaOU0hs7y15F+QOQwWdHClpdgcPWczR9h\nlg+gc/JCEEc7eJ2gKQcLUadTa/sIWxpv6KF7ghWN5koZv1kT6/Tt0uBJEl/4\nnwZ07hOiS14G0Y0uuQsE44Fp46QzvtUxuqRNZ8MaUW/cC/KqLq5vjxTJTc2a\nu1pmZW8YXzs5cEBN43qpFC3fnPHRsJzqineD6uWNuvMNsaubm0SjhQa0AkmB\ntkztzgr/siX+9eLqrxsyWT/qJzE95Di/lX3/fX+Z9TgyE8rLdqjAUIlFF44G\n+fF0PmlW1q0CInDBDJAScsJqYeKrYiACUfQf/rJ4YtVYaYTFrbPwNLLNVnMk\nBhlzj5pw9C7IZvXUlXF0WKhIgpI2LcTIUvv537lCPcp3GAP0pRKiLBY0d61Q\nYtpx\r\n=5JUm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/shape":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.9ac1ed914.0_1594329659689_0.8649560437459984","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/card","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df899dec718eda06f1c41be9d4c033899ac2317f","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.1e7cb6198.0.tgz","fileCount":19,"integrity":"sha512-mCZwBouIOLutEq7BLKEaJuLqLEqF03bmjXaFAzmjpH36VMVwbNWdh9ryfOcFRiyuk+zJxKFKe6amaxAh7fRj3A==","signatures":[{"sig":"MEUCIAttaGAt9Cu9HbxDp8PD1lsA3nmTfvKpb+cZ/lh0vlueAiEA7LC7MG/n3CqN66L+O3dAjopOkxD10bL7DpAG2DUKyzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZiCRA9TVsSAnZWagAApQQP/igda4lCrjzVs0uoQW8D\nqeFkvyFvSxk+8QPNgvtOTKLfz8XWwx6IG3mDi/arWBsGI2r5EV2lKjAPZdan\nGl88W+czrKamYVFVBWaIkoJ3mTox+qkM0p5a7rk7XtcBfmcrs8AADchg703X\nMTPw3u5yhjr7sQcQD1YlFMNqA3ahlVm5nydVlNAMgCfXhS1zbCP06VjxXqyT\nxUDgtJMi4q0eNndKj3sHP+d01iBYEOsAP0AJN7IzUT5VMa0dg4MHgrjdu6/y\n4zv/MtmSnimhYzbXymIYwsIkYOujA+s2Yumer6nzNqwqfAc71PY03vCHjm2w\nrCMWSsZEFegs4D7bLPBNB0GPmIWpBCVKxRVfw54qpj8GuvCTMoTgj83lBW7I\nylVYqwn2rZBxXoM0bn+4+5t8L/76LybyKDYHe+IEi0Nqo8Fv8MA7raz7MTL8\noCG9pNzkQZ7FQdg7CPO/Ib9d26i1b7O/k9b4619RvLqcOUwZ+H2cjxKZQ8G7\nj4KvmisUFgAOU/qom8YwFvXipljgEiZSIoSPSXK5YkCrIPyut+gu8jXyIxUv\nb4ZkwFnGQZYblA1ZvfjpaRMtH9LSyHFpkTVwEsBi8NtjGwdnfM71bW0YsTTn\n4DoOlhKTg8ShG5diGjumT3b1iMSugvWl6mLtUUCvn3ABJTgoCbSRhkgrJwUW\nnnw5\r\n=SboX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/shape":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.1e7cb6198.0_1594332770077_0.044444692650716044","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/card","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aed549bee47a0292506f195cb5617e42c018608","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.843f636c0.0.tgz","fileCount":19,"integrity":"sha512-nRBPbpsvD5cst1HOlnGtbiDIC/MKAfZf6H7xiUstbjkREuDx892UtrxC3XUlmKGWp0cNleBqL8VtzG8dbiCBwA==","signatures":[{"sig":"MEQCIGnBtQ72ULo3vGUlEV42QVQi2sbUIpp/KKLHqxJN02l3AiBNWuIH91cdnpkp74BUpte4Iaw4D4pwNSqys0Ljnosc9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKivCRA9TVsSAnZWagAAmIIQAI1ebhFQyyJr4oB0mLPL\nLd+hndTwf02hAkHbNO6flgt2rJcMG8ORpO8VlCwGvYzz8/MnFQDdcu7/zRj5\nwX5vEfVk4ESdt6pAV/aWrX6uRA/HLeAOS/OIg1n/3FN1yTfRFp/Vl79WIZYK\nrVEX9PcXf4AX+uiPHildIvz39l7I27i0zeQqrWXyh3u4ElL8+pD7GNXuSvTb\nTVDT8PdQBpFGsRgsgcgsj48ZCW2ecBCUtMVbevzG4wfru+FIoa8KNztym05x\nM7IMhh1fu2a7ITW15A3WC5ERjxgb6CJiDFb42HegqushDc2+kCUhbjYIVNzi\nA+OsmSaFfoHTU95Pc2F0HLDBqbOXgPyytao6Dx0QqZE7lXTzAeZdmLA80v/c\nknPh24hyRyLF249oB0GdC9vAOzok/jPqu56RlFyQ8bftBV3jl9fNEhPEzVNZ\n2sUGt1UkwQfhkoE7FThmm7hYrIZZZMMxnA4BlDgiKK0POxGP63G+05XQdX7+\nzZe65uedueyePNyRU9uYHVziL4ZiYR1M/qQOZpZ7jPq89wKgBuBtrZ9J3cf8\nP7M9OMqkSuSLVwvjpdCY0oL/RfJMA0w92yU3qZ7KAmGhMAT86/xVxSI8Y0RY\nXblxdCkl6IlYPSZY6AHUN5Y8sNzm85kFDsvjRjd3Ktzm7Nz1Zri6Wwadiolh\nexB/\r\n=X9qx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.843f636c0.0","@material/shape":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.843f636c0.0_1594402990532_0.16091717050031673","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/card","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d76d88623fc5dd6a630ee606097176208b99a5b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b2edaeead.0.tgz","fileCount":19,"integrity":"sha512-SCe8tcrr7Ej4ZW6h7gDSMFlQOpTu6ogPTplsK0OH5B2PPZ0rGVn2voUc+NFeQF5uAS+XoFoVt+xbYLhMLYacPg==","signatures":[{"sig":"MEYCIQDzjsrRVPsBHcYzd/YTTOwZKWfCVnw9o0TDSnfYO4tCfgIhAL31qwSSsft7QyxNmZA1NCxQgBkCMn3j/ZTi2p7AEhCp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5sCRA9TVsSAnZWagAATJwP/joi66dxAGW97gvroJgS\n7lLT944gDnvMQYLUxhtxbr8d2XwdrDAa7nlMvUy//hMJVocdr613DDFlcrn+\nayA9FoPeg8Ijc/JeQECJQhLjxKaFWUpye44XL7w6oFi6IxB9aRZ3g1kF7qgY\n9RqqRF/FBDdznzaDRMszx9tONFcuk+VQkNF700q1d8f0g0GKHn0dqi8fkjWc\ncPNiDtYWO3FYK6hbRZFU081bSWCmT47RzAsuN127AYTwsshK+LIYtoywSMbh\n3zUGDSdtmjwrhAZ4DL5qGTSdkrDGWhAta8yGEDsMLFiqOumXIi98CfTIGsdl\n9fgOGHAgcX/NE03qTaSy4iMjEDkpYO5GgEIQqzQLcouwgc2FJ7wK2BkZANwO\nTcCOpgzF05L6Ry0SN63h0uIIOEyxkfCNG/KvZWEcBfaWtwm0Gmo6x0qYwUPt\nyU2jwNxagxtPkw5bxoKw6y0bhuDzup94ScsoKAvUQt6b1rtLMNiId/uehGD2\nJCIFxLbAAnexVFh2C+en/MGGyWQgxDol6GSYnayHmvqmAPciuhfwG+L4xyAF\nG7TfHX1ZpD5hsKV133qL7WtTZTqd3JyQICkFTKYyEr2BbkvgNolVJCOx8K3b\nay1xiMxE0iCf3NWxoS8811pntWoplM2Xp1uqzgvqhI7a6gXrmF28k1Q1Ou/K\nnyJm\r\n=MDQJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b2edaeead.0","@material/shape":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b2edaeead.0_1594404459793_0.16121840698752177","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/card","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51583f35442cd9cf84d85cce5bd901e7962202c3","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5dac1f624.0.tgz","fileCount":19,"integrity":"sha512-SNEfnd+Rr2sER0oQB9xeLSXslUMBxQffFWLdv+TNvBCeRT3b0y+9jHRfSoUq3WZsnXBfqAosxWuTObG+e1YZcw==","signatures":[{"sig":"MEUCIQCj9wfgJFecPjNud5jqV3GOwK+1iG11vsj9ZbkagUeE2AIgFHDXV6tTV76l636SKhumiQLsKisjoipwUjiS0cQDTKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0iCRA9TVsSAnZWagAA2dwP/jsvkgYCFXEI7vL8qv/J\nfgAyvqQJm+TLQwNt0bNM2i31uaWtoYfD0gXlf8yBx8HadnO4/URsRBs4TSLE\nf24C/La2z7H3wiCUTWwhb31wFYRiwH+uaO6uuCrs2QqlovzU//YNOo/Mm7GE\nc9U0vW1jmU0BklACw74VPP5MbSeuXxegZtaFiB6RMO54aoNc0UrwTxrtf2Gz\npipLicjQqO5K6lWOeM5p2juo9pzW1uKaMBkE674YE1L9clg9JMqoqINQiGam\ne5gmDKckB3llRRDTZtzi5fzZpEGOhYJ9nY569DIDaHmQq97cFzSSEMTRKu+3\nY4/K3c+n3zI+ASBl+aX86o0HUauYsTSbnib68R8xZYw+JXcqiCfa8Vpuq+qV\nw7RVTMdGG6Fx1TfuRmJiMrec866YmHE0cf0atnULvlWtQIxzgMfydATXbXTA\nSPuPIqp6lKeLEsjugXHbf0NkShEPIeCEIrfq9aX9I/CJ8he1HcKacXKOIUxy\n5PKzfZHVPHMsJska7epK4Cp2I3ecei1yFbzshGuF6k9/PEpZkKZ9L9T2xPjX\nHTImG0Dc4TscI9cQQmSHSlLOkC/g9ANhIkhj20IWt0rpszqp/K7dIbPL/pbE\n93m68NNJI0cmXQvW5/tald11DiVjKOjxmWR69u11p2NQmej/CDnptBTOzEpT\nI5WJ\r\n=z5Pe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5dac1f624.0","@material/shape":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5dac1f624.0_1594658082008_0.5616127512711044","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/card","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edc8e7660389a5494991cb1271a51f6ab1c95a70","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.4497acef8.0.tgz","fileCount":19,"integrity":"sha512-s8hsVTnEBVcDWEWg0yOFxR1FytSb7dXVC7MWz0rnqTeGJwEGurEOUlpJspTv0GrmrZB0gY7HPw5uAMs6Csjw6g==","signatures":[{"sig":"MEUCIGMAmXb+987MQ2cJQeHjfg3pyBhG4qFxMdhekf4Ig+CCAiEAtoUaRDpRU9ZeuoEIfl4eITpn6DiBaG0+2iFMJCXZXcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb83CRA9TVsSAnZWagAAa+gP/1K8dM/vKI4228z37vw2\nM7N51FUD+OHDNf8+wgisfFB+2mgjtZUY3k7vssdpPHu0awyIUqCJmH4zBlKC\nCUDZBqecZvgn9UYzPQs2tKUGsdRIIZfw6CsE30V1bTxip+9oX8/+ddQC7bRn\nJOuqlxZarhW7bHW5VaYxSH0ti8+1Y6E9KzM+ygnUlmjoKsjmCC431y9GQR2Y\npX/XaRJ+QK27Ca30JNSTQ0z3ROS9Iuom5VraqhkjtgfZVIFl8aX882MKfRzF\nGhfa//z+YavmDRavtLqeXJjD1XB24GduVajPOKlOs+X9spJnr25wkfjj3WtN\nB6yV16Jvd+AMvNlA6ygWhHCAlx0aujBh9Znkda6CkXiTgCkpl9xh00dCV+7a\nWDvzSt4Ng7hORR7ZaIX39C9ZtgulLZSziBttgTaxlH4LPFOqrhWo+RA5QtHx\nrbVgVA59ntLKUnwG3aytoWyMt/M0ulo7RdUteFCBEOF1fqWHfX1E/RS2XzgN\n7pXQODcWtKsZAUWgV9GVE5FGvkhDP7iAX0Og8X5P0iPMkcPIr9rivsGBOkh8\nBGG/y4qqw/SoaJ6BBJJm+GSWRH3mwmAkfQxSyxLwcyzmdDfLFfgIvUDS/blU\nlxGz3EIjrmj4ULEEGcmZ5eSyGPPTERN3DSszKpiMXAweEOLgCYQ1LVfhEvsb\nfppo\r\n=MroO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.4497acef8.0","@material/shape":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.4497acef8.0_1594736439478_0.7508019501546812","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/card","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d582546fe2354ac803b6adb00d8660c5f4aca6b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e6e23019d.0.tgz","fileCount":19,"integrity":"sha512-hl2ZHftBy/WKnsH5DpXyD/R+QkGpIygj9g1JNkADcMwPy4QXKhC8Ho5bzZcndYd2ZMVA6g+JCNzPGAPVCYHL2Q==","signatures":[{"sig":"MEUCIHYaXwaMraJon5lNechschyIRtLiWg7+Ql7J/KoDaCheAiEAo4664rxVRCgVoinvcyPu1bVHw1/jXs3rlMex1oKQWdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhFRCRA9TVsSAnZWagAAfcoP/3CnOXYGraGpMODgjt4a\nTJM6HNr2eKFXDRKH7F8C5VaCAMank36I0p781uoZ4YG8pVXRn+PoTrJk93Ix\n5JdE0vUhL7VdKUfVhVbSCB9JeBHSICT/fHydGBKO94haRBlJlKKKr1Pm9V+h\neV5ifSGEL2+94bvaGtl5ZA9shmq8tv85MX8auY0NuIDJUaA69mOmCQ/PUATB\noHZ0YgfjA+wdUbYuS4bfApSp15yE6Mp0qVfO+eXCX9NNrBOt6Ty5IQLw3E7C\nJ7ZbF4JMCELWFuQD+y3UtOOKt9ROt2jK4qCDg0yfyGjQmLGKJTaKa0vS+9g2\nRx+fgzljU2b4kq9mvc88A/pSn6AuQ39PxfkxdZ4xkvPpotuku6B4lqfIToS8\nXtOr81Gwaaq3EpQkumWGJ8VhW6cZWKOqJAAXmNouQwRgMCXOjOj+uawjvWBZ\n5K8wRdKok0pBN6d8QQCbbz5GyQgamOxiTmcKQfzbi0ViVvLDkkSUTYqiTYwH\nd6M/sTb/Cb4J+DAZX3m14KyrmPATiOl5unnrFzULq/sM00RSHTImnMX/UyaJ\na6nKMsaXPI3l5OcYB4sH5pcDNs1cySmhJ31XkacKmVa0Qu1vDWv3Hw1g8r/q\nKf3M9Efvy4tI6J7yWbLek1uYZmvLZr65aBKsGeq3mQKN2/zesQfhkSFZolBu\nrF9X\r\n=B0lp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e6e23019d.0","@material/shape":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e6e23019d.0_1594757457398_0.9830758650934985","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/card","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a71813e07032a39028f0be3b113fd09a86ad75b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d548d7a92.0.tgz","fileCount":19,"integrity":"sha512-vTBMM8O5IDPnPJDl9OH+5bFWJlqLc4FVRNa3VW/oOJfL2W0NBOnUL0UeUlaCf5VhKNNYyILOPdspNKDV9tbYvw==","signatures":[{"sig":"MEUCIQCf5gIR8GI404ARMu56y9LMMxJwl/Tu4zBXuj7BzQkOqQIgM3f3DLTmkLkEZvUiCLCClzFpX8fI9MBC7A8rpgutJGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/0CRA9TVsSAnZWagAAy30QAIxQAlzcrL3/krZfJ3pK\n3l4GqPNaIKP+3ODOV6mOQtr2TFtMwJg5mloUYhOqvp9MMUDfl+K4/YM1sNBT\nXilVP7vUMH0cM5VU+mT1h9+aL1NQ4VDKfqAUlUA/wKkmOn4d7k0FwtmBvTsO\nnSWFh+Nw0NZF6gWe9WuCA0CIEH+geAG5oVs6lu6zCFIlHFEsIZo/J2k3Xg/Z\n7siODVBAWcfh93VUMx1ZUuk/4SFJD9iq1bGJkkDphzLZb0rdZx0upbsj30cp\nX93RcOCBjWkApVOqhy4oeI5ryen3UxLs7XHENVE21WvAdvNiz3OzNM9NqGx/\nUQpxkl376WLAFSXCjAdQHJbF8GY01JiQIanBwetmR5n+QY3C1y00RxTBP47M\nqemyCosX3obUpW9CutD/4QgjEnjk2yiOb0sFwSnimFxgZ+ED60SqJjbbQiqO\notvwOmki6kPO0IQi3heZh8DotQw9GPLBM8oqBRY+IICN4+6gz8KtkG2UFkIt\nR6LoiixPzMF88+g0lV0YLQXfXRjy5z3lGH4TnSqkKGefXIqAs1qt0+xXep03\nzIu9U+Cp6hWcV7u/y0lIlukstrgUhx9vdTHcbOmYeByt+IWkiq3CFED5RlmJ\n6kvbgM1KWc6rUytj2iok43jkkUQhPsee56dBIHM/xWDmrBaUzjfPkEyPh/6M\nQE7j\r\n=+KYw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d548d7a92.0","@material/shape":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d548d7a92.0_1594761203971_0.8732496346622198","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/card","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c1e3d5624ee5fec02cf753a185cf0487750d3dc","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.58ce529cc.0.tgz","fileCount":19,"integrity":"sha512-AJgX3yVLUrQwq7ZN1AJNOemlK6YBLC4KLRTJ42VeG6kzB6MMlJK4o6H49K6ArtC1Acbqymd8CQTd023JobS9Hg==","signatures":[{"sig":"MEQCIEBAJN3A4QZVarDxfLSaffypsA+kOO/5A/J+q9J4J+TDAiAKZaEjFQvmjZMANqkTLuH85SruCQSMPfQRw19YzoYaUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBxCRA9TVsSAnZWagAAYVEP/RrwbwJ1Od3O32SGu1GW\nekwLL5tDyIpuBMjH1BU0EhPwncfP/H1SR88uqsHrEUMLc/s+KiaQjk9p0Lha\nAph8Aa0C1oERcjwNEMlIlIPAUMk1qxbeFB3Q1Mx3X4IIB2ppUt+16fNb8OGB\nw4ZdItVEYA4dmACRPbLzpQAEdh+fGwyGB4EOIVBM3Nml31z/Yg5I7l/VvClF\nDCDD/ohwsXA9K0ujl+02NGAZ2QaEXg6HHrVaZg8yYG+PzivO7f4cReyEQS/h\n/nqln2lhDuBuUeYrsjcse/tEceSyPScZ/u9l6/RVGeMZtHozlfl+PGEyRTlo\nmbbt9FCVUjtvfTSZgjbssdi2v3u7hqvmO3dRtDswwQn+F2EerOs20gl1T37i\nX6efAzutwRPXRUA/Btai6V8FbGClLQEay9puERV+f0Pu/nbVR97yUoASM7lr\nl0szqYAkQzV4bE17jiwGgYUM4xkByiHfAs60L0ukoh8m7ndMn7uMq6qPwAxT\ngi1GysgZ24lhoIG14IydFXXlbbo9o/Cn3TwrZTGXxnS0f1Kd6x6KWLpKqgFN\nvHFqP09+McPLBIgI+IAsyA3vdzkwwJsTvTEsBYHM7XtjkikfH//oNe0sE+nx\nzG2g7ktIoGzJpI3NzIVVrszjT78n7/J1Huc7qhvLtxrVZe6+NzRWlrYmQ8Lo\nHZg2\r\n=tgxJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.58ce529cc.0","@material/shape":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.58ce529cc.0_1594761328712_0.9586881078727487","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/card","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bdd31e37ac2de388ced7b5134fde1b1448e8bce","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a0f1202dc.0.tgz","fileCount":19,"integrity":"sha512-ZSYYkV4d0TJvQsmpS+Yl0X3asWZKRkfT6liIRqcvcJP8XIqiqtrz/ZPkLrUeZz+MCYj4q56OcEy2maQHmPsVDw==","signatures":[{"sig":"MEQCIC4NPRv12u0sIR44ohKS7Vk/mIJTGKqsyXjOxM60VVE7AiB8TkHlufm5pWSFkbBpOYLcaRAtfQOOsDZAAEFoJnDQ/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiT8CRA9TVsSAnZWagAA+lIP+QEkdqULEXoFzIdiQera\n3dXr0JI8p3emI5X4vYwA75ZHHd3uIPpoJR0fYtt5KX+8QeMoKXdGGEuNen9/\nJ9QvjQ2MbK0bFdR5YBBhnWOZevsarDUU3xTArvyU1QToE9hIWdLPOTgvX67Q\nF+ODmXnewTax524YY/z+p0YKYAchX/5SVm8AhVM0GIXnLfG43EAKvvs0uGgH\ny+u5OqcugyhN+/kcOCozd3suZUWFGfP8BiIZB8UZUjF7FM5/8ARdRwXeo/Jz\nFRKvD3nEz0aSTLCFI1tZ4UykhfAmWkMcB0h9Us1FdzySaCKdNMARhKif2T1q\nTRNcz35spIR0W+WobjFBOksfZjhNt7mBJvEFsoAbkU2OQcnoFbyEwakwklSe\nu3FtF40XO6zdYb0iSKmx13jK8DAul51rI54C8tI1cxZI0zlv1S46RBMLNRnz\nst5BMgnRA9QG68J9SlTHUQTHm6BI3l+Fh6j22npc2y9sJ6SdM2F0USEHdAQ7\ntxbyLC82nA0dxVDciJFd/hiAcBIYUB62MZalAQ4e03o2w41Pfq7t4Uk2EA1L\npxU+Ur0hRqGQcO/Rhju9JCIO1g3eHduCkWcvSeEmkcvhvPWCP4ls8LfUf9QV\nAC3JUP5ixZV7oHDu9kn+wZ/r1yBuL4ryMd/gMnQBieHJPxSGNTq+sCR7OM/D\n4OlS\r\n=d32C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/shape":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a0f1202dc.0_1594762492112_0.9177657325936859","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/card","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97465e18844d28a02ec917a3ac9e25d1859c951d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.ad4df58c1.0.tgz","fileCount":19,"integrity":"sha512-HBA9Jlw+ZxAiFehtibioyKXm5VhQ7Rlzxks3vjsM4NW+gdi8D0NrKqiA53sCG0jSIlpzq7xerD2BbcoCe/e+lA==","signatures":[{"sig":"MEQCICeFZW/BKtxNYLh3B6sOm4TdVRWSj4S+mTmI68mL8ewgAiAv0LFFG6lXFlZNK7YzWpE7KeaSHT5DqIn4qlV1aqRzvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklMCRA9TVsSAnZWagAAxdMP/jUpW1YfQ06vxOwhL4BX\nH3Qi4TaekzBqqU53+6y/r2/HUf5r4fnBoKu6cgptMWn7j7r9l73C/dB+sxNq\n0TEpKspCDJ5TWVldinyViBCfAvVX+1rHtFz7Gls9LizKLVfcY7DrSZBLKsmD\nqmAS86B5/I3w+b/nSIOcfKHRjDf5yxy84PuRbH6in+SmvkknG9AQmHYt05HQ\ndxgS8PC4p65Q5XjW+8yH0FZt71eSXe4Hc5NuZq+Y+3pKRt09TeKZ/JBXWMXZ\nu6hzbM4F4OJ3ZQo0qZpyO6J8/j4mBx+2PbevWaEfLGa2fkKbtjARdVvNYtHc\nuAeKsrJWQQO0tOQy6rVM0bXx6x/RrveGfGlczePEsYJeipW/tpyB0G68N1Dh\nSkNcVK49TvOPIZ0A7g1n7vIrTQroX3+ExM/aK+OdeiQz5piOIGxDUUXV5f8r\nA8YVeyGIyqcfko1SOfPrA0ZL6PaT3aX8Evc2rK/JaADgWANwZ3+ImsLJlggX\nuSThbomCd9RtMEmhN1EufBEKTBUd9xu+OzmxTJSxxlbL2YgepY5E9wzqwNIS\nfP/E/Gc1MkHGNZQegJ6py1GrimmnitjKtVPLowgc4h+Bp0m2KyZSBee0YqPq\nrqmilXx79xSzMa6UIOrC41LgpZsfJElSziRG0VwBB6jhkcSc/tcY0Sp1i/ur\nGjyY\r\n=tWjV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/shape":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.ad4df58c1.0_1594771788020_0.20217601813551456","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/card","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f9884a0e04f066f3f7a4d423aa263e1955e99c9","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.01db89053.0.tgz","fileCount":19,"integrity":"sha512-uHiQOp77tzXa8E/w8GmC5VBl8Jej/oCiAO0q7jKU9zTS/7VCWWVcwSUUv1iTay1o0O2Kp72kg60Z2FmCda5LVg==","signatures":[{"sig":"MEUCIDtnpqvXonksHUgTEWp+QL5AXnhbqByXHEt15Zj5eYZzAiEApubhXVfnHPo3Mz7piMvlHfHa2UtYnIQgxre4A5uqFJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEILdCRA9TVsSAnZWagAASjUQAKJMH2UVYSo4HxZrk/Lq\nlp3KECdeBkCqNs7gwQVIy84tw6tQH/HfxxGLesTniu7Ffp3Mh6h7dtkAxOyJ\nwUuZlkjVPU4ynhxrjU7Dd4vQc9zRsv9VvWydfzyPxfztZgWtysWOa5URrUuy\nFYqvEOWVId+RC2Mhw1j5EWstsnLEJb3gK4/XtSXWx1mAmwPzrwUNx2ItYtFO\n46lBIFC39aIfb7bzGtYet4ScCPCzRGJo1f5xmf2jOJ2cze9/p99W4prRzoet\nkvqiYMWFYAV9Vv3rv41VIcdhrP7cpAV7kiNZ1ofTnuLERT2LXV289plyHgUa\nBzhM6sH8mnbsNGzi3kVnAAKxoBW5Fd1XM10KRMiKZhkVM3nu3oSNXm+yXFVK\nPilGWwRB8MpHK0gdPdfAV5HRD34GQgu9BFXYZg1UVq4Nh6STHCpFqvwqwClI\nMAmLoM2PMasFtzjbPl57/ld+ez7Q5MOqPevmD50+BNCfsnrEqqM5wqhqAFA8\n2ndwcIyX5FTd1YKBeJfC8nZFZsF+2dEZJxQ+UFVQsuIKAVpXwAm60+ce9/hx\nFirWpWbfdtSkG0zCJgV9dtvUITdRQEk60TuGsz1zDZsNao2PLbTvplJiYEYt\nByO4iQaSJiE8suuBLGDqMODZaMQLk0NUG6cTxVfgqnLOUCbsf6AFD6c0Dqdj\nW0nx\r\n=TKmM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.01db89053.0","@material/shape":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.01db89053.0_1594917597223_0.4666125663659719","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/card","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09a62ea83fc744bc3739457e4f81d59354065376","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":19,"integrity":"sha512-PvkdBgTuA39P1hvYMO2DDVEbDAUSA+QTVz4PtSpDvXgUk4HLkx18f4S1meXIOUIZeV5HJPbMMYcoSxPTpmXWWA==","signatures":[{"sig":"MEUCIB1zUh0MFDr2bCT4yZ4b49nJL/9ZpwdmAo/lh/lxtokpAiEA73A1Oguc1iRuBKM0/HbCw23vqiCpoqFLO8ObyN3xQwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe58CRA9TVsSAnZWagAA62YP/2JV8Y2jrs9q16sK86SB\nb7BjkNj3oQJWJnZwPQpXxaC/VJskaitw/AZgwzzPy+Et/UV7gbk+XBiy1wff\nV5gYeBMJYNspWZ2TuMPAO8VTrHcrbR+eEbd+7YQfKtNiTIR4lclHCmybrhIP\nzZK1yU2jjv6N/I7IhhP5TPwzBnA6JFmqDpwF/Ne4Weng5KpP06Zdw07UtwgN\nkrK3JYd1UZ9wFF/uQsTHKClTd3yDJAAq0ImnTO+xtonlxvP9P3pmT340x+I6\n/AJBE9Zyf6qytsNE9NRq5uT9P8URNmht9PR74hfzqeDT38feqfja017DF0MM\nI4jLg1eVwVuRz58UV80ZNpv2MVmbnGrdQkPZAhM3MNuwYNHIqT/hPxuY2WVh\nkmd4cb5d0aij9YX6BDxC7ZsihGodfwjJQG6qA9ICmRjrpT/8VnfIJeF4hYhi\nfuV6lP8D7t1IKoUyCmJhY+F0+nvjtrA2F2OJw99Cq/RwYMQCT5KWNNZpqglV\nzCOM28BeWm1ApDvuT4hKdUutN/0qzQ49QAIaUycpZ4RwouGqMUOmUD9u3jK8\nOVHiLUjf/GMXVbNkfJUoHIXkqhx7S66gjTzqUuQaWQj9aVDKEPx9LvOrRxKl\nT2KMdGNVB2U8ucjRQtdASoDQsOyEUNpYTrM9uL14sRMQp9NNgR/thpHZo1Ra\n8wE8\r\n=n/Nx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/shape":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fb5a4cdeb.0_1595272827837_0.4482791824171206","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/card","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"458e5738d8d184f85b29b7a2422b3d2f52d13ea5","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.8df0f517c.0.tgz","fileCount":19,"integrity":"sha512-jUMsPRBsNgr4ap42fqqeLIEgqLaPSulYzxK4i0VWfpRNfog2McIOusSbucsYmZdjGxfCk+homaxZBYnIzKDIqw==","signatures":[{"sig":"MEUCIDd42SmEDAhICkoxtFhLckgzeXz7IZM3hpdAOc9U2R+HAiEAvVZ4u+r4Gz8oJSHERy42wAZ8CGRU1b9Hgp1HCWx3bp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8RCRA9TVsSAnZWagAAwAcQAISXh4h8HhpMLfPZZP0g\nELQVzZcKWBAEbAfUuHu0xJj6tLpSq7GWzTn7TdanFDTXEHaupzHaf9xkX/Rb\n66EfZeiGP0BqaNPvITdNBynoYY1yFGkiB6iwC/6nqICLKxne7Wj+gVkKOAT3\nkSnrpI+OLxbKM7uZhliZfYO9iXqT1meDm9FabL5GbAKBrecegiTRwaf46XiW\nmy4k6PUuQjwYDhbbfTyRZbcoVdaZC2T6hal6HeaALKXbx1KSNpHN6Rbf/rrq\nRzmkuIb7AklcDu8KLOB/bTtNFN86IvUDktmnaoQtUx7a2AQJuhrwErGS6y81\nkzfsohYqRyTe12qmi8Ag7hkxO35pKNhiAlRktqU9nMRih2X9Xx3qNc1LYsal\npM16bL+AjvRnGUzB7aE9mbneRk8Fq6xaJ3TGAomm9kpc+cFDRJVO6Txr0cNI\n8M7sAjgaDB4hLrNoejRltplen2M3B/VQKh46hNCrivh7gyruH4EvWxlUWL4K\newXrQwYLUDbZnTbCtZt/xaSiRpL0yR+2Ap+5lNgc/nMPIffoeMXNkAjqW0BY\nX9MUAwiWBAY7iAPIeuJP9C4dKBUiL+NdzFuD5JFxSBMc+0LomynSQNpg2r/m\nUDigZDBrqCjnHigCgqQ9uKbapHSpGwhfZq0yQbgLw71IMN4MknrDUrrN2Ls+\ni1Nc\r\n=DHfd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.8df0f517c.0","@material/shape":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.8df0f517c.0_1595289361233_0.7131789163212883","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/card","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f29f36649fdfbdbac0e2c8c4b7792cccbe1a6ffb","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":19,"integrity":"sha512-uw0RHcEvAYTgZ2FnvKRAlk2K35ECSmI37LDXIuqISvUkldeCpUzsdkmHWF9crVVEiU0u26ix8PzV7DKrpF/Ghg==","signatures":[{"sig":"MEUCIQDTmd81OgPXEWWBwPcITcf+LTEQLB9GrjeJtHRjL0mt7AIgcjgipSbPOhewlwJvTz7GUuGGMCt5RLtXE4G8m+dQeu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvbCRA9TVsSAnZWagAAmK4P/RMCkPhI36B+PIfDr/u7\nAixwQHtTlKnnUVlT5F6HczeHdSW+nYwYOriH2QWkU8JOlgrhGZXHq28ihpBn\nMpF2eNg2To/UpI+66PAJcRV9KdBWYX5rdio/HCskxigTyclpyX0tD+cGoSTi\nV1XP5qEhBWc7ybpzzdzHz88Pb6j4GVsZEYiHt27cZ1XDnlql2D7le+PjUNGa\nwHRc08wxJTP4YyOaoEJXMxrSVuLxi/Ybp40SQPEhPnYrgShffEqx/YYE3DQ+\nfaFGbdWSmAjHvzhHCOxguYsIDwCCfrIP8qpY2KEIO4pBegFJs2ZSXMw1KzdD\nZG7kE8DYuXwjA9X+Fj7iqcDxL57yAKFrFALOeNSqBP8ghklXD/ttSUHnSOrj\nk2X7hKT4znMlrs75kvrWdxJnSAbbpuz+TwKstgkpucEPxiGPNxI9BG01J5fC\nyF8dDGSVmDcHgUqfaforXZqXvRe7TO5q7nLKIy9TxAAYD7PB7uV4vbF/Clpi\nwBTjm++dFCyR5IzN4tknlYEPpMdPLpnArAD42QYSvpY5ngVmFj/M6dhtJ15m\nUYYrN/iOKTsgVFUVvsqYv0K+VrKblAE9tnpbaKf5fFqebn3NUZC5/oyniHbg\nyb8YfyWWGy/x8chb5dkM8sntx1K5qlZEQjhy4aZGkZfDqJIrLH9EqbdwZ5wd\nmlU7\r\n=yNsx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/shape":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.abcdbcfeb.0_1595292634750_0.9786650647188422","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/card","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f705f7b2ca01c373e688c762658ef10105d5722a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.7bd5075de.0.tgz","fileCount":19,"integrity":"sha512-TVTvtwiG1nJvo9B1KVKdPbujGgsW/4t9rGM8vuUcf/EbsygHH9ZZKhxFoM0MfCf1/gehM1e4L53riD+CxFETFA==","signatures":[{"sig":"MEYCIQD9MW09hjHsYPVqiFIwwILEHwE0tyjso7t5zHTC6csDhAIhAKIvJZuFk3EIVKkSArf1gNMtP7c4NnnjervvzWueWk83","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhJCRA9TVsSAnZWagAAEmEP/RQ6Ck6dfc07qzZdwwR/\n89YnFKiryxLj8q4eG30wa9IjXg5Ptbe9alb4Q2ZLZLPz7b0qXVvz6Nkn/JHf\ni5QnjCQoHBL8JNUbA3ni6JLVgXewiXl85jhUN6HDml2C9a/av7muhFVsEDsM\njx+4TuQZOCgvGyUvdeLNUL4E0LMLjyYruHeXRxK/r3w9OZEmvBvCyAYWbmuv\nwyLPnrjHHySjABGwdnP+e7YJFTsMjqbUj0OMYIigraQ73xSFiQg3upT8oN6r\n0VATejvHVhFMYDHQVo4t+3PnhNnLBWqi9HoZm/MjLXlS++EsrnZPKamS73Qg\nGfPy1BN7Nzngv+nbFa1gZJowkwwa/jGEvn0e7yl6PMrFS0cePDJNzo6sVS2c\nxsIOSX6ArV4087SK+PjAXlpLItqu/ABzkcvoy2VGrs8mj1KCoF40rBgun+kE\n16f/O8P7qjrx9FDaTcs52F0BFexwc089kFSH/TZzyv1vuOGDjs1TiqLajBic\naznhyCDus8CFgetUJl39DEJcEhVPVoH4H38db8vxKiosdUnNTcD6bFNEjjOC\nSviHmqyjaM0E5lZomExevXYPvHl23g4htZHeauVMaWbhCrsi5nwuf3YzMBA8\nvuUFnZbpylQL/zC481G4CRiFcfHfw8SZaGWN4XhOdCKiQSEzOczDu7xTb5fV\nXOVf\r\n=D2be\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.7bd5075de.0","@material/shape":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.7bd5075de.0_1595357256860_0.27682079529299064","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/card","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baf32a22bf2a9352a4c5e00750093e8a9fa6fa2e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.405a29a20.0.tgz","fileCount":19,"integrity":"sha512-zqi5fCWIE1geM9RoIEEdRYEbA1dOfugm+31DEYpP/viDAzOFROOl/SyQ7CBacqRwCuQZ87oyChDlh8K7ZBQGrA==","signatures":[{"sig":"MEUCIGWQY6HkYjLjH3llgBuQj7LiVIuQGYC1KT3hrRpuufMOAiEAnCp3BLCSZ00QGdSaP5hNdMiOWabbWAkdx/x0MNRHXyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxsCRA9TVsSAnZWagAAj4sQAJyj9hQEdHM3Oupi/zvY\nGXk7mQkrU7NKQ56yMI6zk5FJpYmNXQEwy6DrjaWmDZ9Qa7G03Gd4xG2Vo/ZT\np1Dt1OM95QOmsVvhNfM2mEeay0ufCJauQtkaFrSUS+7ICSP3Qx/VwKCFQYMZ\neS9Irbi5q+tW88MePVZrKFrVkowHvDLPyFVwvDtu4igOi252Pcx5uJFhiUaw\ncXcQAoVTXFHl1bIMS3yKAaSVPgB7CvZIXRi4Rkr29PsOxZst7z+ZfWXuOwnQ\nuTbrMO/RZ95fzUKMiUP+bK7g5b1R/hcBRVNKp7sJ3iCeOcjGiSZj6wBO28ZK\nq8UhbbbIzgMUH28psZDfWl4UO3RlGoznzqiLvoNl16yeUjMhJ30cxeaMAGpk\nEBbDNkK3MMNY3Xj7AwKGRZ3PEa4Ky4cLQPRDQ7CpR34BrfjL3SCcEI7Wv8k6\nL2ftZr3RK4JMQzvfrWKH49rC/AjaEeS7J8pwJzQIPwhogrliNaqQa7RNixjO\nE3D35wlyfVew/vR4HEy4mt7Z/1818rih7GmhcCYbECAvwim8tfcsZlP5vFnU\nxXxMJKY1sU1isWzAzuH5r1SNFshp41+D/iXYsbSfDiEHhyiYfSdwp49f/buv\neGCv40fDdX3hhultyp3q5f5rAm/nZ+/vw9tym883XWwIKV/HcG/gqY6/FA8Z\nBWrk\r\n=yESW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.405a29a20.0","@material/shape":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.405a29a20.0_1595456619883_0.6061434840232862","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/card","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5766adcdb931a28c7f7826091340093352294095","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.f3693ac4c.0.tgz","fileCount":19,"integrity":"sha512-yrd4pzj1wIfSwvA+RnDBBSwLYKIWLBPPpzVZ3Qrz4QYMlmtKB7U7KSzkRCfxDe/di04d5qGQxftwqpzrKEsWDQ==","signatures":[{"sig":"MEUCIDl6mSTGNCnQZ1Qv8QCHAEH88VLetk0FEGDcC0S2k0fIAiEAsoJY8kdeLZ3TUbYaVuvXYG+I9pq/JpKIXA7iyiB0itM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7jCRA9TVsSAnZWagAA1cMQAJY26G8w6NGKZdGcHNDt\nzRZPlnwgYkHb3FcJC2zbd+m35S7/YIRzIllgz2drkrjL24BbUt/HYAbWP+FM\nTINjBTHvSAGYfw2zLolpe5oC2f8MAPMid4m5o4yUV3SAj7OECVCpXvPYR+WN\nMBMRaixoNPIvRffLeGFfY8q1bojz+NiBxJP5iKmZ4U+jW8qwKKTKWJ6gNet/\nfPSnFhG3DvXV3IHY/GuLK9orbLgCVs+zbn5a5ltCJFmVeZJrRBQkD8RX6tHk\nRXW889UiDi7xLrF1K1Oz+t4kHR2kGxEpAde1XXPVMNUQSJHf2Ql7CPKpWL1u\ncboHMcOhaBfncQrA13kYtcaR9WJLcdsv6Pl6yHxRQ6eDhAwTCnme6LU+pvcd\nvHar8GcHeUiaEcgVKZIRfLzyM+qe/axcVW7Ec/nEtyVbUEAB7TjU/kK+gd97\nUrM1w3OBlgUXHvQgBjpAl0gSPv3FYIHhK/7kbeOXRq56hRYo/rYuxMcak+W/\nOQFB3IxxWlC7BDzz2wAaiJi0Ol6nNNfbZZ3RXdjbmaUJB2Rvt0XS8Ew6RUBn\nIlX1iY1sIpH2fR5S7Z6OipqJc20mtbwfMXnfDOlspboLAcbVWtaz6ntF0Xay\nh9KaFMGrJ9MGr8T4KuSx5I2Tt2q1qhgylEYthxuY7iumOr6+uhrzPsle6Z06\nSAQ2\r\n=kHJ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/shape":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.f3693ac4c.0_1595457250562_0.4066395895610746","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/card","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e77429acfa61e89fcec1e97e1192fe6ec89445e2","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.12a109680.0.tgz","fileCount":19,"integrity":"sha512-A7i7/X1CZ9w48BcnH+6cSKocGWM/6pRqTGoWV8DCDDh73RLPt0Qexsn9sT9TSHBrWuJ07jtZgDWfXyJ/c2QAoA==","signatures":[{"sig":"MEUCIBgZc2OnNno9kRvQoUeFolJrwqTkwvS5j4G4rlcH7ab5AiEAj7Fv3CrxTojIle3fhh3sw2zk6PHFaOpPhRtMGSo+G6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXcCRA9TVsSAnZWagAAcFMP/3kKAJbwjtWBmPXj+mqD\nYlRe8uoDmBFwn/lfyhT4TjXgfAGgkUkSGsXQZPXtos5cu24SAfoH5aBEpaPN\n1hBB+09+M+3hMP7bcZp8qvL5yo/t7KkIhiBkoZVitVGuxfHRWAXLuailivVr\nk/v2IkkeLIh2e9oev/3VoHJwrxPrgyfB/K5ukbRmFmcnrfgonFLGonzg5Eif\nndjCBbTUAMp/bJjOzc8X1kyMCA4pjklWIrGAjd7m2ZNQVrToqBcGtj8BgJHm\n1l9MrJFzBjryTcjy0T5A/83sy5mfAAIdUL3RrTHIlxQ5zdA+J7DvcCz3LH5R\nnVt6wT7J59xCF0Wv8QEHcOqw8KG0fnw7jPet6PAetcwQC2kX2LL16UCtNWOm\na6oWP8ogt38kzaSfBdNzGOq/7bh+gtJnHwVQfJUupBIMpLGhGR0iHfFRqV8G\nlGxtSzkc+bTwwYsx6SUWU3avm9uJ2FON67HIVCNRt65BxSzftRSZC468gTDP\nGzKhA5LpD9Bm732VciyoOwysnUFw3vxD0/tqRIlCf9Vhm7I9dmfraJrCq+gf\nEUmn+qFr3FOD13DSiuBymlED6vy/P4y7AEqvcdHYCWQV3m1NO/zu2sAUVh6o\n3px8qCVcWrSxqcfVOuzFGw4RJcWRiuavkpidRNi2z8NzoPIpnHYJH/plhbTV\nWFt/\r\n=TMvD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.12a109680.0","@material/shape":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.12a109680.0_1595459036338_0.9972806019208742","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/card","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03501dd50acf69066bf27be8ce3868026c80f25c","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.bbd06696e.0.tgz","fileCount":19,"integrity":"sha512-0HXvFEQOBnpRYUB/FCu3xVG064Z0wLc8M1AoHxAkzxvkTzkFDaT6Uw5sBcgTAUOv0qEKh5FN2Od+9Dr7LF5ECw==","signatures":[{"sig":"MEUCIQDE2mWWTGATQmXdHtvVV0Ezw//BpCmNKfXz4tTH0SM+LAIgVl6uMmvtS98jQ8KgLLX8KtJJxCdGWUwAfd2dCYqsLn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFxCRA9TVsSAnZWagAAB+kP/2bcnwGRXeR7Xy6IDpiT\n9KRhv0pkyDte6BvHR3zOU9yA+QXU7CyfCDJphwQYm08B/EDKFNivlL0YxCLq\nKX+87wfcFFVPw+TUFuUlFlJZd163naFbXTI1pOqrotPiZlBr4NOwd1G6M0/R\nciEBO+cbfckEFCLad+QBaONE8B7RS4t0JGPoNR/RK5VL5P514LFrCFM92nSL\n4nyHWB3I3rYnoQAD1IcBhsgeuyp3Pvw+6CusGA5Aqq1Zq5VCvLSifqCzceWk\nHYNB4uIy8gPbLlRM5dh8fNphv6XE82JZF2jbsvCFlxVeGFE32at5EvMe9Fl6\numvBUFbNYF+DmCV5EtTd+Cn5MGwX+Jy+GGpxJWR0/oKpYLrRAk1fw6CfyhY/\nNvarrxdXxuPN2HdBfKukfbZexgb2glH2Dhkn5QMsu9NRJjGtuV6TD/SIb+TO\nMutocaekOrWQ1oTuTDjm1LkYgYhwJQtMSn3NBSkQB+DL2/Ha/YA/6GqPpzU1\nycPgz2Uxj5PctLgOh4agYdrzwHfBDmpk8fpKa4Q3FVimAqq5YPg9i8ta2Qvw\n8L0GmhFw1NOSIegmx2qDEWvxYEtDhhMx6lTZtXYQ4s0awn0y0NK3ZNGm0+Fj\nruXV5FDIFDNLI7okd3QLgjByTrDcBw3sBh9XZ5zq4/+fBMbiDtTDfBbmSVoH\nqBW+\r\n=Fygf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.bbd06696e.0","@material/shape":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.bbd06696e.0_1595462001140_0.7767416690763935","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/card","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cc0b89fcaef606caf44b3474e8c34578e0fd209","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.4951e7651.0.tgz","fileCount":19,"integrity":"sha512-WHrw5wk1e1SEd8WPWSvH1h7SoV2b9uFA0FG5VnpYU0MdfHyQDkFkyD6MvlZ/fiWLL6TvgrKTUCdIwLb4iQmnSQ==","signatures":[{"sig":"MEYCIQDVr8SvD/xp/d2Xe3fXdBrfRasYuR9yNs4COYES640hMwIhAJLrmNd0wZv7gwIuTyJMb4LaM3Yyvd9sBgDsOw2Lne7X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzMCRA9TVsSAnZWagAAH8IP/2qx/GzBfEotwD/NbNGd\nCPvTqgRAiUZM3TjjcFsnNq9VJGYUBJksumJGIJXD9Tx7MzjeUU8S9PzkjHVh\nOhvnA5M5BIk3UOJoiSSQPt7ulCpnBGxfH9e2AWRzoui2FnrXeul14j2UY1Ok\n+rZ/yRd+SRfI+VA+v7FTEe+hit3exvTNdsVGMkIbh4nRXgAsl55GWL0uRnaw\n3o6VfkcdG3Jgzf5XpDUxrOIPY7mb4y5WmUHJtkPKkm+y9o6I7D8G2dACkss/\nKqV35dzZm0+ZENJ6TQhWGUzqrDQ5ArGPi52lY8O1LSE1mr+2f1eYsgmcoy/W\n1qaohcSVsvUIMprzJ/WBJjrHE6sXqVtV6FiEE286FYEzUPokgqt3qQ0zQznZ\nO2UJ/BO93tN2Plph8O86NqkhaBuahTTZaMWR7Po5F+igpJbuB5eQIXKBBEah\nNK/VFPoTsOVpknRPGw2xW71KY+95e34SIJ9sVLcJYB9chh1wiY6MJ/gqYb9y\nMWNxwDB+fOhDjzSaqQqFZ3ev8X3/HW2TxUIbDjhmPC9MTxCfRjFCt9HDeGyT\ndD8J8jtpuDTlWcK0jAAtl/J9iMouJNMqtY1CnIjYyWCoN7Q74/QKH5T+Ol8o\nFaroR8rxI7cT4bUk8oQcAE/ydhALPR/iC9HSpY/GtcLUNo2WOCFUOOAowkVO\nFrfZ\r\n=jihJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.4951e7651.0","@material/shape":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.4951e7651.0_1595469004355_0.5075989117437429","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/card","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"378dbff01eb0823f09ec19e3eadacd87207f75d8","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.75deebbef.0.tgz","fileCount":19,"integrity":"sha512-FI0/4XhO5LA7RlTHVPuJIVepjZPx8W+YtlZf1C80Z+qGBdytLEKVAxfBLnjmp2OTob9bT5BPmiutghmT654t1Q==","signatures":[{"sig":"MEUCIQCbI/0rMoln2iogAuF5DRn76G5CrnaC/d0RThY3C5T74wIgfskQi/BtPK7kys5+f6xclyKGFxbGjs6ObOrxIy5LDng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc0uCRA9TVsSAnZWagAApTMP/jrPvRBhEfZAhNTtDnM5\nVI4uW8Ps2mxY1BKXU1U9Jbz77sy6cSkFa5IRtCmmXf98tr75dH4E2llkgKFI\n4mRaJlydmJzxX7rAVHZ5rxtDeUutaSqf8Cra8O7YdgF+CpvdyMJqZbdqr99Z\nSWEYDi8VzSynjq4QieZf7Ff46yZCI+k5KXvQJpFZjOEUGxKTpQvyYNdU0qmc\nUsdqK6qK72IcXTLo3zVF8wemoyVsgMpWLBGnzp/qVEkE18+onhg3KwdnUV2i\nyw6keKbygzgrTrGkEsabr5dDx7DVKkamj7J0xUf6f9mERtGMiawsvDpTZsBL\n0tf621xa7aFNKxpSLPPKmjA9Rr9k89o78/HSQdqJu2RloQNXjQARXahVcCGS\nv00gTZELNd1WqU6Pr68R0UEIDXH8/oJvVUg5JRHoCGOasChCZEuAvBFqSE8P\naOuBEwmO/TieOhtfPybpzppxdDcdJ78Qry1hJ3OlF03a3EPu9cxSVbs0LgN8\nqYXZz1JaskyU1I18lcCYOvCMarjHWNhlYMLtYaSU9C75q0Ns6lFHtHPoUEbH\n4qQhyj+2ZEHEUYGJLDmne4nWVn8f4djBkNCl18gwqBPgJt+HQmLRHSyHv6Om\ne/qZ/l37SazJRHAUqJL5PtaYWSA8tGzk4MK9EE+qr1FLb9RmCNPSude5V0bF\nhgIq\r\n=gkKx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.75deebbef.0","@material/shape":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.75deebbef.0_1595526445693_0.3668782769316028","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/card","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66568f631da66f69ad293c2f7846f5a1837a6588","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.95aff33ee.0.tgz","fileCount":19,"integrity":"sha512-0Ln98Z8y9Fb8oyeRpl0SwRmKqxu/vI2KschSt720FtXMyWzT15PIQZjtSMEvCwIblvAIgjgNw3ECffFJebQkLg==","signatures":[{"sig":"MEYCIQD9n1TlmdHuZMPxLX6Xi0p2yU2o2Zhgaj99IBtbo0dFfgIhAPLM0iANM45Z1l6+v3NG/e+B/yhWZthxkoKQxRLfJxgv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdtXCRA9TVsSAnZWagAAzqEP/1SMuoICoY4JQr31rOgy\n2+vz3c9uWmPOVQ+OiHwi7ZuFhGwo+btkS+qvKVB5n12j9LhbKjnwgvyVJ1Pa\nKVV0/YUkBjFoHuQPugQrGQApkT7TnLuPB7Tnaqe89A1O9M15fNQ7JIhREBhd\nCqefwfykwu7agR2rWOeaXI2vrw6lM7NrE+wbLw5kZP19U445VWYxgo8YnWNi\nc6OOGyOlS6Ur6Wx/6NycXTWyOA/k45+IrQwmlNJXdC2/D635AiYALHdDSZIP\niAR+7Y5vtzHRQo0vV1qj7yw2kH8Dw30oYvv19an7nrdS/u6G81m8Om7v+UEA\n+7acwgSu9xGPnMPnp3OsBUkum2xRXm+aHz6l8nDeZHUe3zJkv7il5kgO7aDz\nq1CPeNZafnRBOuDdpXhh9/Cav/PJL6Oodl7F4wX0rs4sD42fd0dts86o/rkM\nQJlKeCCS/fTjTviXPb2ayYt5A7xIa2SULdyQs9RSb5ABWhb4bxOzYwOgCeAI\n4OJF64SNv5KZqYVOnfpPGOhOKODnHXy+KKAj/m7QkI5hMuEmrKDU67GYGVF0\nknn1xDxWfaoSnRI28+AxmnTKTV9SzZ0M7z7iEN7HgPNp6eFT6phXZGqs6qRb\nmGgoze9FqVb4vCqYmaj86hOHybgarpiiFZ/ZLZ77WDQxPub7kAempmzGAgPx\nfHcF\r\n=YDA1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.95aff33ee.0","@material/shape":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.95aff33ee.0_1595530071354_0.005008988821402216","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/card","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"765fb7275138b6b1e58ce215e1412c52804581e0","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.9d9f47473.0.tgz","fileCount":19,"integrity":"sha512-LJTjM3llz/tKws49NXFgpF3JReEkryLoNporxWdmaUY1325FtvY7BfKcR78fEETC9I/4gpkGB1fCW3i0G9X3kg==","signatures":[{"sig":"MEUCIBRPaplV0uHhRtHVeagEwy4bAqGTkIXTAzDokBGPS19TAiEArjLNMqIMoJ0Uqxzbq+8KogLg1+gY9A8du66VUMBKFlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewRCRA9TVsSAnZWagAAm54P/1kFc6OmjP/cDZkwtQfJ\nhFJez/uCACJ3nkaHNRVOiQVcye2+NuI0jtefgwJXSxkQ6h+ONzvKyl+T/lh7\njN9aA2LXeDO0X28s+p09g8Q7xdWt/unU+cZFkDnS0EyvGoskLWRv82i4ocYD\nM0Kzir+tZg7J3CI3+YX2cVFQ8jOb/j4AEZ6GoRKHxOBE+b58+qmPkUMdMPjg\n8BgjZCOw+yml7s2nijud3HyZi2WevNbkB2Z4UQ5+IvVocoEi9yhG1yicFmrv\niSH//IA010dMFS/V+JC0ovitMpTSSMzYiNX5LyqRN7mEgABnNrsNdxkCCWe+\nhvr5/ogVkX/lpBv0hJoCgEuEowAdqRvbk4i48mbScoBzzTRantvzX3KVTfRG\ngriYPjKkJ41rFcN4ku9/ejqkv9h7RYhHIpOGFJW28FY4UJPl/AdvY9k5qVSs\njvChfUmzeYkMg2aA7cC6Kpg7gw3thtQ9UhldMirkNN5c9INXcYnBULrR5A41\n42cYvfL3vl16P1p7XES5yXkLxgQ4+thXw87V5008hDa7TQIOGqXZ1NeluSmd\nn0ocWxQK+iYNwHb/6AnL2SuHvICDR8X+EgbymzNKVRgqLn3Pdo/NTdCYeGwG\ntz849OTRZNh2721ASOIn+JX0HkY17I3eFYwWpfOZL+U5xVLD8rxwmkb2nxx0\nwXVr\r\n=Si+c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9d9f47473.0","@material/shape":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.9d9f47473.0_1595534352999_0.9472674111716999","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/card","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bbe0fbc5102ff2580fb99437220b4e7e289f170","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.00dfbf6be.0.tgz","fileCount":19,"integrity":"sha512-boCi2P03F1G+r/qH5gVcmAfJZavNRaQxiFyf3MEGsiKTOtTexYlxM/X/faMCroB57VDT7NlIKB2PDcJlPaFilA==","signatures":[{"sig":"MEUCIQDWu23rRpqMEZ689jT0BJubl4WRXXxOkCGeUclhQpQYmwIgTekce8iKlUbgHwESdYnlYolFrnSg84xAhlVZ83bFBDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfpTCRA9TVsSAnZWagAADaQP/0HO1TvF82XYi5G/527D\nKSuJp/zyye7fU/z7v57x2SA1CbchHnDJjXthhQxypx275P0UmmYOh4K8+DvG\novClp1dUg+JHCLn9KTNTjtWDESBBJ1f/8bATGTHYbcLR69faIHmzCBDweDas\nw0alCU5uP6nnEHPui/IIIll9LJIcS9yBMHaXE3s8VVVxun18OiMk8qUYM3Q8\nX3L02tJeIpsdJxCdZqOx2jCfIFuC2tvMrzE7qWICqYgy3bysbc/1scMtT7qv\nGSmDv44O29wj1s1DIozBda70ziNlh5sZQlAC2Cd4ImLH1H9bc0O9+xl4uie+\nnH88GB4pD7tqXh2qGfjjvdsJBPW2CiOh/8ljotJqnMLHwwl/Y+kz+QkuOWaa\nASChcEiieHUtrTWeEmfRt2eLCCDbU1yKQWMyNS6rNWcr1tE3HTFfmyF2Hi/d\n1kebllpLWhYogmawAAoCyRGwBb26trcXrhE+DnQ8yiTP5C/k3+pzfcw+opLF\nsZJf0J3xsjrl+12uatZksPmMrKXLe1T5HhuFDpdnm1BLUSYRrZ46Z2CO9zN/\nrOOtd7DyDbm2OjAcrINoGyM4w0IQXpfNeCkUKr5tCZ5GCfo+s5NuQXrdTqzw\nUr3wJTVwuIRIYDQqhDQt6lqN3z8IjLuc5SjkRSRq3M5NdKJkonzHVvM4fnk1\nGYRU\r\n=xMtT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/shape":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.00dfbf6be.0_1595538003272_0.2017754037372863","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/card","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e90225fbfb04af917531b65b6f9205c3044c4c2","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b87e522d2.0.tgz","fileCount":19,"integrity":"sha512-hYDUUvNNDRBQAa8/FJZlFRRiDw3EswGu48b72/TPvCbBPJf98jl41avDeVFXMS/xTE6Sau5ee2N9ktMlaI5c+g==","signatures":[{"sig":"MEUCICZM5gGlBlwTEzkfe3T1tYfJahFnebj9BrV6Ri6h9dyOAiEApgevzbjixl58lsPHaglTzX5gN2m07Q8cDvehpCQMuSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/1CRA9TVsSAnZWagAANOAP/3/aqusnyVfT+fk4pbrJ\nVi8pKhzf8XAaw+9zK/clq3v7MuhdkdN59F0gI462X1qV6qHccb1XhumteVb/\nrLdwi5/V1UkfEKuPZDw2szS79oROGLf7s7RdLMH2T/4uerNYpBdfvsZCCnsh\nCVHnC3tJi25nAtFPTkmnwC/PIShpz9vlcl92iToPnLrNjQCnRRsYrQasOYse\nAnTPioSJFbkyab+YBVuPEm2PfSeVkB5CS/NltFv3MVV2Dz6eou624PjHUrBi\nsO0FVa9yK5Tnu1bbVPPji48pQ9jFBcQ80Mx4hysXeha/r01JiJ0NUcjVwOvr\nJMhjcgsljebkn1XkgQ0CzFliQsJGhZGauv1hcwwU6QApAJJO9kI/uT8ZQEbb\n/Yn7VuzKnFPjyN5VLE4uzzxhMPizkWmUnpVJTG6e8CIca9HFFJo96tpScy9O\naqOEv7+oQgZS7BLYQDvZHEH0sm6rg/z9BOw88Q17n95K4TalTSLFkhd+BixR\nlyJF3HB6YPJldgw9BLImo1Fp+5SSlFQNukBQ1EaiUZVGAQRfwb0bM7Yf6VRh\nv7KHq3TRkvbW8Hv/9UmMSL5lJ18goYtr/snXFyHXa+i2rOyAGN8lrmN9nu9C\nL083rVjT1hoERqch9D5r/Wr2vABoGWPARODe9uj5g6JVZvp570j4+LVS2SM7\nL/6e\r\n=Oniv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b87e522d2.0","@material/shape":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b87e522d2.0_1595539445304_0.7768623095230189","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/card","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"262e565e63d30cfc5f13c4256533490625a2be83","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5b3e150e5.0.tgz","fileCount":19,"integrity":"sha512-eIhnOlEO/RZ0EnPaNOcesjCxd6G09FUt6fbWzJwtIHYBGgkmZjXJun8NuugpTBZBeSnhHXW6RrIr1f7VtkYjgg==","signatures":[{"sig":"MEUCIQC09C8YdNfaLH54F9/HKuhsUuyUBtJiJabodZ1DnlX6vQIgJWDjfVBkUDEyIASweTfKWK1U3II8eFvxTt6jWa4ChIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhJCRA9TVsSAnZWagAAPEkP/2fp2IgyTD585eFcd21B\noBX2POj9iD4g3czjDcliHRj5vyKfvt/xMVuJ+SLSpo1KMkdIMRU6CGRGSrND\nIpYk1y5ZILFbA87nW8R97vI1Hym3gxTMpFrM1KRqE5vf7C5MJdMjkcV/j/ma\ne0nrZyGkGOWS4/E59Xxr5jM15+HTkQcELeXV/helF4g/O0r+rCULPk76YwPB\np6GOqolKaqQLLkbyiA1YpnEersGWWRx8j+BGd83jAdzhLwp3e4mLNY8Fa8we\nstdSeAGvrLjfSNfTyyttY0t3xD5eljYaeCQx4qlNFQAdndt8odAPV3CRhNMG\nfXtrUX+vhiJhi96iEYDOF2+khP7o6eIXPu2QMANb3DkN/McSU1YPPggOjCTJ\nzLEdtjdCpdj8URrbGBQ4DoNiUHW3J6946dCPTxUZVJ6wunT7j2GIrgNTPR/P\nw1j6RqtygamiBcRb5o3Zc327jEqqdGdUh+DhhAt6pIiFof9vyOegvzP1TY5S\nDWLrFiUbt7PbQnY9IWV1xxnvw95c6zJdvuWszJrhyJ3R3sGGp7G9lQiElIqx\nJM3j39QCsvr6QXHjRwe3GWYtHzNhW0kKihEp2zDJAtsudNA1DShM2w0jAqWe\nlDI/x5uDqsKR6jrzEMt4KF54g6Aml/6OUxV4nR/7JK2uFNHEbde2KiBuEXED\nvgUu\r\n=e9cX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/shape":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5b3e150e5.0_1595553864910_0.9496303059227296","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/card","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de2aea7cfce49b2f038a74bff27403166d9199b7","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.f0ae11786.0.tgz","fileCount":19,"integrity":"sha512-40IXZ1bA0TpVyTUqW1psL4C4A5f1Qz5booLVNdHxpHRiebeFoDKCXtC5oSxrJ/+k4iRemQpgujky2hRD0/WyZA==","signatures":[{"sig":"MEQCICM3+2XlMGo/moPziXAQNNnnv5iwEm2Rz6jx1H6W27CzAiB+0ZxZPPdFU2bAIQuJwDW+imbamTv/aZCxzWXaNoHajg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzmCRA9TVsSAnZWagAA6EIP/2TGjaXZqzqXy2PifTC7\neZaFlnLs0DyKosuTsjPWPWadQGsCb4j2IvOaTjayszAlOGuFkQyRmyPm17ro\nLpG2yKcAPvGu56rAtoy7VTspTAId1QJ/RldaicJfLFuQOLL2cwEUGY8tPeGi\n+nFJBmlPgz9MorkLhTIpOi6PQ2N/V4+pTrBoMd2Z+wzug+o3Uuewzui/gt6H\nWDFa6EgsF8pGkiCu2sXxi3C+zcy1JHxMFwOw/1WUWsXb3bEc2CzaUHZflEHw\nk9X/x8uoOAKz9IngUH3KN6YhQpkkBhkE47oDxKAeikheR66xGZZbHzoVCt7i\nctDFtFqhloCPlBhvKMkqrbmsll9+seZUjCymi7kzbNMsi4l/0WiTwl1/5jnl\n+M4LHvuoaxrh6qpm1j61A9EIZMWRjNgEU1eFJase/KWEMtLRzZgT+hU13Bhg\n9stTlzV5qyG1sc+m0SIYFsUxTR/1+cuLsknmMV/UicVbC/rS+ZDt7aPRUooo\nHYXBduepC8ETlb8NdLctyJ36spdkXeagahxCHtz+43zV6pqwtt9I72pRrs9t\n3U25qdsrmBfHXkegOUDoPDIvN5HwAnOWY6hTQMdmUCMFu1CbJZzxodYwr2uW\nA/uV1NwkZo9bPaficOIVJhOu06dbOb2yzAY+i9x4ZnGurPiU4v+IH0otD+Pj\nabAU\r\n=c8Br\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f0ae11786.0","@material/shape":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.f0ae11786.0_1595555046265_0.714413540248958","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/card","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cfd8e28a54f2470db34541744d03e2f61400d00","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":19,"integrity":"sha512-1odwaIDXQacOQqn6Rl2hTBtopKK7lRteetCsRM5TeT7L77a9fEEPy2YB+gaxc5Rt3siqKl6S3JBkI+SY280+Cg==","signatures":[{"sig":"MEYCIQCWRBrtH0xGM+z6se8W2006OHwgYU1EitL8MHE7JeNR7AIhAJ48aTFwJtDdZKbiZRIH/+W6c0Y/JS7RtsulLneGgTZX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkM+CRA9TVsSAnZWagAAL1MP/3qCbZLcBruAe8coZgXV\nLIpLlQ+e8SBoJqGXViS7/IIdZSANohoM8rntlVwRqz2mZ/vMwZOH+Ns472p9\nyoA+HP1wGxvePhhORms3oLNR4AQC5EruvHP1eFFVz99sUcavQkL3XReqTAfB\nI0fpT+AJkQ97tSuvoUGS64d/odci4rhADtYBQPuGasHPvUf4A7p3kQb1K2uF\nbyB5aRLIQdEJE9Lp5vtDEs5J1ocETyVYA/5DJKRFDskVz6KRiUjMVjQWVagK\nakkzkqrREwnFdZ8MQtRXzxCwUk6FP3jNwnx3y81uMnqOt81LnvCuXKqTqjLz\nVJhpJ4rmD/Vwvy4HY4tw/HDLsPymqUXrWVNo8ZHobEn++1AWpePg90lCukxw\nV8l8nelgUbqRTTAUNKZxjQQDzJKfq9J8j0sAkZHIFO9BS4TIDQqEQDfDSQOB\nwQgbn0I8IArNbraq5Tcp4Et6tQ8YO9lcITL9SnZCpFXj4WhPef6d3LSoz20T\n24MFjzvVpBjZX/FYHLshXkj0jWuIIzNSBfKNcRBybGjNixEhm3Y2KEndxcni\nR5pgaOE9lUoaIpqFcfAdsl1X1R0QNaELqEgmwQjx5ONyEWIioq1YBQVMeE0Q\nuRKRbZ9E3W5kid0okPsMNV/Czg3R00JbuiHxt1KvoVl9tE3wZuEQJnLRZ10b\nWAr8\r\n=wGwW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/shape":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fb4ee66c0.0_1595556670144_0.16291705973412318","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/card","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e35a8adb2cfd6dcba53fe9e792a6359fddff97e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5511e0aeb.0.tgz","fileCount":19,"integrity":"sha512-iOkqDDt6gGUlaqP+5188q7ujOv0IFHvQMIOlByu+lfRLeamfz+YbC7fAJn2RIpBxX8Lp910qI7DqR73ehh7zow==","signatures":[{"sig":"MEUCIQCTrf982Tp4lMIjvCiUVec8/NfYufb8qgNJp4UllFSGqAIgDfT2QQKMpUPzvs6yVG6qHvB87+TuMIgJO3CQcL0VExg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLrCRA9TVsSAnZWagAA8TQP/0MOM7O53TAIUj6AZVfd\nIe1sQ6wNSLi1GqOFleQ+bbkbiV108MyteT6P0sGbfWFAdokVMQYNBxnjJIzc\nkKQ/mA5okJdCBLMnjI/3GrMrjtWu9weEIv+OtXq+q4W8B8twII1o41Ks9oD0\nj/5+i905tZjao/5poq8AtCHWlMH2p4FdV6d40DUlU0IfL+QGmsNGCXLb8NAT\n7Tzz/yFfuKdmt7Bt9jjIV2Tim05X/5G7CLEhWhwApM8PzH2OftAfStM7ZuXq\nH3bC5nRJRzWkbzjOvAiA7RVEHLBjSpw4f+6X/EWApYI4FwPq07UJyqx61l9v\nRMyPt1oaQvUTozhRfZr9uPkDZ9GRP655XJmkVJwVM8jz+RWVG355s+iUGXxT\nVEIK0VT+mciutxJm7SWMDbHT+e/GTfo+FIYpwKLEQxwzXnzvJuIEAxvdIp9K\nvU/Vxe/4Mn7QPhEnESWD+Pkar3rKGHhtPKBWCw33OLr8/EiJV5owpeuEJkys\nSbkuufMBbIKVHW7vbHkb4lnau80Q+1Iy3YX/tvmYpcAjp7+jdYhgCYCDMtwR\npkxjRk6FeN4oLDOE4YXcS7a8R+oIF/qK9mc7WKCQrJFagju9BNoBHZG2ET9G\nyDMn9kLNBWuDue73TOj/ADlBP1cFGrWb/hdiMtUZoo7SI61yW8AhCuNMIuVV\n0vWc\r\n=0NPc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/shape":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5511e0aeb.0_1595609835484_0.7150792678795634","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/card","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad42c3f7051fbd140b0021cf2156b6c7299690cc","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.8388a9bf6.0.tgz","fileCount":19,"integrity":"sha512-Jl1YBST2Ckddpl07Wm2ZJ0ufbShCFyRe+LLbNjBnkZ7JRhqWQQkoA+6y9V4oDQAnWztnAH/YqlMeVQNpM65HXQ==","signatures":[{"sig":"MEQCIAvsxLgWzT5rRYVmZ+5BTt6I2cdHKhANeGEQgLhNWU7GAiA3pqtH5zQixVYYB1UbRVyYDd4PWu9YZekUlDIjJL/ivw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0D6CRA9TVsSAnZWagAAtKAQAIDF+dlLdo3Px5padER3\n1ck71OY4qPOjTOXYonH2PcLRlbfXQkAryYTLFtZz1cM+r3VLy/iRtuX6g8pK\nOG1/rzj1fQMgzzks1XZCqD1iR7NIto89xHto+Bw4c+hwm4Zb6I4WAvrVh1gL\nIJfBg1jjjFOurjLSH9140e52r6j6HECFwrTR8JgBYaUvbS2RWk8CIx8plTQ3\nj25Fx9SwnbEH+xpSWghb/W+miwLQf+nAnCRJITUYUfzzm7nXEe4yvbI+sHKo\nQcUAluH27SEDgzC8SdWPOYc5wf6FV9J61XNxkulXwFezu/oqCZlzjmusgarv\nS85spsSxtxrkn+RKvDCz7QzmztdDN8A1Seocf0p+nowjguT8y0WHLQ1hm94m\nFh38ZtibfazWtI4yEWnPm+8cCbOvqev1M1UjqbKlowTt0aFJKrUIFm16/uBt\n5L40I+FFXCcNJgaJMmv8dlWM8AcT9w8XymaY2538HD0Ctme+mp5i/MNivjsz\nlmaUZ3qbm6QIrWliXd9GuSfmQRDlcMV+lbXYU0fdXlay+/J/kZ9h9qJ0m4O7\no2x3pPOmna4I644hBOCZsWF6Kw1N1mbqsYhk03U7T6nvc+2pT2WyUb3BzJzp\n66+765XQwam1QzrNeZ+vI00V3dSyc33XP0Wy8+ktGlfs11TvAJNVcQlROPTm\nmwl+\r\n=F5ws\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/shape":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.8388a9bf6.0_1595621626225_0.5160615213014521","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/card","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a7f3f7ce204d03458abb4d5e6d45cddafb620f1","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.ac405eae1.0.tgz","fileCount":19,"integrity":"sha512-WrkKwoeKMFEgkERuLT36skMKOVNVC9vJN+Yz7A/UkFpmxHoeKXIFGYTA/ylym7Gke9VmGLRwd8pQeWTo7N8BjA==","signatures":[{"sig":"MEQCICUQYYyOykQ6H3bMqcBLnwJv+jp4JjHzZXuCSykqP0EIAiASzY7lv2F4mGFWjdfw2z6Ll7mKCtuRPUTtKm1wwrOg1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2WCRA9TVsSAnZWagAAaxwP/3/5qdlSJyo7+/ZAAJRo\nUKCoglt/m5DiUYUW4eB6EP5TBcMTbAMQEve9KvTeaMt6dBpML7leYyI4jaED\nQpC4DqoHOt6ww0gey1otzvXp/iO3E1BTV5yZ/y0wwBwLU7JPimUsr681G/qm\nA3qGeAR8G4tRHBk9AgQMaTxUzjZ+uJOUDMJQr1NnG2ynyP+bmtqwRwKyyGvy\n1wyyTbgHfM72mu4hspu1V9iBCm12nbjV9utO+E3Da0TLta2pz2iI1PBvj0U1\nHdpY7APgshOEHkhIWcdG5poi0e13PVeo/z2HzBSYDhyyHnaKd5zhEAlepSCN\nstSSFjAx29bveXM99eKxSCdXDgi2I8/ThNhS1cXXl0+cLvy4cgNQr1oS5Yww\n/dEIMYArrucwgnjIH9C68Nb0mo1gOJ7bcpd5p/wwYVALABd+TirXFPqqAYgP\nDqcd8OP9xhf19r4uao9ipo1iFtMC0yQWmHB377k+VwQa8JlYO7ZV93hSO7YG\nJvJlyMyy/uHUrB8idvgQ1sfYoWTuE85HJ50uxALmmUZp6MX4uSDlXAuORNcE\nTk05+DR3jBDwwA3SpiwcmA6E5H8lZ/IAO1+8RZ7/xn2lJh92JllJ5GT2X5do\nbXxKWHHfuRdKmppw8eKMk5aU3VrSWLkvm20r1oCM1vPRfWOIjI+xqmo8f2zI\noGOq\r\n=sVcs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ac405eae1.0","@material/shape":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.ac405eae1.0_1595862421727_0.09074584631342719","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/card","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1eb882f92dc7b8ed27aa2606fcfe9b0ddfd981f","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.75553837c.0.tgz","fileCount":19,"integrity":"sha512-fve9ZBh87hxqeqwwN/GMlikRz54fTd5EZCa7MVZXL3hAYiYxC2Reo3ur50dv2mB2PYejgKeiBnV/RU5xhWdGYQ==","signatures":[{"sig":"MEUCIA4HIX0eILULRNlTKjA7d9utkhWhrB1IATrFvPVQrzfcAiEA1IgtN/EXH1GxBZl6d2i1rOvSX+RmiHnCj55NffOgb0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu75CRA9TVsSAnZWagAAcYMP/1whGDZBsDMRIpQRTAho\n2QJKA7mlMQiaI1ovg5PT4jne4GtbfOrvDLWtWbsl4cH7J0sH1sfMASfzwoSa\nrg37wZm25Xo9PEldmrW63RrSA4y/NODaKfnvLX793PkxMWkoESqtmPJUFdIF\nwFPfnxfGVRMbjZ472wsGcQmZMEcHe3adwN/7wrPpoav4PekkeOR7P5gIT+hu\npy/p2JPpRe2jehqj+oNH+aPlnOHqGlXBx6fv0rw8a+bVKvTwmEDUe5IN6NhL\nj5s55xL1iDCFtGOhzDYS/eFTx6mZujVfgQWwqbTVs5TTHmlkiJEmRNfSB9ci\nnxK8ruI/I5XJ+Bcz629upCpMu4aVRxDMpgF7HjTmqKpWhqoXpkvsaS5860U5\nZMv0q8obkThvKtnwh6Y0bo6oEx55COB5UiN68C/iChDds02oZR0nGvrgLIAu\nnLoChk4EOy11ZYNVEWEcykTkdW7NOLZs9GWuU0L8c3IaOKA9Z0y34nqkkLHl\nBHrzFLNrpa6cPvYfu8F0Be750qXp0HLQmg8CUw4l7qpso8oPTF8M/3P5LpeF\n7o2fzGHJpQmA7j8H61ECt/9oUZWxOKtv2moI9+cC+VUkKvl3xTwj2gc1zEN3\nXQyCMMYxJ0PBkZiz3u4oBVCjIOCndNf843upTilKl6YtuEYPi/HWfm26+wlQ\nl+9V\r\n=ltPl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.75553837c.0","@material/shape":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.75553837c.0_1595862776698_0.3598116244833951","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/card","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a6df21dd41aa4e597b4b382dafe8ebde4f10414","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":19,"integrity":"sha512-m3kfxV7y/F9RMwGlW4uRfci6CX3UJmF8KnWDvgnWz+CJIkqUFIA+5cdZzdl72QBAcYCKXYHHvgaPESYx76lk2w==","signatures":[{"sig":"MEUCIDf85TLzmkRBcCp6lVrHT1C9KRKMzSOlEr+qz2jVynBLAiEAhWejtgioppcxDQo6Y2/5A7fAdvrBTqNJ3h7/bALrOXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvT5CRA9TVsSAnZWagAAsZgP/jrdLYkgU6K8GZ1B9DL5\n/0JS/riNJAaPyGdXp9XdfC5lC12LwrRTzuQoOz3TRwJIZ/BI5o6NhsFfBq/F\niHhBieKGGqqhXhlqIs7I3z6MNbPH757XRdvRYqIlF0iRK13AycHR9PTlbxzW\n9k75L/TvFp0H0VTw8oB/kNVLgc8oxOOYKassZfquUoHLUudh+y6yusK+P4hF\nsvPDzoKntQvEh4OC6EnmiydbQTeIV6YW37Oae+UW71hRhcvPVrsf0uHzRrr2\neuFqMEYZYR3DkG873PQsyLgkLLWhTOrgBO++KJdxvAq+mHigfJyQ481T8L1J\nNlTwnKay8IVBBCrG2BJYydqr2oWtbPS2vokFx0d7yE+XIOhZsx3e6wmu8Q9G\nN4yLOeeMLyeD4qLjreKQEwq1v84ZpeEzSs94T3Ts1gqc1Ajw6h7UrRPCnBGR\nrT+vWwH0xOGUGaG9ApGVCZBIVAR1uucXlAMx1Qhagc+/24IEsG9iRkX+lMKJ\nJd3/+uHxWjB8X4DZLVmbF+4YVUARD1W/0SvqA1jcLIpC9TTx86gPAGfXRp+M\nFJ7/CgewbtR0wgXLXIMKTBkpwzNKDSGubaGNUEveoYTdKrjPEJtc6ce1UlSx\n1lCm2Qnc9gAY55Y1BcIspwXTfvj3OmQ12hx4w7Uvrmxu8t8l9uiGFTb34bt9\nYOR6\r\n=qlkO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/shape":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b96fbfc7a.0_1595864312824_0.1810827226780256","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/card","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbbe4eda0637d306b3b936e6b65a63e7b23d5cc4","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.61f1a8d85.0.tgz","fileCount":19,"integrity":"sha512-eT1JtiRPl1xyHNZIyDaUGmQV44zA6uGSCvu9A5S5ZYTW/xoQeBKHSYg2g1l/erLxtmgsXIqzLZjIB1uYL/zdVw==","signatures":[{"sig":"MEUCIHAgj8FjpemSRgHuUk0L29fV5LwysGilR0NZVKk/weTwAiEAoERvJNG+NY96fLMQ5OU9mJqfN4ZJHgLuqx3cGMdRAn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcVCRA9TVsSAnZWagAALBEP/35fY1WvXzoXKiqbwdBi\nbG/Kp8mOhLWPhXCjG1awUffi8/7uaC8RiOCnmlofu5s6UH9nR6KapiCmA9Ph\neo63/yiiPWpSgVjNy3fuu84id8gKsR0Eg8TM0UymwxmrmGBFqAJJfAoEZQeC\nOCXSedh0jjU13juOOU1muHFe0cX3MdVU7cR3WFm4TORteelq3werfEu/JaHA\n+3Oyea0ApITlIJox/RA1KRgRrvhMPmsOIvlJ2tF+FG0POTJNQ282Ufy4FcsJ\ngru6jjeNZ5KkHjg+0GACGQByte2IP0CV6MQ9eX0qdBvtunCR0HuPAO3CDXfu\nhRJXLjiO/lqhGhkAqY1Az80skEScNMLwoi0YYIDg1VIi0WCWDMYIjoEiAJr1\n53fVA56hOYtwnA2YeOxNr31/lS1E3DOhgDRqErWqeM1oh8ez1lM2k2kPnOMO\nyLLHbmHTSD1umUBK1jIMJqw9wYnVyCKpa3tM24HP5PXxktujqmrCTHeqQrnm\nY2ciJPk8m+UF/T11tL6qG3pLICqxsBLagnQhM+4+TFAdLVdLM4+eA3H0O9is\nQs2urzUDXsUhp3oL8QjtEucZGMwaw9cLRygnzO1giEKu0AkwT3utYKLXOikB\n0IvXxtcAykmCLKwPfbQ1XLM8RStUlpXOGLYB9NGWddYyZP6yCdflMdMBNt2q\nNdUd\r\n=3uzN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/shape":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.61f1a8d85.0_1595864853129_0.07662204343634538","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/card","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d788d61d4aa93e9312a690e08751cebac3163b1","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.81dc33377.0.tgz","fileCount":19,"integrity":"sha512-LC6eP73gvWfLnhphkxhGkCXD0X9NZrFCVOxcFLUgzM81aW8uDzQW1iSvM/P87oXAAQSD6sT12gqzkV97ISad9g==","signatures":[{"sig":"MEQCIFNVMPKhZQRiOH2UpdN+qF1LN8zN6evez4dXdgsaFBAIAiB6773zi2PqrDc5kUhV75JDUhTUPj24EttadjFPtDzCUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnuCRA9TVsSAnZWagAAhGsP/R28dotqRvCTBqSYyu5c\nlqAbIvq1TI+xgrjnLoPLFRmN3/+H+hXE8JIp/bM6KdtcmcoVEvr0E7ESQfOk\nh09Zljp+76weVrlPsd3w2nuGZ/Gtb80xBnEEo5Mv7AkaB53IsZR+JG3kg39O\nR3aC95HTTwYQyrF8J84vaRaqWeRf+7YJWbjQ8MekTbsYf/elv9nw8yOGamYr\nTiqgLZ+zW0JZ0h3ooCRZ91KJ1bcuCvlUlN8qTZTYMFG/+SNQXB6bUeEyW0Ce\nVNQLPMmiW0BcRoZ4tUQhpkujcDz8AQkLDFCRVsXT1Sl5ZGBvc+VxWLaYXtDn\ny4VmtCTcRoW/tiJqfgdCpJacPj/xOVV9LRtrkDksxG7+PQbtvPkVOdmZOYVh\n0xxxr1DohavPFX0q1RHdskGXjsuXHEU9P/HSYQJdjqXncTOfogZ6H+nA/dGP\neTRe2deU0e/UrPFAIN7gYc7WPm/p2R+/ry9yqy512eXyLoP3FJ6BA0Pc1mSM\nuDbGk3wpvBLH/59VqhuO5EBRAFGXEq012BvwGWNVL5QOOKOK96XrB72qMJwj\nou/M/8DRcZEO+K61+JYFRV+S3dW5H60sKpOEkK2hekvyXGOLNfblNCoM3HYe\nDsSLd5logf/689+BwAjSqnK+Vu76KdXGaVRFJDpzQws36O3WYXTZVRTANn1y\neh5w\r\n=A1ZX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.81dc33377.0","@material/shape":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.81dc33377.0_1595865581784_0.973224468593969","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/card","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc4970ee1cb994413a181ea70c283127877236cf","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.ffd9ede58.0.tgz","fileCount":19,"integrity":"sha512-qwTdkuiNJIKqFcItEepEDczswzSvDVTnwlfwqHohXP7X9w6pOI9MPbsapfkks/hbnpSM7u71tD5jW7mWfXtZxw==","signatures":[{"sig":"MEYCIQDYkcGB/9Mu4yoTJgLn1VEJJAP9nhdXPZ2dmVczeQQKGQIhAMvLlvIUYn4DOfPoELKEMe3Qbd3Gm98kARJKyg1abwsr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwG8CRA9TVsSAnZWagAAWhUQAIg8zfaCybxluTsSW/h/\nih0HvNzm3ilMiBtfZojw4lB1dZtQvpNZIYgtoK7jZ70NrxQZLdbOxok7wyKN\nZWdDnttAI3gJc1yhwkbX0YP3vZK9bUzVqjIapQBDu24v/tR2/wwx3JIUUWCQ\nw8zfxc7wPn4+PCZdduLQOgekTyld5+Z434BDnSKaCWYXNgVYQ4M2M2Qooo1Y\nBSfClzjYhj4jhb2ATUptSkb3Cs0QVCmt52HXbNaV5rAerFDKO1y6/VoUkmF1\nhtyEwROL8C3JBZOhz4myrCAma8v7vTR2rFpT6n67TUkNry+92J6ng5c0mMV7\nSyj6KGBGF9Megx4MUFG54hb75qSp2ddt/89KjEtRr8vAX+aT/fuTtib9z2SV\n1Ane4f3AX/i8KN8/+N2WBpTXTN+cbhSjef1wcKHXSxWa32RRhfqvZB1pb3Dz\nfU58FHv/M0hxNgTi9b9nKMdDNwFCdHx+ogVQ/1df4rkmxAYvoeMzGCdAu50E\nGEGe+L/oZE5mJnu9uJPwFgmf5sNDyo+8Nm7eF93Zzi2SPdRrokVBAH9i6EH1\n6M6lOcYjoMDOjywp0lnEBXZ3IvcCAUQro/KeqzKPQ3zvdsGwqxEnnIJZ6td5\nNtUMURNseXi6NcRNoH9CEFVyxrSC6LGBf0gN3aC6PuHxBe4tfMNhSj3Tk3OO\nC/mf\r\n=sQTX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/shape":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.ffd9ede58.0_1595867579719_0.16051394345342285","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/card","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"330c73533d7abbf8530bb76609cbd8f9e03ec2ce","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.52dc55acf.0.tgz","fileCount":19,"integrity":"sha512-yke/L8i8M8BEgtJwX+jrvhw1n7jn+LmsTJ3e1iunKADdPcYYJo6DJOLkk2DkhOzx0QJdvdRzX8evrsgZSF1g2g==","signatures":[{"sig":"MEYCIQCBrwTf1Tx9xj6U0o0zh2KqFD6T9irWiQEjp1KXhS22JgIhAP/qYOpW8wGDthVMjW1lNJvz+HQkNBjA9e0iI/iU+GO5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwosCRA9TVsSAnZWagAAuu0P/iGgYziBj843V9BIKgDA\n6j9fk4ULFTRvbbuo8PQFKQVs+cf4BG4hm5JMXbUHYDOJ6MOD8Qjcpxq7pMEe\n0RZrNhraX1zOubJWPZm4KkYozRoJfwBW7t2rrYZC8A5v1VLfxmlYOyzpftEd\ndI8FnDBSUklPkTVLmUctrI49vZA20uldm8nR90mL0eJOgJMvwL0CAodGeCR4\nDiUG2swHeyWOkT7nrjy4WpmpoN4opgpKvTQgaIH56vVlQQAMsf/coEHaHYg8\nMGAPdC9wLYNFDevAJHc5tRm3BOWA294bMHf+Uuv8RY4UbCJgKiKPvvD+vmXC\nD0BDchxqhRmZ+HbGt7WEBpbiy/U/6XSG1ltLzcN6Ugd+zThV9HDYvhizXtf5\nJhaKoCyWr3Pa7UFCDHxiuDVwz+l20mF7JkWnMWr6Ctw2/4BuJNhuOz0RWxki\nhUflobJMJYDyJ6UH6SzqW9jEs8UHICMwCzu5dRTF0xx6czN6TpNlWLveiM3F\nPgDpsZOWCRD1ItCPD8BX+rsCOigisrdm7UeFA+sCb3dddgvG2DFoTYH1Vr6n\nFhgFn4JQO26Y4pviF6oauMEwg88bSJcvpBykj5o2FcyE/KLetwpoGMdOJPy+\nHVut1PBPhLf1wvC0jhL/+23j9XZIKF48YdjylGQX4+6FiaULG4/NaDrgtRDU\nucdz\r\n=diuJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.52dc55acf.0","@material/shape":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.52dc55acf.0_1595869739598_0.08769540698009592","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/card","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6a34470db6caae5aa21021a5002ebf93f16674d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d4274ff05.0.tgz","fileCount":19,"integrity":"sha512-+sa2VAybhZvYhGp6olpzNTsTL2XPfk2amTbf2eSrfGm+PAPi0L77itHpmEgPeiNdeHvf+Z/UE+XvZqeexvA2jg==","signatures":[{"sig":"MEUCID3AOk6Ojqii6u0zHrJM9wo57FYjYXzZgAuB4wAw6kTzAiEA8sy8syGogeDirU8hiSrHGhBk9yDfq05G926Uk4dDXgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzA/CRA9TVsSAnZWagAAVnQP/1xF0OM/WeTFCew8PMxN\nef6ScmQVyvpSEaf4+Eeom7S9r9w67laHYvdK5qOGuSdv/Q32vTWeppOr38rm\nn15thC2zGT3LE/qxCjPWR2oEbKq6hHJcRuROMAgYvR17CTD8VU0JOirpovag\n0K5Eo4CI++JbwRtLC0p4cNOBJ4d25uvTjVKbcSStWsOoF4W+N4++KBtBMgE5\nXUml2ssxs8HhzxvLoXKgLaVsha1H95cekLnkZZ7BLUFo4wpvJQWWlq8kZ2N4\ngSzDVcjxWH2BgCVY7hYA4CKNchFh6YdAGCOe8diBqkn4gZ2DBGT8y72hb0mN\nTGu0rHFQGguueE2roKDaNJ++8d0Ytl0noRt+1Xyv2BTSyap4W+RsS3X0P6f5\nFSDH3uJpBvC65faR+JPEgq9rQQNralEu+remlE5jvQrAlCnmG0WRGS8cvJlc\nKqmx6WiQBx8j0dc5IOo7dM6nViQ6PF3cQrrlhwP2FKolOcXaK+qUBsuqN82e\nIXl26+LLAyTlrGT2Pa6pp/dvyMcCCbWJOc5aOifvOJdUfwATLNR1jHTIXD8e\nacBuUIQ4Q1mDAvXc8y/PFhaHryu+WHm9P0K2lB/gxHs44aN0WoNE/7CoQ7fr\nGvH4FHS3LpvDd8fp7vzhx9CTymGdRuQ0qQ/PmNnkL3op2fLeKI232Clt2Ex8\n5z7y\r\n=0fGo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.d4274ff05.0","@material/shape":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d4274ff05.0_1595879487175_0.7711973091083943","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/card","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00ed971f065d355abc68e7bcdc842ef813236377","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b82d0696d.0.tgz","fileCount":19,"integrity":"sha512-ZJAWeAY6cEZzCPEEwXpd863sWmhtPLtuTCAQ4FwG3vDRgFXQkqkRR6yKlHaZp5LvWSDAcQZw1/eZiMWKqHacXA==","signatures":[{"sig":"MEUCIQDVxzwygph/Ju8UyZjd7yvsR2gQN6XAlrKQITLSrkah7QIgD6qB2xBgAS7GmAtMzQ/lJPRDcz6pRu2Rag4g3niv2Sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHsCRA9TVsSAnZWagAAlosQAIu4DaViLxaD7uS8d2eP\npuyVStA/N797xkL5a6F6nmdgKHn2tStv0aZipqWZHec8dK98fnOVUT/xjl1z\neUBtJnAfNG9pHhXWbEPzzvX46+9lNGrcF8AqboLa9WIE/S3fO1GZrQ0ej6rz\noG5lRCz3SOcs3fN6IAbimvUFpYfem3uUkA8gzCmtegWBYgjlILo7pQvken2t\nEczrq2AbL6S5cPNEiNkN+cLCxy1ckXM4cPFrTYZJQWW2PbZrHvx3UZT61tNx\ncvpXP1mWAbIg9DQ1DekrQk6XfPKc+8V41ZbST+Bd3y8Vi6kcWmbs9zN2oHaK\nnw1RST/hlJgW0evgN87xba2CcHVJjDBke0X4gulxI5NBz69nl9LJ7uBrW1Eo\nHlJXP7QFhMhLl438bbDctpRAmD/l9SzBUrSilgzZVy5IKAsUHmUNZrCitKd0\nJlO0uRZERllUc6uHaC3He18VOge+jYhmeTFTFdxrYTFFNBQj073vGicr+tOQ\nNPz00UULfmCzxBv5J9NQMBmNxixXfds1supDiqcrGyQN1PEBxdbWzijbXeHD\ne4mDOoImb0NZSlfRv5G2VeGYxWD8dadLERJwcgUXcSTPnwp3dxwxJ7fGUMUy\n+DjB82WB5HshRzHYeFeLU8pLQe3W7qRt2M8a5U2EdBcSsrjmQu9PB1yl4AEF\nTma5\r\n=q469\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.b82d0696d.0","@material/shape":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b82d0696d.0_1595879916415_0.5757836668813117","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/card","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b38b1d4c44d76ddc97a456fc52f3a28f72775ab","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.c2852000d.0.tgz","fileCount":19,"integrity":"sha512-rG48IvH2t2KpnIfRBG8H+6AwQ76PqvXqR/EE0SUkGjePLpNui98b4X6XneVo6JHqOHDv0CFA5tAHaCOIj6DUGA==","signatures":[{"sig":"MEQCIHfA6rIA7E9Qc5TdzWjIdnOvFH3FwLZEtAd70YVt1hKaAiAIf5oqKyrQu1gY7gPA//FqYRecnlx8Im99wEd3gHT9Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0AICRA9TVsSAnZWagAANeUP/3TFYZGjeSiCMJ2HRdq7\nDNZc9WdRtjgGauM67kvepBVlxm0usUWHtuIM5UxMKEJEUhWlvjjn5S3NDbMo\nC2DhNEmzCJU5Loa8/OYlrWIO3+zybA12rIakdaC/eSY1WLzvc5vnIx6empkP\ntkSJKH6mNJs6WHcMYg3IgzlOA00HR0qsB8+hGCA4J8N6rSQtLMUJmckvfrZm\nhIByXp9kxGLOYLaCDMZH81weUoVcJ4dfBw/uIEHxpHJW0TIrGSCM/dLMVPT7\nr4VbufFLQ7dowWvbo7Dnl2KaZfS3p+wMbCEuzrhsYYDJXnO7UPA4sRD7imIC\nFHdpD/uLCv2tNWy8twXtMBavrW09HY2o9rvdDYPlTqmuMXMHXEyNGXDQrjAN\neGa//f0iW+ZAZajJV/k7MDvYymJadg2jBAXkF1X1WKT5mfl37Q28L/YrI6FU\nJ4WKjy/nOi2/EP0Cf34DpZnGZcXOCm7GbH7Mp5TLlUDgPWVyXxzhEbxza55x\nqdB1lWnePA8eBX/Ga6MwNCDjTiC9jXS+VVaxKG8BnLpG9SUJBc83+NmFiwfj\nZw4BB9uHpPmnyB732IBfwpHumyCXkgwhIQtzCOc1j+EmxWjZW718opICYSBI\n7ndBwlQjrc9kfkAhFH+3Thf+2LKCyWXEGUJTF2f9GZptpUc5sDbAhqEtKhc2\n5WKD\r\n=E/3M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.c2852000d.0","@material/shape":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.c2852000d.0_1595883528127_0.34753347306380555","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/card","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83c1a70f7fea1e0ffc4b2c6d0064378339d5b344","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.f86f83f54.0.tgz","fileCount":19,"integrity":"sha512-2mf6Yce4tJoHmUodqTMf+ogmFI1XnE3UE0l6zAyZs2WtY647agVjPcCgjiKxAHgKJ0LC6sED+pNz/bXovvtSYw==","signatures":[{"sig":"MEYCIQDkntpotiCwfDu7p9RqRyRJHR7slBgVIzN7KJgehFuCfgIhAK0CZ0/uSOa54vKdnDGoTHEJSQrLpiwq/jqjUDMbMb2w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00YCRA9TVsSAnZWagAAQY4P/0B8kSmoDd2KIiqgMt52\n+HmwZDy0f7xbz8qCedk0FvtLx54RDZtTzjKzyKO1+0lHIljInI159mxMJ8Vf\n8OX46b82AUHCkr4pWnZJVINTa0tButCUesSggP2WDI43uTZpAtj8SNIOzYFM\neRZkTPoI7d/+Xl3mFFl0ixefVu/eL9N3CIssqQS63exNhly1co4d9gS6LBv0\na0YOOX96fn8NoIhqLKbpLRfNCfDqT6Z5PWsQM5HBWzg3R4qvKYSDgKulRVw1\nVLQ5jnExc2TwfyIA1zWTETb0vkSwoEFd/oCBD9nwQsnMjQYyFnvWkbTLI5A4\nISlDpP6n39uF8/rZtMzQWiRpDwM3bbOxMeP2SD/dzI660eqKlzoTfryDIQw+\nUM0DHLRHSUzzIYEzwQ9H/jwz2L80x8D0E/DjLZWa4+pXBZIoSAHO3TaCYfuW\nUCTEJ5EoRM6l4R2x/eI4Es9hIdp+IzBgvY8xKRtfuOI8KjryaoqATXMS9KHv\nCixUZ3PPE0Uu16TT0/z3vq369ImJa0EgAxesFGumQiXGMVvnmrLFVqsZxCAC\nh1OAX9J8nQGBS/efGYmmhParzGppzb4u14HPAoP5NiLmlw+vUAcatn5X/qY8\nBl7uzq5Rcu3irjWdX0Vc3fs+vULZQip9WMEMtT1gdgm9d3mx/2oobxfXkiKT\n3G2o\r\n=CkRe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f86f83f54.0","@material/shape":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.f86f83f54.0_1595886872008_0.03946846066574339","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/card","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d825f1b0ad481cd36bd1a8cea88abae377ace1f4","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.41eb1684c.0.tgz","fileCount":19,"integrity":"sha512-lnY9uTXsU57kqCwg6APsXhx82BHKPUh9fJRNtT83ZsEoMqJfGqlxmXEl0DWoMpvCQoM1u3K/N+nI/p5JNgt7pg==","signatures":[{"sig":"MEUCIQDPOquITha/LzrKk267IUyMaJT3tyvu8mO+zsv7ZIDRuQIgfdLasA7UE0QzvQ3iyNcT5A3qP8qMl1JSFd7LJwE4kaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGV7CRA9TVsSAnZWagAAsVgP/3TGWmoUffmAkUko9jhN\n0MME6CR5TTs6mbhHO0fafDMd1bJEChrs+0+ODp8Y//AWAGJ2tr/yx4uYff30\nMjCJ01IxxYnJMJlq2wa8TtyASUYm+vzoMts2aqjIaGxVzqkoCAPhO9CFzDIH\nSB1FamY0iOxng4hTSSV9nHFLczIcQqwPY6bUHQlRMLSbNIAuOD0lX0j0cxLH\nRcRO5jyFY/EDucTYGFIHAeWId+WjAymXmPKGV5oqrXBb5zjY5VdAx6IB7w0+\n720VlgNpyKYnHCEHRrvChHalS3xGh8OqexJroOp8oBS2i1whw64mqrlaA+a5\noIa2n+vf27qwA3UY5mojmpoDGVyEh5mvbuT+NsqENcEmpxeMjgoLj6UmpvGQ\nnVcWcAofqZWzKn1F/Zp4ea5tVY7JLHxujda2IiOfixCb2MGmWFU9PFddSUMK\ntWt66pRNSAZnudctkwTlKB/MsKfnIi3JjRwDtGxEW+fw06VKT55hfoopcyDB\n6XKqToXEuobXhG70fURAwB9r6GI+DTb4K/2VUvkEqsYqJjQxG7/Y+Ka79OHs\nLyg1cB+DvoYgoEpvjJpXWXs5aQecocLjDCNwaaASSW0AITI187ceEPNZbIs2\ndAYSh1ulXxl9AzeSFpqFQivPFd3soGmWvo9a982VSOVgcyC/LVkBm1v7zF94\n+noI\r\n=gTfB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.41eb1684c.0","@material/shape":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.41eb1684c.0_1595958651025_0.45240230225713285","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/card","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"104f411bfaf7d5302c669b8b4975ec5b27fda538","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.9e2f6c450.0.tgz","fileCount":19,"integrity":"sha512-8hKZnUxAJNmW5l1KOv/YiwxVzMaiO06wiLF0kPhWqXK+yezyr+wSMxACwlzYI5zpNiWtGnQaglm4dlaBk8pkBQ==","signatures":[{"sig":"MEYCIQCxAqW5KS8wymEzRDVigMs2y3KxtMDTkxgLrHO/IofHPgIhANgjtMBuihVlOGpDt+EX3NNN/41Y8pf/hDLMwU/AabBy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkxCRA9TVsSAnZWagAAItwP/0T5F+sFPI/jHCi1kdZd\nG6Jrd10tU5Yf8v+mH9qqnkrk2YGFtaVRKTV6mEviqZLpOiMIRv1/xlmjP2Bw\n0BQRt62IsUh0aU8mNa5ovcHgNbwc/J5Nu1ayhyJD+CoSE0xRVs0LxwjHxKxT\nT83x/EQDN9nQJCxHsgHR+Bo1L7UG49wyZadyrpgMei87ec2jG9clW9anMvXx\nTC631+BZ1ALLVdjP7B/WfMrhwuQifO6zJ5nF+IBbmaq+1fNp3XysrINRZDDJ\nNdcn6TaYV1FESe/Kvm4k/SK4jHzFa+rcnLs8fNv4GyZvXnUVl4aWDmogOzb8\niGmBW18tly5JywywATMKLWlvMmrlMAFE7B5n5ixXaXt127WzRVQPRi7aZsKu\nGuDYacEMNKUI9EvqKgCTeHq39RJi6P/B57vsupwtjSmiOMh0SgUK3LoPkEtD\n6onuu28wJrdjtcaGYPVcFO8Lwk0Y4ahglOho30hH5dhcZOJ1YJoMeSbpPYbw\nyUVhErVM2PRzun41NxyW7P6IJyYQO2c2FZcaOix+gRwXyyNGz8iuffp3iNeV\nmVFTDbyi11V2BJ3I3BLxjQRp9kxZigaBAXyNiWxz5yD9wb+Z0HgPT4l2SV+y\nhM2nnF3Dcmg27zL9aBWJTOwoti9DEFW1cYpE7iNpetgE/bO3nVaR7GMgRq7I\nn0c4\r\n=wfKV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/shape":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.9e2f6c450.0_1595975984876_0.7012458112922213","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/card","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f0e870ea89bcb2627add955827e673525825708","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e6950b55a.0.tgz","fileCount":19,"integrity":"sha512-ovcCrdwxQRZ36zRURMYvbTTNIucg6/FcWGPPz160a8a9mF8kXBoNTTT94Tg0GrwxvDuvh6z5syMz9EiqCwYw4w==","signatures":[{"sig":"MEYCIQDcA5FoajRcWlbCWNvyzdIfUtcSPdZk7XkABn7EtrsxggIhAITncHRiBFvmxElmCDgJSELXTm+8dKKvWxUMitgUgw9o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKxLCRA9TVsSAnZWagAA6lIP/jBLK9C+1WX+8XpbcaRw\nQh3AMxjAKmPsj1TDE6FFeu3U0l0bUHTqC0EePzRUGdbN7+aCQsJlxiwTD+Mg\n2taJuAeTZ2u3Zps7xeZIreIqDHoeaT1iAK4gIUen3yQ0HrzCQgFADFw5/qUd\noF8g8eckI3OefT644Xm87gmPbo8qXEKQNw5+8Qn5sD7LNTq0NPbGKsFX83UV\nz4wOzswyzXHLgKMXsCOiiAL0LHZAXMLV0/uwCIOEciV4NdQ76EUqjxj6XLt7\nGheZg88HTdsbDG21vNlKNzMS8xIsHA51VKX0oeWpN+QlodLqU/OoGbGb8wwe\n6xwe89XBLx+bYQiJbwtipti2VL0cYJd56XY03DRBBuCNW70wARb9XehDo5Ny\nIXRLgv0Vy83tBnFEXQpqkkYBuy7rYU+MSSG1Urh30KfVUsi+Lfz+PnNJr+PJ\nLI62KoW6GWQqX7QbhWqVaDdIqe3/8xzB4BzansijkAAOMuCwNNemy0XTR5sr\nuRO0fjV9vL7zMIgqOuZAof5Hgim2yo/ckoIh1IjhgMginss8uRsLf0Dch5uh\nbuAm/2TBQARbfsxYx+z1Dif69AstHZmm4v37H1tD5eDjuPBjdqjZHegjIlFz\nS+Q5O/FJ38Orzbt8cZ3FZgqiCpl3NJ+aJOfZVFlPvoVuxi3LQM14qjTVuKI2\noMrL\r\n=p3Fw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.e6950b55a.0","@material/shape":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e6950b55a.0_1595976779208_0.06999883789473049","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/card","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d78e71dcac87e44d33347fc98a464821345b4dc","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5e51ee38e.0.tgz","fileCount":19,"integrity":"sha512-8Oym0/D0ZzwoKhMbsSIw9iZhKVLBfpOusO9hbSiUc7OCmZRveQhqmsUpJhpwdztfoiMD9BEefZbOIJujUA8ziQ==","signatures":[{"sig":"MEQCIDU18QJzxf1LtovZbdRBXQvEoYibhSYuT71AqBh5sZCbAiB7SqGoG2LCopHyUN7rFnL/9nTcyJSG++M856Qrszxy9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHNCRA9TVsSAnZWagAAayMP/27OCcW//abUbOe91Pv0\nngGzn42+spOr+3kd+7t8m/Yvh6t9r1EgONwO4/n3D+RKeMrPw14fPjq/52Q6\ne3JzNFgBeTQY3a2XhfBn0UTeavewbI/qjN2QocM6puwQox/+k+8Mgl5wgCTY\ne+7E8KTD8GisasRZNvzg3NlvVYJQftz8obrxYNElfn2/egunh8U6sjndAdy+\n5VI59yBgnB5y8CoPstqpymB6wvbX39wyxNU+PQ1jCB7sSUxcKVBeSNNCOrog\nu1v5rET7mQC6CwUOKjoUBLpkoiTAbfCk1y6PA2g959MUUd3Qua063Ezv4Lsk\nFTb2pWtZ2c5OIUJgfSde1hPjitud5KvdPQ20YederZPTuhJvAfHvXm7hVjGW\nwxYjXBBDirn+UD2NRu2cbfUcqwHWrJAIPw7GFkuagfDDg5KPjEF8OtsXOLy6\nqEovtzISx1U5zg/BFLEHXX86M9OCfjO+lzyhzEzcWru/OsomdP+9twU3WaHK\nazrd4mYyUIEGb+JOBAx6Fec8ykEQdHR/EwATEvOaa5A9gE+6s81eq+JSkHIs\nCaawso0yYriHdYy8rjP5H5rSWpouazfwFAmydA045eGq2c2Tsjy6eGCofF7q\n841xxm8zCzn8ZLv+kShA6kV2JHLZ8urwy7t0bdcHUAo+jBa35Zt94+Jjx1LK\nCYeA\r\n=6s3Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/shape":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5e51ee38e.0_1595978189495_0.7279995211793024","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/card","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a4be74fbf7042ff68fa0a8b901560bb9b89145f","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a3898ffcf.0.tgz","fileCount":19,"integrity":"sha512-xaEWdBpZ0Im/GonxQSvZ2MfhjWNEEevs5Kp5gsbjcbLGPlwfmSsSrFkYeogphTrtHaJd3CtdhQJuzHUbgwy46g==","signatures":[{"sig":"MEUCIAI6o1EFzo3OsE1lacAr6wKfJqKGwgyDBauhZxOitlDuAiEA32cljOc57ln3db5tqbx1zpeOioIRkBRIsS64Kdcokmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSkCRA9TVsSAnZWagAAFOoP/isQ5gFuSyftIeIwGwSL\nxYaWlr85ILBWw+B4UIQuBS6fG13bmLskVOUnJ4ovK6oqLn8CI6NyuvXKOHVW\n7U4yFBXy7nNll8ejRVXToI+FhtQB/sRSy+4g7jD8qLgFh75jb9p5kItsFr7y\nP3v03Pnfw1jhecPzmo/h2o+6l+3K6SKSMRjhFxsiyRZsyk+8tl3tbMXihtpc\nzI7a8tOpDeWQwSrOqyOTiioAfSCeev+eBfHSTK73Rlgj2hhlo0Um2o7S1+2V\n9+c7Y/WdH2f0MSjAM0l/OSFdMoakGKentkusOUu+VgL5CKCYKy6kgEFrsy7o\nsviZ3yjdmSnI49Cuf6hB8OuOzbVeUUf4AGRept4x9E+tDeXdNhqDW9yz4/Dp\nUN4uCmUVxbPaFWSpV8Mu1iedIxvgVevvHF+ZAnKNHCqgRnTLFaVAcHfwVvq0\n/jFNu/UM/CY9vyateZktscoEHxZ8dB2PAIuFrmRdhaOgIiYN8F4TVaIqxHIO\na0+gHy979qIzZUpAP78O9FsH7KoLQ9cGAcEfnvdTh8E2Nv7JoIyoMRh8Cak2\n0vzM5uJe42iYpe467EOzDVZppu8SEYjLMh+I9ypkbEwPYrKBLL7tDcgjLoFI\n4QoIhUfdInSD7FZB58gdqqFtcrsrVVkemX5lvH5mJvkSqLFXf7hfTS0NNz8Z\nvNMY\r\n=0T1Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/shape":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a3898ffcf.0_1595983012506_0.8826372545178256","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/card","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"278e7bcdc9ca0c839d7fa8770c71de4350193837","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":19,"integrity":"sha512-KvkK6vK+544F+WZkrZzKw+qLWsR2Prb1uFe2Io1q3X6o4U0NuXzpFtI4WFNeixy9v2UpECzd6/5bJnQr4h4BeQ==","signatures":[{"sig":"MEUCIQCTkwyXBY0xyRqHVJhfabk4SrvZwfUwFtt65TBImharsQIgP4JNrbkJxj7yWVNrRIC9ibcdc8fQHAdTntuv0jA9BZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMelCRA9TVsSAnZWagAAC3YP/A1E0fKx+v/pFRtEau77\n8UCxYhyBBWyX63pAaRavfh/AaPXY7FLVwhIFwuvpMyGdMJXvK3ztK2CCkU4k\nK9BJRbixttX0PQrpmVBmVepi7m2SAyReKHBUyi09PhlsS5fAwhrTd2I8VXqb\nbBW2iOraKWqJAiSIeiYSCRcZ+SwVrySDcBeAh419QRUgWJw0qIx1B1uJ7D6D\nP/6fa9smzTiBpWAyJzYdCtYRrqLH674HCznUwTg4sr9VZ7qXPD1YbgF7yAuF\ndJaFPrUH3KRuXONkm2viq5uzHqynhOeXITPFoNhPiVWPU/WQC1RbDg8shqjs\ntrxGwVQfhhldeKmiIJm7oaICzXSDQQoIrcxleRwjA3Nn+aE5rtU45982MVTw\nHIEomKmIHez+n8UwakLeLw9DKB1zl8o2/eRheekstSqpcLQdNeC12k+PVtpf\nX5R9SANqebB1XnJ86s9OPFGPa5pSZWHjSkq0AXlqu3J/khuylXenCcc4B6YL\nXQ5MfChPUFJPfeIyM+OAp44JN1+VNt8y2gt7GChAt1zNbYlagivPp44wbm9T\nJR5iusnt8srZe8+M+dXYGgjZVZvHfwuMtzCeEEWWMDfjrr0kXbsWFcqbJi7/\nBC+lXjhiVW6KXxYDniB/hrO5Emr7sLGxv+ANI75whhf05GwjWvefYMgAR4G9\nDqbx\r\n=UvoC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/shape":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.bc5cc6c96.0_1595983781394_0.6835855640063775","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/card","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d622617d22429c53ad740e4b7985c4566ae369d4","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.9bdeaf928.0.tgz","fileCount":19,"integrity":"sha512-3tu14csx8K/wpR2yLwpTovs8l/9PyHXzCtGyibRQ0aNBoGsZBU0wYFlimQ5RW43k2sCEyVOx8NCR7qC6xQ2vkw==","signatures":[{"sig":"MEYCIQCNjLq7AeyQU+N68veb3CbWHeh5L2tlbzVk/3FKnrHVLQIhANmJ9M/ainKGra1Oi7A3Nhn4UolyzVJ4VEuoTTEMymal","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM8FCRA9TVsSAnZWagAAdjEQAIA9qoB8m0200/c7aPbB\nTKMyBJPq4nY2LFwdAUfqwQIOOpdHGV9OQk3+3CgxNFuHlKidN/Hc+wiiyFEe\nVL/nRyKFHjdTPKlGvBREJ7haQpWoj9vrG8wq4uJYhCh/jOHVZ3a8t3nc52VR\nA5JsOMR9HCKVVT3RRYbsYLC4fO8gy/f91j8fcRU0BnajbVU2tCyjBu7JDwFF\nfrB0do1qeJgTnzGo07L6/Nnp2W8WF6lEigIRRhUy5+hArRk+oiGKrPkIrWRl\nbFhXK+VO1z23xoDVHg3jPcwJ2ShAXX3fw3P6Jo7sVf+0nabMMfScyWfzpJ2I\nxJJvh3iBy8REwHpA0wXWsaaX1wYL9s0QYjnhJTxhL2MoVPlnTCRae6vmJYOd\nAcMY5yZr+pJBJvJZIF/nMF5JMpEQvbc/N54OyGYA5bmKSVOp8JpMY5cYSku6\nUIMwpWD0wvaIiwMtDcWdLv10aXRauyvgVvhJx62dKHYum3wMVdOVYDfYccsp\nmZg+F2NxaypklrTuPUmAa/WgIUjijpvF4tbQrdmp6xZ0fKiChiQS6udRXNIG\nLgc/fR2pa6Wlj5cXH5KdJDvOJWXSkGkE9ZlPdT2ESkJihm91BhSfHBHTDMAb\nylQXrmSNz/JOK2tsA0/iLD4jVQcHFLM3RX6sRcYfzjWFT2aucrsXl0q8rvJ0\nr1mR\r\n=wEUR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/shape":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.9bdeaf928.0_1595985669146_0.21330212665658754","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/card","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"753e3cb478fd421ac2b9df0d3acaad112a4c159a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":19,"integrity":"sha512-Hy8bOPtJpNFjoZnIH3sXfRzw/dyU8J4ir7dMqADD6IaLATlslUdgeIkrLKoDcKCjmEtv0TBLVlB/s6q2apawGw==","signatures":[{"sig":"MEYCIQCAdM1Al69M1YthTpFzGyO+JbK8eo0uiNkWeFhG4Mjq5QIhAI6FkPSgfOo6UAM+NfQ4HwHj4/QyTiFX0MZEm18WgQyf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJeCRA9TVsSAnZWagAA7TsP/3mlySIs2F79tt4i79Yj\nUkn5pwyLdgLK5rwwIinEkUCfpKditQuBRgRYetthtoYui0yF+ZvdWPJ7XpVU\n40Qf4M7vUF3RsoESaYTslffSeNFFhP7I3dXWKmTCNjE8KIxU0+BoxyaV+rNZ\nsMt6m9ksQe+cRG7/mmVvq2XfW8fs1nFU1H8VmiKkQdMRY8FqVdFEfM/wKYVh\n4eu84+UzPMXerYvLqdCC0neJrULke4VWr02yCQcjbvKX0qWAYPGXQlv1XaEq\noM0CNKf1JdidHkX3XZTods913eaXiBIl8FQvjJhICOYjfHMU5zP6+EoZx2Aj\nK+YdaahDdce1UJJEOVAv8kJKmuRHfv8FK5MLCj+PYYIatSc6HP3cOy6UFAET\nkGE9lAxbUFmLr5q7OG3+uIn9vrZdAVlq/TbZDjmgKE6PqiW7YR8EQMJvTn4x\nY1c8Eld5GJAqACXWm3HDkXErTUmtThFDncrZtdxcx9cuUi/MDUIcCrIEjjPx\nCIVQzRFZbnOhUKlDAVtogrD9AWW773l3zDdHUBDts6LbINUYksgfFAa3pqS4\ngC1hFHnpfOnP+zBYYRLU0jy58mE8BBA3b1JQ5RncPypmGZujRGqMF9RhNaVP\nJlO0zjD6mhQHwmLpaoYVjY+G12ts2GRTa9brCnrsm37+k1YSvqUCaDM0OZ0k\n8CPt\r\n=smtN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/shape":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fde2c1f9d.0_1595986526363_0.5057889374754632","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/card","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b840a79439f0d2dd2ebc28e3f28624de02ed7bc9","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.6b3876d5d.0.tgz","fileCount":19,"integrity":"sha512-vlIl3TIaiPxUboc6tYGsoxhY4y9lBah4WOvVIQE7O39WrmNS2BOrCyTqLXyjG7DtKaoGpnSBrxL8ZAqUQI2HAg==","signatures":[{"sig":"MEUCICllhO9GMt+mCITR6L24IXItRDHg6aLRzHMgNqCASjnJAiEAiXWGwfkhyFlim554sk3mqt3jYoQbbXVhH4ndgSblW/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNCCRA9TVsSAnZWagAAkjEQAKLIegF9cxQivAzF6D8J\nPzWJZfR3p8TwpltxdlXxXd5MOSLrlxvvXKPXZ8/xfFjpDCxZ0U1/My6ivFCc\nPNYFZIak0Ltxg9tnTTG5ciYCcAXyKeBPGJQv5phTQR4EQKZPR2l+IU/OAlM6\nKWZZ5jXje8AETAmMzRUrEtiCaU0otX58vHXozWbUQzVFVpfxMBMgDYzR04ZQ\nHiD7B/CsBJ1nl1zM68IllWJWHvnyNHndJXZmHoCKZL22ahmUIEK/XfNdPqcG\nEGi3l9mcJDtzhUltVvRbL0Ux2h/JQjkDDpHjU19peBj32qujybhKMhCUviWv\n8zQC37Ey1C1dJYmA8TYL1KQ6GbA3fQftOp/h5YjEKELs4qUnzuhkNtpuDtsG\n6MGLx6h+cQxq9CTqtz1dCZolbpTwbpn1JeKJ4h9douFo16uuqECqXbRQMwVK\nWM18oJJctvA6PjD3riGz7GQLtibrVkzVipMt1Yu0yRqxR3lXytOPm0oXecrn\n+fiKhEYOr1Mgg8zQu/VtLq6ab9DP7vwUXg3J0h8wWfwepETm57jILVYjg0i4\nZZVF8PizHbGpqsA9VGsTp+x4JIELCse1PIPRsFW334naO2qZDfZaOhdZldS5\nurleJ4RM8cNBwB1s+s7NLilsZ34OQ1J0hSi1nIOHsKeAaTCiBXkgHTLNCvyq\n3w4I\r\n=4Sk6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/shape":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.6b3876d5d.0_1595986753642_0.27660851300926836","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/card","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"563994a6a2264c9eaf353582c2034149c1e5cd59","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.30ce17873.0.tgz","fileCount":19,"integrity":"sha512-CsTr7gzIQKpleheLcmUprtgEc153E8+Onc3oBLTOhUxzdSK4Zy/ujIU64C87KWg3TNA9g49lzII1PZyaHJTEWA==","signatures":[{"sig":"MEUCIGnBWF4BG2H6vHkcgfjt4Mz/b9mho5NxQsWh7Eaxi1qpAiEA/w9LfmFfJI7g1WBLtfOa5CDYAaBp23oPv5gVjHAq+LE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6pCRA9TVsSAnZWagAAKRcP/0zGXNhLenIzt0O4kwky\nps0meiERacQDnaNBMxfKNktG4wXH3CCvT1YPw1Tk0AcKJTh+kciFCTe6KFGO\nxsFSATLEyA2B88w/B6Pziq/JJKsRFTRFs5PNa0uCfd57KjjP0f/ms6fSWJb2\nMYcSiY7ttws26Op1N0T1coYBdWnyiR5+/1PnP+akXgkm3vdYgIL1fc8ZdiQ7\nJql9o8U1p8ux27AGYV8tOOqKP38IkcqctqP4wngctZU9dkjEGtZ0E9UNyL/+\nhQjEJ/c9pgGgc7Y42Ogc8zYJjNlovp14rHe8oo9olWicdSXOmqT5x0RHAj15\n+Qiy42+kuKQn8f4ojZwXioOSMlZ8xQaLWm34pxFQuDapN2+uP9WmxjOQ2SHQ\nLCiND8CiNJZ9B1fN7u4GCs/FTQxY1gN5gFrIcbDb4hbvsKHbmtC7VUt4Pdpp\nbg7Fix/5Ebs9O+haR/WCMnVoETgBTT8+8U2dUqZw8BLTJkFLyD9k+dsqdbul\nvd7/K2doaOZ7tt4yrDJmB+iaS0DFyGcUrXx03+BmTrD7B+7YxeQShuAg3/Yc\nHjaFyx+w7fW+PUP6lXQnANAI73+4QZ8An/SkQFwDu+N1A6awnKzTJV9xgBZf\nQuIJAYaeDigTRC+MfiZJ9jmNcdds4kjlbH8ut9/UvmrPLf4U4gafCpuschtl\nH9/T\r\n=z3/P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.30ce17873.0","@material/shape":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.30ce17873.0_1596042920650_0.16964956984521895","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/card","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a653cb301d8315121e1326bb446ee3a0628c6109","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":19,"integrity":"sha512-Yhdxk/iKEx+ED4WmvgaN02qAoazne5HLrRS5c7t1GDar8NaFzOHaloiF8OjwVtgTGMDIIscGzR1/IUwz4C0Ehw==","signatures":[{"sig":"MEUCIH3elaqsrN/ce6geH5jFx668z5vR+ktFC4usq4k6ATTDAiEA4xUgoAMvVgO9DizadSiZNY5+fAlK4Nng/kMdeC1fWzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8yCRA9TVsSAnZWagAAIb0P/AyKxW4wSj1ijrgCerwL\nOjnzb07E+3p6QK16ovYRg6crrtCQUNju8hmbcxqXpya0O8t13UFpJ7P7z70s\no0M8xWWbdw82iUtQvCmXpkqlNKa6jU0wGJHeRDlEuiItJp5Nv3EWCADFN5RA\n5mVGwHY15e1DjgmsTmTkXlOB2sAVjHNuTHBzgRYBWn1hfHcfL1vWoq+89F1r\n0e5KOp1xNoNi0RGdnnqHjiAxMMeRI8n7/dsSoz4lRTZAycuWz4ibthYKtVZB\n0mSGoYNY0uOOqrrs9vn5SMWA0dMGzAnsfrtMIP3H1PK6ouZ+v33WfDg4T2qy\nxoEYmRc9meSjhesU7WvwJwqXrmL6wk3ekPF3Q4bMRJ5/JO20OiCJ3CJcQZwk\nXWdAv1d9TWrWIcvZ0SMGQp0gO8uRkohtUQJT69MHQGIrlt76FoSdTlooP1eO\n6/A+IwcmgPCBX5/ux8x59vPmscOr7gwR7eK9I/tKipQQjpCkl31Tb5qpvlFm\nYKH8dJG1w9LkMXmQQN78BSsnfUyXQm/YYRBzoXwEP386cvkd2mmqT2U5NXF/\na85W5dXJOQFmtFH/yi5Q6u8CgG2U66YQn/HzVAaTsOSND5GY6DDdjpt0aqwx\n1tdbcJcikZHlYU5rZKKdDDLx7lpzjno+Tj2gUYjjz2ti8lUCuoRtCYbhrPoS\nFRzY\r\n=9evU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/shape":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.f6bb43bf0.0_1596047154070_0.38358244729807334","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/card","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c296962fab6282d419d50b86ecb31b68b04081","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.6af75f6ab.0.tgz","fileCount":19,"integrity":"sha512-l2X/XY5TsVlwMesO5abupn/zZg5ASkGwIz7/YFmGd6tTFmmWuM5UeDFvn89KXeZqyHHc5WHU7qYnPfRu0JdIpg==","signatures":[{"sig":"MEUCIDheYAciZks59ETHlx2Id3jMO2ghwhxwMDzspRijmyafAiEAthn/sPtOPev0SCtTgEGVKy1kG5MGhQibbwJpgdA4tSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3xCRA9TVsSAnZWagAAlJcQAIJFXVJoU6ke3lHZLTva\nY7B9UEhyq2p16o5NmGStKSS0qRJrbaOMELTSnRLeb5VhqDnUTxaEzxe4DgmH\nsbtOQGrTPrheRovFSdk+oZpP5Sh1Bt56rUj5P/AjlFTgBdPtBcpKVeNTAEdn\nC06mC/A5ppgUGgB+WSqcN82AMJzDYCP7+PiIIqzK0itKgRpGiS41XnIUaSOd\nCjRJ0mKGiEmpqX8YCkGxop5GFRhfTmkjv+4ySVf+bwCPmu5mzx6Bj/04uma9\nFIt1WWQzuk21fnvitsqTmJxDQ1BOajDHUbwy1+9avLDV5YilX3RYfRKn8sov\nXvw0uNrkLhG1Unnf/kSklG1sSzpgvssPmUhdpAH7hFNXmoxVcxtVLOpYCY2E\nWZHL5xiAX+XkuNUgZUPm2paEZ6BJbUGg9MR6UHm0OOGiQMThBEYMpDdgaWVz\n7CaEe7vWicFGjKGgkizQxMTB/YfWCYZmxZetzEwU6kYdA9tbwHefeBqWuSOb\n48V80cnAQO2Ua6UJcmzg5ivSbZUwu9cW33cVhRf85ej5DroUJVxLOiDxbX5f\n9cReX76qku/gQGqD5T4RGooBixd258v611mO2SY3DRvO84cbsi0UTOkhz2cF\nOzOjAcIok+WTaAoZkygjTRQWLDiw5tTB7qtuAvsgsl644d4EYCjaA/ZR60F9\nvz6a\r\n=1KLN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/shape":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.6af75f6ab.0_1596067313322_0.943603265601195","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/card","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"670aff1fca8147dc394a96396018087279ad46c6","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.42d7a65aa.0.tgz","fileCount":19,"integrity":"sha512-i10R+Rw0pngg5sYa/0ecR2dVLxvAa5BbDLedN5iu2t9VKy13U0zjXS+vljrs02Hyb3C5OfKVOpA6kFAgf/LpQw==","signatures":[{"sig":"MEUCIAcBOiwQDPHabn9k4hpv5AxcTa0h+3G5PbdRp2sdylNCAiEAmt4HMpF8IcDToZ/+KX91NkXvLVkJN5ImPQ1DabGinBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhATCRA9TVsSAnZWagAAov8P/0vT5R8DGu7rTzAzAg1H\nAlH2ytA9PXfM8DA4V8iG0mRbxHQ95UwVkE2ABuKJ13sMlTrIXHNyoLzGpeK8\ntZJmBJtPvbEGEy9QKdhY/jVIVbE3FxELMIdDrJ6G+3YTBXmFikaKJTdoDXpO\nQCT06/M8hpNZWthFaiEmW4pGZTomovJVcoYKt6j1wRY3aFVGL9hw4mm9pZy4\n2CCOtHlvOkJjvxgHDO5JKoXhvUipbBNnlWcPCLzuQtzVmyKR3iXnfpgvEcIA\nyDqlLLXi3bhN/cG47Fr2MpUV/O8YtxLT11/DQJadR67LI8cUyv1YpX9vt8ye\nBCE3bEdfCF6JW6h/Sn/8DmNgcgL4UWVL7JrgkSfqdCJOAZ/6kYbeW9Kw/TOC\nmuo1xCNGRkan+cPWJ7vocZ5hrDp1lB3eZl5Pu76n+ZCQpBH1i1fXkuZrbefi\nZElAFjsIFNLUIoRxCJ4zu1KBUnzPvcQ5+yW9ehScyYClaVmIJqPJ1GedN9p8\nTnlGQMVRZ35uT7q6s9yB3HwvvPQyz20J34p/bPAhjX/WcApzjZcJ2JDtRaXJ\nP2bKAGmvX15QYBJeF5lr8umuyXtF9qFump05R7gn4XZCjpN8dxjiXHCq/HzZ\nMKCwT2YSMNh6HbfJkNCjE1UJ11mKbxIbvPsN3WuV7HTYTNCbH0mBIyXEEQey\nxZvJ\r\n=hjUd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/shape":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.42d7a65aa.0_1596067858710_0.17092601824438924","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/card","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e557fe5dae0f6d6af0b20cd6126482f0695d76a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.85abdabb7.0.tgz","fileCount":19,"integrity":"sha512-HbRvkBODXIhz3jiJfecp2zRlS/OwtAhnucKzB33lGdtBXKI371OM222wb88kbj6YCwvh6CLI8Udd4Yf/OBdqSQ==","signatures":[{"sig":"MEUCIQDSPhQEGNlAJxiL3BTkbMzSOQxTSZVQ7IMqwn8sDtozWQIgcuCoMqpffp+iDH3s7L0HQNDbAzYpnEL++Umo8ojMTjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEzCRA9TVsSAnZWagAAM5EP/0NF5L6rQZNEBfpz6sYj\n7qGcd1BfrZTC9jdTrtSQErTbohfrs+27lNmkQBSlGboJIJHwIJE5YMGsai3t\nehV4Z0KCxOF8LwDd9g3pgwucSDc8WXOHbfLVAfW1EddhgQhJ8vYh/uUGZXFv\nMC0iEtDKFeyqV1Uchg2UulGuusoX97B951oNMFa+0jTVKVjC+Zv8YeiLgAhk\nBZNQ55uQKFSxzpHVffMIjXvhtYFIkMYSshOta1XpjLKYuviDOjeqtAQqo/bI\nOECm9XZGKeJ8QJEh0JkfW2YFq1oJCI2J7aBEqkD5/fV4PBUMygCbSV/ov6aJ\nj9gTBNLwNIExPL89ZRqss8Usy8qHpNJtE0eFg5pIAKa+ZYRwQP16/UG5Lhna\n6VQsHB8sEEX2VYyqCKkG431alVPk3FfLPEI/cNAYsSMjNjBgPNPB6DzqvF7P\n71FCwHgkgzt2BhXe3esRN04L5DfQbKlm7wSp6NM3v024He4AIswbfKKfiHOp\nb8MYPqQrlTHhE6LoAelYYW+8X0BOWXUP8XCmrbSplLhHVmf5De7SA1m0GCJG\nnLWMGkTFVIvDEXj4lQ0kvbYWDE5opit356Z9z6tURCYGCLspNSft0fMKmYZg\ndwvf7Ov7PwOzYEDDHczowVVKnmnhDWyO59QuZvgPCiG8iSEMt6jk4X44nxrJ\nt4Fz\r\n=wu8R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.85abdabb7.0","@material/shape":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.85abdabb7.0_1596068146718_0.9751272954528709","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/card","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"027ad8edef9ab9523c7e65278b555dd7233452fd","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.49fb20ca3.0.tgz","fileCount":19,"integrity":"sha512-xh7lH+Wmd8U1jbVQnfE7EpXlV1mRxYXvoGHoSPd0F0xm03D9Dcpm0u3OLs8lWg1sUdiLGlByIyr8IgxCNgnsUA==","signatures":[{"sig":"MEUCIC9imbfBVEKANiLO/K1k/pvxbMsy+GL6SPJk6wD2tSv/AiEA2br8rD+UHusS7hGIwfOO7amlvI0lJQce3GfdS17UeAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIlCRA9TVsSAnZWagAAuc0P/i3CCrB/DrvtGoGPpbX5\nd15zCpRofEnDooIjjud72YlWaMld8I+Cmbfj5Ob6XATx8ZJo8JfgiguYayP6\nStj6qeQpp8iJhsgGQltwHHVU4BIGO9hfT3Hmp9EVEr/54aAauxP7naYh3b/N\nrKRzHZiwv3bhqp1m5aAaLlh3KNtKivO5uf2hz5S3KgFmJfJK3MOVoAX8yIC2\nmE6uGmbU/Y/bDep+I1T83ytc3LjbVYe+/QLWm+iqrTkEgVEDBJT7AI5pc2jF\nDXJ/CYVxmeMKLFyGn2Kdc8guXo8kA1PilYOpEH8n4xVhPTMlS8PAGSHN4h77\nTC7ulyI8sZJa8jCbSbzr+zflF9POkOUDH2HMF+w/4cNpX0S3l54xqu8XRZML\nUf4+14GbWM0LYDGfIBXNQH4PduLLo0HSal2YsBKVNQEP48oELPH5OkHrJdF3\nn4vjCZXjpyMNGOr9TQbPIpCn74Ew5okGSKvxrMn2RTaoLuJ0b8XksY5CYMlL\nyyRHOZuxOxlrJqx/1nzgvdzZu5PObw6ZHYQzwtumQzIy+5xMtSx2AnTZQ7QG\nY/QRtWQfN667aAV8C8rbJWJlw9WHplM9kx+nBkHHlSVbpzoD4amXHemhZo/8\nwPjcSbApv7/QfdYmWdnNlsqDU4c5Yb1N2jObGUBYfO8pHJk9/20HVHqJHqYK\n80hv\r\n=auan\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/shape":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.49fb20ca3.0_1596072485203_0.9528020141988038","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/card","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ecaa049b78d27d3772d30ee9c52cbadf7bc1168","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.962d4abbb.0.tgz","fileCount":19,"integrity":"sha512-6n0uR6CiJqNsEtlYEYwmxPs7JrxR6orXt9LNnknPTvP6EeGDt4L6C5tkfoTh9FbyxjgS3kY1xS0bLZZQ+aXKPg==","signatures":[{"sig":"MEUCIQDsUPydIacaxsSwmyYQ9I1CrJeDhPw4Xg3fhFRdnjYdJQIgd+PLqPw9+qY6i3dk/TjXIGmE9nCmuqMpyQ2RCXhRBXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEACRA9TVsSAnZWagAAyEIP/REIoKWClLE8S8jT9A5S\nh/ofw6VqqM+v7+Glj6f5CTEWLmQonEcxY2yc5rJH9dZXVDM2y3OuYQa5ptFP\nIxC7umz3ySF2HI7xaygSF9jsRhtSzuOkLxv+jhRGJd6hP0RmmcWmzElryG3F\nWk1NswNTOLuQAg+m6rg8cK8RQUjwaaWvT5OM04IiD6Mx8LfTKOiDwReaixDt\nlFtLQALD9hMiADXvwouxyrTioic8o35IVMSCCBhcNnZReTe7tu5POnFkVht1\n2EsvFYllpbcH62YIxMgfO9sNtF/FbwSw2JvD+J1leAS3HOXCGB+n9cHNqOms\nEpXCiBI0L7G8a9tFn00imJAtmr1aP0xDLSO6Yj4fNj0ijSA0HZKdPMxOYNx4\nQKeP2EMlT+irGcoZctYK4COS1c4t4FUINNCB3WVixD3fxHVshcZ44Oy+ET0Q\n64cp4J+ZrwoObCzSLjH9klMU1cMsgJaX8lHmBAh5EXa2fXTg8HfgdGIFp4vk\nkBQCM7fdVy7aDIpK7aizkFIY08jjSleeFpuOCtoz5qbk6wE1aTxqbRIO3IVd\nQhZHgMN5wjwSXVDuMDKmKcKeMBgve9hGsVD3Cy8R6ik+fAC8gnlPt3SKNZm0\n2OZaRtCgKs1yT3oWsgv0uOACfrSFofuX3XxoyoqtzzONTnogRpZY2yEJ2HdP\nCkgg\r\n=AhXW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.962d4abbb.0","@material/shape":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.962d4abbb.0_1596125440258_0.2206922002191869","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/card","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cdc8d253b1c04f23c4faf08e24f06791dab2a7b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2fcee40cb.0.tgz","fileCount":19,"integrity":"sha512-8Le1wJbR4C7HJub6xUzsR/S/anF3vGROZcLy/T52Qq4HN59MxBw9E4GPkkV9JG4j7v/KHFKEGSBie3jk8pNaaQ==","signatures":[{"sig":"MEUCICzWZlwRGTR1o4aiK1rFg5xTDrYequBp2H38rytT5BnPAiEA36hgTqIEFu8wig4HaTucWEYgtu0d/KXJJ7g/M1BfKsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwG1CRA9TVsSAnZWagAAvbcP/2FkKaBibzFERCpzHXa3\nRX94IY1uT45NPLoaGClC7ixZNBeVHGP73WFneQwPF3E/XjrnzvYJLBpzGBgO\nqHzntrSBRo46Nx8fIPu2FLWPxLQYovL69gKgrNhtt5P+CLxCPR+1lkAAsUrL\ndG6Gwewk8qKgN0/3ELzThAJNeJsn6fGiZr1w+cMtUafrV89mv2DFuzCLi7Wh\nAcRAvJILhGoNdQiCaQ5JXXqTbQXCPWbQsC2+mY31DZx2jmaxDHxrymBUZKw4\n19Nw5B1IMJEcbzRm1dY0P0FdkVj0mHv9CGIg/BIyIIqeXfnOQ0HTq+61BRWw\nWvW/A9hp7tck4ztCdMJ5vJsrUiyZdYxlIlg0Kz42XmIBYSt8UcyrYsIabgNu\nNKzlisjdWgWake9POdvwfLgbCLKaB74OTlh8MoyhrDF/9o4y+PogWnJZHnwp\nxcocj+WAtNBQ9++8ih5r8nJdtNHa4NZ2uZUYBsHBsF9EZ29p8V7PKT49+FxK\nhrAY+3zyCaowIqMKqwbMSu0V7JM8R8Y6CpDUzSxhtbDfBYewXpHpAvcCzKfI\n2rR3gnTjIGUVxkA/3uzjjXcDLDVcHaI1GIXbtaySGReejH5PwYoXt3PWM0KJ\ngxohMiMElqN+MSPpJWFDP4ovjDrTQMI2Bpibx3uuVOJH4AK9RGdxq6u222DM\ng1v4\r\n=XRLU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/shape":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2fcee40cb.0_1596129716808_0.18394030713382326","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/card","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aee1ab07dcb67a0b5f9534545b774c05801769c1","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.bd5987f5a.0.tgz","fileCount":19,"integrity":"sha512-D6bPGKvBk9fkWzZn+yg02BjSlm8lJbgkn40Okj8Tox3l5AinS9nKtKETmtO4k5D3YOXpyKKlyNwpZU19gNXq1w==","signatures":[{"sig":"MEUCIQCUe8DIPWIRbXcZcUHw79d2bFwjBTZfN/I8reEmKfaurAIgQll+gEra9s7ybM1C/B1SJA0to2sj5VT/bjN7ZlgZVYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwd8CRA9TVsSAnZWagAA4G8P/0zUclZPkYoAajXIF/mz\neR9bURSq0zVUMrGSmJcpYfbifXdhtDPJfFYAQUH/Wk8RtIWKprS60ZEID3ZL\nRI11vK5thTVJTljb/1i3IdOXVaU8lkLgmT+XjXoOimFaADcQhdLOj/rIFAMq\ngy7J8YaE5dK5UVuUGcqi9HkAz/rvpKzc4yGPfzU0B9Gtq4bJsGmiVDtSQel7\nmcrJ40tiDdRujJ+9sz+H7DpKcuPsDkp/E70fspKcn4LbMCIVSoD07H00hDQg\nYT/UcAR2Ea51YCKo7hncFAleNskqaAqyz5bLd8sNMvDm2SDTbycds07HNU7w\n4QyBcMJgJrUSaw1dnx9XvAKvghnXUz8lHVabVoi6i0q8nHukp8IEok8HTAkg\nifBMP4lLVcBToxtxcLmIXMGtklVsN/yhTOyVCBhxZ06mGGvHuAbMaCzaOYkE\neTHSGBrAvM4NLde/kTiw+AiBTBFmYCKu57v0bfS5ip2FsHX+ksXNKkUnLEZi\nnt2thUYeog5ad8BFB2zFr7aWkHO3DnJtynpo65KhQ6Mpec5jz3lackAbPF+G\n51RfzuggS0V8RHlsWib2IaQV+XhxFzVkrYjDWdUOdIUPegi1Rzu327+NAJoy\nsu0oDH2/dcJ4RmWyQmVxAJmR2pOb1WeQgXlYJoS93ZQ2b7wFmHxGjsxvXjkY\nZh/b\r\n=D3xw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/shape":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.bd5987f5a.0_1596131195800_0.6557310670511447","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/card","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32e5da7b7b6db976dd93fe6e8f58f5966f4455e4","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.005e86a9b.0.tgz","fileCount":19,"integrity":"sha512-gU1cD18bzdCr+/ptKZ86FVxCxVEoqulJbRrEyHzYbdSs299aLw62cfN3fqnQJCcba2D0b8tJ2VCAQPudxI/EjQ==","signatures":[{"sig":"MEUCIQCL7H9tjHrjsFujrGCegIu1s0ZADgmQi8gLvze+4awjigIgdnMrrnOa2kQfY2oOBkMF9Jmc9dLfJUbGFvhX8AelQ/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwq5CRA9TVsSAnZWagAAsjsP/2m8zV2PINMVJ7NJ/PIO\naF3L3ahTNzDSjgA1cLlvUvNEtFZKsi1glSUw7b1KpqQ0Z3b95AkNo5ogZpO1\n1ngWMw0nsQ2jtPMntSgk6jT4BvEvdIfW1rYW9sI59xqLEVIC4A8er93ljXuK\nLvkBmzcfLMMPDaJJbS2JtVe1yFq1Nt0xuSMONgg9QuhsZhC73adw0iNFN0HO\nvxMAaGesYBpTNaWH/6q8EhjPPHv5g4qSc7mffxkHEh8ki1riurTG/2sO7KN4\nrk+WqfBD96f7bwPoMvfodXmZ7wS/CugslhrRXrgrndkjWR0Nr0S9LCpSdkCr\nJUCU548mdtX27GHOoSTBsGrTfZJjSEX6evszpD/hX6hP2TAy0nbOJYFYhU9p\nymM1F3b/boqj1GwXp85+LtzRdfLpdU/1YJmmsbX87G2N96ulXT+jvRRfwTJn\n9XEN3Oy7GLYOj8Zn1jhAQ8+bKH7lC0dRgRMZKyL8yxSHcz1HQXfkFp++GmNu\n6SDcAdWrYYZLwI5fSq45iZTvUMFEm7H3C5QUsWmmyq3WkRS5N6FKmqUI1JvV\n46UJWRUIAlgsbq2Liz71YakbUY5hdpklxcmLINboksWcgjZGpvMSBCQfOLyX\nS2BWtwxbJSYtm9y7lBpdx81WyvCE+xDQ4NHMP54WtdNxI3tWR8/kKv2i+56G\nSNMa\r\n=ZoxH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.005e86a9b.0","@material/shape":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.005e86a9b.0_1596132024369_0.5215517443858615","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/card","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"140ef6977c60a1492d75f9634c869c06ff7c3948","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e309c7c68.0.tgz","fileCount":19,"integrity":"sha512-J0wYfAyAeK6/mHlbHgqMfxB15UiQn5S0lXhWYTiT0laoELCL/JIWBaxywkN8gnVp76Wu4zId1zUdYgmkHzAn4Q==","signatures":[{"sig":"MEQCIE4d9MDgyg/1pfSjkrAKZUcqmZXJSkVdUBQ2bOXwH+HSAiBMpt57zcNYit0+9vfzmYVuZRNymLL8wyId6ADdrPrBMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwy7CRA9TVsSAnZWagAARA8QAI0h6mzYghVCLLBWPOf0\n5Lm4Ru6ogrU/P+y8sKM1sPLAIdeb5iPqQwMNLG39VaL1WWHP+Wa5xjSApHki\n+hp/VZ1sL0dPh7xLWg2OYrmlKJxUOeYotIsxoHtgi2cdC5Qcg9fH9XwLtmkQ\nIir3LyEW4GyAOSkvg6F+Au7UAcK5wMTJ9HiYXw4EE8tbv7TQ2u/5skbpPRf8\ndNdoMTd+eXf7bkyiJTJZhU99lj70Y80YDcs6Zr9himiSVZWzz/dTTXPo930S\n1xtQ2GfDWttwNWd8UgtpggtBXkIkUOWn6ASsQlibdL3zIAf7aSDP+95wV5Ty\nkyd6xO6DYRom5+fft0yhLwximxZMuOq2Lj+/dVxqpGV8DI8OJP/xulYLcPYZ\nw/YE9Dnja2nrZxRtniRAroJMikFYDp2lBomYvyR6OekDU/aTwemiKC15qKSF\nbDwuYFJDfLamtEOoHjmIdgRs12zg7ZzzjwaRqkNdRSJ2bWC0aa7qHOtJiz7V\n9m5ARVXx/uhl49okZ9XcCj6IzcdTwGZmTE18xkp21zDNOROWgUsH5UDVBVmW\n2p1IBO4eiuJem7VcOnyTCVIoTH/vnwQ/ZDAMroYPg5shaOu73y3viYa4WQx3\nOjWUrUV3S5cXITR5zKUqDPKs45CaAHvpzhdD1LD2l6J49opknh0KWJ0cw3py\nQGzm\r\n=on5v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e309c7c68.0","@material/shape":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e309c7c68.0_1596132539127_0.31974437705857683","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/card","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ef98b474b509796b2c3ee635550258934b516e6","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.935a51cc0.0.tgz","fileCount":19,"integrity":"sha512-pIM1MA4lOX8o4gwCMGlr+qMKk1K//uBIpsxlQSpoel7dsh8yUR569zlBB3csx/0OzY6E58ktdY64ukv4W4uXKQ==","signatures":[{"sig":"MEYCIQDXF1LO+mdC3c5/Jf+5eUQT9y0XqZI24DKFc52N5kGw+AIhAKivb7aQEkHY3QwFg/taGH3VcNRFJEDtbdzOa5xndHv3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+ECRA9TVsSAnZWagAATq8QAJD+AKo1OA60TjxeJ+M/\nBQzVsn7ni6MD5q5l6FIzZh4YJtZX2VxtYbglocLyDziu1gNUXheLQlAasqJQ\n3cxBTOmQtAktetQGmWsvYJkLE3za2wao0/qLEUxd2RYTpEh3JknVakRJlosE\nsD+Yhp29zpYz5nsMYcWLrlABe5KwvbsaYU6xq8bhY9AO+c1Ai9liy02nlcKh\nZ+VyIrVXDrsuj/kfa3Zsbjq4Ke+W3Ob/fJKqDh4ta/I29Nv/Yfv2uPIlcNVF\nzxqZnCHJ3h05ZdlFimk6YbxxEaLr7wyMLsjjS9ltsA3Y+1cNid8iK/C7V/gW\ne2Gv4Xj3OtgK8HOtbgoqrF+oEy1VPI41oGkNQ6m8cXs4b09+GPVjyORLKz6m\nT3r10l4IBxn59sc71RLg1xmc9X1lgG2lwL46mMZpw+ELzQLEwa4AAOwUY7Kx\n0uifmT2/V79HA7wjVeUA06eWKbgSkaWfep2LLi5+PWBVSo53lXZiDSK57bb2\nNe/J6mOuc/DmMfNAEaZ603/h1cCVr1c9gfzFI44ABtdtxswKbocmb3boxuO/\nZIf/I1PzqtHFhOGCnWthJqDA2vJTPY2pdoPnXwV+bsMAt1zEaI4HQ95mPB6R\nsCKUL9sz7cquQDmDkjooDhK/RKmIqcVA1EgcWOWPJDd7oQJFd9Ngzysc90zY\n1Rci\r\n=kNvL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.935a51cc0.0","@material/shape":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.935a51cc0.0_1596133251576_0.07181118006951404","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/card","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4acda4c4d35f73374c32eda165131eb8193056a8","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.74839da7b.0.tgz","fileCount":19,"integrity":"sha512-PM2Yo9ysZSY/Y8AjUicLGU77NRQ8yMTutq9F7CkFmEU32SQJPf9+DLaVaFX9rxOr1p/HiU+ZbaUinSvUcaWQOw==","signatures":[{"sig":"MEUCIHZK4sBDBAT8ctF4blcxwvZMJfOzynR2MAb6OQhncbnSAiEAm7iBBO4KLRpanPqUqPBLkvxdIHHlPXZrjMpv3+7Zwak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxIYCRA9TVsSAnZWagAAdC8P/3eoJ3xOuduP9/9HVEL5\nsxVT1pDKPtU9n8i8CUFY8fqrnCozdbqRQg+y1A7xQPXIZ9c4Dyh1419M9z36\nWfy/RISJYtSnNWQKh2Ql3P83/Ej5ifAIrWkYqgtQVCtxDBuaTDpoXP6FcVio\nJXCfpGc3NkLMIEhaJSI8STBiU0+Wrio1YCJMEoxPOVp9UAeAzVJmcTcHbSxY\ntfXC9Sc6QWz5IpNbpob0WMkD2opFXTgT/baOZOBT0suW4Xy2v+9IRaHEGbfs\n/+VLAEj0s+exHtUEw69grlk2l8xo6fMvSPsKv7DllX6NAw7FH/B0Ql/55YZb\nLyd3v5tOxQL11QWrqPz7npaN1IfEKlIXve2fRBx/1xqos/0qq+j0QaEpuLy9\nCSGU32mCpGRS8GoEFN8QoKjpvQ7xhYHTiHYBv6kWwvNFggkquKyUtIsUPZim\npkxLmaswZTgY1pCLjwkihEE/SYjBF5yoaYdDkhh0Of6tw4EK8Z2Ft7ZJ0tho\nOZbnQeX4YqLCit/+VLFmAVdNjrsDY1qGs7jcdN4R2GKQiqEgWksYy7BKSCJU\nDI7aUW03e/JatC4O4E/dUFrb8iQhlfCuFJ+9iwi/Hf+fiyVmMuFNQyUPrnex\nBklPKmmqgFgcBJfaDnXJbXPikcz9hKnFWk+7ZjWCccbn09kg4X/Ef/SwJI/N\ngRpE\r\n=m4SM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.74839da7b.0","@material/shape":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.74839da7b.0_1596133912215_0.0625484552633937","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/card","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecab3fd76f6859c9b9533a923ce27fae62a8a65c","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.f041a48c9.0.tgz","fileCount":19,"integrity":"sha512-z8FHQ7/x4wvhztU9vscJBLs5VRmu+/xRPvek/FM/eIzd8b6nBfk7bRG5L9FaBpm6LH7/WJHrGBluGbIlmzbaUw==","signatures":[{"sig":"MEUCIEvlM+Mzh850GCv7OKX03bo69QX+mOQ64bUBe9nlMTfEAiEA0NHQ2Lioe0cMXDdvStsWtAptSySBAO/0RGW/E9A9v84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1D7CRA9TVsSAnZWagAAnjMP/jNca2cHKeuGZZB6250K\ng/V6nR1izSQpetOf/Ep+sJ03bzYE/91bBOlfcIWA0aiu5yztqzBXwYaKkp2y\na106iaBi+V/QMwangVEnR+KCtUmX42Ql9DufQBE+Q5KXZTzCVJrR9j2eB+YI\nwgrO/tXZ6Rq76Ym7ymFms0uaRwa1BQT7RBNjyx3caEFvrZ+Y1zvMrl+O2/nA\nbBeEalMySjY/RcaGmBlIXaRqhj81rC25h2drF+jvd1Yb0uU7IJ5kqDOtvM4U\nKaBogyLcH+aB2MdpRui93NEUrIEFBqciBNqgu7YoIckGyFjkrrm0at/6cjm7\n/v2mw79Oo6ZJCwmm6MlPvATC42PzhwIJ5eX6Z7JlZ/nQrdyAbCV8emxbwTl4\nASg+0kxIfGGIoTSOVp5BiJSvLjMCTDb4WYu8l9ISnOQ7kOr/4/4T9NAMmo0n\nIC5H9P18MpUqa3zuf0EQ9WLgDPHgHo9IER2LGwpRtkjaj1U7FkIxgiRs3Wnm\nuep0QoREnNO1hdGOTbGgDdWTvtaN603W0yKQ9fyweI+QRG6rZfXyBA81MucU\nDMurz6StnqEOjWiXIeLzFf7jxSoY713amyyxOqQQJedzKGGlnfG/KpmUu+/B\nMVaycWyKm950TmnlDqgu4D5RmwJ95Hqvyz0IXhyDiOc354ZeQy/hwthAD9Py\nZZjs\r\n=IRMs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.f041a48c9.0","@material/shape":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.f041a48c9.0_1596150010769_0.08779888279683079","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/card","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cba0b42d91d29a0743e8e4742fd9ecf5c24718f7","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fbb1381e1.0.tgz","fileCount":19,"integrity":"sha512-Q+yxCq1pCEwDwuKMfB1Ot72PMXmOrshuZNfl7M4Rjm0CKn0v8tLNFwTdyhCooZqPCLvaSp+DmeiL+IVowScHVw==","signatures":[{"sig":"MEYCIQCxVfHdai/T86zyAgyrygIjLgpylKj+gHI97YyS7+hEfwIhALHlHkijEVeWVTuAP6bsf+tY6qAFYMZkD+XuOxgQQ31P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3dCRA9TVsSAnZWagAAAtwP/AiOKTKBPBYFXhw/J5gH\nNgC037IKTTbcr7ll161RZ4pQ22SN6cYswERT/EqCFrqmMpF/Ae09VwtBvHZg\nKMYc6DZZnSkyC4YXZ068ybA7ROPBTTO2s1rf7i8ksBjBdEuYipfbw8TIAe1T\nKtuXxc5yIQk77yySoOEW1dVRp7G+89VzwskotES6tv8AcivmR7+0vQMAv27U\ncwvblXBNIfR1l9w5a+7Iwz+nhkaGINa6Iw4SLfUdEyoPLpiGnCXAbvFea1Mx\nXS1Imc9hPVuff88aPBHJAuymiSCzqU0Bkq0hQPYTopgv0dNG3BWVIy+Mu4fm\nNeRYQMrF4SsEuW3lVx+eNXmXJqWQ/UTFrXZxHPQ7YrL73GeNhAc2Qe9L39rE\nGgMe2UmZqcmYiEggJc5uQEBbnTmEgyy+uwPCdS7YX8yUJmcOlUMAPTNZmiVh\nZWDj8qNWto0T8rbVS0AWUk5bJ7rYruUpf9wxCH17BA66OkhNiFNxZ3V5XFeN\nSW695uND3gJrE41GHFv+WtDjRngZ3N4NeQOfQ/2X6aEO+zBTt3oc7nU21cZw\n8r9nULU/Anbll6eFTByWS0FvtN4LBFGmiTPm3N7npt19AvoGH8DFSsgH3cvO\nmkIjI5FHGi64xjI0kxtHF37a7hp+Um3LaQ3hBL+fIjPLHcxLQ3q8kAm78lrV\nZUO4\r\n=giJN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/shape":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fbb1381e1.0_1596210653201_0.1371200784382327","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/card","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bb298d07f881e056ee141cecd55e44d7ec83fae","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.7f61d5785.0.tgz","fileCount":19,"integrity":"sha512-tpXX0xcF4VZcxC82RpVBVfAy/FPGTjQRz8AH4CzSKWpOSlhcQ7gHuSo6GYCaz1NfVZqSsTM5RutjV2vXRCv3Eg==","signatures":[{"sig":"MEUCIDq/8D+XkERk0ocIJKRnpixDa5v+ngu+MBRwSWYQQrqCAiEAnxTvToxEPyqIpIFJ9UZ7KhVfmqUE3NKIXdrS6WSwVh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOQCRA9TVsSAnZWagAAu4kP/3dw7zOJOUdAJ8DDrkSn\nvVks63Cnr3ztPkquCbSUw2Ch4gPNf01SvoE+Qo2ZjeLq1hvhusljAZpNmilV\nRBRLPE7CviP5mMYSjApBHSnxrdV+o5d5DhWQu5mMxxuzMeda26APjA6jFXkA\ntMwiMP3GTwcEgepoi65GfK4dlwEFEFKiJIhXg19ALubshV/rJ0sAqLPqGLR7\nHssFR4vvomqpkIihnJc4ULGl1h9i1hTfK/clYrhTxaleJTX/xlZXhpS4sSvE\n3H+ic0bVUxs36NIcSewpMYjEuBQuexmlyyv+HNGXpDJ3aKyteRx0lZQ3OLlJ\nMwyynumf/YQoGzclCQVyJH83AvIEiRohk8OthL1aRlgkbmPPuQD5dVelYHuv\naIHf35Qpp1oPJGjybmgD24gQvy69j/ych08GXiCSZ2crOQe+Qjsy9tI9R74P\nR840bmHCs/r0i+nuxxhm9YkYlPzKGiV8HZUQa56rM87xSTyX0Zgncw0zUynw\nWYTdAbFTgUda9rIrTv69EinFtj6Wdw7ZILdV7FHSQRWuz9fbCYIloNq2onil\nSheJBDNeY6sM7AiiZRrRpY8RiKf7RN8xnnETO9uY8+5LDCsVE1BPf6uRAYlZ\nCx4t2/fBawIY/4ws6ABOy2NGxRY98Gg61fz3bkk+5h6ig8wyst6bgFa+qkZ1\nTnKZ\r\n=6tY/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.7f61d5785.0","@material/shape":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.7f61d5785.0_1596216208288_0.15047953967897598","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/card","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84cb0fe0d123987c8a141e016d3977ec67f242ec","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e1bc84d10.0.tgz","fileCount":19,"integrity":"sha512-imnqkSWEDrjJBoceJIousqNBiKwPY1pADOQfcM8yVn8Jz08u94R7sz5s7icmcPKlomlPSUD6phNHArYaEx29Aw==","signatures":[{"sig":"MEYCIQD0GsM93jdLfmE1/zf/UD8jxquRR2SbsrugW3ecS6PusgIhAJ+4ssqP+bfAU402XPkwnwI/jII/gzNMxElN/opWPWbF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6NCRA9TVsSAnZWagAA+TsP/iIPVrGxMcOPPLx21yP2\ngFlMeKXlgwXBa4lg3SjQToSRK5eOK9+qeztfEQIUOZBpgjpQnmuk7P8Kd2Yp\nbzUtDB/dpICGt2/eCfjjxi7bnRwPiJ4lnO8q2Fa2GivpKG+p3BmhtI3gN1A1\n7LTc3vncR/lp6VhJ8b0bwMgeMpXR2UUsbsNu++u9v5W1qeZjXy9zZ3asvc4O\neJge/6yAF1IXzaSnrGMTGIWHeld7Ygvm7RG1JTiOK01wrJ3/sHY0dMZJGcL+\n/plvyFS7s7OLxrZoVImZHIfLffUFv1BYFl1sZMiVcm5rK2MDXrZvZA5nyOUG\n7B5FH+O7+3nv0Ke4M6pTdNg10avBT2pqyK7TU6z4wg7dcEz7alqgvWuSGk1G\nTm/zpmhmkcIEpS0XgtyVsnEY2R2m9m9qI8QzDQl1N/zCB08JWNH+B2ZvR8VY\ngfku+qyt2FcJ0E8EjxWXHbUIpmfI+UOe8FyDGLQ4+48TGSeOvo11l3hT1EIk\nwGDm7kGGZ9b17GNChrG+64WwlNb1U5EZWAFbYl3RmtcFmhsToUD16DKhn9iK\nMF0E3Rn3OIPaB1+WKHthKBZ+P6Zm6TnF7WU5JFuf4D3eLRUm1ERNQS75VOvk\nkh/6MT6Hr5fw2Xuhnf5aRYC72kYrGgnj5lowkzDPdX49TjBkMnFeBMtlo+BG\nT7OL\r\n=vGvC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/shape":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e1bc84d10.0_1596477068999_0.8796324729572327","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/card","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"157d71513a0f7776253e558f626b2dd84be3b14b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.096a7a066.0.tgz","fileCount":19,"integrity":"sha512-BfKQOseva6KWxG9fO3ksARGatmCLEIKq2tL6vnwPPyYiA1ap5PvM0moJA2lKkaJExrIPKf/Rd1pyYCwUktH4CQ==","signatures":[{"sig":"MEQCIEQg8YaRElzt+Ck+kscm+v8wmEYn3AcjJVeoTcbI4VSlAiBXdnkXLYRvllMYdzDwDMRPjJnFVvUfuJB/vA5wtDwJlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9ICRA9TVsSAnZWagAAu8kP/jFciYMthfPkpAR6uQsn\nA6M3iyiLpkDJ78CVxtG+dDDy6NdbzQia42U+w23OUjgSwo8nup9e93982AWb\ndFZT+d+lISywt9gvp+hO40fOkkh9wo+els/mpZhJgo/IVt4cOpigFnf/bH8+\nnqeheBrwNK5Cda24HPF3AVKTwg8HfxEU0bsff5QFFICZOeykbaBmNh6YKvcU\nuJZxVQUcgPuc03/Q6vNCoeUldrReWBJGrnTO9u4mr/nEPiAVJ+8HDp9oQ9YN\nUX/SzjvWRote0ihAwytL1uJyegQO5Is0HKr4s4lx21GimEpkDmhrRrjk/PtC\n6pCeMbbHUPSAcvM+cFXyTmJhy2AbDcEyWBR1fjHstgYApdCNo4nZ9k8w9ucm\nd/d/YoiUy3rpYLohCnlOr9wHWF0PUQCEjUhsRkNE97gUGtzW98ZAtGC7fUFY\nVb8Pdp5lKVdhdN69bE/na2BCPyGMXW1J8IIvdrZOdXno89cyx0OODdkg0iXT\nf9mcT4V2/JJUmr9ArpoJNTSHho/DWQlz1bxkZXomiS0QeveTEN7a36DOi+cA\njrhUQHgjWHg214Gq4O+f3bjDWMxRfTWfGREXOEzqlnM/eFppkyESrSZS3zYl\nKNHIUBJqJ32lZ4cijECzd2o24fb4d++Fmh52Jm84vRavuE5AQ20QL/SwgwJd\n8oS0\r\n=Haly\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.096a7a066.0","@material/shape":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.096a7a066.0_1596477255886_0.7764007057383147","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/card","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab1ddce687fec9151cfb2d229eb9da80b1213608","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":19,"integrity":"sha512-Dn0bHNuCsIlFCeeVU+54VAe7gkFOfBKk3PbnVbQQi+orRpM2IR4zYtn2WRvIc4Lrx8oXOO/kjG1CVNjbM1paxw==","signatures":[{"sig":"MEUCIAq9jidhDABGuteybcEorknbNUwg9J4D91A/jI3mNhFdAiEAgJviIAcHCSS2IfWAaNk5vA+VsYGt0E86hNvX9NOwOHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9sCRA9TVsSAnZWagAAZwcQAJKXAKscW3AxSXfwP6mN\nkdy78/Gpb6JUJzp5yeq4jUBz9E+d2Vmv5waYD2kr3Sv0hL3WzzuqbSjGga9Y\nWddxMoer86XCdlh6Dc2w7+cwvotEld9bsXwH8kj7byPRYnnvF3KPZKhfjxcM\nSW0OnfDPBRIDCYlTCBbjeIxP7pGSQrV8tuOuqVDdXmo1RBzwYqRQIGFOHsFX\n1EBnhLeG6Y/TCamMlSibUhyL2lnNVK9LiFgd0F8DD/k+76ifV/6abeWUPJBS\nMaEyTpvpepWADAYggeHEliGpBmhlckMhXuicfGSKS7gD1CzOD/MH9czbbmbL\nSZtQWAE6qKQ3NrvAX2+5+vNa+8s+f/vIQfYMH5yc0EqGqacPPC7X5E4w++Rf\nPyzdYtAJsSM6R92lhlmhKqzZki89UTcLE5W6XCO/tPoGBJKaaCW8ErBH/YqG\n+2bEh0cCSy9IvVaTrA/UrnPyNGsCJ5HI5WYi21PpLtTNCMLyM/oDmIQilB3K\n4QNDIR7ofMRnPCbBfBsxS4Eae77vBIWd0assT9Suh9Dodjt6mcy3QFmylCe5\ne4QBOTgV2wLOeGDB+5E+ifUdK6ZCJWcsqcOKqBcyNerXWugXoxLQ6nCLvVCD\nyBm5LKpmK199hkjagqx9RU5dUj4XZa+31acjAaR7B06X2+MJXB1iQ96c+e1M\njtl9\r\n=jLE2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/shape":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.aa3a3e5a4.0_1596477292467_0.7213410682215449","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/card","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"287ae54355cb39a6adc3acfcc7c6b63e8f8c5f1a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5903d39af.0.tgz","fileCount":19,"integrity":"sha512-BtGqm18mkd2M6oTWpnBK818iTjs7SlLaL0ST/Um7ePAhXK+ikvGsJhf5Rh+uUSlhdGgLB6EV4I2G12B7dhTLwQ==","signatures":[{"sig":"MEQCIB1IKa+G1aJDyISPHmGFW/dM7RjxmL/ffKSqqe4+M28bAiAO4Pk3sRy3eVIv/MGkPXhf1+Wt5daIaF/PBLoU8oDTLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE96CRA9TVsSAnZWagAA1xcP/3OyLisNgck9B+YSqk/j\nP2Dae8D0B75BukhXkubmIxDx0meY0ahiq8yJxB2CyEYpUyP84zYjg/T0TAVI\n1I9MZROOYYdBH8866kw3SoZTXihLDt8k5GaHsjGOBMTu4KgxJKfqIKF2W8Bg\nXsmOSKf/tRAuNaP37dEIhSg9BYLMDyrV/ZEn60SAq+XZ0se/ntKqfhAfaAF7\nRItfwScc9Vvwd7z1xxb/jjUn2d6CcViXf+GBHVsVcuvMdnxcm/7U245yqlJV\naj5EA0oquUZ1xbtYby8PlGPnw+DPmKf6/S/y+KUniRGCChnYfLdf7L8xfqNl\nh6JDEIiL0OuzmYKSx2ysz5Nke/eTfSTLWCmUiqw4nhwK/N6I5/r4ReUUuEio\nUXgevYU/paFtRUY1EnntKFiKwD5P+oXk4FkDaNGi3fNKQHV+xVqQ2esLGNcl\nzm/3npv7sOiacYFdiMGSP2vGp9DYs5a4ki0vvOnHdmU1PekwqaokddecX+/V\nC9Cg+EwfNX3BpIigoY+hI3xiuvMXtoQPBHAiYzE5SJoLvWk1KOI6vpQwokEF\nAj/9qITJDrCg7AyAPS35mSgWSk/4OIT6CR+SM1q+pqKIqtN2zmsauBBfMb6J\nXSUf/zWsIWNGyWPzVAd/WgShC5KBmnz7KARZeA4SatE+BWneGLYykRib6upS\n2Ags\r\n=F/n7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.5903d39af.0","@material/shape":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5903d39af.0_1596477305752_0.6575915047138348","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/card","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d71e1943d4bfa0fda2c7b99f8b49a7b0e5e97a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.72258f898.0.tgz","fileCount":19,"integrity":"sha512-uE0c4xTeLxDhl9WS1CIdi1xTbjDFVD0D6rULhcPMYQWBBYAA08ZZsu7qhv/fZN2IYCn7l8ONn8b9pJz+JXUeQw==","signatures":[{"sig":"MEYCIQCojE6fGO5oOBmWG7yu3jeKlVhmUSklqPS/5JSWwp2KCwIhAP+7VIovrriO/pF05tTsWIviRIwjwCPtbxvwMj3DvJd+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLc9CRA9TVsSAnZWagAAamIP/As0/htnErLPKMJAnTli\nmuSmsDUWhycdkH/dN3hYuM9vXIMyNdaKDqQUubOgeB04lzVlrxRF11aiGcXd\nehx9ARP/gGl9ecNdket34ixK2c8i9JbKa4uzzBX+YvqmHp10Kc/7P305yEc4\ncq4hPCSyFm/jX8bi+XRSAY2j6l/m6PeITK0Yef3ZnURILmvX5ri+aCnjOUnp\n/28izgfmQjoXUvvr5pw9NzuJL0TqvEwdFyNaioO8jf29s0kQLj6nbL/VgY2V\noj2aSqs8M/v+H+q/r4ohE0BYKhsEnyQJulD8ODRejLvVlVf20ez78jaXlXbo\npo8JEaVjX31CWutcdYYXcCDjZlT4hzgZVb2RCuoZ6yiKhmjpzNxRS9u+yC43\npEDjwkaDq4c7TVHfLCrjH9R/lCrup1rbOsAOfaxYQro2hJIyDhyaopIFuD2v\nj5bR4+5YcXnpyiTpfq7RPmOhlHEpTHvHKArBEpdb3G7QTQy9sEIrY1RSf5DS\n82bnV+i3xmJ94nGNSy1+R8v6GpRLItf372slnp/Avke6HzBiRLO+fSXkZ/at\nN8Jv73WnjLQu83y7rIypga2E6iXWIYCwRBVmuWUMVQMT8meDvuMTl6K1RVQq\n7pM28DcRiOjmKwKLo3Zx1+Vw6a0kaJc04yxtsSvQcSG6jhdoqNBiaJpIUmF5\nAlR6\r\n=xyhL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.72258f898.0","@material/shape":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.72258f898.0_1596503869194_0.9669518732604807","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/card","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5869fe18e731004f0f6175d3177102ce052a9283","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.1b44b43c8.0.tgz","fileCount":19,"integrity":"sha512-2LsRLoEDcJdM8tTt4ai4sgm4ceuxE9vI2U8rBgliRQITJ3U43B2qhQLrkc6KYtOWpiNPfEleG1mRM+G1bta3pQ==","signatures":[{"sig":"MEYCIQDPEFfweqoDFAbaHzd3DfAFLxSwz76jfqwJLtV37FUYdQIhAO7CX4HQcgluyoRbdL+j8Tj414yCWIMiMBxuvqPHEAZu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFvCRA9TVsSAnZWagAA+rgQAIpbJpyoIoQhixc2IJqJ\nWo0KoqymmmINEpldBgMIA622cjTRXh3ne7xrBE6WV0834oEI7XS3spItkaTW\nWHVKjCxOfUmMsGiebvMv331BbU8xpP237RCoQAAt/OnYbi+tesRMFDDmJ9NL\nAYfmlKwuTfPniazr0GPoFpJMsvHVbyjn0YKW3OnLH4pNA9McHZneV+RDGAc5\nL1ukN/4cN7uT53w0Q68aoyGXLfItDFttOfghdVJXEOSYJJNByQnB6wP/E96J\nCc2A/u9ZHSZ1lBgm4+Yc7lgL38X3ICTFpomEMxCdZBhm7TqVR6WWuiKSlHEp\nUQ6q/bA0+sMd5C1AaESDWdikauHojVH5pVSG3kLjUhhU5AJql0YXeEn2tW6/\nPb1HgEcqosRHTzQM8MdQc41VTabK/vGqLOmTx9jtMV4a8EnLinGvMt1zijEg\nm5PtrBZVq+Tdgcs/0pl27QF3TW0y/W238vPdAeWQ2NhRRmz92mDiq1rS7drw\n28Y51QmxNaXUJt9YCRxkyuoHj/pW4oFh7M/SLBCmrH719N4K1yI13AQ6LXdl\nuJoRFCcchUyYLte55BuEiRtgrSQkdOwt1jsmizRSSTas6nlJJbyaXAkoD49r\nrIX+LmW8aRgxgaMt2USOYAcP2HHjO1ol91zzH9cA6/kjKXLvyxPM440xms/4\nY0nZ\r\n=y0Sd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/shape":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.1b44b43c8.0_1596559727186_0.09911103212055439","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/card","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee1e6f0f00306f24827fe371e31c3de5eebe331","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":19,"integrity":"sha512-5IxXj/Obsqllr24NTxhqWxgPQhqGYnycdQ3P/eCGIXw8zKI4oBy2/j0qIlDfUFoNpe85uTTudLW6Fut9L0PbvA==","signatures":[{"sig":"MEUCICtU4SrkfOnUdZNHoqQesO/i6AGUO/oCEtNoQGgnmJApAiEAyP8WcYM9bkk7oTQFJT6QoBHxR9yauWfhTdifsLYIvxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQJCRA9TVsSAnZWagAAgWQP/irvpTMoqxKjF7w3m7kB\nwPqx1oiITw1J7JJLta50Mpa44tkoBGKuAvjJ8td2n3Jm1BjbptgO9LBadRRu\n26BcDDRRcBpb02XxL4QXbiIQuOzg2E7t3u+jQBiRpih4tymhuaZktE0baoTn\n2ydYrKbfCCZLBpDCixTc6pdBXCdX+aqhVrWQv5pWx3z2exqjuSQIlaEwPA9b\nOm+/cr+p/F62A8PRkG8cpbYcVsVOu1kTeUcJXh/wGSBbp67Gf+qp2fpABAyH\nilxgo0EOh09YCLxs7URHGfZ5sHaH/3qRXtWSDOVMvwUpMibLoMOm7c+5rLOt\nXbGpjCo/A4q1w2lI0+1C/VVSrzxmg0/wXsKxpCbfXCn9QvEyrgSoNXACzl/6\nLempK1ldCSgj9Gyd5+NZaqaKoKtSH1+ywNVf8R+gLR0gCDtyn/5yJJXujZG5\nrW3pRJj6N/i25aKFluz+ZVSfk+KpAHzgJDLDztrfenrhCM1lvqZqRsBSXRqS\nxRDOlXhTsPqxzBsfZVMFqy87JofYi0nv8mGHNLyYckUDV34y4tlJlAtkMEl3\nNzNK+5mfxR8e87+igAuvykV3ZYdAP4IAsxgxNrO8FbHOdDkBa20Hm7dERDzu\nSuAwHq/IG9D1QTT2SRlKn8SYrmXGxcFh6zMaSGeP11fzckQbJu1fVNzD4VLk\noKMd\r\n=TQhO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/shape":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e9d2e2f96.0_1596572680824_0.19325965411803026","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/card","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3c5da9b4ad5d7024b8b25ee14940f2947f15666","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b9dff0a19.0.tgz","fileCount":19,"integrity":"sha512-pGaaW5cRh30akH/6JKbaezsTuDOxcebFL3UvDAE2+cFrcvAnA8sT+k7SZX/TkjRyOUR4CGKU/t0nvXPic2SILQ==","signatures":[{"sig":"MEQCIBVeOO81F6xSxgaij6Tl/tXxv8/np/w4j7BrhMVaDe5+AiA5G1fqyOJHvRmi1ZL1WVQe1fog5+3+rDCvhHaCn7GnZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiw9CRA9TVsSAnZWagAARxgP/2RQQicxZPG1A11hG7IN\nBCkc+EwJrHtnV7xQMYM9XK1ShE2HRpOod/tEKukfZSqY+LkNjorxL5gRr0LR\nWgByHJnLPYW5N1FbVuvl3+x7vfIZNyYDB9qTpP/tLLgabrcC6wIBbIrKUyc4\ndqLwuo553xsHMWwOlKlL/GchHV3lMZ0J6YFdYQhaMG0SoXFtYbn5lhoLueoi\nZL0WEuBkM9hE2FrZnhUWdJexYAqVR2It4mNIuGIrUeyr9IVUF+ZUYkWK85YL\nqxtm32tDwNa6mvkt08r6iF4R9hQ+keSAsUBd32i3rTzxa8LPmmrl7l5P7QXG\n8GdxG84VNM2y/sJ/uYOAn9yayCt/cF/80oNYcSn+WYP6EWfLmKVwr2ECrL5n\nixwpqwO80hFg53v9bhe8M8GKcZNImMgDc9Q4mInWf9SNe8oAUlAKnNLLNjmC\nlvnGlghXjKwZ982WxGNS4royCCG7bucO8R5LAjby4zeSIU5lQkcbhJzLz6Ue\ncVqDh0sl6cnJnIm/AAeGV3zTE9+JDvsLeeOSkQfbWnp4eX7Vtj2zOwXtyBhw\nJppiaSQxF2KEEYY2+IhvGysotoxLnEBO31BattS2S3PgIqq+ayEf2Zn7dnpk\nwLDueUEVZjW82h8Mxk595ZeljLUDxR38mHIsXnfydEY9TTj1JDM5QVUMZyhE\nCc8M\r\n=/MQM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/shape":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b9dff0a19.0_1596599356420_0.03931289786419301","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/card","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820ef4eb8ffc85bbf8d40f57637e4ca750f98f9a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2bd09a706.0.tgz","fileCount":19,"integrity":"sha512-8V88YgHD3Y4Epc6CkPD9J0sONH/+9K7aYGnE3LgkAjUdp1xqFC3aYmXPyYj11tYTK0eDO/rGNMt3N5o7Plce2Q==","signatures":[{"sig":"MEQCIArgtjgoIzXi/EfTo75Q5ffdxkcG2GdZZfR9qrKL2b29AiADDoOtAjjYEK0qgcW/bJic7TafI7skj8cbIgWdFUq0nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi10CRA9TVsSAnZWagAAN2EP/0XWuPMitySBU4FP/tEH\nAMCNU/kdVqFcU+5SoePk16u7/9ws9OtlN7412LR55OtQQiQaCsvHYoluBzje\njhThzxWyIfUcfcZjiomSmhAVLmgIiRDiJ4hY7f7onvTobQMjlUr5GhHCcLHW\nD15QbIZCeNFbtmLlPcnuh4BWtG2ANWj81o5n+iY6B8B2NYIWPBDKgbnk3pYb\nadOr0wkV2aNo1YGQWgFshru5tsW4qwsBK/lVaJ2IyGLL3iwD2lvk6nmwDr6w\nkNFYJ2KykGzeZ8AI1o3jW0uWxw8TJ97F2PArPBtq8/3TVltXyhfXEg6Gx/R4\nhuviaOu4H4EUit+jfX89hIAkPx4YGTnwtYby0LR+MmxMGBLDo/MLWDnCsZk3\nuuQkafT9jpOf6Zou7jaYCdxRvDeeqw19Lt901y36k7bb85qNxTv2NR1xQ4Ie\n7b4ywKVw34sfkgGdp8A0g4uI8mB1OnQqbshX2LBV9yhAUdUPswO1uZmeEq/x\ntu8tjd21mAF3nYmW0naz39ZWH4580i0tnkQ3m0y1LHEnH80h5PrnYC1kV+xP\nKAwP8YPYKUtskxiQ+0zvHBMLy22gLTbQuoIeGHcgc6VgSb3pByAVprWPpY/w\nNryG2Hb0M5E1iEgmZtuYgqYRNh6flRoO1sTZhJbgR7nWjJ/YudCj/y41gP/B\nsIih\r\n=b7q0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2bd09a706.0","@material/shape":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2bd09a706.0_1596599668147_0.6581365910111339","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/card","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30c3ffc64815e39047b83094623e5bfd559f92e3","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e0560522f.0.tgz","fileCount":19,"integrity":"sha512-qyaKZuGmrWT4AtiC8Ff0UZPJ/MtRke2ickK8WOBBeXMIHYvgQSf2czXuNbWaj38Ms64nl4MBBm+QeYlirTW4Jw==","signatures":[{"sig":"MEUCICc13N4XRshJ+ceaA+YNImfCMGkIUb/0+vEB6VCdeEpdAiEAvLHRezghnbOT6tnVhmeBxoOeUY7zZHj05aB5l1c/ZJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKupcCRA9TVsSAnZWagAA/u4P/2x1H4S5S/BVzMasgv5l\nCysPcB34h8OPd2+tF6/nZg0hOo06kwFReyICwHgEhqJ/HMTKAwX4TBWwzPb6\ntDzWcivi0B+Bv8C2ZFJBOJZUQUlLqfXazTB1fB9dJNk9zKZBqUuEzwCFOFcb\nQgSUIbGunYTmfHJDhnbEiObCSD9hlDfxWIcctr7vo54dW+XvRgJIFzkPdsiv\nk/CwYgcbBuw+Fdn751ImJblCJWbYj2q9IDZCvuQTJErBV4ORJNqg8+ssb6EW\neLwcnKh/jDWgxRvawPpavKvNwrE05CDk6SSRT5cVFleWBCGpyFGgGIZnQHjS\nDq8jOauywoYhnEmaJrvmg+332jwmPl0udp0vfIJGKO52TzJ8cp3J52j6WBNy\ngm7kuh9IdfX1MjtOxIkwJhInFVcyqlBCKzoajJzz0zKFZsNKYeMKYRPbj5XK\nnU7PpKW368EeCfyfwwJhRVRzVuy68E2D5biMNsrHqRaPOC0N6BwESoCvmxFD\nVfdYh6yUsQe4KsYGRLsIhkB2GOnvzAGg/yhvgDAu0SyqirT2S2GhvFj0Tgdx\n0icTugDCPsQ9PrHaYHEyYH+yBfCD1YW4VzKfJ58wg1AnC5vYQ+nLnDCyjAbh\nlmiArNHm+K5EYAMbksYZ1iiw7TjsGtgxuAzz8CrZ9lRsFlo8Df2O9QI1igpc\ngNVv\r\n=Xgst\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e0560522f.0","@material/shape":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e0560522f.0_1596648027908_0.49572557401616435","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/card","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d54c8122e7c3e6b7cc6d38931e70f10de0ef6904","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":19,"integrity":"sha512-0mUsjVDhQREbkCpDlGqC3dZH+UO68qxzk+WTYPP99SaJDylNIjupwcOSavgIe4HUdpQH6wRCPvC8yLcuzZIpqw==","signatures":[{"sig":"MEUCIQCmSaannYPl5MUV2Cdev3iP5H+bmiuSDpbUgixKcvug9AIgd3VwDA3JUIHiTQuO+N5OnuMIHMi1oaM0lqdhE4OC3H8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7nCRA9TVsSAnZWagAAqTgP/0QyzdwCRqQ/Bm5/M621\nmACg+udXQnb2m8MYSe4AXUp1HGHa6qAKpT/Ci9w76eie+kjsdVTOU8Qov3sU\nnGoSJajI+SbKjoMk3g8kNpUOxt8HOD65jyVTIzYXWgx95jyWOtI10ECxEitV\nN9uAzCRwrVZGnBnFzW1z4GaSvZ0bvKyJpmGRgMNrGqVRrHXYknSXy4BehFXC\nUtJAayLGT0ADtEljWlzK5wVg1P4b67onXpQygVyHnoZB1vyzZ9pesSdZ+pEu\n1j5eSh8hLpP9tesF5+1WJn0foC6n72AnuzWP4gmj+a2jmPqCzUX36W6PNrdy\n+QII5mYyrVZJfbUtPqt7QkzRRKY8WIes4DP0G+H1iHS6VVHTnxWF0bWccFKI\nJ62XHf0Lw9X45xsaC/+FEgSJc2QeCO9Yb+HK8T0FJh4xFVNmCANnZmw2zJTz\nvmZG5e4oSH7tWrTTg43mtDQCTd5J667MR62/NMVomJ5CXSMkAvcLq2E12x0y\nkseGWS4Fw4p0J8grsf6Nj1xXPXWOVYyI8643wpLj5uC12iHFanYNiELISFHZ\nBAeEIaHRYsJZ2q7JJqmIzQl4xaswCply4CCDVwBMiQ4NQ+Y70QEtDMfje8uZ\nzMmxO9VN1poWw/C7d/98GfJMGvaxzYbNbeuR4Empd0vkU9bjrE5gzjOSXNQa\nI/NR\r\n=WA5B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/shape":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.08ca4d0ec.0_1596649190883_0.08328647060017236","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/card","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"346d055e102690791f44dcb540f6f9ab24c52f9a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.08090126b.0.tgz","fileCount":19,"integrity":"sha512-bmSG58hg3utggigZae4Ev8JEiuwmTyJIDOkdPONnzrXZVfeEtnw6NaOv9drdUcAlqmC/FqJua6f1430+0s0z3A==","signatures":[{"sig":"MEUCIQD/p/MWAtliYtvo681fPGHkPYHQuUQLmT9VD4YhplgD6QIgZeJy8IaDmaX7iIesdawcxVEDEqpF/mpbqD3uVAYY7n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrwCRA9TVsSAnZWagAA2rYP/0tHkDUsVCzTEJoPlQWj\n72D2YetX7N4ulxLYN9wEcxuTm2okuS1J94fIm0PSF5bmDP4BKlzQwovZlkKe\ngVxqq3CgPe8M95WJsF3WMn3aWnYAj+FiKEV9NPmLP2wgrTUK4KRFzIJ6BWuJ\nsxUiRSYFukBGzuLulnQlZNjMt6Rwqp1VFPC0UDTPBneK+mGtqPmGQgVgB4F/\nehaeUynojdYJ/BgHfdSReomd9OZ2tcF7Sjmf7INvIF5LpGBnM8yLExKZDp88\nwwEO1uXJ+NFFk/NKU3dCwYzDmZM6iwiZXm65i4EoT82Gs1Gqh5zDIas2IMSi\n2mrujpE0ZYu15O3oCV1fqjhsr6ILVPVR1DHecr8/eXiQU9Nub459yaFMfTRD\nrJIBeNE/Q4fc40z1L2VhzNvlL4259fquxTEM8sIpTGuLT4zYQzblTHHY3CB7\n9+fNaFvac939ZfPRsnpIERodHgNBJZY2QiaUlQQck21WyVG9vigaA8JXSWHX\nNx8y2uBucd9uyu1IPwMFzPASHgBPnNZaRv2Whsp0TJzto3aiq+ujZF+fxK1d\nSKx39gCt7W74vkiuPy8X1jr9JkEMrPMB2VYQUjb+x2ViF/8OUuQlXuk59wcW\nQnEZaydEUkdsD4rwVKFhvfUu6h//sqzR1TDxv9li4RjUe0hAnmfJW93NksSZ\nZRWq\r\n=Lhu/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.08090126b.0","@material/shape":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.08090126b.0_1596742384421_0.49248612155005844","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/card","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be968b41298c74e8201d09665cb84aa9d793eb26","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":19,"integrity":"sha512-tVDlgjQWId/mf3eoYZo7r1L9MjTQvYTIcCSC990ZtheoTqq5LLEgbLgyQUGOPGkCMFXZN6S4Avi7klMG2LuB6w==","signatures":[{"sig":"MEYCIQCdHAN5qhg1FNlmzu+10EbE7McOCltxvBDxzAiU6/l1GgIhALoPXWsRA5paiZVjaYmlpCV9aMUiYMKrNzxw3L5oF2+X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsmCRA9TVsSAnZWagAAZKQQAJB5uyvV+9bnYlHiiqh0\n2RnsujBOKf+GnkIHIQL/x5HiQymvTdEfDNCU1NbYiyySXM4QbJ3Bb6CdEDnn\nnGkPbJPwsOXbdWWtX5g+hYY2jPY3bqsCJhR+WYwgEpiP/HLyoFvtheH1SZC7\nRZ+OxQgEu+lkPUGzncLAQajP3rRPrp0rcD3v87MqeD34sI8O1ZaVLIxJwKW7\nk6kzTJyzbfBICyqjxtygu4HZUsyIALQ2jKsop4/pFCwNFnCFaZezcoXQZMcp\nq4svj80DX0sOXJZTNlhgdlZ3efNmH1uncz0x/TQneAP3KKCEgo5f1WZocUom\nUzDn/pzHvOLfYBFRegZi1QnZ/U41dsSmgIl4flTcDvkO4F5ApImYVmvKISIi\nMgtKXqQfv2wrm8omMT6YpFLtKsumca9x+fRBH9snxZwwMfBC6Im+NzhBq+w/\nt07oV9QlTppH3hkQMZmMeuE6Hq1+qFF6OS001EFyURsgcXiRLlfm7KvX5RJp\nP/JXaVroT1nEjvD8LMPs1R0kWFiZ10tgNlh8+mmB0hhGsoGesCaj9M02om2M\nIPHZgZWLSd/SH4psd4c1S5mL6QbLqGhNuMVkKyKWY+Ssp2iS9aOBL7lZLwiq\n5KEB6jjGZEdStMgoyG6V8blql8IaqJlRIIAd8DbCouBhevRTG/nM4HYt68mQ\nWgCY\r\n=vKRY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/shape":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e8bf5b2ac.0_1596750629745_0.48927404868108937","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/card","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efbd6ad2f8fee8141459fdd95b0ecfef31b255ab","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e3b746208.0.tgz","fileCount":19,"integrity":"sha512-3kFORr0U4IgAgUFuJlVHB5s23hCv7IxXC2Ijdf3FlRnDmeLzwplehw8QsUKTBfahpp+7X+mQU6CMaRbfgtcj3w==","signatures":[{"sig":"MEYCIQDE8mGSAgJ4xoH4vI7KdMeyZ9sIR2+jMTu8EGMelu1RDAIhAJVDDXvMgDCq9JXJD/izpuoc8y2BTV59R+DD7I2DUxVR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPBCRA9TVsSAnZWagAA58EP/0LgQXiUs/ZOrxriID1V\nGhSuJ0IVdqx1ZJZ7sMvNgAHUqLYLMKPQ4GOiV6bT14ZdvxPZxZxrQsx54V1/\nN8fNPGB9BGfsWyYwnXHyPem04BsZIHIj+8RE5YrTbPh5/+0SB1+8i7nMzlFD\ny7vf8pWl9nf+dtISnf9Eab4w0bYMg+PH5rT8hGjo21+AbEK9409dwRhc+VuW\n4zQnxwFTTbyGpJNjtLER5spiGKUfAzPtie+FSs4iovsd6jsuGnnqJgDQEt9/\n/yUlePp+RgoHbcCP1/p0VwVQWsYqQSYAvbKYx08E2Lgv/W9bc/rZo6VAdPK4\n5cy5Qq9/gl6g1wAYXLQF5jwymID+OtNhUsT7v50uHJDFL3fLCc3ZrlD+r6FG\nVUD/D0sKPEEQbZzeyfgokgThsZpi+mwO+W5d4L0oGEM7CnP746AksV/3YdZB\nOeH0cx5NTmGlu5/HYQjvAvVEoPqKYSovWMMnBzsNydYPcDIcugdHYVj9QhzU\nWWy7i004uG42t1CnWtvLnjG1KjYPuIN+JJlxbT+AEgIdgXeWnVkk2HW50MHt\n7Cok5MkUxjD7Igp2tDjoCEPfgxFqWc5BuLfoOhWWa+GlBM32Q4F92D1/6orX\npOjuRKywsSDeyXUKDz0EsVSG1mdRekyhl51MrCZpqphJ+TLy+xAMAyqCaOBk\nutoG\r\n=CGMV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e3b746208.0","@material/shape":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e3b746208.0_1596752833349_0.3742393629098859","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/card","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c183e0937e497fe13160fc57b19b273205cb872","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.96a640534.0.tgz","fileCount":19,"integrity":"sha512-FanbAVdXJAir/pRP5u+S6eh3y+feaRRMCtm+8MTGHaKx3Qc5FGTqZ5OSqnFVa7hg2EciV4uaBsecw6m3UbHk4A==","signatures":[{"sig":"MEQCIHMUTA+zwmlF8y+LXISnFovOOQIb3O2Q/FWOjmyRlrbdAiBkWYbWr8miMhv2OASItx8IO9IN9KK14yUVSwAa3A5IpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIc0CRA9TVsSAnZWagAAPtsP/RJfbmE0IpdlZhK5kFEC\n+ZnKXaVIJD3y0wE+bkGt823UTqDSEzMCfz7FPOE+zOQwLom6pj8flR/DyZFn\nymFdwl0Le6C34C8Vr1iWUuAXBwJWg3iFbvZXamce9EzdbD4uFxW6FhnSPw7R\nF6lMCx0DV07aK9lZw6H+wbjqAG5RZqVEiCZRMwgXZQSYZhNUwQ0jMyLz8bmw\nq9WLF+3+VCFD4gwETX4b6oZpygTllVeauIk5SNSx6OTgEfT8mtT51Twj3v8z\njxE2nsjBrZYkEBIKuZO5/juY16KnH3ZsPImCZLZoCeYsmpLiT9Y1ONP1wr3C\n+6idWiODEWyKetWFqlgVjq8g0p7WUy37BIo+C7azTBKXejtKP+3Ai2dnmvdP\nXkc3CcVn7OC4k+SzYHLEidkrMGvv6yh5xrBW3KEL3CLhBJpkrvVaIe+Kq7yj\nPiJHaVvKXAjD8ly7AHBxxmAa5RcBPnK89kkQaaiG0YlsoQzu8D7uZbWNIcQQ\nkbz7HirK0Gy04liJdEDBISAEqX/4008uz3bpoE3aKyIFVIArodgiTB5YNABu\n8UGwBhDTeB8MTcGxEe6WCgYzBpg+78kEW/DZu7VOZZDUNLRJStXCmCd1e7ct\nsHMJIq7IPkWD323iV8BbIWcUoyMpPf1Nx6t7IxkDr9kKFpsvgsvphNOdUPrH\nPQt0\r\n=nomm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.96a640534.0","@material/shape":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.96a640534.0_1596753715699_0.476020323937995","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/card","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fdd08d50b7f4ab9beaa17e43a493608d9ba664e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.9f9aac825.0.tgz","fileCount":19,"integrity":"sha512-2YBeL47PqJBpvsiPNL3QSQnt6b//Cv/B8ul8t+EKyw5QZa4T5qNDJclYwJo5k/tWGjnJHHcQI70baKr2ZvJclA==","signatures":[{"sig":"MEYCIQDCW9wTSA+vIJAqhEOl3pZ7w/N7kDpdEvJlUX1iDm6OewIhAIrV1xeb9iE5NZsqejhNzstIrjL4RF2vKm46iagMMeL5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7kCRA9TVsSAnZWagAAZSUP/0o0KEdYKYJ5dwIIf7HS\nUFgazqp7h1d77cfdWCckEknel3t8O2SQ/R73kjhi8uS8Xc8MCYoG1A+a1qEX\nOzh9A266wjS3qiwYyXPRgMDI/5PAv3P2Yo0Ltk0MQdfn7gsJodkq4eR14AiV\n90Q8snTMTJ8ekJ7UvyWbvX6JymhusvZRnDcD29Q/EkCEDz4ru/fEdR7tQbpM\neRVRJ1U3iBiXIM7nIWYoeI9MVH0vGkfChIfUHHpXzS9/7NHK8JdSxVjoTP/x\nu7VvapotgBTKB2xevZCz6Fl0mAk246m+Jx/61yWoaSh82pa/rOlTpcWxCIHq\ngjmZalMGLc8hGOT9wyV5xJuhT+ic6+KeuYxNzIX9bZtTohV8Hb2uh7MqLwxV\nG2ODqcXxdEGK4iz5O+HRj8/m5XXdgZThRFXxdzUuqRHbe2VGPA0Hvqal6ops\nECRfWyc7e6nys7F3mfqfUDayDmm0A/7CjLLyolEoqq4RNMoNRPnWCu19diPz\nGlmgYTH72Bckk4pVzdURpZkHr3c2ON+Z/Vri20nGOi0ByQZvO5Esrw51xuLf\noaEFdd/Qex3+rUiKhX0F7Y1pOPTXXmjwELAkoIomriJUmDu0GEIAVaTNI4Iv\nOwtz/e3Z+glDSb/vbMNkyzyXqnbmjhV8UqeK5RryZlEQVxGXblrOaAwRXQ6x\nkLHg\r\n=jd+o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.9f9aac825.0","@material/shape":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.9f9aac825.0_1596833508321_0.6812989675138188","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/card","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32f034a778bdaed1a097a7593d574e7797b6e38b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fc65fd00b.0.tgz","fileCount":19,"integrity":"sha512-zpDn6oQgZAE1thFZ6HF29gL2/tuwFalRomdonpPoSiK+2ExmrREOhTtHqEFThIoWspUd2laQIFj1rdXx9mtoig==","signatures":[{"sig":"MEQCIHu8qabWuyD9Iuii5vZ026lQDeEu6ITVo91j3UBoyI8oAiBjbl7nDVtPFFUE3YeAtfzpdZSbbNDmxY18D6sRyaw2yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWXlCRA9TVsSAnZWagAA8v4P/2lBv4yUByDUDlFG1P8O\ngz7JvDwcncDxM0jlTT/Ym2VpW05d8te1G8kVfDrMda8zcHgnfFLP0Y3P8NR8\na5F0nNQGEjjAkt6ntiXNnrOQyIHarqQ9ZF+HF9Zw4B0wfYSWT85tT9KadFmy\n86T9k4ZrAHsZRhhl4C4xmTgUd/YSuT371QNLCWSXEg1qrxSBGjU3aJrD6Lql\nqNB9kICzuxYh8pyw/1WJQx6HLNVBfSiVzuDLvPe4J/vVeBW2ovezDoQzHAYi\ncUhAqBLQlrSU7G6OytQ0OPxOabE1WbPiCSf+wPR9pncRd2riWxMDP+BnNber\np5yTBlkn6NEoGGUFAR1L0ZRFF7h3fC2pLhuCEVREwkUmzAvYmfh4L77jtoir\nq2qcmhFqWOdz+t4p1/QsrFWjqO8U1cFLA0u6kYmD/rzH4q6wFDqk/7w5ppoh\nQNxwWKr7ZALeSTJYpO0bU2XUA89vH5PWwahbA0OSR2S/70luIvu5yxqAdKFg\nL92EIXnZzyrKTZz0i0QdMVcnRJoLaL1zYp4nTtqDQEKVRTDynU+pY7ISoDwe\nX+TAoIbIWhDcT0KH1Q0fguibACO6GdtKp58+QvkVWr9D8nERPiHvtoFaZ4YE\nwxcNj58bVYaIvv2TLGIsjykWlvgMUMs4B3bf7rA8fXSkIKCDYwSWvJO0BHQ1\nfnLW\r\n=1lBJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/shape":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fc65fd00b.0_1597072862746_0.24999436495575456","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/card","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68fdc61124826a369e7b7746703d8cbeddbd08ab","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.02e372c5f.0.tgz","fileCount":19,"integrity":"sha512-qAfS+JwTqL4deDbmXCfWux+JnmqLFxRY0wmk1JNkXyBOgOWlUoGqywqpBEpS31WwFQ7yE/bkMIZSCGOX+rmiWg==","signatures":[{"sig":"MEUCIEgZU0slMWWcvfKOEt/vitQeUKGPru9WdSyQ5Vwh+136AiEAypQE7Lt8tJ3SO5nDTjToz7IZw5Br2QKXJ6TiGbvbk8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxuCRA9TVsSAnZWagAAFbsP/Ro/RlV9G2HWvcMWzF7o\nhc/Xc97MQ3Rf3K1DmXogtiiD4WmnnxwIFqOijeqdl8Tb+OzWcqW8gCdkFNU0\nPoMjilKAJFH9y7M5bbqBWCiYwz3HIhD1/UfW27dOSIqN0ssNaDu5pn2mw0US\ncp1I82M9WFo5MpLZRa5S5foYv8+qG/Ld5fAceIx8uabc+AuFTUeq8qE1tO4W\nkahWgD56ZvxQVO7dnXp8YdClREwXy8Fh/lHc+sWi5ze+HOdX/hNZK5jjwznl\nrK6lttwGJWjhLdndkEjyOUvcTb+gbSv8uAy16nljY3acXoJXzwzkXglJGCBj\n0Ws768fRVCAw7hF6b94jy1S9OnBTamzk1q24zuM8l1xN2oJQyFE+B7IoxbdO\naRvhLoW2RkHEAuGj6S+R5UwpdUht7FAceNr2YwJaeWWcjhNSEtS1elJa1zzK\nFxt/ZvHEMT7qcvf6cqvJ0QWgrZLVs6ro8HY0SuTSMcuGXRS8J8LnJOars/Za\nwewetUlpNC2xHGnsiJwz8kV9IvAK6LBtJ7vUj8xw/BPQyN6c0k8G5rW24d0E\n49cgb3nS7uWoBkqa1/cEz0cbaCuuId1d3RfcgeDmCZA5Lg4X/q+cLh2SeJgH\n5c335W39YS4nt5jGsTVH7W1Ueuyzi4UhUnqMBDNSHenbsFB+gvDzJ8tUomF2\nrOUG\r\n=rlt9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.02e372c5f.0","@material/shape":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.02e372c5f.0_1597074542266_0.7545601625356166","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/card","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55d1fc0e916a33142580233ceee77e2867d93bb5","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.66669e3b6.0.tgz","fileCount":19,"integrity":"sha512-qLQIJLdm33ccKFVB6QwZlUzqF71c+3g/PHSeeC8YRlXEqGktusoAb+fTqXk415g4J3NxIV/Lohlfr8OHDzfgWA==","signatures":[{"sig":"MEUCIFxpDTNeGedWu4uPcLi0uDSXZK1mh4saS6XL1fgXkg8mAiEA4sks+IbdwfY9PJ007LkR/d3R4kqRbkynUf8XKrvAWb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1fCRA9TVsSAnZWagAABD4P/0qUzVFAHna65GykaLwW\nS4c8wjFa9853quNj4cboTLSBKPnVovasVKiVKg5uG2IWFL7pEWVr0Okkk6fP\n4z5g3mJ9VyhHQhCiOx31SHRflbsXH5lGJZ1isIG4Wf/A+1OlT+zR69Ni88qJ\nBJgQrKn6WGZckzfVTNOT6VRyceN2pJj9am+pfXwM2wbMxq7OZgDxFKzZOvur\nhLXN1C71X5OYjjk+XC/d6LngF+DBSNzCUTsAMOOPjhaDCdnkvd89p9QKyNYv\nWED1Hq9OdNIB8C1PX+gCYDBhLbEmHcHBdQ71lrwoPmFQZ2K10ptZ988Qcf8F\nUgt20NLmGm6VXXQbdCBpDleZt81qCFDt2LAvaiP2zq+mPseVHK/l3nvTIbMG\nkteMurUvN8TbH2Jn6UJlAWlXW+7PGjRgHI6IrA75oM2RCPHRLY0mSIWcBYzK\nZBT5m2+8kk3N1lF62H4AZijJm+pKm3wKMvX27W+zNpm6AWawOuqIC4ekUbR2\nvZyJr4zWYsOjeiTGMZBdBvzk3G8h1Sb7uqVYXO5hJnZuWxkNA2yFWDrIczzk\ntAP/uPlAPhafub/Ch8CLmV3iPqM3rT4pG/GKu/ywQ3KnFp8hudGIeZEbkLAY\nHoa3KeaR75TEHQQuauyMc4gKzFy+FALJfVEzbG7ztejb0c/82G0NO6Ze0sOm\nMHUg\r\n=Ndca\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.66669e3b6.0","@material/shape":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.66669e3b6.0_1597074782489_0.8931913640362688","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/card","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fa0cc3cf5a26435f3d4c13f60e48d2033ac5f6d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.6d1ea9761.0.tgz","fileCount":19,"integrity":"sha512-cHv0dL49skhrcT+QNNdnRmdzkdfmDqgzuxaqoIlHcgzCqotyeVbyLYryn9Nqa6N+Z2O+1BOvNvsdP9k36j269g==","signatures":[{"sig":"MEQCICzb+1WA5Lx1GUq6vc0XeRMDNNCStmkC+rcX8WnzS0dnAiBuRAA41PKaAzJ3vhk3z2ldz4Vl069KBroapBWGhT5A7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqu1CRA9TVsSAnZWagAAdNkP/1QN4Y2hfIL4D6t+b6yE\nFvZJbSuaQxpmr+gljK2pt8bxz8NGvwH9bZtLn1oIpFlQ/U+tlOZCo7T5Ir6l\nbQBxocGjHeJkdkeodrxKEyZ4tT3SyPjx5skxEIhcFEV/7I7jGMzuufpmCv3d\nvuJAKgBLqql647vGN9gb3cN+MDbPeU43wVmknfgECnxt5AvfNtH3fRV7v3gu\nDt/2HnfFAJsz5bBFVOaIP5kluZyb+2deNBcZ0j4vWAyrV3WoCXpJ8WSxt8pG\nq5TDH5Dbfz8mWYNhiJcq7NBavHU/QZWg+1PXUDsdXe143mnGiTIWCX+xm0Id\nIaNR5XI2yvxQGwL4dNbERctVxZMhZYzg2q37NvQlbvs1AyvWYJLbR58mZcrj\n79fQAouqeoOecW4EDth37O46eri5mCgibcC+Fe6PXR/4TERDZ/YZium1+SQV\nWosbGzJ1CMRvTjrDsdSVBRM8/afVwh8PNZYXwfUJpIcjNkelgb+aomzAhHnq\nh4oT78OCCDPNUbCjM5H0UwYAQpzx5E83j/SQUh/iQHwuUHF9cnKIN7PnZRg8\nOiB27knG2edSHet7AM0bdTKjTsQuVSNJnTZEeuzp8YY45thowf6WvFBn5l+K\nK+zedOpBtQksa9PQPSX4JKleaqHpp1+ggTQQKOp9DDpy6Gk35PaySDMGuYRZ\nLfso\r\n=xncl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/shape":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.6d1ea9761.0_1597156277492_0.6566600834044369","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/card","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"383d160ede38e6edddc1923074af5e19de66402a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.79414bf9f.0.tgz","fileCount":19,"integrity":"sha512-WtcHAJP6pQt15/bTCR7p3c3KaFs9lhCUuL8V49GPYwzbo6qDXg2ugCzHDpR5btIN2dyA7P8QwFrPAuSobiwKbQ==","signatures":[{"sig":"MEUCIEtngZukakHJE0QYPwQjKuh7bBMUMFQyj3rgY8N+UI++AiEAmR7QKiYn2wgkMvxUZm7nm7zTIenmcvaLklwnWQOmKvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutACRA9TVsSAnZWagAArDcP/2n+hPZ8g7uLn4E+iDFw\n8d7iQWJ48H8olRQ0zWoaWopO3e2fh1w8N6rZNYQqoFmrOC2CggEXSygWqnw5\n0ykp5Tx6351z7kh7Y6QOECXhiGakjzlbEfwBTPCiSsg6hzPOaMDujTGB6Tjg\nKDJZIdPH6nHTrVbCAnlQHqhRBD4iJHqDG7HGCshrl60w5xUOQ49of8Lvx15u\nGMlt4b6xjwum4M88NDGXkeV27z20XmGDP5Iy4/CKKo/HYoTq3qvw19BTo+Yk\n92ZFQt1h5M0m/GOxkNsoGJD5+zn2VHWg4crLxZFbwQifFqAo1VfvM0I+UTYd\nde6cKKdspPBdgMNTQ8Upn+Se3NKTSLt5Je9hoi0Gshtaygw3So8veq8R7VHY\nyf7c0OSqePjsWSTLE6hssj8KPzq7ZEMlzddrW22j/lP+NMLm8TG50EpZw0a2\nHqUttt6oGj/2MnKebXqYIlun8XI6ZEZiniR3gw1KlQhIJEHh18n0r31H79R3\n+FyiacGHuc423GMZm/GUmnyG0vk81vEoKa+jpKwqJM9JfxFwwbJFNpVd2B+i\nqLKkovQ6hhLf9CRIQ0Br0oAsSeroKDLrkv34Zz59gvvMQaCh911RM9j+A5HY\n0G0i2Uoj9MpPjOPGgSLIwohpCJrLYh+5KQYQwubIv95gndkvjv6AVxWSEIOF\n6U+3\r\n=hljJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.79414bf9f.0","@material/shape":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.79414bf9f.0_1597172543872_0.19541974957042973","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/card","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a78c1f718fc10c8d8572b3bdcc260a9792cfcefd","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.85a5272df.0.tgz","fileCount":19,"integrity":"sha512-CzssfiGCVWnOP8fRr+/nbq0eM7sGHythZ3F/Hjhb5ol67KWXL4Hb89eBsePEcdCd7iWkT2TZz2i8+MEQdvyKYA==","signatures":[{"sig":"MEQCIEjPbarmTOJSIMzQZcF3Pke9cbzHgB8bz562e3/6NoN1AiBoZ2hNMBxEx5FIx2lP84/kzBUCvsGb+i+dXlpJI2PS2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrICRA9TVsSAnZWagAAyPkP/jcQryonwIhrJj+HC9sM\njpAcyrvPK7Y2TSlIrvJqgrwZpWjRH+DaaH7KPbayClKVw5chAjA1cb8FO0/X\nNRJ3OAiyrL+nRr+86pWhwd8sXwTqDBaNxMb86JrvTnRX3IM7tKEbU60yL6a2\nC1gCRY8ygFbR/FwKPOiuupgh2Yzdjzequhfwq+wpk34jzoMxf8hyRnUiJxOH\nKpAdHe6onuZckUoubbN/v6OtPBxdZKPsnEQoc2tYlKm61O034W2+IryGcTRz\n2xNGuGp8G5CMpK+FlQokGAbIRoZ88dYJS37OA4Xp08FNx4WJ6F2N/YYEcH54\nSnOUq7A3yRWj8qqLe6CbaCcKsXEMUg55ktlo5PQo+zLVYCBsXrXQx8Ph72JB\npjVWV2dlSfVSxdl39GmQ/+FRyrnGViHygAqmqCQ2n+gqmt4aYVzmi7/PwlDW\nFJVWA5OujTwH2VKadDVURoXIlItxLdS8HQwFvRGdcRcoMXBih3G6jKz03J+V\n4nkZT1nJo/IU7+AnYBJn7a7I+3qLYGUhhPrwKfkXxLynlPN3MfLxRjVXItzJ\nji62qvl8kC6m+DiJTGR37+sd5Lrjr6KcSaSFcGGkD7M0CqTNCf9ktwMlOvgb\nLr2KiRK54RGVXFKJabBoTdMQToESMZcbBvB6+4i9EkO/xDgTkKNOtw25czHR\n+Ojs\r\n=begx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.85a5272df.0","@material/shape":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.85a5272df.0_1597176520545_0.6658504073828224","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/card","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56bb6ad908f81b1c049f11d70598db463b65ba7a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fda053eb8.0.tgz","fileCount":19,"integrity":"sha512-pfhA0Fnwp/Rgu3l8CFs9BmEC+MpaKRuBc4V/uAV+77g7WIoLA+7v8GHCts4siGSNXrazLC3YDS3Cgak60oHTBA==","signatures":[{"sig":"MEYCIQCZt5BJdGthcJEK6z++6t76CQtr4fROtbKi1sTYwbmu4AIhAILaAaJuyvXEqUG0WBppCRmVdu6Q8SYRnqlR7/9PHDH3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtWCRA9TVsSAnZWagAAT4QP+wdoHBQuVsYBVWll5Fgt\nlmJg3CCX71/xRR1odUUDVQo8pY5654C9iVmscrNxTWdyWZStSt4Flvh07fN2\noIPYTt2C9APNgRvk0stBhXTF8QsSPUMKZ8E3zj2deV4IyKMo6zF+Ggptvucq\nfy2j4j7jQEM5xvIPAmJkL6ZY+BDC7cVAQGQDHxFA/R5Z6q2oy6gCs9Kd76k9\nuyarGaqdIkRbWNKu0RzLw4Kp6vGHA0ehGXgVaKrGXY4OXhjBbKDiwSkhCehM\ntMMu/QKwVPpg2sLgjmyXQaJM0Z9Jvr22G/tQKkqeqFlnL1yPA3WmPSeSq6Go\nDmKh7QBTV0VVFkUJ7UAaVUcP6DCNtLou1wkJVzAvvqHOmOMg1hOFq+Ap23SN\nyHqoh0KN4w+kyA537trYQhl+3OTu/d0BOoRhyHvIqC5GfGSSseyXg/Oh2Ya1\nPapAxtdsALKrXE5Ip4gMEKJ8IcxHG3CnsqJhzmaLPx5NjtPSNNfU9yqNYHbG\nIwlXitP6Aho3wpnprLFPVTnC+Gfu/s700CgU9SqeSJSdl9EAnKtmA7Bh24QN\nxRdwR3RSvf3u3mstXygNoWEY3YMSaEn2ThMj2tpd4iuVDXERZWwGmrtIj3Lg\nxVUb6NlW991UhFxrSJV/vEJSFIGswrZdYyFRKBkocOpq1C5eOBWj9eHqL5He\ncwkZ\r\n=/QJt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fda053eb8.0","@material/shape":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fda053eb8.0_1597262677839_0.54653409491107","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/card","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"636b32922e56c9d3cd405469f0c152375265322b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.760873445.0.tgz","fileCount":19,"integrity":"sha512-8mvY5OR8YU4PKL9Awp6BvTkglfNqY3UxiEbIq8neLfgY3cLoQEbZmAiKrU0i2EMIbHEEdjXKaYECpApAWkbQng==","signatures":[{"sig":"MEUCIBA1L3yV4INEuocb5pwgzFskfLnvfNI6hPKTeMPd7AepAiEA2QePftRF8qz1KIG3RqBbdPBop8dfyeEBDYmXKVtLUKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKPCRA9TVsSAnZWagAAnqAP/i2eq99ZkhdBFF7Hisoe\njJoL0Po6tdaTz+vhW97HOyVWNYODRBYUO/OQ7MnzL+8rx6FNYXYEZfUTO+0m\nedyscKQ9r1ZbTecEqhvHNmssxi2pq7SJxqUSaxAXtPJ8LzM+1LrEVJHCKsOB\nhO98RfGd/lACSYEOM42NpKNGW1udSN74gAsIpx6BK999y56UW3hLwC3J11O1\nyxoxNBTAUFmwHMjwiTfBPPRTct8ixvdm7TOo5ZJ9d0DAs9p+WnS4mC2qXMpG\njghuZMREKtMbf2HTzDFP58VBYzXA0FQXi8FD9prxoQo7ovABwuWV90BlrbT7\nRoMUJOxbhqDzFJMjdF3ZttI+tjbFEy0thrpzAY+pZiRJlPvoFxoYSn09WfM+\nvryqSJz2GCW2ral5K6+sRHrk/MAkUzXm1KLvnySpuYzkRERp3JWz19w9NdYI\n4ZD8SeAKVU5N4Z1VRGaJVP4jP4I0KvQVzQZa0rf9eUCG8ki0mfvzPhur+XHk\nfl/piUOY3e0aoP00GaaBNYB3/jU25p2iwDWtAbMquSXOjkvenCAKWPRAsH4p\nFniKYZ7boZup9sPCnAuMdLJ/QpU8GpwwyKWMh6NDxV+Lm7bi/MftW+jAatis\nzE/TWChVUaLl5QhY5e/GOqGbfr6zDBnXL+BBlK3PimfYogm92wJT0DIWPwFr\n+3z+\r\n=L0rB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.760873445.0","@material/shape":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.760873445.0_1597268623483_0.6644723184828625","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/card","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7325caaafda610f3389879b2fc9cfcb41b6cbf23","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2f4711a30.0.tgz","fileCount":19,"integrity":"sha512-vFGE0y0t7H6ZsgbBspXZkqrdG72wKaQbmuhOj1bQZQY01dsTEidZaUUGlPpKFnnN8Oh0pMAjIpoAy3ouRQWudg==","signatures":[{"sig":"MEUCIH/YXPD14rIh1YHZwcf9P+QSiLlg+tmxxkunFXprY8gzAiEAtwjjBRBpr/KayyPG3qPXbV+Bf0Iwwf27rMSukPQl7ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTmCRA9TVsSAnZWagAAOvkP/2XkPTaA8XIcrRUxonE4\nq7r4m0KFCJMi0BwLm9NpCxUmoRe26qPjvxDmXdEAPikQuvERmhE2HXZKUFWs\nq+l19T1U5s7jip9JLioqGjio9I20Zej6Je1o0qoFxd6jXKJKLhthephKC7fL\nRua5hMFWg/h4pyfnlM7VrxfwWcKstfRJKTQIoJ18/8WsUXF87QFmPzMhd7ZR\nUIbgJ+duNfaF4fimT8kNe69OM8fvBmUBScBLu5kx5m+CSaKcSYzyajgPJEHs\n5bDpi7mCDTlSajxC0zgQdJXMmtyFmSbTAyZiAs3EwhGQ8dqVTrizW9fOLUy8\nmn/poo2WH6BauNRWKpesPwGO++N28qkPY6RWzMuFktgignvMEReCEb5Mh0Kn\nqqFyFK3FqNxDnsEpmAKiw1Cx9Qt6/LXiQcEiEDhMlUySMjEIm68m7srhjI2G\nYeNdY70U3ljGjeXoad63rwuqEfk2c9hnQFGy4wCLle6mgAsHzTpeSBygw5gT\nE9Q7hP4BKRJXzhxekXORZe95jnsvEuPdb4Ch+WRPLvW9yy8fCemZCbqX9rWo\n5mlXxiaZy0iv7U2taTRuKoVGzXVIyztQ2XSDHBeyiGrqz1SuMT/HOnUDW6f4\nnEiWWCm92Wmox2+cqhy27T1vbjpAyBrFCVTPrGZc28Xjoge/xQSZmOx/0D7+\nctFu\r\n=h4MN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2f4711a30.0","@material/shape":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2f4711a30.0_1597269221956_0.8001953186728241","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/card","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f664c53e52cd3b93a235abae279da533395a66b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2d72f3659.0.tgz","fileCount":19,"integrity":"sha512-YE67Bx82Oy8+fUxI9N7/WWZynxAlxhD2z4zGYP0P3emoMIvWZT3L4n0LVgsmDIBw3uw8R+TkxvN26M+tjnlU7w==","signatures":[{"sig":"MEYCIQDfsTPHkAGbQJmRi8UhBzFlvOUHnwN7OZLdM5NAxIEroAIhAK0wdju4RbHXUulyfMXXLSy+4twoDQM9OU83UbB2mKfA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGapCRA9TVsSAnZWagAAyPEP/3Rg09S1+vdXkc5w4zLA\nO+OxxwneP4JifwmdY1g5EMUhifwYrvMTew9z1897SH122SRFXD9a6/Wln9bP\nFetpALIFcv7w8fTIHIAqNbNRafpWiJDzg+pJYoWU+7dVsF2ctiNqTTNrvIRe\nBLpI0K7O9GQTCGQS4UxgNbAdKkv3CZsbI0SSA9kf6PsAkB2Zh6O3IY5IqSJE\nKTqIjpjntH1CUmSZ+bcKgfh3EJ2UHLDUBTVa4GtMTkqRWBvprkNMnXcT6n+q\nK1rD0DTd49wBszKFV9HoMqYBYXd4ufvWtEbHZgPKEy8tA9+jPVxhiVLH9YEx\nuFW98YiBuqujLm0k08QK0X2GGMDmFWXE2d/QlURvl3HzbZ6fsQ/m5TbRjAF9\n+SDiBVRE1Qv4aqa5INBiRyl5+sQ6hKuUfFiaAzIFR869mdFKb4e0I54P/NOE\ngYBIN3z8S9kuUA8rf59tumoNvkCoBaHMn7VoPRPAjaHTnA8iLvXQH7bUFHbB\nbxxvXkYEnFUmP3ht6HXt2KHPBrKIXozk2foRPmbQsDrpAhb3Hp+e/GYpE4QV\nQ7KSWbZsgKwaPabaXIKsW/IFya+DzGPSqpQBOuPEkFadzcUpO2arnJCRk/RJ\nUOCbLDQNeAvMJ+sSDWN1b5Gvc9tsX5Pn2e9usvF3cG2vcWTVFCQIvkHqJbw2\nSc+s\r\n=nnay\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2d72f3659.0","@material/shape":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2d72f3659.0_1597269673054_0.1944174235593632","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/card","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"207668817f2e757293df84b24b59683803564b18","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.1fee70a5e.0.tgz","fileCount":19,"integrity":"sha512-srnAVdcW7T8f5600Z80XBMTbFnXJHbgdnr578MBQJNQxmgdh9r3z3V3/Pc3AleT99QtRelFNKWWDIdbO+3+Wew==","signatures":[{"sig":"MEQCIBJki2C5LciqdmeTQ9UcvwOZC0oYnmaaDUjRqQO94LV7AiB7PDqcmzwN6Da8sgG2C51FPpaB9KwriK+pFB9TNmc6QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtFCRA9TVsSAnZWagAA6/AQAI+xLidAnfrgL2aNlL+n\nzTAWU3tiEqYJKlx8y3ZO+opQvNvXWl5S36yv4yEGp5VdXMY0QIflkxXGWLMF\nqxHUQg9RG3Ig5Gl89TNy0Ly7eIeTDCt9L5TWPch7SI+nLIkeFgr0aAoWx+cb\nOW7kDde7KXbInlGzFNs+UeyVd5xk/sVN2dOlLBFy4QY35s0SAIgy910BUTlm\n1MOF160sLMhQsE011hP0tgtOaOxlDiryYag/1mTjSX15B2kigkLwiGPaF/R1\nuk/bo+I0AagS2Mu1nOAjdaDYZlXxkhZuNTzzSmT9aA5AtW6opCGMOZyA4MnT\nFyiypKc8+FvERj9ZUbVifOkuWOh35KZuBYCK9Kv9ad20USVgz3bfAUGaB1Od\nh8tl6lGKdxUQ0GGyPVllSa0J5KLnbL2am4wQoSWshgMdv4GcohIblim1F91U\nqpNPDWd/bFIzuA0DWxAXXJUdTRuULbT1jm4il6FlDQmYPIMhB6RMeEeZmrHY\nhhcYNjlCZoSiH9cFXgpyhhzXngP4+xv/F0Y0tO3sBxeZHTZGavVeUlvMTx11\nAZ+XkuFuunxZT4wOrj4soZuiGGd2QCNrgpye9O2f0DaBrzaOKRiYBfayLzPx\n/aMuG4hy3wI2qX3saR1qy1VhJNRI6qjiLEGAoj6zCVgUwAz7Xv5unzvWlj6K\nSHoa\r\n=m0dR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/shape":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.1fee70a5e.0_1597274949123_0.4230978570323638","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/card","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f566ebe749895353dc0f534ea6dd92f5293ca01","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.023f3fa34.0.tgz","fileCount":19,"integrity":"sha512-A/MHH3srMN3CCYqSRgZsVu3i1T/AdXlrugGl2cc+qIxwOYGSIwzqq24uo/auMy97gwSL3yfh6mgMUrjy9osvRg==","signatures":[{"sig":"MEUCIQCQMR+CIcVPaopW8I67PLkB4xxtOYB7hr77kAjtUfTTmgIgRTFVogSpRSfgz2yFRVUlviCw2kTFPcXcvDChO1/NAQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOTCRA9TVsSAnZWagAAfiIQAIlVIjDQ4ARbon0EvW+o\nASKDmowwIRN+Q2TArU40/pjCwSVMhmdrP0O2Ky/qzHwxBnZ5A1Ld9zcAOVZJ\n65Y2mR+7WY4T3G4KaxfBwnfUAp/dTRtgaUESiu+N9qB2HvWFUdnjmwkZil1I\nXtIKJ9flewOWiotTFnVwfn1Y59oYlGd3dpwx2lMQxyqeTDq6CbgifRLpfq1o\nrzfMM8TTPsQWPudt9MRZNbdv/hEO7sHxjzM7OLwZaxilinilkYFJs/8Q+/Yg\nsAMpqbjsSaXQrZeUFV9N6iF63840e1Ty2/Jh/UWr4Jz2AOb5ExxayUOjWw+g\nDKRW2Q2B7QuslfA/mpxlHKMp1+X64nULvFrXe5fZBgPWcFhIzNq/3KpI1yRE\njHvZlHcRxefwcJvEgD476fIK+IPVVUNEuLgY5/fXnsbD7njLqc9S/7idIC1d\nxAILaNeizufMwLoSpmqNaAfryPUXgwoJsHgggNtoL/UcTx4nHqsL8wOr8Rfp\nsiqN423erung3IRs8EiwtJats6ZgqtnI5cZTe79cZPM4HqfUbSoz9mEhT17s\n1xsv01o7p3l3Kx30ZnhXvrZXeQ5vWeuNkgbpnvtqigTyZq7zN427E4PGuSOB\nvgUafQR8GoPEVHr1opNDRjzw6r9NQ6GC9tuz+dEuEICUQ+GXsz97yZNoyO4K\n1MPK\r\n=yEnl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.023f3fa34.0","@material/shape":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.023f3fa34.0_1597281171070_0.790832653168833","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/card","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa0975e0eeb50485c4bea697aba755f6e5c5b2b2","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":19,"integrity":"sha512-3q8/VWLrVpKdttvnSNCk4ZQd+VrkLbPZsWK/DAyWrGeQlg6nZMozRvwTHSg0lJiqbp3aUMH6SOChRz7iGyr9Tw==","signatures":[{"sig":"MEYCIQDe4L8cTkcMQYo6tGMyqhWTNUvylsaL3JcwFgCBWjtP3AIhAJG7QuFtWhiFxMOTnKAG0n76Sc/UtwDolQEPssbfQpwb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJd8CRA9TVsSAnZWagAAGtQP/i27rw/NX5kCQ4f6GkiM\nf1KSYDhGTGqhzTd4oKo0GFGJi7A/s7HgLMKtTF7NVlG8oB10Bl71Em+X8grs\nHiXeu+YuqQ41OUjXBuaPcuBGwmSx9OPqC57YVjC+md2yfBpb74oD6yqNR7+d\naa23P3Ae+7s7fNwqfz65kmmgwTkpWrtVHPblGXbnYJQvMANNfSGtd4pKvce9\n/3M9q/OjgO1ne8fSWSqUKk9zWD7R5jyW8X25aXWNVRYrkiqZ300HADRfpIKE\ngkUeEqogqIM7PUgpQIZh/94BYIpFJbCS/BD0p/3426duF9htFC5O5IDPFIra\nGJAkYsHUDkdjyqzJ89DHIoJonZOeBsbY5MdoaBCE4b1+D6UCaa+u1Q6uxwxH\nZQs/SudIGyN/HGBvPnpYsH0QES1Tl/2g3rH45rTkVdDTWa0EsNn2UfIrG+VO\nRHGR5moEAZqyNoJuYudYp4cvqmEBmdXWONc8A/JDMltMdNbl7gJrWRfKyaQF\nqCc1VZNA8bKysf/0Wr71eNrrQv6f+SpAuhhNCW6Iutr9eJ/AMgSgCJdciYZT\npYVLe2NBd/Njd2JNW8Y1SvBtnuZHaR672nX07Ksz9EhL1FgbRt0TyYaocK2s\n3AXH1fMeRelwGg6QTybhZsruJnP8Nw4zX/g5aG674lRXZdu5RukphC00uXZ9\npSyi\r\n=I0A2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/shape":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.80f3a9e5d.0_1597282172019_0.367795569947331","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/card","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3483391b43f3a59521c6d195de4bdfaebe30ff9","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":19,"integrity":"sha512-2nNBYLty4SY/MyoiNZ4uLwETh1fbuNE+jq93OdnuNTILlyEG2jUOd6AGolUlNxUlD0IOCdoZeyhKe74ruycrxg==","signatures":[{"sig":"MEUCIBr4ZZ+5Rw9j2bx2PrVtahacodH/juFGeolYth7ynX2pAiEA5t1lSmMBajhyQkIbyVIR0O9Zg9u9+Q8hNavVe6S51pY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP7PCRA9TVsSAnZWagAAdSAP/3f8o1kk+d8jHEYzl0h2\n/Zsb7bFI4DdqLu+AxjLJd/ocESrP+3n6JR4Fo6ofaUVS2RKEB14oXlcdRSj1\n1RIvsOQdTYh7TZ4W3opv35YLR71NifFLYTlw4peJlZWVOp+VBt+RxHASHc40\nWAMJ36eDTIN88upPDqpDaqwTCfSe/KGUVg490nBNRNll6T/bdkL0bSOwCtYA\nZs2QabX6HQs5U4DbRAlXxuHJYNcCso5qOX8KqV5XzpTCasY/aU9owH4MeWRJ\n4BhouEBxfhy7YsBN7k6nQcGgGYY8Bf9WfyxiVIPntJH3cKBbrDBcSbakTVuv\nVX9TSRBZeeAg0QW/uL/NV3mE+eS1xbG1w1R3eukdhA1LIDJASkWceYowdbS6\nUcMzofV9BuufQWoYQ6n4bGSC4VfE3tDZemz6ZqiYGT5IOD5MvL7q/Acn3iCk\npILmnxn/UlSovLV8MT7Y4zP2XybaH0VzS3GbeG+A4mrUO0DhWHs4XhDjsnDH\nmxsOsSSpiva+HRMIPldf8e3nXYPmYXEmiy7SPJgZWZGzTJlYLN1ffIn4237E\nv5sacWOHUlLZvtQ+BbcrkVtEIXdasj8ZNVipoux6+Ne9OThSpe6IyWwVt/+N\nXUFxGwWbwrLTnBYBfqUQxDJORtWBxiQ2vGGsxmDXbX6Qt317vNtqKN0YVwHW\nW6xN\r\n=GKOv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/shape":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a1dcfe97c.0_1597308623489_0.24045102099413573","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/card","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5d080fe1fd8359a9b1a481b8a3e5771570ba9aa","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.af332d5be.0.tgz","fileCount":19,"integrity":"sha512-XVX8o37U7gBFxp/Pc/I5yyjEObXsxXZutEkWOrjd+8PFEFozFd2QFmAqvbcE/r4LgiHZGEjkdDDUCr0aFZgXDQ==","signatures":[{"sig":"MEUCIQCOrRqQ7t7yo/3ImjmbaMsoOoq2gDDaMwB8u4gZw+JpdAIgLeon+UiXHXY7Va6b8n62SzAKRCFK5m/ApvjK2lGt1tU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa4DCRA9TVsSAnZWagAAPiQP/11a+c1IbZFHm9kQYzwX\n540StbEkPaGGWuTgz/ncaxfti2CoIjFkHIbs9PUXIbbrqSrRW4ZHerV1n5ED\nZRTH+YXJUOqKOn0Q0isGLQsY8zFe7lHNoKGvkcOpaEmJAaNM7dDcN+b4URqI\nAuUoUCGcE9FBla2zEgE1FeWx9iMXroMDqK5jvvrl6UZcksud6PH6rU6NQ8QI\n5et4I5jL+twDiXdrTnieaeSJrkCGDHGLPTJMc9TtuKw6eKoP4mM/QbPPV5l6\nt8Z6dONkXf8wCG6GAtCChliby5jWY5LpvDMba36u+391ff1szPYKceS2sSKH\n5DR/lXgrWyXYUdAaPV9agK25kQitqAJM9eHGfAd7hVUvtW0ubhMgDiN8/MYQ\n/2zIOq0ZUoDqEVAYO51gcQxQ6Ii3J3rcU8SjIjfrW+gbpDbA4eoDsl3saMzA\nlRJ9bZR95wcL3wr3QUGGpEZcAHXWhtoeAVgPzOC+by3dP1mRWMjx4nlLg2R9\nCNHf/cIVdtB8v8xupzta0zZP22JUES2lmwb45iZ2QDjjJEf+/PPKYf6m0IZ8\nFu5YtmtCeISwnsG08U2sY+iY9h7vWFA8FEFFBiuSu/ie7rPp6/MJTIbkYBTa\nOpNFTxlAP64rI9rTScnsyIsaj/sVsMQETJ+X6wiw1UnNYOMZ8FHmZaPYniNA\nDSpP\r\n=zjNu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.af332d5be.0","@material/shape":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.af332d5be.0_1597353474166_0.6030582187737425","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/card","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e70a4556c2c20c1c9d0bd65ffc7f406d68b371e6","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.7dd4567c4.0.tgz","fileCount":19,"integrity":"sha512-wTltgCxZfDCrDMuzsD4SwH4QrsabHgi43G3Z/HKCaHUmHJXqIZkTew7tp4KR76sJMZYerkQe6MEiDqkfA+zFJQ==","signatures":[{"sig":"MEUCIQDTlVwapD4VWNzOT54DSWMvKQHau5Eae3EE2ghW9543cQIgTRsupmKUUvTPmTAG5snSn/4/WpXbbCc5/cg1mX2VMAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeARCRA9TVsSAnZWagAAaj4P/iKo8zicDnen8yCmEjTN\n5AGh/YEOpHVFLZvcxkidorae0KzB5Fzlr4ushp2SR4LwOP6Pn9OdqXXWftqK\nQclvr3mc5rqGM4rStoNW1O+ZzCDumm9fhxjQWWk8a2unezhizJfFcyrZS7gG\noIdqtSOgw/vwM/xtuxKqZvlLArgqjusEQ1aS19bevMOLVLHu9eDEOa+o+vxP\nwS7alimb88RhReu+4HVl9ostk2dU3wWTCCCeNjgXd13gsTnQ97Zop495PtBr\n1VYl1goN2vuHAa1IU5tAhRh2tOY3WeogD5VRfHNFLQZT7CqBwvtHUQR/qkaq\n72AlTsm6C6EOhGNB+yNtHzfyQjDV6g0ONh4WM9CvkcEqvTC4YDH+aZ6Rxds/\nuqRwXRmAE7IetbuPFS+L5qWCdsHrGmmgj+1+SGZKnIFmkR9zXAhmwCZ3CQb7\nl6gt40Sd+ccc/0OFcwd/SIg0Vb4WBAHNoKQJPn3xp7GuRoSHtTsOYvPrJqk/\nk2h5vrlCWYmcJPC8wzcKUMr7p+rJ6W7UWaZkrHaB+WQHcT1DKqwLF7xdPhaB\nQWGviv6sBTL+VTrRZrAtpa+46SwKhfMXvCZjbCNE2jq2u8goX5eTrLPryF+1\n80CqSy7Fe1xDn213+v1wV3JT8P7xtemMf/3wwoJ9iEeGLGYavS3H5TqlRYA4\nPK42\r\n=PJ18\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/shape":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.7dd4567c4.0_1597366288801_0.24275899789783306","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/card","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4680af2bfe1f09fa73b9536405be4833253d98e4","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.ff870005a.0.tgz","fileCount":19,"integrity":"sha512-0NznBmkas+GeEesBgYruYrtWup9QmLR7XyL0P6r+UHaANPycyIV7jpg22XVdT9CjN7BODJtU7WXr5UWfdVGoAQ==","signatures":[{"sig":"MEUCIDpcJrB3uWpG8YIz3kX3j94NLDWFe0A+cDCVJfGOgGLAAiEA9mwyKQIEkpzjvgIErMy3/zZfTqzG0qHw2iSMUL3n78Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeX4CRA9TVsSAnZWagAAR8kP/iVBhWtdLYgyvSnrXMvo\ngBoTXr+fdI76QJY+or7IQG71YxQdMjqxjc7Bs/mphnY0jrXaKLtVnVoQGmcz\nKXao34FbP/xIkJvmc+xDXsXdiMmaGfy/KjSGik6FseIHO4h3WgMDxF2K8G8T\noRR9iuQuyYZF9lm2iuTGaHYCQq6AbvRXx2jy8E4sTYg44jCOteXGZ3KVgEdY\n060s4LDhOj2XTDzF1YkDWRK3f9bVPwDc/SId9TTKgwr76jkSUQZKRBG8h0Ah\n3OY4K2HsA7qMOHFHaxk8DmUIjfMA42e5jGB1VAtRzqq4nHScbjFXx5lfxfLv\nVssUxzMqU3jNj4oG/PQ3e36dDGPOGXXoraIE1k185vDgGYTH04mrGYBHQ96j\nz47T1U1ocFa5Ky83l/9IY81PA17GwzYEhv7VuuoYchRpOpNw/1fkBbCEbIXV\nDfhxs+1+SxawZNJW33lnL2ElSD6tNtR8dGFRmYmNHtdQ3a7I9dqAGJBjrFvg\nZ8BebHrissFnnu7xOHP+WWrbWHo1JIZX07cJ/fJ1hB/yln7nkXdKIW/0kTQj\nTWHn9/Rv5sk1tw69ZZLf0RHY8prJ/u90pLCkYXZv2tck9pRTX9xRRl48FTzC\nD3hroXAnNaMVKFgOTjKRg+7WjX2IRh2nNn5oDTJDxxzQ8VHlcQyiwMMcBjhb\nDawJ\r\n=TwPE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.ff870005a.0","@material/shape":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.ff870005a.0_1597367799629_0.14307670365197644","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/card","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79758908c21016a59ec6c6d37926d62b7f836647","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.150f427a0.0.tgz","fileCount":19,"integrity":"sha512-fi9+a+jjw4Gv8k1WHOMZ/BFsV+fdjXqyKsedSQKNqdFBYsbdtgVxIRlvF8z7Nko1vw8oiMtaf/2cCF7Pn5zGjA==","signatures":[{"sig":"MEQCIFgSIwBfcgEQakZyaddP05vldVUWK3BKa974P4PtPDbTAiBeuMQqCLC5OFTgj1VaUavICz74G/pS1ykM31PRHi/ABA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHpCRA9TVsSAnZWagAAhv8P/jLtDVga0n90vWhL9D+b\nuFSVhjlO09jJPHmKXY8nDzB30hotx76pabVZ636Ep5h0+uubtINNfcR1nlmh\naHmw8yDQcwAtdSJ5SXtoCey7Snesi/FJqELHzmzjy8hKnKb/ufbTCF943Jvo\nQx/liADY2B9Z4CEVJ24Ff37NVzyjLHpwNb+qbOoMug3lk9elkSEtc6EAMSfA\nD2CMyhojlv5nMW011AB0GCxy9yhC29Ji6giH3APKyJKpU2hmjWVpDmwVC6Q6\nzC2gSotCxpDpEEDF3AZUvdjda7ps7Rne5gTh8fUVr1oBihtp1K0j1HWWPgNC\n/RGKhCCtEiKeKFd5tTF87QKSg7btGyL6PC/ADNNNU49HFVI3g4QsS8WrDsht\nl/tzVrVadsXcv3gieze9w3wi9vp/2YwbvVSxe5cqZLM8mE7xVfQudC/aPxWN\nlDZ3vFLv++5+vETITve9sDXCeCAKfqjm1VISUYQtZG+X6ejf/a3eWie4E+rV\nwkoVLD028s5PBxEvACKTEPrkzMH7kdN+b6Q6bViSPa5teRoW4Vbse6jPp8nq\nyVr3vpHT7nEN4CAbIqnbiUHUZvYa1zHIEfXiwsMSY8GEu3rv1nOGwdgGhmC9\nsHCLYGbxsisgK1bZ0Np75LEpWItwtFwtLzM2hKK9Ie/Ek+mHMc86dgvAEviF\n08gh\r\n=calc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.150f427a0.0","@material/shape":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.150f427a0.0_1597411817392_0.41639822792024717","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/card","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c8701b6254c24173b211a8b95ade7a246501c6","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.bcc58290a.0.tgz","fileCount":19,"integrity":"sha512-5tj2zTK9d7yV8tXxMSgFXErk/sN17N0JyqcgjEkgcqXuuSvgLncTLT9DOuicBkMK7bjbCryN/tmq1To0xyPWqw==","signatures":[{"sig":"MEUCIQD7gjYjK4tC53zrUAAfdUwovzFawQ2TMqMmzD5lDbotkgIgfi17SY6hREGkWgu67An7rMQLzZAN1P289vUIw6W7OvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzQCRA9TVsSAnZWagAABewP/3qdS3yaIGHwo+bGNMNh\neXfIE+9hUdgdhc2OicCap2gS9AWJjBMxeq6WTkuwnRli9j3Wwi7xG6YLcVBd\n1eG85h15ciAPd7ILFeX8R5TnydP3tPmrp2qynfIwGX+/vGNwsTVrpMvsQBb3\n1gwhmRZYV3jmnoXO6JClzjSPEWqgHq4c4+oZdgbmn6UskeLNMFjZSp/5BQM9\nOVbwoqWaECh8i4+lw3hKWal/5vaHloV1czauhOxbjAxozVoOeTn7sOefMlVR\nUpdxPR4WbnUJQfOW/GGefJ2e0CPrkbsP5lvGSpLRJJG6/V7A/5ycMsPlFAOc\nb2dPD8LMsxE3UkpP5mZUC/6FdVuQpltw9ueaSWDLb2UZWdfy+YNatBgjOdc2\nwnYxMRTC3OfUUjwWXDgPpzMhLOX/bguJIszytRk+Vo++EXLGdolEn8VbX9tn\nA1fVex0Bjd+pE7gajYANCMiVTgaF4Rbq4lKP+WpDjfiWXCK+b9+n/SwYPSyx\nEL220xiDlgEwVFTwVS+oKLYntMOXNvv1lU8ug5iVoMqvklCh9t+HrYMszZ17\n8cpWU0LM3J0kPnc8Msd+1gLZpGNBmkU1VR1tOT6Yfoljw6BTnu1vBSE8AppI\n69ctvvOnXHzpS0xl9x3yrM/6Onjc5lJdtQJcQsyG6uKvIHQO6x3SZ3R/wTsF\nidPZ\r\n=JuTV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.bcc58290a.0","@material/shape":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.bcc58290a.0_1597447375979_0.1662131864767793","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/card","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af79c009a452d43a1b397a6e9f143874c770e5e7","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.4f55400bb.0.tgz","fileCount":19,"integrity":"sha512-Dy0iMgmZpI+qWKAR0hkXVcWxO88Uo8kvQlqlss187wosN8DyqNKkwmv2Mcal57Ge98WE6g4ZnKMcy0WRv68I+w==","signatures":[{"sig":"MEQCIH6+p/FBm0ch8VXENzf4l1jg7I5hq4PteqRSIdS41gomAiBPGr7q1mIw9OQB6BoDN58xdPb4OB6WG8iimZn6qzsq4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKeCRA9TVsSAnZWagAAg4AP/1jD0FnVj/XsMekk+yJz\nJTne5ZPlKKMLpAp+rqi0jQU+PgQpiyIwHdAN/rk/hZ8/+DN8rubXqZ5IRNKW\nXe4gMO5GZzBV8BSGnKQHIgg6i696C1ftjOaguJlaO2e1VaWB/cb2zEpa4cvG\nxeGxEmS785pt4ZiITLeLPFs5TicKom4uA1OBpup5KRViMFNtk18GuiACUY78\nDDrjsOkrg5TvVK0minBqtNYBF3X1Hc26y+oALrRlpjW0XuITf4IBlKJmzy66\nSkDXuh8DxqZ+2C8APXszSlOkdPbVC51KOhhTrHAAEThLpyG+98RzYBndKjqo\ne5rk5GsYRADrK6BPTJus9orhim4iWpYnoYtFXMLtCHStrPAcJDhNrUT0m5PS\n+PlCD7hmD0dnzCAqNBUxoQbQE9pWB16z8rt2C+MNjpb6dX/1ZXWm/mkoXZzG\nov4qOSeshkhWVp7Tee773nVCUMSYWdscxP5nEqaXtxwDEbvWr26/oxaVHfT1\nTwE4bilKFd9MTbXb9h38HqJw3HsUdbdUAgyGZj64+6o3AwpoM9pCct8nHwgw\nOImWfVnwyl6JqPWRi+i6qvpFwfyXFgsqBLXGDH+3SCJ0yUxoPYVROvKQwWhc\n6QxuDxb1iey9+0jEM30BYYng3pj3LINn5cBaLyYelZB2DRTl6n+tGPini4Ud\n8XhA\r\n=oGu2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.4f55400bb.0","@material/shape":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.4f55400bb.0_1597682333821_0.43972262476115653","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/card","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39de8b83c584630b280224052647c936241b7348","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.000d64815.0.tgz","fileCount":19,"integrity":"sha512-RMB7B0kYuiXuXHZXUi+CE6Ye6UfEuY2HA1jvuDWVs6k2n5omR+VyzRFD+ZEAO//X5JQULRcNLHK8bxd8qv3N6A==","signatures":[{"sig":"MEUCIE4N4EejKy6dkGzZdoIDj5ZSemcH5h3bZT9wnuwJ1blNAiEAwS2s3PY9MnX7C7zaMr/KfH18rBh42xGWLapBbbq4akY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrivCRA9TVsSAnZWagAApREP/1FT1MR4+AXXsF4zF03h\nrw4mhvAhuv7HB3/Nz1AWhRzsVmZueS5w5SQiPFw38K+rqPRtltiz3hwBSh53\nRKQIVCSAmS9g0wr5tlL78s7mdV0ctjDa0HFj+7maWU2Mp478sAlYUsEzwEm+\nW5AAaH017SE1xiEMZ5wRRBVCcQNvvll/KijNYytJr+VIYTDyJLWFD6NEDwJY\n8oFbskmPaUzDgamCxCyMonJQ/OSTMLNDMQGoOtWHJTne4SB7hN3grr9J9pce\nj8OT5qGK5O8F3frGwiVp82AALbrtzyJ2DF8aJNRE9ew9pIxN0zX/yBqKmYYo\n/zhmudMs6HJww5Nr4zo9VPeYpJEo8LJb6fzCS51gXLL0qvuH+V7/NOJkgbs4\nNVOdbJUSdLxR0SQ9NouhyBKqMoHZolyczf2ZcwBO/30CAR7QyzCMoDigT6sg\nhbG5WJCe0w5TRnGFOCYhBBTaHwK7Q2Bozlwoqh3Z5fm9KlzC5TTwXT08BXQg\nRgnVIuM6VJjc/kSy+U/+5zAx+SGs0ehJX4n+7nZp+GFFN5YOyeTwA1wdtxvt\nKWWTLqhKc+NFcNAUw1+daI6OVssKwawQUKha/TtDi5Ukaoy3ZuwlxTXX5sML\nAGEy6hF7ksn+FJSVaFFWpSQ8ThrPIdjaRBlIyQ64p/+pZUzT6v6vPEPK2Put\nLDrF\r\n=0S/G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.000d64815.0","@material/shape":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.000d64815.0_1597683885301_0.2939629360223026","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/card","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edaafe21c45645f63dfc3cde9537a3cf5bcc0dec","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.defa599a8.0.tgz","fileCount":19,"integrity":"sha512-Tsc5zMJLjpJJT5JW2R9fmC19XfFvoXzB3523GfioGaFRui7Kor3XujzqITkGOAg32pOdC63xxFe0WAqrk/q76w==","signatures":[{"sig":"MEQCIFJPjaWCPiXi6zBsVj2PJttSZA3CcbaotaDsvnrzyp5nAiAmvpMVJYkA6SQfDBotWEF01D1Y2S9m6KrME+cMhPJiCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOulRCRA9TVsSAnZWagAAB6AQAI+3EuBEgvIT6KXTSx3M\nFl2qAbwYQZkyVh3S1xsTDIU885ctoMXDhVFLQL9JlnpGxb1ILnihiKiOZmDA\nofdqHsIwLQsrYjtNA080XrpvDhrm+/WRX/EKxWJMg/Hth9aVMg0I/USSVH/F\nH+72sYLv7oF47lvz2RN+DyBlRqkwxiRhJpBvKC6AiFIfD+BwIKniLiUhC7VG\ng5t70Ry44qjgcI69MIG5m8UzUEvAa1a6cJHgRX+ZgCCV4skpccjUBy5/EF21\ninRX0K+4gMnpG0GkeYOCAcTOpf7peTWzrZfvTM2VpaJIHXoIi2e0DITVoY6j\noJrzwf7vTZ3ikoC3cZs+mVziRL/382Qhp78kNsZtBr/ZLr27H64sfUAjFZsE\n6FitzuwKxYt3mDfoCBx607yE1YM2nsZF/82bptoaeB0bL/LWtZ6WOCUhiidQ\ngRujqjEC5kYkk4RKy8w0JRlbV8gRaItarRZ7kCEWBfn7qEDEbI8N11t/7H77\n0y9rabIVL70e538AG4stZH9p2IonghFf4WKXz8gQlDa6hL6A5VQMtZ/jiBaK\n7oJtwd5hany/ZdgOmjbkqMqgZaO+nLIBFl93pr4imedPM9TPvp/F6Y1hKSMx\n0wZSiPzOrzs0b49/Zol1d6fIr7h88hk83e7Vz0ZelG+cLSG79sffFGkJF5K+\nXvdZ\r\n=yFYz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.defa599a8.0","@material/shape":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.defa599a8.0_1597696337306_0.5546451646009722","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/card","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ab7a7f511d8dca9890dc54aada882dd514f84ba","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":19,"integrity":"sha512-tgzqfCkbXxaznEH/JI3+efrPdInMn6pxv95QRPTtSVzBJ0CzkuPVtV6JOplPtHomePR7UJc+hyD0hd3oOXSrzw==","signatures":[{"sig":"MEUCIQDKaI8z9DiQZXQAetmFlHD3zhzDiCXzsvkjPTJfYxT8lwIgHBmr09NOQslEueAHYjIpKUkRTitlmjKYD2Z/XlA8/Pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/fCRA9TVsSAnZWagAARWMQAJPDSZtqKZxj+fOdXf9Z\nI+fj5is071I3FsNGMtLaoWWnSEE1O2VQCLoRWH6n39M1c7ML3A2afwhgUEzJ\neJG5GDUZ0aDQONhGOwBroSOCEYkYjJi7d0Bn/bXGmfUsMiVewtT3bBRu+wR2\nUVV1PODN490PKhYj2dX47R7HGod7GXK6VdUuxyHf6Pm4+YqtHcWJm8ZQu89k\nspF5nNfWuh9WpLVAanfZzwLq10nWtM1BiiSrEHb2HhClH11jVQoXL+eJ0IF3\nmgWN2pa7/s735KJBTCEz082xPr2LtfCM/DvFMVqZrztFNrb82JXJtB4lHJRD\nfIrxjhJmd81RqgT1pyooKCrxZ4iQJfs37Ut0LqXURBFMziUf+7JMwLi5oESs\nbA6KX/XaQ2ySoNnX8VtAbOeoVZLloYp87HUh1n3etCYgEN8REZF12BlOt2/4\nyAxjxKzKXgKgM8d68MK3NAYNszYb9U0FIgXKjIdIwFuOSMqhS95V2BT1gZMe\n+Hh5d4ydCtu8cl5u+5yi9+t+0OnDgA79BsRX+z0iPX4BIevfGd2JtSTFdvmy\n5+s6igYOC5oJhF1rl5B9m+7skVqZ4en3nDp2gX7Szu/WwOjOcSRPBcTBdun8\nVz93Bnaut7yR9ndygTf74o5VkGiOkVSbMSXbGjAHSURF7ra7X9Nj2yLYornX\nGOzN\r\n=qYuO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/shape":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.66b8ed7e6.0_1597775838454_0.8913619776683743","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/card","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa47e60ce5e1d9510ed7776e770d47b31934de16","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e2b1033df.0.tgz","fileCount":19,"integrity":"sha512-iqzhJ52sRUGiF8F9tXDeTPzlwwOJlggezFatmp0sUa/ZwPoL8LGl9I1qHSmXq/jFwGFU2cXj+2xuMYdoe/9fIg==","signatures":[{"sig":"MEYCIQCQLNs2VCFvcKYkMxjT/TKIcRojjyP/wGzu8zt9rAMsfwIhAIE5+3M4XUKRWQt5l8i04lXuX3w/vWphO4UhzmrvyBb5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXKVCRA9TVsSAnZWagAAU1UP/Ri0t4Fe/zkdiA+aHQVw\n6jkTC+ZYMxBZcyl2+Gj3XeUXEyU+WyG9Q0iBoP3plgaw8QRdRhm8dfVf7Biv\nBGifS1YrKWRGncFn04G6dGcVPwLZpeXEmAAz0e5e8Wl9IX8C1xOIfg6W5c2E\nq3oMfFZQI5yygU2Qkx+2KRu6LY8ZW9erTUSejYFTx0lFD8B76yQHF3Rw4toR\nshvGIl94Z7ct/uLdfzkrgaKMbNCAYYBevEaCNh5YU8Cm6mVtj5WZTUoJ4NFh\nelX1LqzHz2dEgrOb1VURLjg7TSS/Z1FX02xzZxUf/VPT5PDXeCniLCR8p6va\nAlXAHRKoWzbRLcQs6MfXr5owKK97puH9ekND3jI9keAk2TJIWdXld+x3i4y9\niBBjJzMefXGwtjXrcyrSuqDHWKMSsLmMc/M1aVjfGFcTLf8QVUZAOlcdXCPr\nptOlZ3U7PtWQER+BjZv+90BXp4srjs8Ofqho4cYMc+6YWjccfdICwENzYrJk\nCsQVCikREIMYXFKy8kGffJMzKlGjPEmPuzr4Ls7SXZPCFV+KjlR9bZ+xE2ik\nLtjPQpOgUF2CKLl0cTsPimRfMqO0hk74OjxSia6sY4JW1py78VVVBrOcQ3Qa\nHfv5d5AQ8oJUfZ5xtcW0v7cZmMC7oIMbEit68ZmHDegVJrxWn5kW5vd/vDOu\nN2pW\r\n=paHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e2b1033df.0","@material/shape":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e2b1033df.0_1597862549442_0.705031963436217","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/card","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92194be019609c24655410a68084c7fdfaba43a4","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":19,"integrity":"sha512-ADT8AsLoPqUO4waamwVB/Drf/XvwC9gpH7MqOEKVyK3Zsgzfnke/bmAHWEiizixvz7w5WIH2MDHHuDvgFq8A4w==","signatures":[{"sig":"MEYCIQCRYF1AoBcuVX0qYh5rwj4kEV7kdUXEAp/aZeXdKaEsAwIhAL+66rmlCA7uEZGW0v+pfGLzW8leZVa0Dr8cU9H+1QRJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxmCRA9TVsSAnZWagAA1CwP/3CaO2EIBkGID32XatIj\ntgJVy8MUNV4+3cXRIMaDGWwRQ4wDCDv9MrfzQpuCjkqjrFugNRzhwZ1cklZu\n659FtiD/cd9KFP3Orwx/tJdnGnVY14NimP3WPB5YkL+OjyBnjmyaXQtkJytW\ncV6KaXcFSv7RPz/cZ3k/cuuWWdxgYPTbAOMSQPiKO8ZFmDa4iv8BTIl2YH7J\neCn+ba7PVJIkRH8mRDhJR+SCM5lvnWB0ZDTvVOuOoCWkvHvmv2uFopq8PK0Y\neD1z8IfAein6lsVBZL+CxREkeAK9USpOkoflV7FEYdyarGwzPRSviwdIpXoK\nHZCmxeNWk8RecZDaflgnfh/n7uSvV0vPt+bvBCZTqH/HisHe8Z2vtH0XCvo2\n0/+3us61oaX8+9AA4BRTnmrz81AJtEHfaLeyWBp/JMhOXHReho86u4c3tPsN\nZYXUx6QQhtc1HE98+6x2QONNp13/PmM0X+7c/dYmaGJlWDPUBxkn/G4+2+0R\nQcirZoWTgh2Hhx7xs7mY/GRiGiEDipjGVKBK8QY/vrquCDziUV3b5LzElrvD\nBBQvf77cpHDmpGqpYF+Lcvwszs2aAZS4kE9bXODlLW5yxFFqYegPnYW3xtvg\nLg2oJQgJnvHoO8wAwlLtm/19Jng75UlgqH/z2spIshvIZyFvgHPi0w2ERNlm\nckC/\r\n=7c6h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/shape":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2e8c3dd2e.0_1597865061925_0.14657056251207523","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/card","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b963ad1f7e533329837a6ab13af42dec2a6192c0","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":19,"integrity":"sha512-n0j452NfwfvImX+RG99IeVua6yrM0HSlyMrB9G3GtdWTDhA1rPR52BFmvpEekfjiPZIc/Xd771RbrymLjJDQBg==","signatures":[{"sig":"MEUCIQDBOLLY32/mtwVQ5Gta5ygIi5CrPBFDK2G9caCSnkFRNQIgd9W4od2INeWLShI0FXq5ehsHjEmUBxFDmYiIwDJEZN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXrCRA9TVsSAnZWagAAS3oP/1i/wowTLwyMM6xoxzsF\nYq8M/B2VnvZpSsBKPg2BG2O/aqaMwGv5JV5hT6yfmotBlQYmqVJdL1vp0o6K\n8x6ruA9LJSZokI+gyPdf5MmPAny692YVDgU2ybid2adm8ygR4P8qDmwpPZ12\ne5qbEl1j0RWkiPA3J7cfGL58S4oji71yHN0X8KlneeMQd1pa//EcVbfmO8Yz\n8duaOytp1VcwNhyUmPegYpD7sPa809iunwqWQAsg9yMuaBsn5DlM9KaoQGF+\nSoL+oDUy1Rlea1NMvABR6WpbJgNKDAI4Bd2Q269akGUHyxVDZgPwM9SEEuNf\nCzAzRNlXvpxrwDiHr2K2q/Gbs7Xjnhgv4jcZjv9++cr0kgtynMOUsPu8driL\nTo5MPFR4EZyAPjy3tPBkcUFz5nM82CcPa/Ku4vdhEdh/ni0Ad+gb/w/MQ/ob\nVw6xibkeBUj+lUeVwOEyxyd4k5G//NjTBsWCShXxjIunmXGW9xZ3inEiOYZH\nHPICYbYVxpfdyjfBNkSES7hkvrNieUr6VSJrTzyzNF2/q0ZPSDAy/ES7uckD\noD9iy/7ggx24TX9Yu9uF3YVSWXhMif9MFxHTJgpP9WogYow1BgFCGVgGHgxd\nzzyHIwyGcr40Me32/Ema0WJw9VqI41d59gZXienoLpvvFF460w5ntxhMSozr\n8a47\r\n=gXIi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/shape":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b2e80a5d9.0_1597875690937_0.6283831755146005","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/card","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"917fc76e7a56d8a08ae52553c6352da814a7431a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.ff88df637.0.tgz","fileCount":19,"integrity":"sha512-UG5S8PfGT9TGFNDB1OxrSUkPk7CGBRC/h5eZCG1eHl7DQuFzoZc+384ZCT8sKfzVC4b+Iis55BjCvPYvxfgMlA==","signatures":[{"sig":"MEUCIH3QIDXtezCXmv+YdUP6j7f9joMzaiJaFDtdwyp8ceFGAiEAk70yiAp9p6dsffjiiEhEKpEQlikmyIbmiIqqAFkJFjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPai7CRA9TVsSAnZWagAAZJUP/2CXYt8jpAyLpvnhKSdU\nvtuxYHhM7zi3qBXtWkXylHb3VbLEvRUc5LMN0c1qHUmvq8c0ZVHAuyQIlVq1\n9vbK2H2LDEugd+NZVr/vxCH2U/uPh4ZWAXP2PqgAGgvSIirH3LQsJKQrveh3\nzr1qPa1QrZoAKAzMHzU3YAJciOUJEsn4y66BZfuq/KwDPUYl5mAr2xbEUKRC\ngJuB/AggVPrHcFDhpShIKpJvNgl14Hl0bDt5Nj+DiErOP41zbDvrjMvelS7v\nYPfhoFQtvWEqhCwEyjJOpY+Ly1qp4d/Ui5OB/eyJKkFVuo43zRXXIFwze96S\nDZBr+xwnqXyIX1vw7SVlCUm350myBHRhSiUB/Nlrt2hJ574hzknHOMCzvyBV\ner5Q35CeKQbvDHfegBcUFlUiswZmuxK/oMsszxTuYh8MQBxU4GZ7j0MPziMP\nQZmLpRYvrRIziLZ+H5MGXwiH5/Pdo3OgF/B967Lti07ujeIk1bdDlImmdp+a\nTPDIbFPEbZvzLUs+wMqpcCnqQCI8JrIHEKA9suHynOPKdmQUIZp1uDWMUTJc\nrLSaLcKvVN46+sremCFq5zZRK1pvHIsXaURmBASPL15KSakvfq/BrXZwIc1f\nRtv4FFkMdVhtlG7qe3PHmyPlODUCwjZF5qNxhGpe4ceSQIAQRPd+y4ts82hX\nvMOE\r\n=Fdj9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.ff88df637.0","@material/shape":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.ff88df637.0_1597876411431_0.9329078618290372","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/card","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0850086c362612401211ee8ae5fadf8a0f118737","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.32fb314cd.0.tgz","fileCount":19,"integrity":"sha512-Yx0H37RdDiZ46+YkTZoByE8Z7sIoUAgmwDlT6kSN9mZVwZxoEvIAklE8B2th35w/1ya1syrV0XS/mlI19w6icg==","signatures":[{"sig":"MEQCIA7MsZKFTreKwR20xCUFrOPMz3EvVqO6F5ydQE4d58PWAiBvTC7XLKMn4UEoLNGsIJhmlWeAaVJHV3YEIFiRF+aHTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlKRCRA9TVsSAnZWagAAG7AP/0NtLR+BNed9WR5GPRaP\nCJbLFtL/cJHqMbhWqLDPvcosb90BQ9MnffepDPBFdYzIFpdY6MwfTz8EQRjq\nU5W15MqG2/32iCD8kXc+42RJrNXNtG76unnIBdkhj9DUAePkC9aoJwUkbG23\nZ5wPsytLrmad/IuveR/C+iPGNhJrWXf2Q2bpUbJlS3zUs6WsNdJecr8g2jfR\n0nGgSElduY9NV6WM1BAt8Cm+qL1Laxd0DjEc9zsTCOygyWZM962t9aRFiT3e\n4+8ymU+EY05vhf1SHyhGBa880KJPSn9zGYtt1849uFOtepmET2e/iQik9aXY\n012qJoc5uA4CwgCBwbkBPssaVvRy1ZgC7MJG58NbYHq5M9zfuJnEMU0h8Q2u\npdvJxhMOcq/qZEUCtn1ZL6ozahabusNnlG9LShDJfG4FdOFubF3SWlc/Tdgt\nqciZrWYBXiYhJAlJkrb32+528pcWX9lyzjElwfpcoD6qQlL+kI+digdrm5SP\n/+nnbY46nbxPCk7Bl8wcO5aaB2TCtpCjAnPJTF7/rBtBSXem2c0wy/SOMy5D\n8JCxA5fl7Ku5YCDIcYSanPWcrz3LsXX/TwuKz74kWC2Pa8ESKGQsrOhq3vMs\ndNAxvtKy+RKIsfsohOEJSf41z7T5Qs3mw2wnQvf2e9le+I/H4ukCl1ugXnUM\nBCFE\r\n=mMxu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.32fb314cd.0","@material/shape":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.32fb314cd.0_1597919889502_0.516647058182423","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/card","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17bbf7f4d6d60fb51f4f013f47013841abd25bb8","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.546277d32.0.tgz","fileCount":19,"integrity":"sha512-HqSO38JkBL2p20A2QVkyYXaZ6mI6fo16GXjQ35GzWXr6ZXKleomSawQq7/RD+0IF65qRFUkt16gnjzrJZMGqxA==","signatures":[{"sig":"MEMCIGqhx8wTHSL4YiKXyjoraMuTGRZyEZs60NxdKamqc53UAh8B4YkkWd6AOtD3bVaOOHI5te5/RKuwdcfEcsAi3cuk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqhMCRA9TVsSAnZWagAAjGcP/2zJYqH4mSVs+WSGhrv4\nREChCsNayZjrsFGfsSa8jiuz2es0ExHIh0j3jxm5HxhMX1r4yg1WHWM3wL3a\nUUfoWcHYOVAjGEM26QSS+0GVSYJ0yKSEGTRx8klEqP1MWTjqbI0ySqrZezsJ\nRU5SHqjsPguZjZdO+Iec+wRStQZR+2yzcLpkDtGfzPCqXQcxkH3M5xHDaWg3\nGRAiOjdvqMeAZAOJ3WAI80oeVr3OeW+YMxiEJZynDqqjNRP8nGWzCSHdC9XV\npWErpeC1ipernvfl+ve8wdhN7fy60wpyjHWMS7HGIGVTnZHJeVyKyp/QEPbB\nfmW1Sllyj7jir/w/Uu3IgF171BporYjvWgJIq3I7kRv2Qh/Px9YL576Cd8Us\nKqenv5XjBBUOwtQFhaRD4M4e5Jy2XtnfIvnKHJmTE301VAjuvKYdbLyz7cP+\nbqAnCY8pPdBgL4XLmxT7tQ1hqdsJ7zNe47jbhQ7SnGiGuahLpdb1IPJ+Ji2s\nTEIIvGgh3CypekQ0nnplxQOIj9i9MqaB4n9xODdZLOJJmJHW5lpySnjnezCo\neCkTmvr/lleM5yxx4aP/GcEhXqkgQGmCia/ck7d4on4Xnv9VFK1sk1BcAN1E\nHSSGiWms6YjpV0IThaYoJ1o6q5pa9QLmtniOon7aWuD9SSGkEyAXcpXmYR9F\nDIQD\r\n=VQ5a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.546277d32.0","@material/shape":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.546277d32.0_1597941835727_0.8575897759107627","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/card","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eeb37d1ca8d91b02eeab67c77898aeca6afd990","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.da72839f4.0.tgz","fileCount":19,"integrity":"sha512-CvlUwXkLMIQHwhJ9vJGfl+SzyXPMIymQEX6W0OdI71lPtgeA+sQsQ94OAfsWwhAS5j++2m4triAqbKC1y00Byw==","signatures":[{"sig":"MEQCIB5DmkX4Uw770MtdLLLM72yURRgQQZfF9fGRKtHNyR8dAiA9omnxJrQiWs8NhCpLeMrX9g/0hxz5cNs3e7dKHXO7uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPro5CRA9TVsSAnZWagAAmT0P/16clT9b6TYTvF4pyDdK\nuYELOM2xnjTRiBRbJFq5IeRWR0nd9OzWQdcR+/LwcuqA8SsJLEodYvDPOyhF\nZSnuXxZjXs1X9fF2/UjqEKHXIy60MS2RlGKJDB95MA8cQb4STlkwZ/BhT1zi\nILNJn1TkEvCMFmuGSE0SaacSeHGwumjcmAtZlHucaKkFisZtXbhetearHzJK\njXQgi/JgI+eIcMwPU6KPn7vOi7WoTJCLPWMzrbxuV9ccrdtw+FLqaOZud7Nl\n1HzdRD9SLeEwiTn0f6PhKJLbA3uqCjYdo8lHrMyhvnWsnLFkuuEyIwoCgrb5\naWBtRQO4CW7nfi7hA4YpgJeWmVrC4B5t9LoduduXLOCInPanONt6HmIrD6q7\nnKeVwTRolLoo7ZtQdAYOW+sC5G2/vwca3XJbG7rW2Zz+TosMZVGlmQoUDWry\nLj7MAKjhoG1tQvUir4e/rIzUvFJyVwLIK5N8cm52AQmARjb47TxAo8U67/Oc\nQop7cf08CG35Wfe2b/2OvSFqD4ihFflR/zkvvfF+n04MeGGIak7nFRgg3NoG\ns0vD6y0ScbX0DU9hEHVXl2KFCjAYiWkiU0sUN5VoJyxOxkp9OCHVGzmogCzd\nyHuQhQNudtADGe3WceDfoZPrR9YUcGwaXSFdXjc7I011+3iwv3OJcC5VsOwb\nOR72\r\n=Ibbe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.da72839f4.0","@material/shape":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.da72839f4.0_1597946424666_0.4473119575461897","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/card","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b1ab6594ea1841f3f0666c936e23bcbd1723eb8","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.346069ccb.0.tgz","fileCount":19,"integrity":"sha512-DceiqBBzvlc1mk4KPaCqub+IVYQXuAYTABuRCt8WO2cv5mIymtWL/iWAgp6BrKImo41M1AAlQaub2AKmTCNMiA==","signatures":[{"sig":"MEQCIA1n/7fhvWNOjHopIlausZet/wmT1FV8EgzHAHoJ/eg/AiB9rEMgaNZa732pS0ju7pBs8nb6tnzQJNPOqFmn2XWWxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6QCRA9TVsSAnZWagAAg20P/1N5mVoqc8yXNe1WLOUG\nib2wyFAqyBNdOZfmw4CVuaG6l9jC1JTl2lHVCqn439pkG9DdnfkC0E1eKq6m\nyon6dPlSqCISkaR9LqP0wwFoILFeo4v82I7CLoTzCMjrTV1E7ap0TnRyWKw+\nnEIJ8lu9Mwm7XUH1PsigIMjY2/DXQHzLsuy0L3iLWp/nPjoLkXIb3KKPeSbB\nvERKPyCV9z9xUu6ZIDpOKuDCXSW0MkUsWvYFi6cLohOAOMcbeFmJghlIB4s2\nfK3cPuJkcYUgtNv0sZ4cq8aNm4hIcn81F9bafTWLFGgeSK4VS7bnhvjTyh2N\nNdX3f0fAneqw4paY2bQxt5d4Nb8ipZQ8JkyDMAwYU7LjqzIdD+qyBA/nRz57\nexoYIgkTGH9pFWkkd+YXrkXESNKpj8YH9Pqfe21JT60CHXIhk4uJ2T5G1j6h\nZmeBTXSnfstzXmcDl+Q70sMv0O48U97GrFrfWAt/pY0N5/TJ6YkEp4iNyjBX\nuM/fmk/bbM4tOWGzXrbtHImNFu5hSaC0UkUPsSsn72j+DkZe5QX10oBRwPQ+\n7Rzrdmo5QbxJLkF8EUAdd2SL18mjdYZRTSPnyjW64twEBTp87K31wdrXF01Z\nJOi1zZ9r+H/ut5jggWTsk9pmNxuq25TAar+YglffKsjE0O6VLb6CNuQ39lvX\nlS5h\r\n=ldrO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.346069ccb.0_1597947535978_0.2709900555191471","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/card","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"056c493c6dc582ef6577ea9a5b20d0fec11d167f","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e27c5802f.0.tgz","fileCount":19,"integrity":"sha512-P4vzEH2FSF/A7S6zw7ULCXhlzXQdPu4++TCYtOH0/BH+7mvUaS1NUFzD2gfgxd4cAggZpW9It/HdgHUgHpQrcw==","signatures":[{"sig":"MEUCIQDVkbmkAhgn4MKKgZvikt7qOYYLOYFA+AG/C8fILhemAgIgbB4AxqG9BY3BbCoID3AgpspzSypXoh8mhA22AiNGwo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsvXCRA9TVsSAnZWagAAbk0P/iamwxgc3MxnDYBXr9pZ\nwt0ics3RI2/zoeiocWP7lMUd4leUMkMw2xp1iERWVHnt5fSCf71V50xah4CJ\nDfu9qWldTh3wODLYVSZxkO9jVIp4Sjj2CEhBe8EDe/8Lbm33e0sqfNPw3vcZ\nn0w9Ma+duJIOrN4iarT0qPShE7XimSgangEppw13WpE+UkJsteENA3kuJNzw\nY/P4QDGIr52jrSq7gQuLjBNQl4vh75Lr6m7Xp58Ay2vNSSdkMx7m37zmGzTj\nlDmqYGxuK7MnsXvY5T2EzHUslJkY9c739sLKskbconGeIEM3QuiTndOyzr6C\nzWl5/CxvlItHQ/bqANFTQIIz+gH3xtuBwXPdkZqqL0x3c6yrS6i2anxG+JtW\niR47lcyPr9pqVQXWHXRKpS34TXLN9BSa1620oLV1ztDFV1L53lQ8x/fwY7f+\nLiqZCHKPrajhc4xPAxApWn9z2OYIpfSN8zaMKfCxiDiaj1CdwStNXQA0eyDN\noZL+2pwRvwupD/DL7EUSQ3XDtQfzEBpv5LfBpPcOIhvOAk+3kY90c5hdtM2v\nD4yY4V2+Z0LMJXAij7Yz81PyO2T7kB7qeBPgiPknxg8pmc9w8iZz4ZwFrfUT\naTm5DOkN0C0flaIdpUDb6ltRrn+zTXgK6vttZwAhe1jnxYQdB+Hfz8+adVAR\n4l1T\r\n=5yAn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e27c5802f.0_1597950935007_0.42725457844566805","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/card","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b108261e8b648797ec006dc98824b4f1b9bc17c7","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.f4532b9c8.0.tgz","fileCount":19,"integrity":"sha512-/FpYJg8KZx0VhOg0IWe//olF8voJXVvLZtweLPYd6XbKyTeioJ+sQ6yInuA4orShAC3TfRxcQt447i8urgaNrg==","signatures":[{"sig":"MEYCIQCG+7JVHmMmZriwAOrpktZMY76obN7wkZI9c0CFdesBPQIhAL7AZNZp8VLs8f3Gw6r6e5dvHT3s4DGa0NC2VSy4M3kW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXTCRA9TVsSAnZWagAAlSoQAIWKhgE8mAPtc7NpcXGB\noSHqfkxxJj6aUyVWGfZuC2swq54cOHjVxnnzNbq1pMoyCbwUezqVzz7diNvV\nn09/r4qkccC6T8sbDfSSgLeA9gDfV//qk6/d0By10zWghs8JdwtFMQFuha4l\nfJmxRQxhA3Uqpu4VASfTkIWeSDLv2lfqdybt44p2cZVhRxhOEhbPYYsHsQgl\nXrIfMTVQjY4PsjC6jWmOPRDhQCya7pFF2qHdmmlHurIOzojxmw4uAVOzIMve\nYFec5gKHu0bojUqgYw3qvDvHM002o+/YZtPmgUS7ZJcYN8eo9sSVWtZGO0un\nqsCVSrijfHQhT+F0gw1aBT+iWhtp4eO0mYd8GU4CjdiwphKtyadZmNbINECZ\nSdcqon8XAFeyNeU/soJgkgsSHOczSgqLNWazn5e9EYyCYkQdmZUzDpPxCAVI\nZPwUQEXMxIloENkAqn3DlJ3PCFQUso//nSopFgw/WLG+jVaERhj8sLqXc0V6\nL4Sss3H581JHXchsNJszYKvnd4TlpPeMzQRoqa+0UwbTtwBRBL1T6lxhqO7Q\nJMzmJhQqH4VpbN06l5F4scaz8GCIra8mhAjtxiDWuT/E8g1eqe2BhF0Fp5LP\nxnmPkzdfnSHcjwTor44EOOdZb6fdvt6jwQ8tygjQxUw+0JgtOCK1sJZ68Oxp\nvefe\r\n=VGX6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.f4532b9c8.0_1597953491438_0.24035598110939738","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/card","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"886d2035ab30598de52d3c7686b7291a6f21588f","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":19,"integrity":"sha512-NI4NDfI9eexJxBJP5lCxaU+9QKQPDGiA+Clh3lH8RWd5TOQA63tHoH06OGRImEmEaCt1hjTBDnRNhgOmQjshRg==","signatures":[{"sig":"MEUCIEtZ4QbkrigjbBFygpiHuR4i719TuzUHuJeQD3DOchnVAiEA58XeIxVglPij8HllBn1VJ66GyjmIWWonopoyFu8/wz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXwCRA9TVsSAnZWagAACqAQAJFxNime5GvyDQYJbXfZ\niBduyFTMtpORqUPAOLwky7XLIXa2p1//SjmjmIdT/wID8OlChLSwXNxll07M\n+N7JXUQqK9M8W6uM6fMC9NSz6/iyhtoGjmb8bb3qSzJXQyJn79byBagS5kk4\nJJDd4DUiQfFO6QlU3WMJSmO01MaUuNhpdG52C6ycJ3WSyXXN7WhltV7v9IjX\nazfqvj8L9CkdiGtYzoEulhr8pXnb7li+c8n5U9xDQ1vxrUQz328dgGXzNOvW\n9H4CxtdDLHxVWS4Veyf9lj4gIH0EBWsHkJM/pfzcA3Cmqc4hNxYaJ7On8ZbZ\nHUHUYDYGZ1dpktFvCR+LyL++ORzIms/ReAS5YFr/TsVuLltTYrdQbHkwddPr\nlmaugzphWw9IpWe2lOm+hexPBd51aJM92gBhrRwozplvJMGxAiXZD+4rMnvw\neuv0eVGwcOS1CPXnYyEYO37AHL2d/XowYmCzUfaTWCNh3+agMRXEuBkaV0l4\ninLc3lqYTCdK7ibGudES71fzksKAxXBcTqV5f+b315irJJj29fKjQepi4N+m\nbSc/CrDuQE+CY1ZkXoyp2pIVJVTRf5DzgEN1VBkdKueNy0W2yHOmM9KBXH7G\nDAcD/DsgKMLI35MDIQFc1BIhyxGV3GbW0KdmtWE8FHMZMHL7RVSv4PvvL3Np\nwVYA\r\n=nQTk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fbf73c2a6.0_1597957615963_0.8377764069846962","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/card","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"469d5fa85ee279c036e6ae52832839ce55577b54","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.cf800124f.0.tgz","fileCount":19,"integrity":"sha512-UZo2HW0CFD7j+BvT/HEPmuQucP/ONyp9kSUPJq8VK0mI3vimq081NQ+dsR3ijPqzrUXjX5Ktw5E6eGbIGN9fwg==","signatures":[{"sig":"MEYCIQCqTtrYRPxkAogOFY5Qm58Jmu1rJQEczUKDsnCrpS+1PAIhAJO3u+gSLHEqoxxwZxUw2+RYroadAfoTWsHYPffkY6rJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDACRA9TVsSAnZWagAA1kAP/i/MXlm9ZiruvJluTqT5\nk9LgFdcXaNw4Y4AxwX865iFlC8WL4iSBS7MbCWAxAAQDsSdi0BP/u3XWlbIm\nNi0JJk4Xv2wb/qYxabOpA2/8nKqWwb2Mauvoki0L/bUGRfKyRoyZHSIKLOYp\n/ZK9r8nR1fDzo1zAlJBYcgj9M/qcVZo302T7oUbuPovA06wZ2MVXgv3jO5fW\n6On4RfmbZd1Sc5tp+0JSSxMVnmaWLrnLc6fBmN27cfOl0TxAcSzUuv0sPrrT\n+thTB5n+YfrEla9eThTC4mFEt052lC2n6ZnMvIxaNSgPwUh52SHvr4DT9MxN\nShQcSikJr23yJVWd0FBeU6EiiXj8l4TXvsig2P3xyJ0noaiicEzpwwUNgm7a\n+c/s5TGT9E1AbvnMMLBkGioa08O3vemLIiQw9Q2iok28orsgJ98EeOlmDg1k\n+JkzGYQAdUNIPuLTZO+Bdo+Wlpga3itP3fJbnInF8rGweUXZ/esianmY64rT\nj+jDlf8Sto61JCtw1UFlEPbmh5zK03E0UGu3RvvguL+z0d4owy79lkHaCRmj\nQs5b+4jOWqcUAKGIho0NmGua43vzl4CBZnkxL52bhmxuehF/RtsYIJDylmwn\n3uSmzZgKDAN9OXRIfN1JC4kTYvwBPUZV/jg7w3L+0CUClKXURkXlNTQWxELJ\nXuFg\r\n=DwHH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.cf800124f.0_1597960383577_0.43483855116541825","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/card","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1935f8989643357506cda17ad4df40f82db55cee","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.95e4eeea7.0.tgz","fileCount":19,"integrity":"sha512-iQ6iMNey2lzHpUo6HM1b1dnaD34uZbO21cEyZu+bJ95w0FJuZ9M+odqRrOh31YFCTpolGm9UnS9rn6gBVJtEKA==","signatures":[{"sig":"MEQCIA/zdUkce003BGSWknqwz20+6JMDnQ/Fa2MGbH1Rj6IkAiBqC39UKk23Vhj1c7aqgFv/smx0f48Oy6ZfhWAvv0zLEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdNCRA9TVsSAnZWagAA6OYQAIyciSAS5rGrGiUq33Tv\nvFULfI8nQB0NXRUSYn7kgNDTIYB7zWg7POXdAll6oO0Xjf1O3K+/884KnljY\n9ds7TksrlwmP1yR6EKAgQOmttPZ4m0YqsqULo162C+qjQsc8y6MvlfBDFgps\nRTXSdDpJQLp5bLgFrPx5zPe9NyCPdsV/0aRx8nUAuAvoVY7oFHW1NTFU3vET\nD01MLfAeS8J0FKb0RaPgjQAU5og9tM8W0H3hYRVt0taWByjjDgO6HhoZv3aI\nkkTedMEWv8WdAjjJ49aEMeI0Q+6djv0/c/Nh/q83m/RA0eBhuvOvRSP6a5Qj\nexFbrWuwz/ob5u/vT6qzQRrfVTx/wd8Ij4GPVIXqskVyMJmsmRuhbBQqxeKx\nufe/5N7XBqF0UIzQ41bbJY+shDg6KC2kc49X65QUyN11G2UfVzbExUEUJxmx\no6+/sxOJ3Ci3dzEP7Wibz5DrcxaDRYpuBNIvp9VEledxCExzO4Lwf/rrV2yh\nTLVGxlCg60uEQG9f3GV8Z4k3YtISA90lMynAl8lToP9PXbNBXHEydL2iBnIY\njCmyAabfdMfuRzPPPC+iY5F+/Dx7F1GFDgmAYzDpKVJ2TdZ+r2U1NNzsq+/q\ngprtg1gDIemXthUe3Dp9t6dOM0YqeExd7W7CBlofp1m0YAfRVqoySGQ1QnXp\nQ1Yq\r\n=idyE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/shape":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.95e4eeea7.0_1597966157454_0.9523262895494093","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/card","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c839479b749c744d980b7a69023af9e1dae6b1","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.91ab1c62a.0.tgz","fileCount":19,"integrity":"sha512-wd1Aqo8kF0sUZRNsQWCaQAlDyh+mXtOIRM0HxJryLLxHyiYDdVSZsjIwGJhmJS2w4BusFN2RjTL4QbgHd1HOPw==","signatures":[{"sig":"MEQCIHl30IOZD8ifFwq6Y+cC9rOlfmMjGNjjpkZRscwoWXlaAiAmr8ZIrdlAJa/r0Ck3U8bNjiKhzagVRiMZVMet/MxwQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RMCRA9TVsSAnZWagAAcP8QAJ6gkcPLYHROD6EaX9qF\nTdkZBCEJd2LlFTC/HdWorhHOsmmk8jfJ41RE+w/w4kZGVonqxp+dn9Y2OIp4\nmw+YBdUq3g3QsgXt57cLT51bF40Rq17eyNKb13hR2GtzIWlXcc/eYZjhVN0o\nbSJqLZu2s3qHIkF/8esvgicnVINmm16Mu230xFfGVv91wH79bPMYS8/G2lH/\nnpkvQ2wOGxJi3JFa5aTfHJ5DpMA9CLzVZsj9EozSl8E+OIRNFl1fyHxvwnAo\nTryQJuNDeXoahL+GHak6ynOWwTd3cBdrtKf0Biy0QfG63xIv5ZvPDUPGYYh8\n6YtTFIhN8WZHnGrAOgPUrxEWsghTuureI+9CPxg0/nX/mqz6cDHCg43KcC5c\nVaTjwgKkIsxHCR7WM9H57cznzE17AqCwLhyc/AGJwWbDvSC+H1/RzeEVjTIm\ngR91j70/uW+890lv9+KaNZiW1OVDvxtE0KimkU2llXci8cMCkSYKWvn7vozX\nOFq3LNRkVpnglQYjKvZ5GsTw5cHq+PPT+ze51OwZzNX//1raeTNScY1kIi0h\nFwQYzPZaEXCclKt3gsCGEOgePV5da9oUqphN/Ot47AnIGX15vNkeXs8P7eva\nqY8C4ZPuWQYk5vDcVTcEGJO+hzKhUC44D2nirE7q6gufb9vSjaYk6BlX6ACJ\ntYYe\r\n=p0jj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.91ab1c62a.0_1598022732579_0.10172273526910014","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/card","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"450d3d806610faa93a93cedc410b90d7b5c4b91d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.58eaa9f02.0.tgz","fileCount":19,"integrity":"sha512-j68cLghkvBkgzB2m8cGQ5POsQ6uV5yESlaAN/D9WhLAsghqlHy0TQ09nUOI+SAX4T2rjAJL+VBiyLh4PqoouBg==","signatures":[{"sig":"MEQCIHeYOXbvB22y9D4XGqUN8+sRn4J87DMruixMxPkfN4QhAiB/F5jHn9YKaaDd6b0h8h4GkYQ8v6/8YEXPhHz7a8j45w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfxCRA9TVsSAnZWagAAl0sQAKI0Ngo6vu34agi+Vyx4\ngcY/u75dMEpG5TqTvRnRK5xs/bhBlz08lKII/ZhkjaQe6t5WFj/bhFeefLwa\nqbwb4+NHvCaWmkNPsOr6AbB/ZNp7R8CvFxFsf7NsN1i+KWGrAZyhG/qaAnTw\nMS/r6fomQljkln0mGesTw8wZOAoZdmj82yBKxQVrlu4MSt80mahi65wlcCuO\nAzjXm9cEROZRdZK/4fNVl9/tbLtEPcY0rTJmpP97dDUj1/H2oRy0vn7j0AaC\nwvz2P80EudPoTeCR0J1kbCk0h/SdetHeWECJ0IdMU8AOTwjOODfWC118c2Jh\nMdPEN9P1y5FU95G9vFDGMJKlCpzQU0n0UQ4Z8XuZn+MDWWM7sbvUEIreTdal\nZvDlJivaZXvO+iIQpYDss+o3ofk0PPlDlVp1e2zlSQp0AcoFiNWVxTytpiIW\nhRTRNY/uZ9JtQGqnxwTRwciKDYajmvR7HwEWRkPbR9YCZwj2ACKJF1tXL/mD\nUmucqYycNrrG2oegLPFY+iymFQ8qEIYflxG+ydy44M5IuNKXqAzJszkwFOXi\nT8aqoYfb3IHzkI5Ur2Mo83Qvx/MrnanVlVelcbcJZvUV6fOYH+JNyuPKXQQM\ne+pkce7Gjfv7oDH2tPrYrk1aPzj3ObWrhf7Xkpt69InaLMNg2Mhu+eF+8yki\ncxaf\r\n=ixSl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.58eaa9f02.0_1598040048566_0.4681802798588224","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/card","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a752aab8418fde5e7fd213e14d3dddb2ab8013a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.238216fc4.0.tgz","fileCount":19,"integrity":"sha512-q2O0SGjUUPjSKs5ShU/mNP5TabKYmJdwfaVfU9ZpLyQxrxZ/T9HDZimCpwzK1D2fi6xZQzPS47u+jAk9U4Ognw==","signatures":[{"sig":"MEUCIQCaHod/ksGgRALqzuajemsI3BCr1IN6u6VXstUIrIvL1gIgToKTTaEFNfxN54C20V5Wg5/bqu0kGOFwyntd6G/P2X8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+fCRA9TVsSAnZWagAAkQYP/0ShSLGcv3Kmvfjgx57T\nF1Sy3DgYlaEwGvVPSAJG0wDb39t5Z7GPYjH6cDW0dEy9bGRuVzqrbPDS0OLT\nj8Z0h7SpNYIOcbry7WK1EaO7a0r6OlAAPHrvDLuUzMtPmtoOyAAu1Qan3X9v\nVVASjwf2RFDSoMLtnr1Jq4bxDJEsAeYaCgWoDfu4hV4Z92vfdfPcNl3RM7Da\nXjVfiUnQ+NMkK1e84MgismMjwIt9zSar3HCCO3B2v1amf5AR2DGC5BORmvND\nt78v5/gM+wNUlf5r86Mpx1tTlyA/KCe45Kl0gOeZ4G+YREBQELhcTpXZR8Li\nY35l8GJpafQyc51AchTjrIwk6avk8kb3i5qdI27sm8VprpZcEWrCIwfDzCiX\nAzfz2WKOkwqcAb2oPaeDPVHV2YOViQE8j+YHPtHJsYWznNrEWcm09hy/fVn/\n4Bqdy7T1GATsysLpe+VtlWuvvuwnb6rj5wANITUID7PkCMS6iPyN3FPIJ0kY\n8j61FgZ6aPotJC7xR74KhnahZTmKUqrfFNhW6kiLkyRZThw7KmAr25oPbubz\n5TJzlRGNC6ZrVW8SnSsAiDHzA+OxW+9c9BGm+ZfY6MUvkjm46W+ovi+6C/xD\nRTvKFaRpo5MPFHIjGFsJ3t00yWQq4bI7WFpt1/yHODBjgnDldaawB9UOjkit\nCyE6\r\n=rznZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.238216fc4.0","@material/shape":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.238216fc4.0_1598283678585_0.7424133275420248","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/card","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"271056b5466e0a2cc25312c2b6365f6ccd3f8fe3","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a1c65593d.0.tgz","fileCount":19,"integrity":"sha512-BkVDoJwkSpUPA3YzuldS+rbdURU9wt1q08W4poiq2fY/maksiRdhh2HQeW+0/hplqBhreWsjgtJyc9YHjT7pcg==","signatures":[{"sig":"MEUCIQDMdJnk965xgJStkqXTxx8geTb4Y2RcI/C0BFl3KmJqkgIgMjLnE0AXVfverfnaJOBETzF8MCuZAz3cNRVivMSy7eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+yCRA9TVsSAnZWagAAtasP/3kH4RzX+Nt35+Egv3aq\nHhKpUlPXPyf1hhM70/TjaQ6Nn0G9wq62cjjrfVCoKukq6mALZPBDKyYmgRGv\n0CI7vdjv74reatW7Jz+gUz0faVDgo1OVc+TEtU7CvLsLyWcwnI376fkdAzu7\neTPXjEepDWdgUn1i6WhOF7C/jKQpHq//6RnK6UxfZFkOtj/NCqAAsKe8B5ll\n4NTAYFERB35aUbo8u3ShIEq15ZrDwAlW8vAzsUpbyTkTgcGNsWbNtn0WVYEn\n6EZ7z1lmOBVMPJb9TPMa9AupvIJ7gRA250/6KHpv1uafed5EpNglmbQmBaQq\na5lReRKXbEqHrkCFrsFPDsHK0ONeQRyWVwZlRMANtiVzxBQl1lcVc0ZPRN+x\n4RngCoG5QKq4PH4DoV/fVWWBoKT8NhqeIdHQ178+4TWwS2uFApQPqFiOrbhT\n3HwBIksw/q+qqgpGQEc9j1MD195IIwoljhD5KCFlsCoPZdyrHbk2ljdMa8f1\nSRaiywaPJkmdQcKd+ROtEZFUXFZ4XOO7+LZUy4l4kZlcAAWA88ZPO5UATy1z\no5g8czwWbPM0d9LqDMWjBvUDQMnZ/XucZq2TFM7EGrCLNOLw8OF9GxT5LM3w\nHvQxADnRPtDLhnGne1/9DM+tQw3QwXkrFX21MtxlNypG1AjokhJXVQ7mPvdp\njaE3\r\n=HUoK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a1c65593d.0","@material/shape":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a1c65593d.0_1598324657847_0.4257680434903759","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/card","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35bc60f23853438ed648c495b9c8179919df64f3","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.708cc09c4.0.tgz","fileCount":19,"integrity":"sha512-jNodXcrh8ySf4qnDqrveoVRR9/MmNGXANT9D/FFJXBwbYxIusPCmbhRpoYzrOi660+GGUnMD/umAaFrsbCOG1A==","signatures":[{"sig":"MEQCIByYc2ZDm3Kkw8UKflbDJsLEt+XSwuMutauFoyMsGh+vAiAv5G8t7IDBc0Nc4ESezcg72C7la3Muh/h2kHVRBVLWdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTECRA9TVsSAnZWagAA5OAP/i6FRJtnxpwJO/98DgXH\nSSzlXhUOhDp2x6Pn1QroswUwdKa4BMuWY1hsF6qLscCqfBb9jdsS7HRoYNEm\nd0FFWv1D7U6wADosE8k/eaOM6Cb8HxID/B0J27l4OQcWk5cWkZpA2iJHDdbj\nQ3ni6f3x8Cy7+sBNo8YaehZ5ul6blwwoPBiPPwVKupKpHdgjFu28DveDeqJS\nb4IMmhXhRyCwNepOLCpLRSj9KayOFnDlDQjzwZSux70+j4GAsJxupLWAje6n\nNFMwvGzsZq7D5+rBxBRtpOTBENWp50Dl1ybZOUecXdM80zVQe7P8e+42jQvf\ndjvxWmMp/Krcz0XO8NtjfW0HNs7plkO81sZM7c7OpQq6htr5z/FwYQLEaenW\nJ9VdqlBxjYFjFsm0xdv/635ZOCeuzaiSca2uKtM24zyKnyjgtw7M0dNjkk3K\nxgeuVPVLUjaXk/5heSeiwVOIB4zW17q1LNLpXM1Cg/ND0cFx/8QQ3n+mtlXL\nI1LWl2xdedRYf5IT3SUb15x1Ri2xLrlXCIbmykOUjaNVUV/iVhCzybyBoFBo\no7/MebjXbd4cI0phn+CYel86510NbKQ6vLGCpsgGX1RqwW3PBYOt+GETuvPz\ngSsukyHve8JiF20ziNCPYFKO8xBcNuIPGsV/TM6EYpbt2tD/3OxAZIee9bpy\nEAfT\r\n=Uk0o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.708cc09c4.0_1598371012415_0.8810419420339639","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/card","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e28cc47a610827d230faac3342bc4c8f67d5ebc3","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.19bea2ad3.0.tgz","fileCount":19,"integrity":"sha512-Avi+tthVy7cuOCGSsNAp1yAwqUYC9f4hzAbpHxuOjDmOfsfiIpYgnjBvKXLmhH+2uFLLb3trgi9HlrQBfkkEZQ==","signatures":[{"sig":"MEUCIQCjIZjM10eGOAkGoBs8RuO/giQnYmygyqUz068EXwt7hQIgHsDe8VkfzHqjdgEjR6+J3wXrnvMCIlywWO24PlS9Nt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7PCRA9TVsSAnZWagAAcGoP/iBn0ZiaK9fLoosDK7KX\nfc45rK+YXHLaJ6qEsNzystfD9Hhb0I8VVXjORDICJcKXk1Yfr8MrttOCm1TF\n48NctFQVbV5+akVLqWGt8ZdOjfjNy8y0/r7T80s9HLA+1FUPEyaLGY9Xq8OD\npRNCTX1/OKmcI74atLvbFyUJP/yZSfiI4E7rZn1rlAStvJPS9Yo99MyGUPMM\nUasyNEzPR9djCcGryRY58CxkRsaO4v3GCha6Un8AZoJoi1YfyAYTDgihiEvu\nuOtex99YDuumMyr708+m+H1JZXJEzJc9xM2zv4eAeWJnFXHiYIsC2TIFqd61\nA/AaXbGvNzXY7iDXwDvC0uaE6qqr7L4CnzpIY0YS9xOmFyBaXwuIGS8MhRZc\njvR+L7tPJ0gx/CK5HEO0c4vIVia+YauTpsSsEjNjBg7XStmNoEM0PmfjhD6Z\npDoYjbUfcT2Ko9nk1LYDL97OdrPJiNgwuCTvdFTcuOnTzpSvbz3ziSo1tI5e\nTC3NtT7lziOmS/qCKP29wXzfHsv28kKJ6K7YQF6CbVAB0L8w/fjbF5BVoGFG\nhWuf5VGpYvZMYdkr2mYiFR6xmW2ANi46x87ahS7gl9Nmm0N8u087w4WM41ts\no44uY//JiimNFQGLb2ucEVXO3qEGkBAaOoQPOPg9thySQHEtiblMn8ZcSMUm\na7pC\r\n=k4UH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.19bea2ad3.0_1598467790568_0.5329372718930605","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/card","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f58f6f64088d5db67725c02d8a8db8e6eccf3fca","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.911014711.0.tgz","fileCount":19,"integrity":"sha512-utgUZKuMIWh8EbXXReOHDJpXtTY6A64cqI4jt0PjfiP+iYKd77p7tuzKYcDCZXe+SQD6t24bcyJvPpvgmS2HCA==","signatures":[{"sig":"MEUCIQC+fMW7L+6BLbTGFw7ku0T72BXjXzfd/OzuHGUy0pCYsQIgUD8pIiY79kXNYkoeg/S144WHvSJPjhXOKfwKvGwihmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9p/CRA9TVsSAnZWagAATmkP/A38wAY1nYkMSbNuoS8k\nn8+yBA73d3GCL5DlcjWD3pjUyfeP8IEHEV7Xg3//UgWmokAxn7KjYkY4QYYp\nNXc3llMpzo4TGAYamcz3SY9UMSPqINNxqThnKV/Ssm+c3BzPnytwpIWi0o4F\n9v5nqlgzH5y0pjUX4qJ61c5R55DdPMnMyNqNDEIEHRN57zXXIXmTKw9xdsfb\nsGkoZwSIDZNj+aDoNxei0gO1gmTXccp2Gtv8pp+VO5/2syzcYOo7TRijq8+R\nzzhKn/u52iKCPZT0aBKJN+lVi6YdSn7huRcfioO4pQKmReSyQBc8yHttxhWe\ngNnlTrVbT/eX6C8W7rxprMTXHS2Fog6t7f+wjgcbp8LhS+950Uc9qdN8jPBh\n7ZbYm3VnDHamxFKIsK3RY+J6vFo3kwppU6eHXoLYb2VKwl3rmsPMYTfbKqUX\nofg0M8VEzKqaUsJHKPu5I9v6m8cb+sfXBFzTZze1lesAKZ/JLulySvX8BjXs\n6v1QPCNU69ZcuPzeXcOwZvqFpGBCqbtF1nFaVFgZYf0uXY0S2zwUYq1PLcBU\n3nQQRs3sOFGNyQgoRksEkatkSEmQNGLda6q71uJwQKL6j0SIKPElf4c5WnBR\n7CYoSXXHl3SzmEKzQZ57We6Y1VirhTmzNLlsUpBa/5QfNlZsMAWXS7YAT7pb\n59q2\r\n=GINI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.911014711.0","@material/shape":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.911014711.0_1598544511283_0.27453586508778494","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/card","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f93c3eb35d65b24a5ace3cdd63f4431192e29ce9","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d3387f54c.0.tgz","fileCount":19,"integrity":"sha512-2dXTB9CjhnU42Nh1VFrYEMPWBL1Oi3jclaf0ZbzEREmsNc7t5Y6SOU3IOGgXXrCiID2Ooh6sHSZGWbq5pD4Ulw==","signatures":[{"sig":"MEUCIH28XZp4GcL83kIpc5eczNB1jpPvcbcsdm70aZF9ZW56AiEA6sL5ZNfbQ5p+BXRQX/8OBmoa/gjBm8wYPiAapIPmJL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhmCRA9TVsSAnZWagAAZHUP/i9JrIaESlOaGQogNBxa\nOVaJxuQP7OK1SLAW4KNwvm/+DxmHHjJLKaOGknjawBNRJbev+bF0Fzk5nRjA\nBYSgsGtUb2eHiln5NrB6Emhq4o1O6hL3uiQKcKFx3jKXAzEq0aGVVVmDmk+P\nTzBgKlTzuYRr+zVx4AgehYHZ8n4LuvetkNRDYqFqTvEemU0cUQ8wkx1ZQfwP\nFV8Ke4MpqypkAeFLma4WGlZpqUibohK5uo8iG5SivCpRsEMTfFdkVf/I7Yiu\npS7r90a2S9yDF5VzVi5e4m5tf0wolNIAAL0IOuHsQP2vdDI8DgHNTjKEjS9O\nNSwkjXDkoXJ0JqAa5R075ntJeUad//zqPQYMW3PBVbXrcByCyt7uvjMPlVNo\n5lS+J7ROZmfJ9J+AL6QJkH5sG3BCrar1wYBbqDsFBEQOE/PwkMB6xQftL3Zj\nHFUIfhXF+ia9L8JAh5cK52o16fF87u+3dkmfU2gs3N1Z7U5aSpr0cB/696N3\n8uhxyNl8GwmFdn6SmL8Df4V5KeANJ3SHPl5kXai7UWj3L0fEbLwMG4mDDhee\n/jzJDyuTVqlqFFFzYsHoAqJj81Eqd7fb1rW9S9qfZKmQGOZx90VJzo/tsOf7\nOOYUikZBcTr/MHvg/4lHVt0Rk5uN5MKD0YCBCQuL9T4bLvJdilMnWOrgI6yR\nIZzE\r\n=YAIO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d3387f54c.0_1599166566249_0.0338752907764337","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/card","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbcb20007ab935a0db6da59d186663ca28cbda59","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2ccf996cc.0.tgz","fileCount":19,"integrity":"sha512-7GcGTI8VFT+4NPupTIl1iGGH9t2Rr9xFk0z3st9HtEwsPVYN3IlAuEoCAU6Nr0iITYlCVchA+FM85PPh3SOpOw==","signatures":[{"sig":"MEYCIQDWTrLihfbKP7xHxTpmtOgADrd9j2CHlHtEoYrV7Kc2awIhAJ5bzVT6hRXdIrNDPoBCbt8CxzsR4vlRvnNhDn/hgzg8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVh7CRA9TVsSAnZWagAA/PEP/3nIwgg28yKzg96vik+R\nadrfHij4u8rYPlaKUqdaco2dcXGVPzydo3yDfUbgvz1b4TNyA7WRoC5jVCgq\nQVEh5f8ppPX/F2ZXnNCgG4kRyKAMFwkSMuFaW5xHrQhgRe6kpXW9FkjX38Pv\nYvm5xEySujnUyLNZf7heKcbB2939yXV1UHDPop6dG+Ho9LRjPiDaaLm9Neqs\nvsM/1zUVLuaCwP1/051TO7jx3ESPk6jdXGxPaOlqnJZ9QaYuLAN+A6AerfQf\nCk/MGrijOl+RtXzkvq9dNP1Zpi4dt1PwazWMBnZ8kCFUWOUlpnL6swNWxKkj\n2K1pp4zAswkLym+ga9GGIlnTZexiU6DYuYI1lwmia5j3T/ETYWHHjqmtrjjX\nljzhdvNJukQK4+q2Vwfhkcg3ZymqalquWlGw6efF9wwN9Xbd3EM7BEYC6nFI\nuM+bOUFWXs95sPE2/3sqSDANIAg2/MgBydiS84svVtEguz6ssG8IOAJHzvLK\nQqMiHDx+WHxhttma7XYrSRNHCozTO7CIbt5QW20XW89bZICrnzPHar4Yltfp\n4DkCkWGuITSP+6Fjc8ZdwwdEBr1NwyLIFU+WzIUzJIzA+1aSlUTkEKf7zq3B\n2wfE36ZrWgj9NEYLeotbwYxZb3Btv22RBRzBJmSw/vcbdM/Fyf84D1ZtRW8j\nLK7v\r\n=/4tn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2ccf996cc.0_1599166583017_0.8527365809666556","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/card","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"876b8b734fb398b576808ee4faa095bcdd3a646e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.744bfe5d8.0.tgz","fileCount":19,"integrity":"sha512-m6cQEspGETRpcraJUJHzJGWHZQORTPZDkbeOz4N3T77D0bAnOtGgtLFNfzHtIhzZRfspg3uT7jUdWGV2TT6LMg==","signatures":[{"sig":"MEQCIFgGA57MszPEIpDTLL5R48RPxJ7rRSLmnTzj6pH61NFGAiBZqsbxFr88boZrMKXB4twnaSn4gWIJZ1j1KEzMmpFWyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViqCRA9TVsSAnZWagAAsykQAItWGjtju4WdmqUbqeya\nWpUIgrH+t3GbTJA3+Akj5OK4sCpAGvOH98f1INKjC/lzxyzoWSccLJUldZWP\nLZmKCVuwgTZrikKYN3VxdgUJ5i2n8MOXCldT+M111+0golTeZsQd+3vGCUXd\nHFPFh4JKG6naPl5EzqHHVnpZAjKPwWE160810r/t+6asL7UG94WNUvwolvTt\nQ95+xxpY5/nrZCy0k/CBB/ljyAxObXt16A+VvscI0iYi/dDe1cvKk1lZ1Xbp\n3xgk7lRy40tuJz4xhKKXomoQA/rKYFx8VBg5jT1vKI9ZiwC7EesE/9dDmOtk\nG5LbGnNRCKMpoWGV34TeRaBJsXa9V24z3jkXEKWoie7mFthaww+PyFGWqVVN\nV5udDrzIXAX07PGYTGhAPYuWGZCd+FA+3CnhgcMrz4qbDBSY8Y0jtHHKzOrL\nyXhLmTIQ/v73wgGst0L7+2dpX3pQPzM9bWDy1RqzEow871bAYTc8kR6RWXPC\nOOdDlBITcRgyWJJG7NdYQsTdUth3ZjqYLTZU8g4K4aRjVWYmqkNgwQVXUBnS\nvESTVAM1djemRp5fDF01PFDz+Hlw+Ypwv7v7Nd4jUkdLlX9h6BvYUuVc1gB8\nSLgDafoCyMxM1KVsRE5W2XCKbybefGYQB0bmDIYT9AYvDF4rdOLFxNoCtd+H\nFSb1\r\n=r+XR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/shape":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.744bfe5d8.0_1599166634471_0.26627333061647973","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/card","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c05c05c4270c054097aa0f2bc0c548065f09dc3","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.78da96eaf.0.tgz","fileCount":19,"integrity":"sha512-cT1yNdyhpDXMuVLyGP0sndvJMKuM0BLcOo0AHYqVmcUOY48Qq7y2CDeUxQoRf08CwQMZMtC/pJ8IYcD/wsAd/g==","signatures":[{"sig":"MEUCIQDkn27l+B791dEyWb5IAxLRl7T9lGcRKW0Hn2KXcC04xQIgAfj2ptj5NV61y+fOKBnKWIcg+xkT7I+1Zyc8Whe54GY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fOCRA9TVsSAnZWagAA6AYP/i/uW/f0dHQzRXvROkzj\nweazIkOeHtVD5ti6720Rky8qUAGSErfbwhrMKuENL4TOYPX4Ie6UTvRlEjQS\n69JCYLAS/MnzsdvTfdAPPtBiKWitOCgX2KgskFe3OexNPKoECu9EcJBfS3Hp\nGu5WmDQzZh7o1tzh2FE0Pf2MqiD2y56SFbwNTIbfgwjKDq7XdyJft0P/yGrN\nfJdIEOwJi8NzvfDHy9/Khl0tqPuVnsv68zeqq3mEDGi3fCo6S24vO2JzWDWS\nntDgIch7U20l149SxpSO45nPtCwXhlErYeo3d1EwZhPqhflmfVL9I/bS9HHp\nWColbUchmlvDOQ6FZ0pucXol400PK2D76xGH0tNpuZzYuEp8EpFw+dkWhe73\n+lZVXTkKg4hFJFzD0ZlMI2cvnel0xagIcJrBWEl5OBE2ytC5SyPAbPLwUG2S\ncl4VCLjXo7JfkwHgjKkKulP9c4p8gXu1ZVycDjVzaCjkkajfQws5UXMSAUIF\n4KdFS1f/t+l3lL17nqFgRgo/qZqjz71qmRGjqSwtiKxQO0RLIMMfN0bMD8xk\nLg/ZNIfSMlUYRw92bdEonzGEJySUe58Xfve64bgiRSZkNlB/QC2cUyd1gCZT\nbW4rE5QBI6tnl5BA5W1abjtXMf3bmngTU7Jsn4ctEyPvFAI8c5wvcHyyF3ue\nxufY\r\n=XknQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.78da96eaf.0_1599592398469_0.847563559435119","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/card","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a416264ebb50ab598260b9991b44e34995b393a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.b0ed593cc.0.tgz","fileCount":19,"integrity":"sha512-MwcF0KaSon1330T+qRmfD9IhO6A4TMd2ptZyOZmlMYenh/xToqd/o1ixvR2Fpnq7axuRS+AoW6o3XTtcJGOBdw==","signatures":[{"sig":"MEQCICAv2KyeIYAmOEkgEj+FNjY44BDZka16OkeC6MazonELAiBEbCbhDRtv+V9Qm1XgMXnC8JT7PIjOM67ninFJWv8jtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHM8CRA9TVsSAnZWagAAHccP+QDD4csoUYld/Xvv9q4w\nKmLkmL+d4YFw6BTB+ooqNfNC8eruq2+R82sN2YVEDLfle1+b2qaGHOQTp9Sn\n8Fdm3lDY6EWqC4ZB7THRI3mxbxaIhvo0tTvluC3GquoBTRt2F6MTI38Bf8KM\nkU/DUVvbQj/HWEYZf9Nr+vlg7AtBchUwxRacDQfSNqCw2+N+Vg5HLFRARLGj\nghWnAGnG1YEqvoRDpxxNiFITeZhj5zrhUr5OYSLj2JYwedap6ovbJAzB3URe\nX1QmS/meHipAP21nZgFlhzoU/wkXvV0VCWc4NAeKjtdsO2wBX5mrTf8+LKag\nWCNPdjJqJXNpUAcfCX2iBrRVmo6Ehhb5YP16GKAF747UccSvu6q1fxPr7hij\nvKpIex8p/1/e6n/0HGLE/+2tyyZKndMGFj+MCMBjSm3NKp/u4PyWmcOOE0Pr\nQYsX5ezSEkWv0yeVC/5hvah0J0zaBfY/EmDCrLRlIQ/Bhm8uRBzn5XuguucS\n3GXmKV3FrQLyIdIZsJVk+XmyOu+MVx2M49vh4dIr7+buXUc6bpSRzxTJQrxg\nJ8NMGcyj3gqVIc9OeT3ucZHYta/6vNZGAxlZUtRLdgKlj6Bd7ak0mpEWulqG\nUtjYGGQtaPr9LT54nQDweGrrSHr7fqe3c/igWJlqSv5nrdsMkzB1POuVDbwm\nhIJ2\r\n=h5kT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.b0ed593cc.0_1599632187855_0.421426783028775","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/card","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1011b81f209cadbe5bafd416705c6d5abfd42ad3","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":19,"integrity":"sha512-9jskC3PV9hkao6YMhyzcQzQl/1QXGBFrW7sh8PNEBD648ax/72QXaDB58kuKhquMn+3Emv4+x/S9fBj+kP6YmQ==","signatures":[{"sig":"MEYCIQDaPJeQBNwNFzzy+Gzp0w5dXprdBuHKcfEINdjfNqqAWQIhAPz3YvkIo2qsuWt7v2JU6iSIPi05HhCc58KmNkJB1W4E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZkCRA9TVsSAnZWagAAG1EQAI4kDXpW5loLXa3JLSeR\nCsEmumPzArErIadtpNVhhstMGKe54/z/D9VdrqZkeGSKxoKo6Xa7iJX1JYp0\nUChxSGZ3/xybQXLtqUH236HK0NMg/e8PysG2WedzKP5LsDb6GmnQL7AjeQfR\naolGoj07Qa6GspaGYl9ijvs4dyOCEnic+zXTTH6bDIEfCaeBxO9cYG0PX15J\nba3fVZQ+QJk/l/qxJZmP8N5hGQfjhsZVEQizU6nJwoe8et6zcWdK2bdo0c5l\nKPuSqCAmGvC+xKPCKIWigl7yPW45icRyRgERgwB9TwT+Dt94EXr2JUPMUQov\nr31ODKOU/C7i7KcSdmHIClalaDwyLK1cwp7b/NRGjOO2auSblSqmLysy0ogY\nSDipp1UmEjOBpFEmbK9j3iLo3wl4VlDUv/e/MYG/ASKrwigo4O2LbVexYhvO\n4IWdhVAxPDpdxCCbVljvVaHlVbg0B3zYHpBtbyt5zK/+IdN4LrzKMx5jRqRf\nyNOmSi7Idispl3uz3f/sAWhOKnENXcsQIasp5YgopaGMsZT0+P2bmHzTULmV\n1KLBWRuNyqYE4isy6LvA8gYZOkAN6grcWp8RK1hFG9dS4LYwFWGXdNNQd1FD\n3ZXBe2FM2TrtAT5pNBumXAd7lcZsQp+lHODmHHDFVECbfeLU/kBS5ft4XjFO\nDeE5\r\n=IPjD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.85a1fa9ea.0_1599772260397_0.9792422681838826","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/card","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc6a7993516f46d0664b04792dbf399d11128621","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":19,"integrity":"sha512-+xm89iue3sGses1f/3CBUpvVqSndoIyiy1i5694dQ0PIiH64D/7Sjilyc+wrsW/Fapa4GM61QYptVCs7s66ghQ==","signatures":[{"sig":"MEUCIAIec6btWBGGxH7sgddGK6EO4aWvgVbxZqRUYdVBakegAiEAyhsEUcdfgmroIvJRk8cVfMpAKlgoPdcUfTlqYMro0OY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7jdCRA9TVsSAnZWagAATr4P/jFp+Oq2H2dhxewefF7D\nP3lynHd5qHG+e5xxvSOAGbIfhuFlbzTJK2bv9RI/3ZPMyB2AJPKNAGkfDeeP\njsOjUXYZzABAqCPo/16Tm9mxo8ReBNnDofM3lwMl3WsMgwc6X/2kZCNmfmaB\nTba6PoU88fhRhPtbQ85tabV89y5OujJJpyGhvgH60oQK46WkWLP+9KP9hYDm\n6nZuyufHIR7ONCQ/jT2ZcUzN2UVwwP7CCZFdp9Eq6tykhvTtXmIISKNHaeFx\nCcJKeVCaRdehcr4jQNp3JH0Wu5TnEj5KgeSiX/cNrxMwv8+KhE44AeSTYPbc\n5D1TodsFf0FA/5fFMmK/Qk4DzS8ArOmWI2F/bGHfKTDuhNyRAaU/3mlp4Xhf\nd4pCcK0PzUc+unMp567HzIGJierayDSYo0z1+cIH3jyEhsGVKpO6A8cJkzfZ\nGJ5Zmil8M6wXKEZmJNb2KMBH3ccR3U86v13hjUyZxbAws5tvhWKnB3lHB3m2\nV6uwPawBStJEVrSMSk2CB1W6D8eb/eXshCvpgn8KfCB1y93pIR3JV+HNOckI\nT9HFfWOn0zQYw2CBWEtbtKs5RSX7uq1SHGzSNEACAIt8fwG3kAhc3u2Yr7Py\n6tSQnhb1/qv1RUlqdMWxmAp97avcsJP5t5aH1J9m+NDUyAt1bp461UYZOqNr\n7cOw\r\n=0xbf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.0bc41a9c7.0_1599846620721_0.6222815267846715","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/card","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfae089ff11b6ad3ab004449ded2241c517c4d08","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fc0eb5013.0.tgz","fileCount":19,"integrity":"sha512-xNgRrqTcMB7DGzkMTmjh6zabKDLrDP7As6Af7n727if/be4DBloLlLMefKLwrhFbGOoy+Ai3ue6vwcWDF0TyBw==","signatures":[{"sig":"MEUCIQCzUybyqudhDk+zI9advPOphVkpLNyo5Pic+aGlPRRaRAIgYXIhpJx5MFWqlVc7tPI/i+DpeNv/CSqHKp9re8Dp2Fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZVCRA9TVsSAnZWagAAetUQAJQw5zjS3WcgvrGa6wOZ\nATbPlJgYQsIK+AGYcDoQT2/7oM2IisoqIMMbsaEFo6DrhAmfve1vIQLKuUd2\nL7incH2hLc5jSc5lk9UN73hhas+uU82itJSfa2Gwrgg2ussvu48S+gqKzmWr\nuZ5taPvBgqzoIxABOTlmeRSXFm6m+3LY4YvYf7odBadDUhyoVLefyfBKjrHh\nMEhgjpudkfHq93kCK543HmtSqK5Sg3db8ssDyDLllCe2sqUmg4BUczivL6n2\nDOJYJSJ2IpFddwr/DcUBr1+ryaoDXGKorzSdpTlgyJjv0hb7Rw9X6yUkqX73\n25sx4Ksao+s2lk3JXYOto1xK/e9ruJWatQP1da1NwO4Jpq1Bmeo5WHL9TC7S\noBqiR665SFaXENA56VoXUm9QZ69vUCJ/3LqegR8IgvL1hqz+Ozq74PvufeTK\n3fMdpLEMRzHSFQ9ZvGNnRCczzHRNPJNq9Zx20G7mOapGSsQQsFkjRzNVzqg2\nz7JhUzHAfP/6rLsIi5fXvEIHUWCA0zwIZ0HQoLwcBz9WXWZDdPWzt0rVUm+d\n0aOGRs6XqVESh3u+03y27AYpuzSNs4mauzaMntxJNCSOQ5f/nk0CBVweFJnj\nqsXz+HFKNHaTpUHSXUheKf7+8jsNZSTtzfVR+zNVeXgz263Rc2IV1k8+hz+R\n8A/e\r\n=VtPw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fc0eb5013.0_1599854164924_0.32230776902047564","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/card","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fdacd12f9b2e83c84dd7a6ae492b76115cfbd5c","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.319bf66de.0.tgz","fileCount":19,"integrity":"sha512-hWdN5OyxsECVVm0Wu9GzZ88Dmoku9Hk1uH8L7fYs9QXdydmk82+cHS6I2WGbRqAcebJCmYQnwjkvstXseKpWyA==","signatures":[{"sig":"MEUCIGh4qfIsSJM1iIprkgLjKTNo2E4bHOlaVTKdWH3qCb1EAiEAn3f89LDchcks8ig+jlymjlff+H5WDFjNXs8e+81Z3rs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPyCRA9TVsSAnZWagAA1t0P/AuCKM+WMrp8t3fRmCkr\nQ0H06Q0ze+ytwmt4ePW+pc3kRgl1+/azv0fSnqB/gwLfptwB2OjmKnVMgnWi\n1N4+qlqUif/4nz88V1uY1h05MQprcil8BEdHiIbGb4+fy7vjvOekocY0vRSL\n0VFnW+ZgsZRX91GPDkulI/Oe+7orV/mwelLcrXlZ0Q5DPYn/k8fA8WW40Ycz\nUjjheWlICe1ajL1jaa4TQ8iNRe/xcT9lDW7/rUWE/Ej7F6ddCbqfp6R8WAIz\nDT1ohEMrOx6LhEP/Q6/mZMc76tVFJqd4BgeSV00bVPLjH1amhJV7plj+YLQS\nkZ6S1pmotgLyuQVV5UGIfD2nPKC00o2PxyewibWkfxKogepYZQEXKyyNOsVF\nG8xOutkLVFY0tbZR3t1OsgsMCd9QrvPJR8dB1PHktR8ThVFaUF7pqLMwGDJ/\nY/Jul69A9NY93QwzwYz6MbVYqT1YZDxUJiiis8IlNZx2x+++VyFF4zZguaeV\nPypLdeVKiXgspDDFDCtxweoHmyUaQaBnsQSwJbztOO8EYzmVemqK3sCljDSv\n1DJMOlklz/Rz/WpXOqte4TIK4TLcq07mayZka+35tUlLKWYQavqDrkkTaeLe\nkO4aoiakzRdMAVDERk1OO/kcLVXicspTtXIJhzSbXelvY7CH2YF1nHSTDe/6\nOzQn\r\n=HE++\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.319bf66de.0","@material/shape":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.319bf66de.0_1599865841890_0.12952244510019306","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/card","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c900d5442ccce5944ecf97fc3b1c6c5897d057d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5bfc305ec.0.tgz","fileCount":19,"integrity":"sha512-SOdszKIuB0FbmFx2ufX1Kwh2i39mUBUYt9NWN5CYF9TBLUdU9zZGNqAH4925U1rFFU8V9ZNuGHRZmNEffaayHw==","signatures":[{"sig":"MEYCIQCgGYLXEIUn5dK698zKIA4+j6K5E9JvjO/qtBOwrhtucQIhAO52YhsCdNQQ6qj0OPpC+XXarCyoG7VTDcmeb1kRwVFO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSbCRA9TVsSAnZWagAA4QYP/RaYhVj9ymmJ5e2lQ916\nEYe+fGA1JB469kMLFHvy1reN5CIMRx8z8xyiJW+KVPoMQzSVe0EIUGn+laFX\nZqGcQV9RCElUpknxaVC4hYc+jOYF58TctbVXy79rL1njOEqt+xHHsV5NZo7U\nFsujJBfGpOY2n0hgmQ07bcbWH847QuV/i9/eg3zvC45qs0f8t486FLw0FuaJ\nUKc8RYhpll9Y6vDgzelzYkCTFXs6GWg+bMeKHHAsVZnc7M9rJU+H7/AeI4NQ\nr10CTrmdWj7BPioDWlTU6/GfMGXjxUYpSzRZK0DBxFMtkSfI9UR9Ez00MkNc\nLncZExahirUM55lyDY5NGaQnWgEV9q1i1QJCiV3LHcJbfD9cOujmvHWYiTuT\n0Nch+3g7nOUjdQaEMmfSlNxYSEZyJAlogtdbkngbFDzjOhXFR/6o7Od7sZkd\nrK6AVktlDVe+If3mYSkAn50mpFs3BunDFNTxOG0Zq7p9LZEqQWuu4joJxYEd\n/wMSEobsGl4w7c8/MRJF1AciLY38EBnM6srOTodmIBkI/+65v/+/PUWh2zVv\nSFMKY9J3oApoaxDTC0sIcsGQ9zIJku65NRfbMFIlb8BTyX6PPPg4D0izgEsy\n0/STaqZ/xbBhaD8p+tdzzbwutkmh7WFM4WiOCd2JyYotAgNAFrvtW9B19FIb\n1LWH\r\n=ftHE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5bfc305ec.0_1600038042679_0.6431012058328434","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/card","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7faf8c8a53b3f003731bcb568227afa9d1335745","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.83d83f131.0.tgz","fileCount":19,"integrity":"sha512-2H26BWJvwPs4F5JTvYEJLxNZrAtDNyv5ZwleMDZgzkUq1pRb+LcKMuSY9At8d2gZi7sfpmRA2FVg4h3HsIgp7Q==","signatures":[{"sig":"MEUCIQDMfxFEKFDwDsNw6f6b5bg5GzDPOiDL06BfpYaj1ic52wIgEN4/vyEmF2Z2X0Ou5pRs47ANVoIVDoaTDv/EYaHGuA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrpICRA9TVsSAnZWagAAhSMP/RRVKqF0SzNVKTcxyfaD\n/JAuD5AMOHah85wICOC1ARKbUVko4HBH3VxHNKgNWywLagXTWgupmVgwt3Xq\nbFXKrW2NvFwevYipNU2mtUmNk5tA3gC7alblX9KwxQ5ZtTVuzlb/7YykcrNB\nINIwMf6GmDDbrmRawcyK++XtKQ/BZyabeOBT/eWhQVf7osuwjFhO3bZKOexZ\nqx00Bg32AghezPWw8d2OisUroiuKIOqWDUVQOK1eW4dALU7ke0g9/js0jWCN\nSWJF2Lu4CgR5F2OqTvcqM35Sr5PGYAMD89vYx1c+bsEAtsG6F7/GuCzMUE86\nNLiP0RHcZxce1qW1L4e5z31YprPSz/au4kWpXVO/unbSqqiobaJLeOIR4SMA\ncRc5D1LhxwS5Ek19hFER/zh4ZNlUptPKOrihjEip7eC/x40nRRh4Tr7apUsf\nMhmfYifopT9NIihnlV9/yzchr1pQMK89Q6VpAL2WD0KNF2zObhQ/gMD91KT8\nWP1TOkwFRrEsnPkjdpQLYYfsaRoZeUyWGZnoJFO0ofSAUVVZ5cmy2xDu/3hY\nFMsKeKEgH+ui1gEX9I/HC//IY6X5LwvvUVeXO06gZkmP+ojCMCqRYH3857Rq\nmBMqtuNzkQpdZJ5pcjRBXclSng0ngmsDrB2I7DKXb8iCr81QAIHjtLxgdhRs\nn4Zl\r\n=x6ob\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.83d83f131.0_1600043591941_0.04563190199355227","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/card","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"138fb6e7d7f0164695167ec7210d00c4cd355470","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d52b165b5.0.tgz","fileCount":19,"integrity":"sha512-MNyMh4OMPfSeXeNdMFrBR0DuhdVTy7db3R3SI0lGkZ/815Ys+2oJorzj3eyvO+UdNIf8bBDgqpyNxoqhXoa4ng==","signatures":[{"sig":"MEQCIEn/NBFPbP2lL/xhsiKpkmrTK34Vx2WuNFFdvKbglLZsAiBhnrTV2Hc6nB9q6kV4o+7Q6CSn6AxSl7bf8Lr6lz6sfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNW+CRA9TVsSAnZWagAABkIP/A76K0z3Q3GSiIoABvB2\nQC7to4G34h+/kCP+Z3NhzWIi91P3Ux3DigV+D5TuS9uN601b6JnT5QV4/Y1g\nHdKe9QZQfBJilIxf83Vl0bwp3oCTDAGl1yApFoM0yDe59MC3rtzK4eV/SHkU\n3GcF3+4ZMezzitMvQnKow1s/7ewMS3B9sJuMfoYUdiMGNxPUD837wbkJIeCS\n8JqaX9HN7IZrTfJwC+yYKWBOhf3zb0N/Hq8HFqd/0M7WhTDIff9Fxs/fVEnN\nf4CuHW969M+C9tr2uXN+aGS/FHSmLFJdt2fgejJTxyPLkbV++RMtPJak7XXg\n+nBwhreaf4HoV40AFKlcmZJUWX9I6pp0j1Tyc9cLKB1rptUGYrRqe60UhdEA\nA0e0Vc4ybUeNji667En/XYVnvIeOhfYcKEhyci/wiKqknawNkkIEdHVudJn5\n1wP9ggVjqc2DmG3FZyHUpRHb/stdZsoGQtE14NzCzNbHqPyf8owUuA67ANFg\nuLvewdpOZMNwxRr/LgfRKGUpcVR7DHBiTeOsJgeTog6ud0zoxP2cXsswyZai\nigM7vPyaCukmJKJMhHJG+zCMc7MpL6j1PmaRDzfgDldboN3wEsBXH7/KpWLe\nAEAFkb+DNjtjWBWi11kFdgM007FsKS7QEmXulREvZ7YJwpjPKVNbsfUFpexH\nMcMn\r\n=5/sC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d52b165b5.0_1600181693934_0.3972310816376592","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/card","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f22e4b8f5b2225f8c37a74e8ef6ab4d780a4d80c","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a831d4799.0.tgz","fileCount":19,"integrity":"sha512-vwKbelf6IaVQqmrJmDPo+zKts5BHwgt4Besn2iaY8XxPohCJkHmDHnS8x0tabj2e2D44ll9sfPvnfrIqKhN4Yg==","signatures":[{"sig":"MEUCIQDezwkV62SVAFL+g/xL78kmnj33ML2ku6GEWqQJhWmengIgRKJdgwwFTvjs6/TzPz65OLOJ6+/0ZqZ5dL6JdW63hQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9YCRA9TVsSAnZWagAAhioP/22wj6nGYSHsmQkFfkxp\nAMvoTEEWMXAxHSzb3YbgduVufT2puepAAGqP6kTn61fyCHtoUckq9qu2nrK+\nkwsBjglpwxLwwL2D0BnndqNN0Gqa5db1u/6Bu3IjundiS4VJ/PQW6jevrcqB\nUL66By6D0UmAQX+TfjdxbHikqsbtLNR8vs7SA5c1hZcU1LLbLkducFwcIMPL\nSqMeWGqomtTw18rFd4GVQZ54qQr6Apega4I/lZrcqP4FzaRSTmM0+HDyOAgo\nRvDN3dyu3xyf5jRVjBxA4AuYJncAYuNylUVEeqpTQ2bOxo4+C7nDqJ0xtR/g\nAOIexmyI7egNaNwGrXdbAvHT7NJ0fjxw8Lexyq8FdMw+lgSiHQLNv2gcwWC+\nTy9AO3LplJoaPFNS9bWJDXjQ1OpB9pFYK1tjdaWdYH0Ug6q67TfXJhxjW6ZW\nWJBsVKYgKIwLSIA0Rp1T975BHWM+aM3DHmkHJ40BSE/pJlXpl8L3pap4Dcqo\nOTOZcVTQrNaVRNU9sDLec73pyVCaSdo88gPWQVFDKPa1OzJP1x9JyrVGDZ+I\nME3FJXp4vGbFrZjY+aKIpMPpnmX56veSm1tRNyxPau+/+3AC6utM+/SplA1j\nV8vrcSz+26uwBN8FT7eaB9ejszDctDppwTd7/MGMW6OaCaKValA0sQZ4VzLt\nvRrY\r\n=7sZk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a831d4799.0","@material/shape":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a831d4799.0_1600192343807_0.6199645063415091","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/card","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15e6ecad041ff14eeb3c224d8b1b757876d1f595","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a306aa488.0.tgz","fileCount":19,"integrity":"sha512-0IYU4kpRisDg+ecZanEtfuP80INfcGa5XiubSEuz6/0OfwZThyIpxFO9kFZzauflzuPba9VFsUKxvRg1j7CGnQ==","signatures":[{"sig":"MEQCIF+IOoRL/ZzMAvvN77XZyNwQDmkA0nMagcXF/BNV+SWqAiBL6Gf/VK4ho8hUJ9xafB/wZdEhuapD9eCXvFZShtZH+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrToCRA9TVsSAnZWagAAQQEP/iZnxaB+ITs5q752+vx1\nsd3YXThPiWZMJSJ38nUjUCIPlY/KI379Turvc3HaHyq1tGIIJtnX9l99iMT9\nks9n7ghRqVL4+X1Mf27WHnm1hCnLf4LBNAZrynHKjEQOsml/vqmo7Z987uR/\nc7sxRPHzYZ+KgyyRNYG7fN2z/q1FY1T5QN/vrRQnuKqCGxzsf4CbADcPbos7\nnoRBDlkQwQKJoeO5R09Zcs1wY5uK+smOaIxAC3fW3A+a+JMCNQuFVNcLuIDO\n4KfCnPAxLvtPt+1PnR5AEtLy/QJe0gUxxsFrrUzuBBH57qXbDqgUSj4WARNO\nPMw9z2TpUeK3kdneAOJN+HnZs0nsHGUHxkW9GfFcWngu50gNzreLM7A7d/xs\n9BXFOCZqfcXSbLGc4f20WlJjdPdcF9oLKGWRYypeRpfaTaxJL1sCFZHsv62O\nSg08Io9WwiWWcyR6vGolct0FBB/1U9ErhEijCHMTziBndbxjRzwmqvvVflhS\nOTXTvP5vqmofnm3ncv97krjx8+N4IAyHXNW90mr2+4T1qN7jcS/UtOt8eJsc\nNAc9XT3EUgvLmjkiuuETK9T9XrQ1sDg3iJ0hnsxD/SE08HxZx/9CXgXf9mZd\nAUY6NuXoExbdjIymVUkpJVWgkKkeGQYWxgsSdmigy9beI9D0oyadYrSmfriW\nNlQb\r\n=il2+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a306aa488.0_1600304359593_0.5037730804281193","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/card","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7faf68947fdc8b2cf40b6ffa51a9fabccfa584f","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fd608ff66.0.tgz","fileCount":19,"integrity":"sha512-yCO5r0KMEg8TT8/PKgVa/sZRtwXOu39cRZ3iYjBAeGSPwKFXDuvZYkZrHFfosaGcXkpHfRAFZyjRa/+1n1uBpg==","signatures":[{"sig":"MEUCIQCtISjlPDZIaAiEYUtlnwFNxJRXkHC6r2Acyzf4VLPt3wIgWlD8jXJMGoNPnwcWhzGFsKoPEMf4m3F8nQZ0FzuLxEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3INCRA9TVsSAnZWagAAgxwQAIL1v4MKwEeIFXq1Tcvn\np7StzBDvGGdLHUZRAmCfO65fpnkoYOsS6jY+rGEyReohTpKeCEUBascfVZbN\nOsjgnqxLHLMA6VTQaOxIsH0FG7uQjoXeS2L2aB3rNWNsijZv5yW3i/gLojaa\nvaCng940L1IQHZ1KnhQlcq9zR1gvlasT8+yHC7kHSr2CJU/SrDEhySlpwfqq\now3v88Q3jyzF8B3ZhEM0bGuTKKp8m5dMkJ4vltNPKEdwjAtwcbhsxX8KpdCR\nT04ShtAIiGS34iurJv8oX08kYN53+o0T9+2hKun+tHk103k0kTylMH9wDgYt\nGZt4W+a+LtVvv91l6c/1bCjOwfjnBitAQXlotr8daZanjzrTsUgoTeZru4Ii\nHkR2pUNnjZ9/YuOBXaK2mBTrqm2NV0bLqhjf8vtc+reCXmsdEGOTQKio5xtB\nx8iyzOS/hVPUpNFc+BqYwoYgyYiKNS+R38g+vxRhKbrkz449T08KIQDeuYxe\nmxH3kcDpKv+nH8L+M33ORY6USKW6BDkii0Vbw7Ll0+ASEpnOUhSx4zGgHPbW\n6uv08wTyBLv49Kvc+22LHshNid516AtuA6/anaFtQ+VCsT/huYFF/PL+6/Az\nWyy5T9WqC9V9YqoRRJHhA878HljyMmQ8ShobYOB0sKK/iJQIk6R5OuqWxFB+\nzyiT\r\n=aVPn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fd608ff66.0_1600352780854_0.3468451286163279","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/card","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"861f25d79a1396d11ec857979e95f8977cc3736e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.3e435ba57.0.tgz","fileCount":19,"integrity":"sha512-pZmE5kZ8tQnKx1X5KT17h030PxOcG1Oryz4aLXZ0wdX9n/Du31bpcgb/uFdfxYgiTf8fnhCmfCz2OEeKKTz0MQ==","signatures":[{"sig":"MEYCIQDYnxjGfECoNwKnfwjmTuowOMmanjvFTTI4fNT4GtEh3QIhAO8uXKsWXCZDTlb+eHGhEoWd2sG+T87fhadNbg3rUsvF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3YXCRA9TVsSAnZWagAAGGwP/0xou5WBXGfeq5IC7FPj\nMtLAoJWseaIpHDCE3nHOcqrOeXqXizBFnZQv42szpPjS2kx78bYEgrsaLl/B\nNqRhC2y+xirk+YfDrFMEZ6zO6wctevB3Jx0FTEPSb1JfLLSiwsFPs4tvmIxv\nXaQyqRfBsV/1wIKV7bIc1CQ3xZ07eZXtmHa0PzWmRBRLFeqTpygcnwuRqt01\n1K5iSV60PpCrilwJwPct9h1BHOsrNW52gB9YKlR08ATIURuzmQpa3erCcHF6\nVtgb4SxbYwrILIHTnAPCtPXWGPl2d5v2GFRwjB9JCG4q4H/pRR5T0gFJQOKw\n1/qs5DMc7da+wnACwbQSb3VtiyE1VtwGJfvsYxR16oaPBgednxZHXQm4TVaF\n8Fnvh6gRxpfpHkbdUGqqjXZdsSjiMVgqt29fkc1xl6auKIguEYTWwC9MVtz6\n1huZGYeNKTiIe2tGD3ijal/hp37hvmSdcA3YewqNEBBqAguqqZZPzkmyHgiT\n5aYfhGbeTjygaCtNVZ6q1TPkxQOpQjwZj1V2mhCmDPg3p1YOTYKLZFjwXXEs\nAldGatm1xWILr6YQ1VHDxGdmcVagjUiyMEjL8hgz24BhU31lRNhTyvfuJSBG\n7383eYSId1FTyc01GpQTGih/DW8rLlywMUlj8Iyuxo3chDO9P6UoyjSohiDb\nCIA9\r\n=zise\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.3e435ba57.0_1600353815298_0.5866509252908174","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/card","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eade365285692042ade0091926ae97265c58236b","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.c250ec52a.0.tgz","fileCount":19,"integrity":"sha512-6hn9AB6JGjA8AD9jyHoa8+/8hnJUCLSAgiF05YODh3UBCiikrHNzKT6rKJqHXLWGzhS1vF5hQSYeZ1GXNFMJLw==","signatures":[{"sig":"MEUCIQCrU1VtO9dGb5LdvIkmJ/7uAmtJPWyEhyhekUDYNyRuTgIgVs5Wmr/s81nvLeCbyk9+1jPGp4uDalPQwIpnN0FIcjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LXCRA9TVsSAnZWagAA1N0P/jcusNrCWAkopfsDxR3v\ny5c5qQvcDwR45KEBHHoNawTHMHc7DRkMuRJoStk6Hb0IEDZqzdalNdvVzZri\nJJs1CtDu9NuanNi27aw7j4lq+gJDwLuEpWB1/zsQrGxFmAiF3lFWqTN4sjYW\nOnVXZ08MwkgieoHT0PIZFHtU+qT5SjdcNenCWw8Kx3dCGz9xtPb2BPgu3ODZ\n5C24Pyrfb2OQNo3YujDVx/rMcJZSQp6yqFDro9OGYz7I5hQ1y386RZunweI7\nwaYWXZ6DBxDbQUeIWdPHgOCV15G3Dm84ht3u3K5BxxoDEmuNSK5CbS6K4WS6\nW21ZtpSxHikr9wrMqt0A9DHeRJx2hJy3CmL6iqXfx5kS+JFbhL9ui+KOz/E8\ng5IChDGak8sx+a76mnur4H44pnV80E6ktVXTCWPkc+xqxmZ5YXcmYQAwvgEQ\nLthrkQoBTE/ih0S9eB5IZgjRW/RaiQ5PxlrosTdaNNJHxb7/0vP5M7zP5M9Y\nGlGXD/eef5rjNQpmXwh7EZaD5o/24LTtNO+5BPmEApnDu+6okP68k6yT0yb1\n9V7yQHOuoedqCo32eDpVDgveE0/imTYCa94+BuGNCryi/eow0nudfE5U3FrZ\nDUOo51h17PQUBZOdKAILYNQB8eKaYnru4Ll6pN8qzq31z/Gy5h88vL92PSDn\n47IH\r\n=LVhC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.c250ec52a.0_1600373462849_0.680778429380875","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/card","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"501baa61682f78e6362d1369af94a4530eef488e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.e34e411b1.0.tgz","fileCount":19,"integrity":"sha512-vTZmoHDOoGduBdTCJR94+mc14LqX1FVIdvKw9l7QYK1Xy5MJbrFJfTKZQi7x6dnpzY8R81R+o4AZof5OKOyNKA==","signatures":[{"sig":"MEYCIQDEMRJ7qQqixfrk7oJfMJgXP81a5+O0vmXShO+CLcvtBwIhALMa5mi2+F0dcgQa4HWd9PonTo54oUQZNHZKjjQX9A4x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SOCRA9TVsSAnZWagAABGEP/0ONCY3kGooiiEE3TOjg\nLyqpb70Np0Vd+HF82rKqIQ2Ah7dihMEc7s9O/aEjaRV5ZeL9f8fNyjTYN5P5\nGuYnGjabdEujK7R4isdh/qjy5f/GZt4qQZhvEIfv7TNImLDas/EaesdO7xRI\nG+RXAg8wbaQJubiqUSThEhg7wBvNla/37fL30qTWhxQlwkhyUfhYeub9YzaT\nYuTKK6r6Wlf7w4EmsiRiUYmRJm8aJm2J0ue5fsNlGRrtL3ZTS/VT5wVmH/ti\nITIilfsDqRsPKaYqD8dHBYRajKfnQ96f62NnUsUvtyS0ypgq0+dqtHffpWYg\nHFC9Npk30NdyFg5EvpsOP6mnRVb4f2mt2j2J1J1Z+r4t6W05pGAu05UWwBfj\nU+H+dVxySvDGhj3Bi7UDZdUKqtwZs4khgGlH8uSp8X52GtzYGi9ezhU8xgIj\nPLqgRdMnAmSjtXty51LB8PkWtKyO5ZtdSNBH5fH7pTrKz9fbbncXOYP1NkGg\nvWNzRpevSsuOZKGCpjINml5+fVVLLeUKsJUEhraGZnauxaKI5pGo7xf0CyIn\nHgBCrHWibOqL4eg0BZbUv/0yOi3iago2lMGYv/59LQxtBYemPwOMH1r5l0DA\nL531XY3pmjoSlZ/R+wdjuatjXRPfUTT07+9wt8Ajj1WKgsvIb6CfW+o4XYQU\n9PHG\r\n=7d5N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.e34e411b1.0_1600373902110_0.7749731969829785","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/card","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1857c289a638d801d4f9886e58fa86d5d57ef55","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.4e9343929.0.tgz","fileCount":19,"integrity":"sha512-vlG/nR+5t7FBQ240pLAXwGsyLt1HFM7B60859q6Z8mrYalWNjqL5//PisMFTOACQt9yMRl/a0GI1L87hmIsE6w==","signatures":[{"sig":"MEQCIERrwCbUT0mkkUURfi7/F+Web9c3Im50k6c/8Mo9QectAiAwT2SWDRdAWxJ0C1SoIcPdfxOO9K0hqMSYAY+9EcsyhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8p7CRA9TVsSAnZWagAAexkP/R29hBUuorj+gyRg5gkQ\n3ZvnZAnGCRy7zzwl2Zet7yEIhfKl1gWjcm5xut6fDpeT6mDRMcUPUlEfn99b\n3CIfVjfdQ2G09EvORrWjfNe5SUS1vE1zIjp4ctHyqw4n33O7B30MiCCz/C7b\nz8jX5k59MSda9SAbshU+5AnW818rNxpvKGD0jORGFQguNF6sDDwtLVA2cAaX\nbid/EQlxO7AuzooP8Zj9hygtYE9iUUVu1fmKxqaSjLrYQtRt/rPdq+uYrFnP\nGDsl25k416PN1+K1GmQQqtvAvsGJcaL+J2ndWu7wGsX56lqq8zPGEwKAH8Jo\nC+T6sEC+vLKpJlSV2i8yt7guTyasXFjlxi5TR8JDYwFBJ5DUejTC4GWs/pA/\nUxl2RF8rtMLOQqpaiDyvtUZhyEJbAG16cUEyz3WUAczuE5RLrw3wU/AbX33F\nvvbat1d/ndh9v9p9uLpKNG0YlqRzAFAThsjK/uDrjw4wSsLcinjpqRa1NPdk\nUoyXEOna6KFacau9VjihBqBXxb5YY6ruduRKGMf5tpbEbrLgYbhpY4rRmnVu\nh3I3eHadujOTaubSh11aA7S6tV9sfR3TYdTdv8duD9jitI0mxeXiCEZh0dJf\nUPUC9fwSFw6stnuTxWp0tdj7PB1V+dXc+2ThI8f9DN2sG944muJL7AzSIiX5\nhMjZ\r\n=vF7q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.4e9343929.0_1600375418810_0.08308577842259712","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/card","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8deef20fbb43a862507d088fb31edf059dac6a7e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.4e5c350c2.0.tgz","fileCount":19,"integrity":"sha512-QmNSof2NPJ9vbdeMTQIh9mAm6/K/SKztIYt+Dpb0EIK41OGvWikHCS9nBHS52JbnwuPL3u6PTOthH5h07tC58g==","signatures":[{"sig":"MEUCIQDaRDgLoECroUPMq7MLfCLgSW2ZC8zUqpCC3jqhzyKxiwIgQCX6xl0TV0lMimI0c/GvzE6wKQOiOL+eoAgpcQn5dnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRfCCRA9TVsSAnZWagAA7L8P/2sOGtMhoQt1zIB3Di9X\nnQo/8Rs9ssLIf61rCirXHXO8mVlhX3FzMhU3vUWTArFdIW8Ns7mbJtc+49iY\nvmx9G1jff6bKE6k0uCQEiLLtZJQIWz7a9Psrie0+FRSxsuDosmpF4EpOt09G\nFQbIpkxi+RJ+RFAYLbMDh+nfiXBqvXf6kVcOPncC3sUVCk0/wWJ5iPN238lB\nB6ew0ZUBJFJ9sCuR/Hnv+41aQ4hvruKtpJ8x9xUAp652cKRWb9f65H7fl0Ou\nnINbExfAOGrYcaD2pWtD+3NllRgA3Qc3MyLKL5QHiL/DqjNAo4HWgLUQVIhv\nNSeRiOYlYFzBTSLP5z6iQgxJVtvJTQwa4cMw8cRNcGj6dhskXYA10GaoXSNB\nww4d57p0tmTQCqAU4PaQ/SslTEu6VfqMfllFe3aHnCzkw0JisB2AU0V0aNDE\nVdkptKFQERnM0LRhOJ2yF3eQAX/+IS/goIxb/Mn46vDkVrsvUIO5TuEuQr1W\nmuuLgDftA2blyQyfBHvQtULTHDsuy7bo6JfziDCoc1bqHY3+jjE51fRFYGCf\nLL7W2doHquGHr1d/Z+hA7EEBeP+WMuQqWMoaoEOB851UOWQl4DRgymH6eS3s\nYf5xQcW6IeMWYPYdJ0I5Xz6N4FXMMamKB6IT9sN9MsBcxsjt+SgBANMPEPUH\nC0pk\r\n=nW2D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/shape":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.4e5c350c2.0_1600722881680_0.6978997124535933","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/card","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b004b506616804fd46662088bf0c0b132a1be96","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.16c563ef7.0.tgz","fileCount":19,"integrity":"sha512-8pJIAjdiZxxRL6TxsWjUfXCOYtb+Rnb7W0kxTTTQF6Cp9AbavKU/bE0VKiGa6xl8vcZpfEhVi+RoBB4Qx5Hjgw==","signatures":[{"sig":"MEYCIQDBJLNRblQrXQfR5XGPs/2PAdDQPhu/WuF7P7iIq6bJqAIhAJcjRDW/shl9NEdS+XVj3DQ4Ch3VX1mTncDegnk3cAKT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSpCRA9TVsSAnZWagAASx4P/1RkUJEUUuuIQ35pBegq\n2mB5NQdIs96ZfuM8E9OweqF1nZ5dNHHmU6BpCj2ODGxOLT4n26cBdVlHC7PR\naB308PjlgdNVvO26rP5BcwVtastTWEolrO28wt8RiPIlZyrhnx/z4gzPUQ/h\nkw3SjE41peZvJHyP4+i155fX2gcd37fqk5o2IL0gzIcn90dCURHGyXzVp3Wn\nawsWyg0zbriLEJmGndF2W3Be4/uA7WnCn3IB9TVx39xdX+0wUomYGVT3oQKP\ng/NxzDQIr9cTgjqmWxPCQ6KhjHZDoB+5V2rM5eThoSM8OD+YcMioFTXbds/L\n9m3CtTutxBSvcSepG6CMENzVZS1Mw2KzLPlKGitsaZ4Ts/ZfNW45J8xZl22A\nPxCB5vwriHkanOXoZSiSN/eD3UoBJqnefhsz0H4samjdFyPCD0oFwNv8YJ6j\n+jVIExt9QKGik2JGZEcYUmpb6oReCFiIE7ff++N3JqOo+z01/UQBA14hgab+\n5GQUFbqUCinstJNd5QFEfbnTOykI3oMEfpf3b3FJYEV6r+N+BhHeVTMTqoMZ\njpD7HxjqjLk4RMeKc3O4WcxM4/GCFlAHlNrNHV+IXJ8eC3ujhYdbu1bwKmPZ\n5pgY3gd4xmYjKSY9w8x1jWKTzXSIXMdpmeip0chZCK6xnpwhjU2h5AFakt/P\nkrbq\r\n=xPlu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.16c563ef7.0","@material/shape":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.16c563ef7.0_1600804009352_0.23180476900758284","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/card","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a4f968c0ae393c48f18a2d800f3e6463e9887b8","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.fd8af3d43.0.tgz","fileCount":19,"integrity":"sha512-S3D4TSFDIIcplTgLdmyNU+HuEgu9Kue9sZKCqvxQLSFbEYv1OROIAyCX+PQRt9jzvkCiGYzkTJIm7l8zqXcbPQ==","signatures":[{"sig":"MEUCIHzy3kJX6uynKVDr4IGv1bnrxFb6VgXWhgO7IognBB/pAiEA5RVJHQpXBPihULFvVTsp/NYNnO2ubr8x5akSuDaEto0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LjCRA9TVsSAnZWagAAfuAP/AuVJplo6s03FpuBNw4X\nIOGCvNidLj7UR76q/fF98hajSaPItPN2SQDhs3GCITTAyiqVIgZfI3AA9xRb\ndLHbEXWsNQXDrCdcYDIVZgBnSIaQ0+bxzWav59OJHKj7EWGvH7yET+DLkHjk\n5R676teuLKwl6FiwgB2npx0dlYj2LY3J0JhB2sNE9NspZArcfd2xN9DX5lI3\nU9Iw4NyszE61rmwtZZoVF/e/v634QAPKRoeeozMjaBOqnuV16hX5ZlVt2WR6\nGQDfNwO+eleSyfINYe53eH7CAvK8dFUyGed7vE99U7hBvZZPC/9kxpRLDV0Y\nQIjEn24iyd9414cFUhPywV2G7AqJMGj/77oKBm7KfSDwfriqTUxDzzg8WRIj\nqIZbcWXAsT/p4G9K+jcneZsjTBvvXAA0o7IryOdC9JwiIbLSZGigpLfFq39O\nkIDZt3NQVevSEXTdtVxldZRqRvx0EShmO2KLylnSVczAP5Ho2M2R/R6a6FBZ\nizeloTc4YCx95Dz2Kub5rkvhus/BZv36Rpzo1yHAUFMYFDKXRRxpr5DX0pwa\n3vClozCYADWH7w4ja/C/pwTSdCeYjF51XK/Caib9O/bVWVZZ12Erv6u39X7t\nmCcp1S9JatLJuFe6ygVXJyN4YB1ej3AZHrqmeoKlhm3D5GTxDPtSFq94LeGZ\njV+J\r\n=7rgS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.fd8af3d43.0_1600889570793_0.385967472909877","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/card","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"614bbb95e6d4ab2e02a4690aa8bc3cabbdcb8528","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d4cd83a85.0.tgz","fileCount":19,"integrity":"sha512-CoP5Dsm7uD3t4qLqVilwDvgrLa0Ro7k3ajRMdhldfc01FowuFNi/J8rfvqbMMs6+CbZ0KEonPHxad/LZQ922kg==","signatures":[{"sig":"MEUCIQCJnnbHvi6I0Xo0Y41JVvl82xjHoqRBYOiNJ/xV50v4NAIgJ6uzJxvkpwW7GuABtinaUJg6pO3slvKiPVG1zsDwiak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTuDCRA9TVsSAnZWagAAIeoP/RnKlECW4uupmtLI06sw\nCHIT5LGA3RBopq1DwRNJzRZYg0+jj/uYSeeyn+PCCd2dzfexcrT9iPtp2660\nLYdvml870J/NHsA/LYzx5m5y/K0PH1B/q4HOQZvF8oqxKvuIecdFGseO9FZh\n1aEY0jsef7Nmcq+ZZL3MZFwMYK3Ww0ZyvF0zuv/GNdr3M5kcVqE0A44L4rVO\nBI7XlEsalR2lOFK7yKLshSPb55GGyuOhVWoq15jQl0aDqMLBm/E5MHP5+qR+\np3b8eF1BhBXng3q0JiC1qCDOaOwsaVab3gIS+kVwK7bpS11PJjUe+s05TJaW\nxZUKEcqhk5B1KEPzU3FBGOvaVpajZbkha3gSUz8j4FsV2kEpYUajjPwQVzRM\nXfqMQR4t2uKWUloCknpOPidXHuU13izy0Jp6RixESk4hPW6pX0jkYylw947m\nDgvflCL6CItnr/dfm0pXPKvdQRVTCLlqeOr02tFsc7eVgd7wsfbXxr3sc7yh\n1PtNE/YYpGhvEDvYTBY5l6FSoRxq6riyA5rZ2HdRDchI7lX3sRHJt3K7redX\nKMpIanAw4LTRLDs7n7Rpw0mwMSI0moCKlbKybf1vTtZn+cOTBUM6ZRH7cP58\n4HgrxnDxA0Bpy7CYTKGP+aciPEIrQFzeq6hjEQd/a+pr1wltwJZOBz2TnrfW\nIhl7\r\n=+Oay\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/shape":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d4cd83a85.0_1600994178280_0.8893885062185245","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/card","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06ba9bb759a03a412a5b384a666b15f6ba4f39db","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.199aecdfb.0.tgz","fileCount":19,"integrity":"sha512-MPVOi6qJ/gmAogeGTCkZrnyuhaIpnz7Nd0dIPSKv9otaEhT9N/ksjQlCtWz0qH9NOOXHNzn5Xa4NGaT4Rv9ToA==","signatures":[{"sig":"MEYCIQCjvfiDQoRzia+eUuwYBKwQoes2YcUFq6KLSJR4I7Qf0AIhAIxe6vlg7vLuqy+b7WavmEck7kYSUYszd0/BU7AGcsCb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhIYCRA9TVsSAnZWagAAR1cP/ia7d8GcQZbdGX8AsuTl\nb6+rs38H/twqDjxmX1c+ejxjpGrN3ukTHVGnvZqWXCjIBFZ/XhXtE6HwIHa5\ny0z3ucPmxSJ344A2PH0IDMe9KjQdRd+mKDAJt924JE6X6BIAnvrgSGhhC8RT\nku5z3TXkUkJDSrECzTViAakt4QgeZ9op03Cm+WHCtYXx95m0uX5Nm8glYn4x\nWwdvtpMpD1Q9rbCL6xVIrIytm4Ei7XPWe27UKBkmE8U3Piu9qwyfVm9fEaXi\nFZKUSS8J4lN6AI9B9rhEIk8WzYApDZO/Vjtw9lhD1b6ZYl7kt67wsKvb49cP\nJUcxuAmU8OPmdp6GC9190KDCAqmG/ugxLmPkbunmQZJ9cqbDm/++xl5oXdaJ\nkx1M9MvYnxZuyeRjppHGNnYVkLThzBIIL6ErwD64OehdTyLpLoXPSYxD1xh3\naolYnx9g/UzEB1jdcyYknJ3cuxRCMq5ZcbCBjWwyS/yvtSjw0mIxjKaCZG3n\nB+8fp9l+HqdVgZswG9IxdTwDFdFuXJWdN7P7CCIeSBr8FOAcqA6xmhE8mfvd\n4ZdSDp+Tx575Cr8aOKTY5ky3MWLMVzA+va/my/dQPy2Uoe+d/EGEFIrzmYWM\nznHgDWiOPhlhAQ4fPJLQMI7ZRe49SEawyCupOc2GuCJgvli57kr1zgNs+DyX\nlMQd\r\n=VJwL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.199aecdfb.0_1601049111591_0.3402024093972935","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/card","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64bb7e9a4a59964205d6ced3d62114812d7ce0a8","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.38ef4501f.0.tgz","fileCount":19,"integrity":"sha512-oZeqOeTmo4ckCY0nO44w8F7FdEyMSq5icQeMiX0wIFBPQ07aE5XM52TMHeOtSNqAn5SUzv6Btd+6otCtqZTI7A==","signatures":[{"sig":"MEUCIQDk8CMHSmUEUKJaQUgJ/RaxVnpXrVt7sn+E/MBehmUZdQIgBYaCzoV58xb7xnYJ7Axhp5sSTI9SC2AgGoA/h+6rKac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2CCRA9TVsSAnZWagAAN+EP/1+2HWGKzMT9Kk2bcxzo\n7fLgsNSsn/Mx8tQn7tEKLyH9aYfd8Teg4TLoHJ6JCIzShbDKjs9R9zhIY5rC\nOE2jPkOTepbOPSXULRtP/XhYeY31peLGqRHy3Ft7jb72k3whHNZrj5KAT5HN\nXHBetYah+N0Ss5NCx0FTFk/CVlQD4IT6Yg1w8g64IW09g/XT8nTBX+KR6n2H\nd+JrKKmdTgqkpunNWv3lQPaPPGxk9CcB8wXp+kI+GQniPjYaklCK3ahBrclY\nJFjSL/MMz8ongZzl96/piQAu/Ub/DU5SdP0xedFw0rDXY7rtNge2256Hu+3b\nXdMrKjml3K6WkvIa6eUUex6i7jH4M8NumWuWahqWO1B2EJThyKagDMVpPy89\nM+sIvPvbzkibRFy3z05qabPRgQJiMq2dVhWEq/ZcsOTqnGlHXGCoNEEZyi8v\nv4DLAxWKs5GcaEu8IQBbU9kYBgvzjkZO7ucq066R5Dg19WBQt2k5Lx/mtkI5\nNlOzYdnKE77GI+jpkcsHrIcWG19BvXA6GHx0WXiVfKXPh5a6stsqruisWJsW\nOwhXQ3prfzsHVYbwzfmKv+Kgl5TAYGiVlPmrx7KfkGFEOBH5eKs4H/kQ5GN8\n86IOvpobcbM8Wdc+2zbqEHCjQ1lGMlysnYpA65YHlcmlCtByUMlhYRajAkAw\n9wmz\r\n=9eBr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.38ef4501f.0","@material/shape":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.38ef4501f.0_1601490306055_0.18709653263429438","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/card","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9600fc7e656f12ee93e21626ecc36f1271c53931","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.774dcfc8e.0.tgz","fileCount":19,"integrity":"sha512-Lbi6x9fzfjBDfXOEp5fL/KDs0FQDQDjSXM6Adjyyf1lxF79Kx1IJESrpF+6Wo7Rkv4cxjaNkzCoLrhPE6tD3+Q==","signatures":[{"sig":"MEYCIQDo9VUKqDYKm3HtPFIyZ0iS5rI7NVmZuiwrxUd6JeiCRgIhANA/ihYJCdbUjNV9OI7QuF+VQ7Kjq8kObly6jYI3oj5P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadkCRA9TVsSAnZWagAAm1kP/R50766GgvSEgg8bcNLp\nkLP6FXx9rGfTbeAcpZ+KlYs87T2w3dBhYAQLJPkRuSp3DxPCdEJ8d/2WpfSo\nxjSWwWys9LPS0URoOQJIiw3Mph+Js2f+JZaluMiHNRdnPN4CZm9gGqD714UZ\njRH0rKWH0LXMB7jWrQXmNrzjg2hcbjmgbZVEA8EnjHK27Xt5D+4voxTWNyVQ\nNt+frzV8jPw5UTLj2Pf+BuFZwCpMGsjV3jx85sHCaI9cy2bUsiJseIpaCFQp\nRjVMcyi9qqX+7Uu+U9obrlVP/IkVnYd0Znx2iUIiWdUeuFibY8FxyAnHE7Me\nM7deQbby/o9OJRtCnHWaWIJJ1faW9LE8rQ44TxXCEaojq68Ttjs4wU7DTPm2\nbDT96u7qgXFcaGyS1u3pYLOjueIDSl31R5EueSTr7/+2UG5BtQbzrUN0VGrA\nkeW18fpIn3Ljfy8qVAFv8lPI8KsfU+U4ncDS+kd8xbBf1iiKstY/8I1FkbCu\n3DJlrCxX8V0oUAPsywHfAsDjP8YUVuykGcYorOGqxrB1mDD322+V5w3NG6ku\nUnXO5gpFTZohOPIJRRfyZ23rqijcgsMPb8ubaAQAH6D5moO/JBgVKtq1XOEa\nK6Pc+K4Z1j2ibe0OMJ6261UUWGzGc0E2YXT+j6wPWuKSwNCtaQneqNPhAzme\nUvqn\r\n=qJtR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/shape":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.774dcfc8e.0_1601546083634_0.012587201957530825","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/card","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff01cade8241f1f62651585fd85e94dae9e35001","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.0f60323a8.0.tgz","fileCount":19,"integrity":"sha512-/eCE7g9kjYACvzw/vWQWBT+xemzSww+ONu4JalMaI75wnXIbiNnlTdjlmIMKOjEO4KwjvPIjVhxxjW1ia0mXlQ==","signatures":[{"sig":"MEQCID4ecsGzcrBCdyQXl+7IqXzM3p9OVvJKixNGsKcpqkVVAiBdumrZKOigvBueT8YjnOzms/F7LROug/V3Xe5xrDEgHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4BOCRA9TVsSAnZWagAAXM0P/0V3occ1aHe8hVD7WNeg\nYc3nAKIo3d5jkYJ0jLXw7w4zNGNvXVy7cauumFPMnUZDVs0CvDFqpRFyS8tN\n1Bepd3DHDml6KmoOsy/7d+B0hbbfBlCOB4rt3aBEBRSNL+PeaLOjXnpXGqxx\ntHv67hu46GpzRuV3MhNtWJi/P2QFcowuUaEta6ZYlCdlpPF2W99vW4xs7yFR\nrvHqQTTnV4dfNGtVDty2mBahztR890CbpeNw4DzMbi0QaazKQ8kB5AWQggo1\nyEx2VLanpz4EXaIbWVgge1GBkTUwW9/uOtLYUKu53tgO17AI1VKPBb2QNgmx\n+lhploasOWaTdwx0SAJAOd9GI8AV8BLNaF7I/DvYFpc4gsS8mE3K/yHj9k2U\nC8S7rLAMvqeX1Y89HLOUnz5Ah9byYfnGS8PEo5fLi5IxwuSeyWRoabRc6QtH\nMRk3ZswwOGAmgS67mByomDsPxRHoho2bcFmFwxj0Y15NEE59s98WxrVWwrQ5\nLTY7/0F7jqtfH8MsDu3DBNTljP8anhMVC3W6AMQHDZe1vdGZwkOOa/Yuhv6q\n8BIgScqsA2+DlJ7rBoXAdeMxZD+LnemfGXJO1TkW0RWq/eJm0wI1KW34nyQC\nM8TaQJSkIBsbQLzbEcNYQrpQoQ22uv+5OyJFtEA80nF441y5Mwg5Jt+EK734\nG3bX\r\n=r1N9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.0f60323a8.0_1602191438498_0.9703962907000734","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/card","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04b47cf995713775a28dc161a130bdb46eb33798","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.d71622574.0.tgz","fileCount":19,"integrity":"sha512-Ybm/mm6NTI7Gl0SSsIz5x+eHehDP7W7dFj5WbO6BkGWjr7cxKGuTS+l45jMcedz8eUhe6URUBoTdelJApkG3XA==","signatures":[{"sig":"MEYCIQDRW10ZUwCpWbKVYXO1bck4NbDmbQVKf8qFzdLWkBgplwIhAPPDrGiSbf6tPW6ZtpMELJ5VLq8cMpqMntdnWjV/6fAZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCXCRA9TVsSAnZWagAA8WsP/0XA0/Fevl0XJaPST2bk\nKSkKqnhhqIjJDp3LDA+lP0Pxge+1lmY7m0C9M47dkVZgOHUJTl0l8nifY2KC\nWURjCly4CK2TVBohWAx+HJHuvKEfMtcfLNG1t5qRvsMk34gYthIPHQ8p4E+0\nEkB12G6j882tMajDh3o0qxfkvVoCZEXlLuY2eGluLRidFKU5TwZn4U2/m1JB\nj8q9Bw7dINGHSLRM+QyQicZorHhUkrE9elYrnLbSZCKeZxHlV8zF/H9NPRXL\nTAGcE+rB4420Fqx2kLOpjE+ocmLWbfYz6zvy2kOzqlHda2WHiG1qTGAaUe5U\nuFjtMOdS/NwlGbmYA3N5XQQzrlhy1X5v31bEiZWRT55g1Ic/b6yYLV7PmKSB\nqb7i2YEZQO8aC1tsOcgACM5ikUdny9U+iIy4HXHhVzF22xwIJ5XkfgX3bOwN\nPqKuXdU5VWvpJmWTxaDEVVbtnOQDCvxSvwMsPCvHgHwgC+mpzkuJMK4ICZ2q\n8anVYUqKwHp0VMQetJXRbAdau9s0vhsNMQEMn79W/DehCtpFQ7w3SPobpXgv\noRF03VbPL8NHrskA8aksDN0HwMIb6n0X8JfWkE6OiQdUtfeVbbTaeLObvihI\nHccUnhL7Tt7/QJ2oW1aKMYDHtifvXjAoVkYYfRmdu6PSbzun6i64XpX/OAb4\nulDM\r\n=JBQ1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.d71622574.0_1602261143122_0.8200503789683844","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/card","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70ddc295cd346a5124d82b2ddf7da276be8ce474","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":19,"integrity":"sha512-SY4y6vfZVBkP9iu7D1fvAfQHc12YUn5i5dq43iRU/nMFq8j49+4khbK5nWGfHKVZXQox2xB+KogNN/G9uxejDA==","signatures":[{"sig":"MEYCIQD1sBiCOIGzAJzf3oIPRo4ZtuLwVZle26lwb2RpijdNCAIhAOh8rTLLsgAHVaSU+qtURQ1fFih0wdeSL0Oq6mv4gvK2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOonCRA9TVsSAnZWagAAtrUQAJTMIBP3/+CtjpKBnkAX\nmsQKkA1VHaw04Fzah7piLnLedhkgoQvJfxQj+IvqHAXu1StVJubBjXNIHXS4\ndep0eHXSoh+27bEPq6QYA1L6TBbwcC6+p3FLZo4gtA0IkKhwthX0XrdlQETa\nof7lIEU/xZ7BpeKzbfu0uCYIso72BFtn9GLNi6ButInyvEhQYhoEzbghErYb\nSUSz0uGeBOtIVaqM52xioHp7gnuyrgv5X/+d8kAqZ4ngmrz8bbBhObwD3We4\n4bZJ6uQ8vsZHHfUPAQU4JouVwBP+SHruNmoSxh6jV2aSf70rtJE8QbeuabwO\nhUe3wpErtAysm/xPNOkOm0l3xQRPZzfC1TBvKuk74iTb7NotzxWc8UiuiU/Y\npBkfHIVzZxt5M9rbducnK2+XHx2EBuZ33z16HXk0nBxGM1zCCJU96izfrsER\nxGu+pHvEULD7FaNn1Pd+tDxhRuLXxpmaAZ4pXfQLfULm7w2F/3fR99jpVHdS\nSwqH1VIN/zfS2bZ6vehq5GYAlWsV39KdqTiyFxTLLSSG5RwGfhGAoQgq7fa1\nobermSacdWRrQjkgCh3a0bPXKzJhcC+o5BlSRoBg0RyCeVkiKVeIaW9hJ2/7\ntzt+cfqnetRqmFcADYQ6CI6UBKtmz8MSaJIqwlRR4/Un1bogxvue0ynC6w7q\nqFs1\r\n=lA1n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.7a9afaf4b.0_1602284071459_0.9767678253245669","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/card","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec2b01e9bedbfc393b11dc3eea85a009a5d0dd27","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.8a39352c8.0.tgz","fileCount":19,"integrity":"sha512-tLczzE70juFGluR8E12hoo3rGRf66Ip7q9TO1bVIAOe4y7uIieEpgCKsDpBYj5DtdrYXR+K7O3sEVjHsIJtAiw==","signatures":[{"sig":"MEYCIQDZl6Y+J8wTM3SxgLzIkHjGBX2CknOWDHwA5zpqtEbV+gIhALKEn72rqWmfG2/i/bxwdCVY6lfcyUI026735fPsEWXm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJaWCRA9TVsSAnZWagAAYG8P/2HhWo/B/YWn8bPchJzg\n59JVHyjifvDzqEwKD3SzSeYnb7DCLxjqFh2dHkQwnTE9VgpeTVgMLbDyjWFj\nUdd+5Y1LVD7M9Xr2gn1eUt4cS7hxo8K7nPFoysWMP9YcqkCh44pzH+7+vVV9\nTV5Pn5XPokWkHC0MKhDDuG+bDNbx8R2g+LxMCNiIUSB5Pil3XbIGtNKyxWeu\nmK/gSvShU+VseXf4u2xtJ0eGZoGuxDgu/GD0edEB/kKLoCn8MaCrWn0jPiIW\nb1Bk5b2pfEdqavfmxEZbiDcaSqj4VJmuMsB6hVOyHD4LQprp8qKhYzK3M1Ve\nc+7dqtq/PkDym1fIUSsrz82c63qglrFD46Ju+ND1J8gPne5ZQxRQubZf8iCq\n9PraTfN3KXg20+oqy0cB16ho+cINbCVGq9Xa4/NdPqXYcwERY57OOFgOKYMs\n/KjBCj4jXVz90mWOAgdzDp/aC6UIZr/mwl9FrYtEArgSSOINOL4RkaZ7wBSd\nPluwF87Hz4pDUNsDRFv8ZXJEt5VFAtKKkNn/95C9uqmWk+TtNUIdfgM/FNen\nXO2aV7AeJXmqgRqYAp3mwY5+mmP/+XpiPJ05+eIjM+PguIKVi/R0iwJhR+Wc\nClRaY5Nn68Vf7Lwb011N32nZOO6sGxMKlFk3Ue0H5N5KllklLZILSheydQIM\nFY9t\r\n=GcOZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n## API\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`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.8a39352c8.0","@material/shape":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.8a39352c8.0_1602524821532_0.6361645161944973","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/card","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"442f29a4eaaeb109a56db46b3f2b3592d5ba2d3a","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.790ca85fd.0.tgz","fileCount":19,"integrity":"sha512-Us4FizQkVRvuzrTKtnZK+p6AgCnCny+c19InDz+TUCgE1BmAKEqCCajfJqvHk48vSGd2ffhDH9aMpVQU7O9Jgw==","signatures":[{"sig":"MEUCIHTlaQzRxpisnWJHDyeJFW6eWCXbrGKkwb2+pwfH/qJLAiEAjC6pQhYS8Qb6wujDumjBJk2bXxfFsnpXFMUT8oZDpE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFACRA9TVsSAnZWagAA+moP/1VoiDOIvW3K0/SYmFCe\nBW4zfmbiwUFxBUIMId4NxFSWRf/lop1YA1XGD0Y2F/+oBWQ7rHcAKj5S++rM\nkbrz+Khm8B9pUZVv7szMjZO6/GkKpOKEMAqgdUl8ODd5dxlxg6LZNbcH3AaS\nIgLZUy7jr4SsxoFhjq5WYvvwXPuA90EJ1UoliTwLLqQ9q/2p9srFP7KMNd1y\nTZJySpIbBBl7LToEhvn/9rFOPpRK2CA6XcDPBG8NWTkLZwubGrYK+wOl282R\nzudXRCT/NnEhRGTINwQv/hP4qM1jiblpdWAD5RcvVoC9wp9SousxIeWdgRrU\nEihdvBpe0lhQZ/lJrxwriGpAXhn23zR89TJIttKqWmKkRvt7TgZ/Kt46fEXk\nYnkSvJpnoFL6xTaCI2cssUqJA83xPhgrK9Rr+qPO4lAiw5I7RtVSUjB+qeB6\nxvpiSCcXyAt8M5ByU+247RThn9cpMUuqPHzcFAs/fZgmHexmwHtzPYeUkgtL\nChvEk2em8TqTEIaC2sv0u8rFuH209EmH9hHs956FK7tJBa55nWOr0Ei9vWl4\nVBAa6BWwOHMktpySpWX+2iqEZIhNRAwqHk2y7spWzmY25Dsaw8ZnlD6pYXK9\nuMq1suC68qh1cgavDId/iOCw6vCkU0Ywlaar7DvgRH/S8Of9iQLw04bvJlwX\nBNli\r\n=mLAa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.790ca85fd.0","@material/shape":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.790ca85fd.0_1602539840355_0.8596526395631401","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/card","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eae84ebe02290cb3b6f3fea7e96827e4d86e127","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.174c0becf.0.tgz","fileCount":19,"integrity":"sha512-lv/JED02dJ80s7SKDAZYBGariswpbXyINatCioXS07gx9DGbfiwzQhn37HB7P9U23FFg6wikHivUYFlDfDnDJA==","signatures":[{"sig":"MEYCIQDzBS84k3RujUzIDU6SR64flvcloxptUjAEJOrwoHdx6wIhALgcMSFLJ3EHbyBxfAYviDFsh+2w1Vc7nVC2fi4Zrqhs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9wCRA9TVsSAnZWagAAldMP/i1v4ybub/fhvWsT6s4S\nqoNy10LpURE0Im5e931UcmVOsAHU7h/DjtVVZR5pUJeaWG1rZzhqqvgBGrF3\nhm+Sq2gb9ncEiKq5mqlRhXZ8vspTuJDn6uHxuxRiDQbIwp/t4AsLUoPEkvhS\n5PKar4nabX3WQ9sQfgmL/S5sRRciysnwJJ/k2GmwDZ9HexU0TTXHU7CWq9ds\nA33Dug5jk3e0cI+yYOfB7ChilYM81hkGIA5YcscCefmEBFJreBIs4X7t5P1U\nzpZ2Fc9VFYlpVWtvBb2iQ7GQCgN4fEsqIbQKxfMZ2IE25jr00erJ+SuMJAsz\nkYGDCDPnj0pvOOp2yTnQzu2ZtX+b65ILXyjqXgzuRoTwYDO+kYK9spqP+pc5\niDOwtJJmtrXOtVxi33IKcs6dmDgHKytK6Orhzf/pgONCSh0ZUeOURHuCLtsa\n2e1ABaxVwvaFGyRSuL37TjEF5ncK6S/EaDK6MROacucV0ojkq+3G7eisadyF\nyhVvEaia7sV4sN+TC5hBOTss/IED791zJj3KXfMx1GuJPAaRu6q4pklM0SW+\nKnpqCIqrAR5F9tpTrBnIj5aG/EZNqvaMWpJI7CMvGgkkQnIC/IR800tpmYeQ\nW7PPwB82PmaUO4n6sPYWJKn5D2sBIFGGpFX0GA0Qqr3S8NwOnTIVu9xeEDrC\nA60I\r\n=wdE8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.174c0becf.0_1602641776293_0.8434607519871631","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/card","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b396c0f4afbc8bc0391387b556e7d4245242692","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.c71ebfa02.0.tgz","fileCount":19,"integrity":"sha512-9/jO9ZsnDdQEVUn/IVQJ/w5oTwsMv5eQd906n51/+0OibuxkVuDkDF6fE0iSfLcSfR56i3Ixd39JtBNHZC6XMw==","signatures":[{"sig":"MEUCIDTcWu9O51CqsHKT5N1aef3zo2AOQSUl44NZJY70gbu2AiEA+X5HbsQ03qcMRXmFSB3683YPtbAlu6elRpiSInzYGZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwDCRA9TVsSAnZWagAAnzIP/1AiRz0NRkoJn8/zSzJz\norE+BDZjhVzqOds5XNq4GmxEbCr7UkbkcrSeQujQqX15x9rv7CUN16Zwt/Ng\nHAf9ffXeVYxN917g4Rj9/2/lceztaE4l6jqHEvQyRjCA07zyMhVivtiIIW8o\nAvI0fMSoYdq4yplKEb9vmSeyASby1RiFo2LTZeOXWOUiYQSIc1Bw0ZTQhRbS\nPUoaza6raKDnGDTUr8wz43lsDmVCkwGceGRq8osxVo1DNo36gKVr52KtOquV\nDS1VcOHspcWAb018OLvX4hXEqbT0ZyYZ5P1LBtx9bplV7ebQvfvCfQpe2n2u\nBJzSs1oDd1pzwV8YinGmFNwjPno3rd9KUog5U5kiB/DF0LN3xX8orWnrFBWw\nA8VieRRCBUypHFGp7h5ulAe3bFHcSVZjw7lMeBNoTGi//7anREGEr1z5J97J\nPL0SAo+YyIHGmH5DlkrsRjVOdA4/2phzvT2MmhNyBlJ8lWQ+eNTkH7Hegm9u\njXSaxBusD6gJ5Rbi+CevgHS2vVsTX/XpHhnyR8D3wNk8JYG/B/AJLJpvpIMx\ngRtfZDY3esHJP63ZYgGe8FIllxeJnYBMnZyjupv1HDW5Pf6z5OKhDBFYs1RW\nZw6t74k+PNOTqWbzrjK9Jgt7SGduRZG5rkwAUqfcuqG4yBH1Q2EKlX9eiE15\nHKFh\r\n=fSqu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.c71ebfa02.0","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/shape":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.c71ebfa02.0_1602649090899_0.4312433842365413","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/card","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"873121f805e056eaa6d9886c4ae800001f8675b5","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.2ab716cbd.0.tgz","fileCount":19,"integrity":"sha512-viPjn+prxhJKUITv0DMRtNaU0z8Fjoftov/cGM3vV9uo771Xc46JusI0q0VLYX8Va2waqF7d1eguCHlsA/j7Mw==","signatures":[{"sig":"MEUCIQCb9j64jtdikUioG00kIypzRstzDEOU81nHL378zjXGsAIgAmdlEGUuctubz9L7BQM2nYExXI71UZlAcMzU8PiGmBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOmCRA9TVsSAnZWagAAn3EQAJnmoslotFhzLUXVHWC5\nQVRdQz75r/sd4SwSC58ZlPXH4SJWC2oWzF69sbHJwSGACBIOK4ZUR6zB2kzO\nvCDdaNaVYA1Z7G6UUSUwGhBorKU+UVx5PNR4el47futhuFOXBg9peva1v53k\n7tCXzWz6aG6t/Np6Y6AP6mJJgb+eQGHWv/ZVyoFOvcUTl9SxzgxSAIWwjTne\nrDKgCxIZ8yipGQaL/sJXY8WX+ReLOPXUkfayLcvks3UU+X1VkCMr1Pxh9EaD\nu7ctNuKFJPErCBEdGbFGKpCGk8dk4hZjxk6RuHJgHuJJmtiCA6ZF9aUiJEka\nKnIdV7whsM24kyTAeXsPEpku3pRmb54ypSIfuPh9FeGg6mqzQJxXMpS88bgh\nIavVe/lWyMtkNhAAd1QJXu40UCpvHIRTImUq5VoPkx4pTRoZaYTEOq0pbVGr\nISwamM/0Eq8g6pZDF7YY7exRFwCtwxhzZTyA8D5CTAJfoDFuZfxZMdH06aP4\nY4Z36YQzM1rLocx3eDmvreNIeqQ/3Lg4i7lGvy4BxwkCBu30mExo4CBaCi8E\nbBrRLfJoIf6vpsMn6Ly5yqE9itMJP4jJ/JchAEyNwUPMllR5w8a6yomwMYL6\n52Zn5IExc6zvEuu4+sLihjySjWRRcxnthyCiC97LghbPYKs5zQRn1lT0Jxwa\nYX9b\r\n=0uYo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.2ab716cbd.0","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/shape":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.2ab716cbd.0_1602806693727_0.44831067763054877","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/card","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ad3c04c6f7f692216a67a4846877b96a598627","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":19,"integrity":"sha512-d/7GP/AQYRXUVuGhrFSXw9Yu7sJwT1nDZG0aooK02WBG0aXLUiT2qjPcxxpN2LH76AmMxjoSOlQRQFotsI8oFg==","signatures":[{"sig":"MEQCIF3ij4s8nrceCKoyzRR1RTg4lG8iTi7+xkDW/G+AqeyCAiBdEBMnT6aUO4rBbqY8DP6QtBMKqkTHknEwIR6ul7gn2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3tCRA9TVsSAnZWagAANugP/iDynIKJ7AAPRFXEU7yd\nitgmi4H1isHIAhdg3jWiRn9ga7gcJsYT3jZgAH8PMj97M4+w75g/34VEvUdB\n7qmbkijIP2yflg0n16L6UiLMkGXT9QpwrPWL3M+PZAQhZ0UGAXjyNYFgFFRH\n37P1A0hsJ0cOIV4LirX+9ohtBPbkVRI12RIW3lp5D7ftk+wOrVASAedbH9U6\nWocOIaBrB9aDnp9YQFXa4PfZg0kEKHHOWY9gnMn8q6AuX0VZK9rbX/qchZN3\nUkwVuqkCJbS8eJNZTRblVOn2gSLn0Ai0pyWr+RT+NmW+v4HV5cI364EcvJPX\nr0AUGFadem9aU14oOZuNkV5LEdwymeLCT0tnZrVml7wR+HUkpCdhFcwsuG9R\n/iiurDIe9rrwLlB34xHIR2Rjii1hbfhuWbkBCxhF0EmlphGXP3Wmw64qovuQ\natWErAD97dpw3I347wJWeB5lEol0HhOLMxz/HbIe1te9iEWujvQ/G6ZcacwQ\nDiDf1Mx1mLLJEf52QyY12IJW38/wh3hKbBv7kAi+vD1SLvI0EiV6B5R+UrZK\nhrAT3/pJRKQLrjbfNexjDy8DOXFwIuh5JT++gDZdXBqaj5jctdB0yhApnjnb\nFWzih8W4hvwoutuxhF4PCL8Opysigw2YlWIwAfDv8uMdVGtRIRTnajqbg+2f\nnUcG\r\n=dGGL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/shape":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.43c1c5e2f.0_1603116524888_0.9034567328533478","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/card","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a49b4d59df847055c1e4b7bdfb63ad7d3fdec94","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.ccc64eea3.0.tgz","fileCount":19,"integrity":"sha512-jBq/lBm8A3TTTzk6G4ENFCPhKUFPaPCAagvFWCLcAUlG5Lz8k6GQiGW6UY7Imc7e0xPazFGFvo9Db7M7pfDwdA==","signatures":[{"sig":"MEUCIA+Cf+gzMA8pJDLhGVAErFQgV0M6UDPQG5CppZdkC83VAiEA5dZ9fXYDKFNtxpNHqnhyvigfxcx08+rXrX17muSF9Jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1MaCRA9TVsSAnZWagAAU+QP/3rEDfFeAYMtb+AW125B\nDfiZQxyo0QdzUHPzjfKQ989mCEtCqszK92AD/oNS2tKvYn4WKt5YqplE0j8r\nPEqCwkVtjrZXigoPifws2+VB9eRHjLC0NOSxntoLy9Ejnd+ynDeiqu4D1l4C\nSCrHqMq7AGvny4MLigmxbLnWynywttXxPr6oife21sL10HRfA1hJRsIlyikH\n8g9qwzbR+vJPEXKwh+SwTXKNNeeIIiXWS4fwGKXuFKmA0JJwPo3nt9jtZ4mS\nhWeR1YW+dttx6uK0GXbWCUT4s0maJZ0V+RJ+VuLIT3imug+/wP1zW4Ip7zZl\nplu+QnRQGEIvyX1wPUl+rX1pNy6EiVlA0fKGwXsjJI3Ps20Tt4vcEelaPoFq\nlETYsOQR4hipNrECkAP/2O6tlnwEjYAy0/ArUb6Fw+oH3SVys9SJHBYCAlrz\n7uGjJ627tmsklaZ9fWxi/sRD5trZAPpnntBwI7Y8kk7RQrG1ZJTzvwRwGP7e\nagkgB9HJsloTeMu2tjEFqiCUy/kKJBLux19LrBYA3nHdWegGqsXkN5qLnGz+\njSsdDpXS5rcrPtml2dI45geSmNZIQ2uQYGqCFrwvCe6jjcEHFxOJf4LfXqSH\nqmy4Q16Lv5ypi5h3pwyb6rNs4YZGXjJL2ZltxTqGn7IonXRvpZrds/9m6lGY\ntZMv\r\n=YtX0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.ccc64eea3.0","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/shape":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.ccc64eea3.0_1603752729689_0.6012273138341053","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/card","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cf79f5437a2ceb2785a6f821bb2cb3cd08da382","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.a79cdd019.0.tgz","fileCount":19,"integrity":"sha512-6h9COFoV+hJG9HSCnxo4vs743E2c/EcSicQ5GAP/+Gv6MDoiuZkTPQNPiQEc+L8soqWpqr19VNWRMM2y/ed69g==","signatures":[{"sig":"MEQCIDiGEwxLVJuWhSJK6GXiGbw/jUpDnY13uDcTMS/GLVhIAiAZvwNTwczYw2dDAqB4R4mieqmqSmUMkr3xgjdHuCflqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEuNCRA9TVsSAnZWagAACj0P/RmvL+b06CtqpNLNF/y7\nfL6PrpPJRG/cwgtgXHdl7TOp8YuJ8gSIZgP35Xd25svBCszdm/7QnmvofXfL\n+pzxA7qsxOx8iIXe9YOozxM6L5mOkVTRJ7kHjNeOXtx80oig5OqN7Gv4KtMH\nP/cxGICY7AtMR0jfkO2POPoZbwFPfZ+pwD5Bs1c2svX/aHuRdbIwZTnI00M2\nxH0mygepQumDsLNagTtV6biv2mphXg/i+zrx7MApFuS/eMSAMBUJnUSX3PNO\nMPDm49XrNn2THMBt0Se1Bgxz1TM06MQHmAR7MYmwFbkpnPkjDHXNNTYkOb8r\nv9Rn8uxID5jRNuTcwCrXoXVnlKLydoOR0iWED43UeMJ4jRWtaUNS2fGUSCsG\ndv60e8FaTnwLH7mwj7vsmkPgjuMZAIqx0nEH02kdpO6W3k/ofjXBf6Jnt6eO\nFhW+OzEodfMTbn7E6rQRxXiivL7b9mMNbUePJumEtJrfRKZ38WQkFrAJ1jGQ\naWsrDpTUchIL4QLKICvxWRcuWcX8sMdmSUZheLwqGTmc7r1gOG/fu0ppNpjd\nWlAhrpggzZWSWJhgBpXT00SrCquEU9hKZGTnOv8XWpK8xQTYzvQejR/INLY4\nQ0JxPxtIZ4b7pey6w4eZTjmA96yyt9G5IKIKF4t62XUa6J3AhMyBjFNEzBzL\n2oNH\r\n=omMl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.a79cdd019.0","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/shape":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.a79cdd019.0_1603816332905_0.4407909516805586","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/card","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88847b6257c9deeaeb3bc99c7ade2b504bbff15e","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.596e98424.0.tgz","fileCount":19,"integrity":"sha512-7i7cdjY8lKViqMA9Ag1+Gj4WGr0vgtD3QOzeZEhgzW9Q1jZegnUa/cI1tdQTMN0Xxhdsfcp0/0yDCGK2Gq2dtA==","signatures":[{"sig":"MEUCIQD/tIHzZkuohzZd9vxIuTM3ZrXklkPPT3e/531aCPUROgIgNmJmCUj23fg/U9IUZ81XIypD90IhIWQafkce7prgR2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZ+CRA9TVsSAnZWagAAf3sP/AqJJFnXwWXR6EspXljY\nKZbxel4IsQ5PELDBdrgicAkPcVCH8xmGez6c6CeXVg6xZ52YkglSfgg1kN9D\nOVYLl3+FL58QBHMJijn5ntZouk2/EZb/TNhmga7Crg3SM8peI6snLu+2ovUg\njlzVMNpTyu6v4wLfC1V5nbaFgE4OBDLKlXqDqeFx/U5/2XIQ1YISTTW/LNOW\npUFpNYjEevZj4mVDyRajzrm0GByV2B0BqzIvd0WYs9siY6SbJFpVAvaFyV4T\nuAHm0JSHi28A+ijrRyURiX3uQQTZ0MqVCaDe1LIUR7Pae9/EydgnZPrVaOqT\nh0kuHjH2kSlSvp7wfBryE9+DITLB/ODF6v5tjAlT27qxuQAojc2xUKpL67i6\nj+IYelFVzVs2Mfl6o7V2JNzENNenOx3+LP+aAq0ODZqf63mnbOP94FfJxhHL\n9BdrweYe4axzRczInZrcpTGTyu0teeNc+iQUlCKfg9SFaoiQLlcojMfmUdca\njOW2OCuDuQhqEHYzgGYj7SeFC0dpQKDDfbnCKYeoP+lvOUsD6QHmD7Miwhu1\nZbgonrsoPXBDFWQfrEItRvIoQIZsfK6roHrGiwo9+tRzVtbnUDT1Prie09fd\nIb+c4nME7b7OiPFFpV7lLUM7VHjH+/VVgRZw0ffgX5Aa8l1A4DQXVuOpei6M\nABPx\r\n=rBOx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.596e98424.0_1603901054296_0.2045036778375231","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/card","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fc55e8501ff721ef93061fbc1bda07a5355d892","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.05d5facc2.0.tgz","fileCount":19,"integrity":"sha512-A4MImskgQHN9uswa0bXgNYZp6IFPoiEGdM5xbdmv/tam9OxECC0woW5gd09BA88qAZZIuTuwi2PNrKHqXSnVHA==","signatures":[{"sig":"MEUCIQCXdz/F66Cy46/qLVZg1tkv7VfGIV8066Ox+TX/I7U0NAIga2zLNUdbv/zJrUVV3WuzFFUjZPfn/P2utxtyo01njnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZiACRA9TVsSAnZWagAAi/kP/3OSspGeWCaCDKJupVzO\nbI3yvEMhRkt4oQ7wqcbzfrdcUOdYaEP/j9jYpqtAlSESHPEUlE2oY0s2ZCer\nudMDr++oHTRukMwuGY0DnCdfrtRCYdBs0KgJdiQOpuLUJW8lQbtahokE/oS4\nq9+YYwY9UE4N8vhUPxKv0KWarfmy2Iv81dVn5MlKzWqt/1rcs47o5GMcrqqz\nE2kyqKugwbSeDmOurbqbxg89gEOMjo4gvP9Tw977cthoozOk6RuvtWA3meRK\nF3JvG/UMi/a3T6v24kjDf8nm0AkX/pQqFuYgWsBXwwf0VLqCdHgoo71zR4m8\nLodd8Q330c/h+KklIGbcxeEPZtIyd4MvZSFdUfWlSEO+9B6pYWG69nwa9tIu\nrIUPl975KGxjpm3PcDK624bPQyJJdOjPxrpozhJsjgQm9BF3VC/KtkB8yR32\nwXM17tst9RqsT6kJAWsFwKKmf8IStzc94QVVIeKqiGKAHeo6Ie1Xef3R+6b3\nauDtR+3xp2ZEV29ipQfZEk3LiMaapBQdcXI7WV4+2yY5bcDz+f9Qq0oUlFqS\nEph4IqqRsuDSpyIDfrFqDGtDEg2GVkhP6+bpRzJDdP0ZmPq73A3QPt/Z+edT\nuJMLus82pXfW+U/B1vHdrsAgDO3+2URoF3B4oyhciww2uR9RawBhkka5mURg\na5Cf\r\n=U6iW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.05d5facc2.0_1603901567344_0.03633421096508904","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/card","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94a53f8b58337fafcd9e1524e24f476b46606306","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.291b3553d.0.tgz","fileCount":19,"integrity":"sha512-0udb1tvYnRUWw+zFa3jXkwiCB21HKXB9IzoAAm8cTi4kX8veeojte2xajOt7Ok+RFxjjBK77tckw3XtdjclToQ==","signatures":[{"sig":"MEQCIE41rgIj4JkO70DYEMoex3T6dlbArCCzTvoYMAiJKHr+AiBR2mEn+4fQOqoPCAyW1fH2leHRGsSuAfvIWcU/x+bDRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma5DCRA9TVsSAnZWagAAPhQQAIHjcXrQ4D+9upyQUjvL\n6qtAJd8VXGmNcxBWpGALihhcZSoGnuSz10P/N2HL9uXpSrEsE6gyRgxbs+5D\nhjWnW2QZff7n5aIovWQ10SiP0qQGgAcEV+8HzfZwG6a4OdXiw8uRxj3XjTcC\n0+kGY5uIM1gaHF0CjCgWLhbBS/epwk9fxeVOjDdr2JSWPZ61veElwF5o05D+\niLO8i+G4F66Xvx0dvdDB823PbK6hUFN7rAyMt7ATsehkVFwhfrJXXBDOBSCZ\nT7NpfRLVnf6GyWvU/Pv7ZUcl21VVmNLme0ebripWtda2llWMoHDPhUORxguF\n5+I1oySCA/MyMWcCuMByRaYPyP6MlkDj3Ye63BeovcAV0n+3gEOJdgKKQ57o\nNNDBrY98PQ0H7r283nwPaevJalHaUk9xf/XsvJp6zilRzsTTU6KlmEVqJ6yC\niwFKxTMxmmuetVvzlnYcea6g/a7i6Kq9TmI/VCaCdyLfoP0lEX0cwb93CDRX\nENluN2nvJX/aa4bDRMz813PgawNspstm3hLzWoNHN2mhBb/b3ehiA3DPLrbv\nBoWW0w5NiZvDyrm0I9Ooj9D2oeHmZ0vvDZQzwDGspcc50n0v4lkjxcLavvxR\nLeLduNLTRZuoevgLCqNo6viKWBe0OWCMa4McBjZT5WZZnOVVr0zLACxHfD3l\nNvCx\r\n=lPnh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.291b3553d.0_1603907138807_0.3996689947916374","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/card","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"770024ad4b33c1082d45402ad2b46ea893aca7b8","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.dbc449b09.0.tgz","fileCount":19,"integrity":"sha512-+EedmOvPN/qVVsx/WkFYA1I0wdUmXgPs+MncMxXYzh4ojmPFKSnIvhrTILX8HQXKnbjZEMgvFNbEUyBIF6pAVA==","signatures":[{"sig":"MEYCIQCm10Z6SC0DkNdvkXV/0iJnb6qxNh2WvMpjcFn9USLP/AIhAOEqfPrgUOUdDzpty9I+5e+G9HlfUQIH4gjPXB4ICPUk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTDCRA9TVsSAnZWagAAGawP/RovZIL8dcrzgGWvQnaz\nC/T2Yb+AW08Ewj0JQB8zBfOwU9SdFwmyFA5IjvgyBFKmLOJfMSCPFFIe3GHk\nUiniUuaN0rrrrTxTpQ9IWGW28onOHbDfdQ3j149yVEaAmZT8E/P+RVSNLeGH\n69f0wpurphxVz+yJ0miQBf2VVUx/eHF1XqQ8X6YZ9HehL1FQFmDasMTTpVij\nw8nHrAZ3cgZsXyx764440q31qeWlzfESjbhnh8wbRZwwVTKNb2WAL0yI/GIs\nYq53Y7GsUwa0slnNBsCtx6mXrCD9eP2JGQnEW6dj63+8Ou1knWYaoO/9oYU/\noPF3FuE7GB9gatfwBLgah93ds1ek7MM7rlb/PF1RdfiHxVuRy/YdJqforPui\nYT6v8xZb555/4LAsj271MV39jfNTPLSVratvIs/F3PncouIGlUt+nNv8zEtF\njMdgf0w+718hSg0KZZZZ2/Fiu5UO39Rgk6UgIgirqZrClNofeGyJ6JVSGkMI\n8fyEVlTaTudipJxiOn2Imf4AKzGiOVYeaypTuWp3TfRnknZ6cAsHx/GKP8Cr\n56CMIAFoj1U/iSqf6Z/BQJXDKcd5euVFfVfruzsvhF0Oj+rlqRZfjzDBmgwy\ntt/9AGHgq3TkF+9LLvZknHHe3klihxoPSQ/1dJbpx9feVkvk2C8oz+CNu8Np\n7aP4\r\n=y0HQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.dbc449b09.0_1603908802900_0.512999885601831","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/card","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed6d3b5cf22f85dcc3b6ed9322e84bcea07c92d4","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.4794b25da.0.tgz","fileCount":19,"integrity":"sha512-+ce/GIaxMCu7oaJrTIXf9Z6PQrKntvHaMv8OJ6bkSS/nq4IxCEQVCpEQciMFcjR9ni3PamChTdrN39g4cQitGg==","signatures":[{"sig":"MEUCIEcSvatjNkjuLYugYU8AguUcgCSoTjP2bn65ijYBcxUYAiEAqY9zjggsx7tNIpoccv/2CEEDBtKr3lkKgtThiqfP10E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtwCRA9TVsSAnZWagAAD1cP/0I7RoLESyr0ETbRCiJ9\nelnvkF6tNqGHCMbgJZWH8/18R4lxSuRToY/weLQ5DWBl53tGvdvAD2UfqvuP\n2J0xs3D0VXo/bXj9tzfZ1m0SQG1XEqO6kaUyd9KNgvo/dmZUxi5MROYwRW8g\ng6Hz80MC1UTf+OEH20KS3/GoxVs8I+1F0RxEOna7gLisvQWbTZqLvVr6Z29P\ntOmx+94JB+9iQ+0Q3udXBpw7Fqlsfb9R7uLgl9jEH3/lgGMJXQXkJpd+e5pL\nn2rY+4byAbG7PY40x18s0UmRC8R04v7GQUa6IwQUJU2/AV29RkKKw/uVLKkS\ngrrK36f1eaNbakrWxrYahSP2L/i1xqyKlwYiDPNnPR7uZEi+C8eOfHhc5VzK\n1m7NpE0Ovu34DBr3+cTQrMvbTnk4LgjiibYflv7Apval4oW2qcqg0Kd9ZGqh\nGKJaNmT2l9Gxu43+nW4kiCmjhusdZWvyFLI52bUsD9Z0N2aqB2ZQTwwdJVyJ\nfXFaGCkrD4rarLWhif9uke5K85bBNAF1GKpAjIbVeAQJqgxRAOUyqYN5LAe1\nONOiy9JkEK3g5xJYEDneJDK17+BmXTKv1lGRerOB1A/YRPA1mhKTL1Rvnb/i\noDFUP3eZ93YwwJZpveukfhFnqkKo57x6OnNkbPNitHYPgJOlbp7AXnwtXnsY\na5Q6\r\n=5UqY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.4794b25da.0_1603910512163_0.2011339925557658","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/card","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5bb08c64b01eda3ff23a6bd42f08683371c156","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.c61db90a5.0.tgz","fileCount":19,"integrity":"sha512-w01ULpvTjJVxJ6QlJpMxtFMzHOCLu3RcPnZuB1DilBf5ma1T+8NBaKmMMf4V7Zsr9Hw+2cG4udrE2X14aTkMdw==","signatures":[{"sig":"MEUCIQDs1WjkJ0ftRAyXkI7HjiYVRu5aZ8B1xpYJE4a69fW1bgIgb1vEM7SY17ATT6nTBvkKylrcow5xqXaR19250s78LxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb/RCRA9TVsSAnZWagAAe/QP+gP8fDHPQKGSn5byp6BA\noJiZwr3yMa9eTkjhQWBovngpHQ6UsT2SKx7hDbx+mSqX+riw48cr7WEbp7BN\nk1hUtTLwFmuhP73TeCcqmhQ5q6PVIIjyuO+gqIeGvmW82CVCEMdasvtaGkil\n0nRBEkSqw+cBYTn88XM9X+qggmMgPEzv+PvByc9pCPTOoD6VYFhcuaFFqxV+\nCP0GievbE13ZW8/VZm9/JIfEbvDmgOVUZ4LORQj15aa+4OwqqPdfMXeQT7vF\n/2JRbyPANfcWxj9q46CnVEqT7UzAMcG9CA8e6uJ45JgrT6qkKJe4KXyiOj31\ntJnGBhI1jb9Wf1KNyti4gZg/zxYvDnvrxzEcl0QIJCNWrN7GLKkmqa8d3viM\n2hM8EDgKzruLtj7DLrAnd8nw742dSxQ+u8KCUSkb0VSdLSbGHKjB3Kkb0/J2\ndxdPqGDfdVreuu0V0+nTQVnTGc6Mp3iw1HGnM6cI1gvhSEDJIbjHYGoh0Nsd\nocBwSfqXpC/nkpjYYSEuMalptjnn6fdCooda3XTAf7TywvTt3qbwzpqiM48+\nnf0xPD0ygnz6+yEelOulJ52XEVNfD/DEDGwsZa8sH20sKjS0cj4qBW2OGsrF\njgu6Ex6uUYBlnmaG7x/8sX2De6y/jVdBWuEE4dqTiXp6OJNKdpqc2Xk58tuQ\no6AV\r\n=fs5Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.c61db90a5.0_1603911632531_0.132724576244049","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/card","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d346d5f5edecac6fe5fdc92b7d92e84d245be0d6","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.6d9648ab2.0.tgz","fileCount":19,"integrity":"sha512-6UdJQuGmRkKl1koG70/uB5I+U6c6Frk4jYhMeVXTQEZpt+tsdD3JgdZVz/L4OlsIh7LN0ikIeWE6ptVZiJPaHw==","signatures":[{"sig":"MEUCIGJ9mNTI0I2bicIaElWEZGivNoiTOniRvdc7w7Z6kyGLAiEA7tCx20bOI/AFNn8Zz7w97/5YuGD39WcZM4oF/5iaLr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmycKCRA9TVsSAnZWagAAAqYP/3t9cCqvXq7P9peDALJz\ngdlzDR4HTY1VC6zMiw/UtrhbNeciU482MHj1jtWp8TQJxkOFs7HLtjeKV3Ol\n2YOsxl5tFuGPMURXE9GxxJZPvXy15Mp03pZdrowdAB/BEuNgAUwfO6ADxVuq\nxu5pHTjdvWue/ZMtQRDOeKcZpNmBM3xO1GolQyGuEa/oZNEMuhHJ5S0EdWWz\n3+THtUvlR7ANMbDSLU0DDeh62i7QW1FHHK9UJ6Nx2xgPbI/zP9T5n10AEsEX\na38UVedIE9x5P2eVdVkge6lKvCS8MQy2uxiCuhOW0RFLmrpTb2OvnBCAdlnU\ngmDAHSer6tpK/Tdll2OwyyIRRrK4gt4CGt0RJSu2DOu4dYzdqJapibrAcwBE\nLVQzD2PJygRHQBW3Q78D904vAmQt0skaDmuA73me1SunsEIfTm7R1T1txCB/\nnuMQJ1I9P6J7UR4SW+B88ua1/wCub+D04YTxybiENWJ38EA5cRU75hAg4+1N\nJVEJavF7DBVzO9JFuv4NWNElUQnMpCBPO5E0cIufvroJEEDt0FJ5hNTZFiXg\n2jBSiN26EfybgJJ2qzd3tAEIYHaopoDUlxRiFzr1LhpX8oqEPxydNz1NOTtt\noGe3D8/tXUuxBZdK3KEToG277oLJ+xHAKqEcVKjwjQoz/ymwT270wnYd1wqN\nV1a7\r\n=wDft\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.6d9648ab2.0","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/shape":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.6d9648ab2.0_1604003594002_0.7371554613794995","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/card","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"729b7cf59df6768591366f88c7b3655b60c8f43c","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.5511c5254.0.tgz","fileCount":19,"integrity":"sha512-rW7snwNqE+7ffSMQ7npMmwsGyak8o6ug7SeRw4O49kFBtMB4VmhZMbbISJOjFr+0BSL3uiOH/7PIPUjk3mS0EA==","signatures":[{"sig":"MEYCIQC+N1wh/ocu/FzWR4yET0KVz7rNEG/jOEJfZyDnPgJ4MQIhANdBIxku6zdJz7D8TRBAvK17tjNuVlZXyssp3BNtxK5a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFTWCRA9TVsSAnZWagAA9cQP/3ceAIWUkNLeIPK/i3qb\nKblJ//AUlTH7HBk0fzDVXAIkicDOuG3zDKD4Gv6i9JmD1zQgVsfJ7gY7NAfn\nLa9yBNpyIVh5hqFJSbe948Q/rdZdFnekueNLMkTqcTktVOhhplQGdV5hbeJ+\nx5m9TZZ+MfMjQ6mbfMUvQuopyTZl4eXh+a5uxaZ2+s2zbQM4NnU83n/62bJ1\n/gFkwqJvzZhn+QUdIx2MHi1yye63XMsLd1aZzvkRskVKexXg0y+hqDTb29Fw\nN65mc3T+gN8eAGv+Lnoq6bT7KT+fihhWAm4hn/Mpo7WfBicG6y94a6u/241Q\n2Yiz7u1Xbzpl+k4+LHwcXelEosgEbSKhLM8LTk61QkERvq3rqSLgEUnEmi0a\nh3RomJft2ShNOD4G77t8OBbXBZdWuDCez1nUnWG9l3SYXhJ3WCJqCGVdBhP+\nK363MWXrmYJFlGLJM33MDEvhofiGUmyLLpRzP9tSC7oWQQFzExZK/8n8xYNN\nD9p+ShdFzW84/8V9SwZStVK67UNifIJ8q9mQRLYHecS3YXjbGQmYvhZWevHE\nEf3IQa3MkFZS6NsqVkbJgG0rITyUbKXxU00Eq/i5cMYIPTx9ryrmUwDCQ7+4\nN2qEyQtXVKv+RMkrp6nDNlIVx1Tu1q6sfL9uaFr8kznezVRut5FpcBjFgAPg\nRM7I\r\n=BkXG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.5511c5254.0_1604080853971_0.9860066224066502","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/card","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c21ebfcdae746632003d2b9a26c1342d338b627d","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0-canary.bd6e302a4.0.tgz","fileCount":19,"integrity":"sha512-q8YVognRuDMaTzu7dZHSscpCHKTSUYditdK1DfF3ghtxRRmAvnk911FmpGW9afuhUYnFyNUo206rguRo/gtR3A==","signatures":[{"sig":"MEQCIBusx/Ae7gr9wDMB4A1FPrTxVg4eR5sp3YA2FSCq4OdVAiBsUXmC7ScPsL8n5T7HcxrwStlMHtNHGKWWxgQ7E7rXuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDxbCRA9TVsSAnZWagAA1ZsP/0TIZV5UBMf1C0KdZO3f\nS4/c+jlkv7APQdBozTDFYfFoWA24pQJA1Na5r5KPESb7DA/52DuxOflwitJQ\nG+i42tfxZvxzAzjX1RMF0/M0kXcBENvvnSe7mibLOvJN4KcIRn1HHlP+jERq\nzodfUrV1VKs4WMsrYMBafBGD8LOiCDQXMRnxTVqJPOL1d7g8VBmyU0zX5+zy\nS4cjA0IbOz1vKOCawRQSndZRbDVbvrsTs91IZcmTBWqUmOyGmytTHuwWH+KS\nqmjBjrNNlW989VTy5FXjL7xQdWYNWfTM0FSYRiazDBh3/Sv9XDqGYPml6o5r\nrtAiqFkt8SOpj0GUBB9x+bWkY/XLWTR/UwchA0j3U/M9mlyM6i1LRSMTpWsv\nKFDYg7BM/0O0JnuXLrg8x8QYp3RT2oOEnzy+S/53lZBTw7tw+L1Dx2R8J9+d\nIgtGJPOuKLMLFDpVFG1THy+FG4kredtcAxFWDTR86i7+adQClFeiC3MpgOxq\n5hPTOhQuvF1GryVf03hxQ3j6q/aBESjj20ViZxEwjKie3pLE8bw496KRMssg\nLmzAQcMJiMD18bQhKmmGF4wstmkAAPbF2iRuJAHkWgo3uZI9f/OlGD02Ic7b\nDWwddvII9d8+k+xgeZGa2kUhul0Ery7STwrlI4J+tkzd7xC6TVrMeu4QCEim\nboTO\r\n=vYvU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_8.0.0-canary.bd6e302a4.0_1604336730385_0.6461069511699922","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/card","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79888c8b805c3ae6fe3c4dfab51b77df85acdc1a","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.d6b5cd418.0.tgz","fileCount":19,"integrity":"sha512-gJZJ6klu8XXAp8ag9ZoD4u3wk31rlxHA9JlFnN0959cpIb9vje3020wculHZSIedXwL4JPZFW8G4ZTqikJquDQ==","signatures":[{"sig":"MEYCIQDLu7MphZFyXpSr9W6uYm7CMuxXnczFQUuZPUImgJK7RAIhAKgXB7eUuQPm3mKAz2KkaPVTXaCVaDoMFz3IxD2RR+Nf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9nCRA9TVsSAnZWagAAYucP/0/6Zdoe3UuYkINhzEqq\n35b5/UajymHx8etxDanyYD/vwiVx1C0SyGazadzSeQGTj74lPZx23abRD0N3\nwO8oXX48rCLzI0ETQs7YLCDY5FwCV8pI19/9XRPyQBKD7YIoIqGLGEHSEhBY\n8PbdHlVQdUnxyTrxVbr28yqyuHoj1cCh+xjy6Si++0Ov443RKruZI0fvwPgP\nczO1UjYsA/4F+UdHCW3gR5T/Eob/tALzdaQ7atDoRtH/ZZC3JWtZIUy6Ox7v\nsfIj3Bj2KfoLpvaxEMGCx0npolEUXGyHlXOfmG5VHy0/SdEYHZxpamU1jJpy\nV5QiKuq3xmuw70o0bLQVid6xnGa3yXyRPGXty1qnOkY5aQfpI/Hl+ndNRtTZ\nMxg9yUKCOuYn/RVN9n+sAbD2LjYuRcRK9w99ccYtkVZITOb+E6pr6h52GQ0B\nj+8i/W+pGMKcpQjl8EYcE/g7Eq56puW5h+MCQXoAnfy0w9gS9GcVNYXBvFyg\nCm85rfw3VxdMZBFoSifoIFwI4beHkPGVjKTI745a1inn1kL7v6rDxkYef10h\nllxnx6dXM/IzO5Fa6tOwNIwgf34HatVEfs+dqQ7+ejNzdE0cQxEnZq8WWm43\npxbreJAJgUXWuZI542l2Ol4/kiFXQmyRWh2qL+/bs6vnHlHGldkqbErFFJl+\nBtiK\r\n=9Mp/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.d6b5cd418.0","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/shape":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.d6b5cd418.0_1604357991097_0.7104372888971737","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/card","version":"8.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"695ae711229e979eafac889e7753531ee854df33","tarball":"https://registry.npmjs.org/@material/card/-/card-8.0.0.tgz","fileCount":18,"integrity":"sha512-mVpIuWtBCbuMtzSjjoaqjXa5h8tskp1vUaz4O4BhVdojE7m7oDp2/pa9AgADQALtqr9Q6ndtXdWhA4J9cFcRmA==","signatures":[{"sig":"MEYCIQDnOIuBCHYqEMiw+MZ/xtZsNXPuqTvdoeAlVap7e5m19gIhAOFx4Wy7nSc3hRlJvSe0Dy1ey55gtbEtKRVeHJirtsLV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":224938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI99CRA9TVsSAnZWagAAkIQP/iIJ3lfQTE7MD6f+Y7d2\nsLX7VmIwMRKTGAJvXyiXZ0skywqNCijd0lJWIr/YSp/tjZRwzxk5FTycP2C0\n7eOKUnPXBfeCSCYvJFbNKRwuBTv30/uDIbF/07I5LCGNQB3Cbq9knEwNDmwQ\noRBtr7upYulQRnlM+41P0oJesaS/AfqZOwLpfN6rkm8mwitUocihc86fMgha\nQOfpjB0WxBIUM/hOuDijcng+ux6Kg0yadxuaCPq3skdAin9FyRttMQIWwdvb\nM8/M7rf0sndnK4p54WuBh6hRRvgLZQX+lH/v0FO2+QxIXLWCKbRJ9ugv5IhI\nZDnUWC/OmB09gMADMtfS9mb7pSD2sZWYViO2aqsFScTnOPekqRi9BeFE4aan\n5wA7yADp8Rz1q58ylX92gR/sQsTuSMfurd1xw6ihEX0RSawcACt+rBgvSLWE\nJ/pgACxsrxBseHMEn8ViBXK5lkAlYUp4okHVSUoF34GHSgJ+di3IWXfjzOXZ\nnAjMv6vUKdQQZ1zBwj/ojqzjgFzOyuq3GJFxoupQDh99idnhvHEk+m82bSFJ\n0Wi+EMQ/0Xpfqil+xluIcVidKHnsg+mdo7A4uC56aNr5nwYjJg4N5WmXucpx\nzlXs50rCI4ImD3IiuGQMsr74AhIAIV8Tk8AG5Zkw5MVkrVBI0vXrXNxYIzXb\nkbq1\r\n=aMBY\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/elevation":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_8.0.0_1604358012612_0.17734575769267646","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/card","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f0d1207da970be388d010da30a7ad08ec1e2d64","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.fdf9a2634.0.tgz","fileCount":19,"integrity":"sha512-bfqcz6/1Dt2lMeNrTrN19U+6K6JJDVnBNXS7Vp3RjLUmnfah0ZlsX8E7GZS9/oOuAp6rmELdg9B592ZvYfQb/g==","signatures":[{"sig":"MEUCIERuoB2pZ+rjM97PkZOosimvlcDFYPCS2LxtixZ/jh+iAiEAptbCzWy/OUWtjrR5jYW2hd92NnH34NAIbzNyvwiZe4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYcCRA9TVsSAnZWagAAAVsP/3FR1i5dc6id2P+O4tCp\nW7tm9jdm/BDeuhaheas4rjlNs29q4gRIzJcxpEkw7e37ialvZ/ZImpRhRByB\nEJSljvejPoBHhE+1qv86LXWGsX9xKq4WLg2TbZSlzPzpGFrAgGfN2ZCpWMTP\ni8xERHyzZy0een37OEkqubN0APt5+EN5i6ZTfPBgs403ekapFeM+yCBe2H5x\ndrB4ZLTRtOEyzkCRW84E982BH/7039kPn7Tp41x1OyyWdlbBCYKDLPhFNZNg\nArQwfAdDteYzrTm/gNcFXywDPTwXkuljIoQhlO42H2yyK40eBP6Bqawn6ngy\nyeWJQp9FGfv+kDDx9EadeSthaLJ41lwdjx9FJWLq8e3x94I3d2ukxVIf/CFh\nMG9PB+KZEe3gjLHiDdUpD4Vl/GOLVv2fq/03ru1oTJL1oTs+DazrZQqUzt/X\nhRdjdZm6lKqRlXyt6PKsDDARn17+1lvaGTpgnN+PZ7M6a5B6ssSV9CZJC3tL\nXTJp0vH8O2JNuSMXS/RCr1PL7pYlLs+91LSavKRDIQEOyMQjyocBjXTEXkpC\nuuXHg1y+dxeYjc1ABdtSpSO9qfg03POZAAzSie0YMZaXdKruZBbizu0d3uty\nE+JpfZywikFN6IqiecEYkUV4f7nEAV8xwFh1DIzmDhOnJf6SS0oZm7ej2JOm\nyYKz\r\n=xN40\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.fdf9a2634.0_1604445724051_0.12167203375544156","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/card","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb4e80e5a68e8fca1affd0131bb8072a076a5dd8","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.4a86f30a0.0.tgz","fileCount":19,"integrity":"sha512-UrUIM4yY83fgP3rWIo7DWKMWBmos/Bu4OqO8Ps/DF132VjQWe1CvvUrYkSEw2ZBYBFRk6ifxOWcxPJU8xRbmaw==","signatures":[{"sig":"MEUCIHTkjcIrQ+aghyumiRcl4qa4PIVhpk3WoC3kivfe3o9NAiEA/o8Sw4ZtLkenTaVxU+v7x8wney6HLwGC6Lj9TeAV5+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeemCRA9TVsSAnZWagAAzX8P/iUO84FC9oofuloB/PiI\n0HM0SoZ7DrMUjZBofYyNJQgd7+NoU4xxGW6UjrrVo4R2tZ4jywv+7haZkUCa\nRDV+WznedXrqFCL+rLhVXchqp7PHXYYSOd0Xa0QsA1bVIEJ6f4Aif7xQx3xG\nSAOXK/riuyF96/zXJQQxabA/TiiHB44QAjfbSbzN1qluS9N5NoppbIMC+O0M\nUM0LXqwG/KZM9zswtwf3HCSvyHydswheJl6FI8pCQgWdgtLAJ5/aKqf3jPK3\n75/7vkdclX/cGJHwzruB2rNuTdFRn5LTitCT5iQnM3TKqn62O0uaVuQ9Ls2o\nPm8LbI3ShAaehD1ulB4K7aVxCSLmPrilikGQjJFw3SvaDkmuxnrJJTpRFFnX\nCTzG1p+IyAmVt2etfc92Xj8s8lLMrXoVdtAAknC+svxo+5fvocGe+FlCmExp\n4c2l2Th6Jk1Riv8vf2r9h7GaCiewYY16X7qVIWv7ao1PAIvDb0Rojt+s3I2U\n3tp1nE83eQXRT0zRbq4MO9tULEjdFb8+Z/FNV1o5UkXdB3KHs/OEp97ZfM2q\npYUeRdtVngyV1Gte12YZIGlb98CPxVClVd4gTockojvY21W0E2haQzwa4/Kc\nfHRzENDGrBbgQrsEom77/wtiu6zkMsMYc2BdvILZc1LsC8VcuXuCl75hqD+B\nA2pJ\r\n=p22d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.4a86f30a0.0_1604446118457_0.31551250703897327","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/card","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad496b4b693fb1258acf7e302c07aaa866f488c5","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.fc8b045f1.0.tgz","fileCount":19,"integrity":"sha512-Iq3HhISzcTlkdOaoVbLZvcsQx7ILYXJoiNKMg5OIugbi3YxRAlxxcnkgufwD+0wcEE34UjTJ43bvQYIUqg2QIQ==","signatures":[{"sig":"MEUCICqUMtd780Cn2+l0Q5B5fGl5GRkIsPigqs+03nr2slzdAiEAyqE9iYmCjJLEJB5Miq4S5HDFY8XZQJdetr1ROOETbQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoenHCRA9TVsSAnZWagAAI4kQAIY6EY9rV5QV8cnetJ7Q\nbnKhUawq4Vq0l3k8+oiKftn82FUb4bXuuoucLJWaPwkzmPtJukbC8X09tO3S\n0M4Q/Hn5i3QinYXAXEHH1nJE/YpmLQ9g1+WrlrJh/SgUN8xA6DquY7ooMYRD\nf7Qf6cq+j9+ByCdpO2a/YNkIbZA4YwWo2baxL6pySi1gy7for3digayFOB6w\nzzp5Y2qaktU4fdfhEhiigfwbeS2BAqxH/bl92wlGypnkZnkmhMrI+EBNzM96\nQd4URDnqD8fqIrJClXx+1LdGw24aKzQKc5lMVN/XDfgp3P2+bgM9SjJv2F/I\nvOO0pMCBK4ltRYWeJ+BatJpYSY8jfJt+jYL/4EAamkdk1LZk6XoXtvr+TcZi\n2OR3FF14ewKJRQlz8VgAgjPrGH+/Wjx4iHGr9/AK6pwpd6g/q/9tm5d1B4/8\nX1k6W/YfA6lUJSclPieEsahEpHhx1W0Uv2f2bAgJGxW6g6sOCAWkLAtiYO04\nhBA/KpcoWKCVFxPt0ri5Z+SXFQAvIYWun94/s5MmFCP2XsL7knoIzc3hSMIv\nfd1OCd5IGeSIlLyRyL0ViSvNXSneJpU9lj3wJpWVy7if/IC5xLXrbADEFKEx\n6VoFj1MyYRe41ZWpsBOi7JIMbbEvXMrOfc9pFYJeV9eti7IZyGmTrwIQsZQ2\nXOfc\r\n=P2Cj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.fc8b045f1.0_1604446662878_0.1462607805597944","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/card","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"839a83095f417e66e07642dc83d43d46a53abc29","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.a0b2db26b.0.tgz","fileCount":19,"integrity":"sha512-DIVWY75eYKiX9lo/z6dpDi0DLcLI3v3G3+HDbZLgfdOjM88vpHOh/Xlo4gcFyxT60OMvCEdWBTTMuw0rgp+SUg==","signatures":[{"sig":"MEUCIA0j8hD1kjeByY1JKgkfdq+qjQZpgpG8t6ETikrLVceLAiEAmrWfhaSKPykHUleRUul/2WqE4I6YPr8tzKeRbVy1Bgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofFLCRA9TVsSAnZWagAAKM4QAKAQDxHr8CFqNvo5e1pQ\nG4SOLIIDddTbElAcOX7ybbkX2DU7rfbvO+oBRE5GPMD993fE4lAkpDuQDJOU\n0+lWNPjxa8u8QqUS+IPbsJ4ewqt2vjbcPlfhZvIqRsoT9OhC1q+2Ptj3UGyf\n/yLMdLou5MzGDeoagp/odZj7thjJSSU0uP2OywE8kP4/XuSMttdpOJ2HtFvt\nPNZCtKQ1MXk69nUC0A4AkvwzJmqMQqfGBf7XwHN1vYs6z7OoB1Ol0m/WzJbU\nmlR8H16MxV9KZVcqyWnBWkBpVxBnqwctpCYsuyCvwpFr0LvfjIj7mEOtJhRT\n3+p503qBmvbis54ZpssWzpN11qvT/id6gdmsRi8XVm1Hc+jSwgGaKiEVcsog\niY20tkhf/Tj1IQMPWFne5HdpeKp7ZhAwn5qmykuYMJ94MY2C5DZUnr+3L3Ep\n+mcc5S4EXwQ5ulGzfGH3CKDTXIBsnW37GyCtmnfBysNtZMKn2hjlBof9z9ON\nxgErg9W7uGmDJMFq8cBr7CZnAMqWsokFhEGYl0VaAN7u20aMWeeoSUNx6Rb1\nshJ89oEVIGtEoauyUGtAKmZazuxZ2PTfwhjkp2CK/RPE0ng4Ol94DEks9Gzc\nMNxewP1FW/5DDTiTBE1qxT1a+BcdUjslDDofEHddHo2bLYU2ln2ubFYMKXxB\nW4iy\r\n=4M8u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.a0b2db26b.0_1604448587252_0.08710802110348603","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/card","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bb903ade8313780b81d53a49770331b44b2c004","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.419e03572.0.tgz","fileCount":19,"integrity":"sha512-PraQC9iNo0xV21+0s8V6pcD+7RKJgYLsYd9x1c6XOdBAGFRypcD8W5dRGOUgojjeqXZ5d2w4g4VpSDLqQKBmvA==","signatures":[{"sig":"MEQCICap9gRIAgQUSHibrSCF1ykYgb+6oF7bOhSXAy8K9153AiAgov5wNFp7QvS6cgpDH494Be4j1d6yBN/HV7GwJ/0uug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTxCRA9TVsSAnZWagAAtGIP/0L8FFJPhSxQVRpeNtWf\na3MOqAKbsIloH7PRUSf5cOfFbpWF0GaE6PDPDYeQ30iNmed8VfGW0KCL30n+\nVM6W3Hi3KldM17kyshloxIgCIIaddVjTElLVzllN/kY4g6h1hNTPAdDa8jyj\n7zw583WDcmUqZplQHFV90NOSx/Fge/O5tRlMKN/FCq+H+jbf1noTSj+lnA1A\nBUNgpuY88GkTx8hlaA0+GDq4gZlZfPkh/XF+MIHPExgnjNY+vF/MfRMRev6K\nx1LlNUXXJdI+n5olDaZmVtJx85EVZMunVPB0aeyfbhDrghxurH53GYgNjJX/\ngUMsyfNrfe125Z3+S2Bfw7UH55wA0bfigM1MRvFtNA8SK5bJubYlerUrMOD2\nyOgFBP/VytpGFxUkACvlOUyz6pjjqM/JArmhTWTx5G6NmDvYVcNb0MzoX6VN\nWhLDh6AejJ1u1nbJfr2jd8yR0RBRc37NoEWJhvaFuvcoEw4NNdGeIYGmp4JL\n4PIQcdBZhLe4IrcTO25ztwRDM1UtE+H2FPRuwWXmFU2X4IJcj8nAdUTh4Bxu\nZOrniqLfRPRmcIRAmAOZaDryASG0ehbvXGgfQHGqxCCESsAe7MRwqBl0r4U8\nKIgMo9QxOm+myrwIaB7jkS0I/wLzSFior3E+16H3BgxW+AiHzZW2nfJ7Q4FD\njMMu\r\n=pCgj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.419e03572.0_1604453616504_0.9928518958065902","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/card","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db43d0fb1e23791449c64d4f0f5aafa096bd2206","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.a432ad542.0.tgz","fileCount":19,"integrity":"sha512-/D1bmAGUvuKQLdgKNnRMnI83mkoDFkANK9PmkRUzoMZFLGt+kg3lx2FYSd2oJXtg9+NiwwRsVOkLXUOIWDMa1Q==","signatures":[{"sig":"MEUCIEwqyEVb++i34XKnjZXXfcKz6Bn0ibp9+quQnJRxjb7IAiEA3C7zCH7hbZrXtu6ysNWQ/4vf6Lz7Uk0JK26j+LMkgxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKr1CRA9TVsSAnZWagAAuVQQAJ5lOWintldoODab94Df\nAm+UzxF6QxdQdLbshfpTfuTbTTQa+eUenLMLtRR+xVNznzodJhb0qFOwUNYh\nHnu/Vv/J+u8qagvmTjw1VyuZo9YtbO8btG8ow/U0pXZ5O2DMha7czyYoUHlf\nKtViHPkjc1CF/BkOjuFJRlC7HcoXdDDCJUiZXsEUJE0QBA2c5MYcf8efTYRk\nk1PGFcLnytNQLEWFthkjofu6d51OdA4kJJ6wD6l4KNAR82Jwo9iMcQ9740EO\n0O6BgzpKZbDGVq1Z43D8rrozMWe7CBXwDDe1sfaFlXKrp1/Yy+1p/EOZjeN0\niKZTd68qGZQTKyxqvtfMiwPEt4XUns+tIzxFqQ4LmdodSWhGdvLSlxPsKUsK\naOSi2o6FaZkF6wylPAE0xd0KGhGnLo69r3DLMB8OMRwyJ5HN25PYP0PIEAvh\nQ2qYoU5de+eKOmj1yqD7A+OgTAY4lguaS21oAciHCNkMgtxj3UUE9naV7EC4\n9EeS2G+Hm4VnE1t+Uv6a9TE88DcjoM7EXKbnl/SVN8jqm16XIjj1jtjKOQST\nd/YBZ2tUG/IstRA483Tj40UkXNXWHS/yCv+uJfdYqvmtwdejrvTCi294TqaE\n8Vfbpj/BUxea+NszwOad8E8f0fPanEqdZ4L52rTtFY+C38dG5FNljaMCfZyW\nYLFU\r\n=cSIi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.a432ad542.0_1604627189297_0.16278439368726128","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/card","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b086336c64631c2678b2381fac23ca95d488f51","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":19,"integrity":"sha512-cMWxGb6UKjaJavD3aNkAPfe34t7UAWOLtkluQSYLNc6qWV+HzK+Uo8pG60I/ppmhP0tjwSJnlZ/kL/fly7sHhA==","signatures":[{"sig":"MEYCIQDGjurDCw1mkPdfCsE5B6oRJpQ4cylOeUqiDR29lBirUAIhAMMCS4uYc/0ea6jPneNys+hL6GiI6sU2xzG0Dx0gyIu+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+DCRA9TVsSAnZWagAAe6cP/1ddJpk3x6iOSFQ2EYMO\nGHV8Fdo/ZoDEkGaNdRhYe/8CKbUosBxhxmXRfl8osz1frXF6w75ZiXq0Tus0\n1VlJGnM/zCcwSUwOt22ueyE19Nx0RvY0rStGI4xXJRnLfFJ51gMT5bfnX7u7\npnKTRiW0vom+u8/OHOkh7HGkuKj/FNQvr97lOrjDS0RoFmNHApBzKDfk6FfU\nySS+tyU55We5tS2Rjh2NBwrRG5pmwiR5d1U1XYuUnq6FtY6qr+CbrwjReJsr\nX0N339NG3a5OiMrhSENaSznxM+udo7lzYeN//WneAQauejjbcLQ00G13wqYM\nayRe5cTZnl86ZSZiRH/51oXGgHx5/k5TNmkq5qJ91HL54aZlW/96bpVYjcFS\n56UzPSneqPx3Ort+Ej10ZcRcoBDqveak7dBYm75KVtE6UzrGVXO1WrrPVc0t\nYvMlyUacrgJN7IBDU1ZrpbLJkiXNN+Sd28Cu9NdwQpXU27grb324WOwTzkCN\n3s59luH2raZdTj+qsd2eragJ6rUyyPGzB/t31OxIzwZvYFYUbOk8wBA7AQpW\nEgHL9aHLhBOBT5vBFqAOJUqRlhm4vLkLKjdIw2IRY3Tl8/bETJeizqyjZM+S\nGECSpxBCDD0zj0g2Klg0NGXEDpxHC+lWZ0rmqGFnjfdhS+s2oTjh2pmk3IQw\n9Kb1\r\n=rbKF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.e2e8aef1e.0_1604628354428_0.7370287758753955","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/card","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7cff82eaacead1e798df23935e910c9a2617644","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.ec6b68b34.0.tgz","fileCount":19,"integrity":"sha512-/Zv5T7bGSA4a9Zb2SMFE39QRaNrEZOnAoS58WGselQ6oq37SNXP/6BcMZlZ4RE1wAHgewrzBDHUuQzLWcVGWHQ==","signatures":[{"sig":"MEQCIEE0i2bzHN8IPAXCzO/ozFTxHTDRDT8Fxve3x9hNT5ZNAiBZDIqLodJtR3NUvMyXJkoHgTTCIyYeNexJlqjfRikJWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZyECRA9TVsSAnZWagAARHIP/0f4epP3gdvxxibDY0EG\noLnNgHW69QVArlGug9NG2njXXwsCxRXoCSVpCYkqFIV02ku/XTCwr/vUGzQM\njhGlZ8RguHFceXdF8oq1NLuDRn20HwiM+9oG+gDXu/SMS3M5JviTWMTyYBsO\nhO5c5p6QBXcBheozbmmje4KQIoQOR+7jeniCk950wcODFZZfuUhFixXpZFF8\neo13a3Vc9GVLsPUkYGolzO6YfdNYFKVkor1SVhb2Qf6gyvJizhVBhFrVfmhC\nf86MqFXr/Pta5f8iLCqOXFTry9xbzvtOkAkLvwQ4jbaakVKsF7UcdlyNiCgn\nyAgcjyCxnmJwOtwAWsnb/pfvhWqUNRkWmR2ScvTPobdPAp4sshbIrmiJuQIH\na0y8BrNU1pasiuoHluqlCDKFCnGrO5TDs82Lrjd0vdqCXrFvxqFUBSTS5w9O\nN/p9vuzZ29hwCqeFxQxWmlwTNSJ4hgBD3/c07CuVxRhZLXA9rcSV0E7Z7fGC\n3l6R7xXgiKyS0AR3IrAa2KzOUPapgHqvGJ3+az75qu0di58tqnuPOb7k64LG\nVSy+ZUcn6xXR8hCzPTVB8cXzHX5MJbmgrICb1xfmuQFD+9+xjoFytdEHF5VR\n/EYSCz/uYVce/e4TR9n/HlYR9Lk4iLEWzaArVWNi4IL09BKWGks7fNhTLNU0\n4C3+\r\n=oxZ0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.ec6b68b34.0_1604689027476_0.9885181743859264","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/card","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"602025a1b4fb229c5cb9021dabd314002e26a371","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.b39094d14.0.tgz","fileCount":19,"integrity":"sha512-V5sPJS761+nIrTfwflpbv+RZhUYWKUAPQzIsY5SYxpJh/XJ7P4z9ILClHH0o3S02wq4FRsY5CqVCxXHQWkZaSw==","signatures":[{"sig":"MEUCIQD/Ye0NDPjnddZkf/IGrrun9p5/GBBRIiL+/7/W2Qx38AIgGK71tHqpHXfk+zo1poIQvOe5O2HRBiZmeI0wyPRPIF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb01CRA9TVsSAnZWagAAS9EP/1M7NrDp05FKV00KUNB9\n9M028k5D/8DxMcqrqfQdeahLZeJeQyUg9EF5ShP9fh+jN0Qf3zs8rE88zz6b\nBi1HB7UFGowiib3FmlZV0ACUtewCKHHaNjJ1xKCWNlWuIyM3M0wuj+mPaG+k\nQ825bHP4yd0cX0RjldAO9Z9fWrQku+XZC0AmYs4jmYNrNhinTHWHIMbG99SG\nDjQbs2hiV3Gdb/imW8L1kijbTbUHdOOcb90w7wwYY9gboOydeCsQK8KePiuX\nW27LSgEetPOyARM0MJ9IMPM6mJO1lCb4LZsleb1bZuIvhHT93t87x9E47vG5\n7jorZrmC4cuU735gBsCyFWDxaP0ihM6TcGVO6On+I7nli3pDhw92BFNRdC48\nVTE3Z92+02811rZxBNrujZ7ZzC7EhZr0/RW9DsvqHZNf9yQwVzDjpA8F8Q+G\nxRAsinXcBf2HnbBrpU5aGnAkfIxNs8+6aYqhaVriBIoBdtmsqc5ul3pItEJ+\ne4K5y4RIqmK3hde7IK3TeLYh9qVGKFUDKcYEF+kraqKKVGo1VQxWQcM0gOYY\n9EZDa3P/v/ywtE49IPajJqolfJ4V/DVpSWHjSki2yB7kbkiL5hLvCD5MSUqh\nEgeWuehGqMH6Q3ymt2Shy7qCW6I/cmkJWlmDuMJMSlqCVzy2q+G17lTyVqLR\nzW+e\r\n=rkid\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b39094d14.0","@material/rtl":"9.0.0-canary.b39094d14.0","@material/shape":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.b39094d14.0_1604697396510_0.020959305433402964","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/card","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7629537ae5c73359f3b505cf87851c97998b4d4b","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.8648b8258.0.tgz","fileCount":19,"integrity":"sha512-a4aUOtRezEsoj02GFDl/kWs/MnOFwYRnXjBCNBxUyMcu63oNwdJDeto4X/J9k1No9UHZkqf2c2QaoNPbR0DQMg==","signatures":[{"sig":"MEUCIQD1jGXQLpo1O38rt06w0KjJRIwLRDDCnK4hY45qJCXRSQIgNlTEd3KJ0zDTPlaoL2/fKWSMcBh3kOstCLzJvgKaPLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRI5CRA9TVsSAnZWagAAK5QQAJB2ST/1Bug2bV/I1//y\n09d4jypEp2WUIsLT2rpxMx/JNzSFW4neN/f7Lp3G+qWNI6Sbj/qHmOfZ6w11\nn0+xuKL+DLnAegHpFjMid9m8zwHsBjyEuZj1M4QvyAel8lC/C9O2mH1HUw2K\nFUCdj3grj8pzY7fv7x1aKSIJlVD8qz3jnpfqncaxn58sVPjrOqvwHa8+Bte/\nniaqsI7eikiird+p4anKjIzC0R6c8hFNFh4p8F3t465efCJiE32AEnQAzSPw\nNyVGqj+tj2IhSERNniwbGoGL+44arqu+jGWruArw2WfMerrIEUmMfOtKsKm1\nWf36yG550MMn+5imeGOmK0wZH9fkmL2ZBsWnCy3InJbIABm+az52Knwfq/rM\n/vPWFCpUYZLcLBA1xp3Z5vbCjYmfgm3GCK0NZlYEjMx88tneD/SZvk/08wMg\njy/BeOfIduYlj7zvZqTcNQqhSBk+nN0jAwzl+hMeL5wPXume+/8SiRHkWbVx\nsaN167P2Jn9sd+4OYARpkaQyzLYUP8E81Gvvy4cMA5d69vBpYIrMd4xO/5zy\n7AYZ1CqY7IsqPIPVV8Fpc+oomyx/2pG3qw75XckRf7xz11SPie0+dUomzlde\nOtJdj7vjXkX0cWvE0KhLQnwmri3Oh0z9iQjzIdBkcaJknuuTtrQsHbIzHo3h\nl1J4\r\n=0Con\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.8648b8258.0_1605177913124_0.6428579367159271","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/card","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75a3010d6643565f5fe7c5f01a8a4dc4a7c84df8","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.240c5f74f.0.tgz","fileCount":19,"integrity":"sha512-W0GsW6uZVqXn026bXjktb6bP1KewI3B8dc3wy+NOZjZwST0YWM76bg3NSiYoi7SdD5Dfa0OIpM1ZNM4JwLw9rA==","signatures":[{"sig":"MEUCIQDUpqpFyw+2sp2WkmpuRfUSIcAMwqu7zmvscOiD/S87kAIgOCHKe+69fGTfS1h2C4CIL4vXULSP71FtRom6Ia6GOF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZlDCRA9TVsSAnZWagAACigP/0XMFWmzBuXNUprWRpqk\n17o0dUJQ5OB5ty/vRMOw0S7aTDfwoYw2fX95PvmLJB1MZL66KknwPc6is62W\neqZ9EQ4G8vbogPw5BXJGDeae6nJFJgu3X3fIFGyuOliBTojyTEIfyokbtiUD\ngLsHnWtunbJb2I30CGCmCTCu3+XJ+N4Q6BioVXu4U4Tk4znKQmfcLaXX7G6L\nhJSWb1be4fIlKo8hN+EWmskohEO6tVZ5BFWSDLDU8HbKZ/Qlcf6dWs5AQUl1\nL+Uo8p4wfcnhdOtqlA9caQyt+isOb5JjshHzQ5IWf0a5e6ZIAqM+76Nc5kks\nEJSKLjZn4Lwieb8LU+arVDTkb19toz3iDQKCo02zEiuXLPydNfaTnnYGJlVf\nGWev5PoRoIdGfU2h31OJgL3X0BdO+dEcA8m3T8D3lwpmNQIoSG5vw7wYXxKE\nSErrWJl2VIPiFYpXSpQUGI9GS+VW+gu5IOw1nnffDd1cZxdH+tnp05AGejza\n6gwGXJPW1WYuQqiAN5cVa9ll2r7bHsY3i+AvcK2oF+a+GDafgOy1uRp+bajC\nmKYNqc5L+/UxRLvDciMRmiMtnHZmvtL/4wG85R6Rr/6EN8kWoV6fd12Uh6Kn\nlYIWAzfMYUxU7TQdwYCS8SI1oHmq0D6ZEBcGgzyptRNmd0KJLOI9sBA8wk7R\nl0/d\r\n=P3ur\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.240c5f74f.0","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/shape":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.240c5f74f.0_1605212482687_0.26847510273942055","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/card","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d1d96ee8d2e0ca862a902cdb36d1798c09962bc","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":19,"integrity":"sha512-W6RuGMmCRDaG7i9qxUx6ntIPQVETgcxMfBS0Uqt9L4ujwTyu1TGi40Eg4Xho8rhhGTOAs1IkTFZ2NDvqC09ViQ==","signatures":[{"sig":"MEUCIQCX8c21Ea4RPL5CSzu8NinNEKVoO/l8O/UagAoea6zEXwIgAN2Hy4iVdB/307Brv8uIO1zykm5+T4ATully1fPS2n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssn5CRA9TVsSAnZWagAA7MMQAJdfIBBcTkcPqyT/RjYP\nmGKEvplAvU50jOmSRv6z/umtVXONWJ0csOMicEuVZEJfZM0MXMVbIU8qmvBe\nN8SlwGGMODlVijax37mTO5M0vM7mxqnzBX1MYXymyAuoZlhAxs0OZFjFmAKR\nAuD+FidmNd8zt6OZo1rfYo+loKizOwn6uRZpeiN5D6pF/h/+XQNuHsECmyBP\nBG/aT+Z/KsKntD4D8mGhqZn5DeMBv5dVRRKf44/PC/FHmA18BTIOO3RxUPTC\nhe2wFSMe0sqfLaVmScC1mRS7bXi7LBCkFLIApkFw+tvPkDslk4Ao3+vjdYKy\njzSnt8TOp4YPN7E7tFYv1ugd/joIt6gvIYa5ikqV2rUR6EtVkJphVtvs95+b\nTYNUt7pXLP2uAClW93o7dbhQcHlqtA/M9xaSJOKsljGO5wtu1tTtOYcN3GQa\nFLmp8uh16H6VhrgAOCjZ+SMLj5KpgnjcPgCoSdI0UIEJFjZRNn6ISN8RsxFy\nDauegukUe00Iu2j3aZiQdn34n+jSuX0dMurL3M2+szoh+wfEUOwZq/4K+zG+\ne0Mv+Bf7iNsF+jVkSuyHlh2y/Bg/EAbkpPHqxOYFh0Kk/cZIb52fyZt5RUS0\nvKUPavEq7eZJVBrIX2RjsRayWlkkijY1WGQfYp3a9Q9poEJzZiDwCWCYQSwA\nkFJM\r\n=VCR3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.6cf6ba4f4.0_1605552632668_0.6639565407350834","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/card","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bcb4760fe648d4fd6d00a755b42b71a2a715e33","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.07f3e01b7.0.tgz","fileCount":19,"integrity":"sha512-+/O8qr2r4uqFQEDuPUZA11L35bWJQK2hQfcugvSP/F2U/9FECcfVRTlGNNlo4DTJocFYZJ5g41ukulTAjqRgnQ==","signatures":[{"sig":"MEYCIQDksorT7Lw5MbqR4ol/E3+y55fwyfSRKY5Zamm/1ArTrwIhAIk2G3fPXZtH/ixKHY8J3/HsR92nnb7K0nsPkJ/oOm42","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMuCRA9TVsSAnZWagAASo0QAItU72BAatXUOHgscbcn\nieRtq8oVCr5t+FCsUrCCGMX/7NmULkmzOLOtHslijV+ArceYst6apluD7s9R\nkq3An3VhugLFQBodbFu7GQ0gV5m2skZXFUXark7stre3pxS1ai8jWy/G7PRZ\nRVM4BFX8S/XYsDKaVwRfo5xnhaW6bdIuj7Z2JDYGNdCp+Fw0yI5cLk0UfXfl\nhf9d24ROY/2jwZbpTVymmV75CfMtHuY12Ug9bRs5uEbuznT8zj0sHo+Y3nKs\nYJ93eWMCv75ZsJlUiZRGAK6KBHRgXJ2QXJCuZkkiPgAcoiB9bdigjM5a0R7o\n2HwqIonp8AVKhMt9jJDOeE8eKvGVPw5NhKyCHxPuwilVdyzWhP7muspcrBYH\n8jPsLnptlr8NekpUB+JQOWi3n8a05y/RwxEGPs89JvbxtW7iNlfG6XLRUdpe\nHADov9290W2DFLAjRr8P1PuSjk04/VV3ravbpeu9ZIjgYmnHcF671xX3rLsr\nxfERsQifBldzsuRkC9rF17bxbY+wmN+rehoq8nQTbDRGsDHjfAYTO+RKbzBq\nvNmbuzU39tV4cn9R+AZCkmlaE4WRJgYPdCBpnC8wbms2wi6nfdtHnDzbt0dK\nIMumiNAwc0x01W4+4F1P9lnGmd7hHenrZjkrR+RV5AvsOJtrCp8eNt5gcGZ2\nRGr6\r\n=Cyyv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.07f3e01b7.0_1605563181926_0.6779339796161772","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/card","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea51a0227c5363db8f01f09f6182d97ed330ce6f","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.23491cf85.0.tgz","fileCount":19,"integrity":"sha512-uM8+W16JVvT5972SAevupqDyfdGxDBZnegan2p+EcsaeJOvUsoQGWH8sb14BOu6LvytXBQrluXFu/KWpOJCzlw==","signatures":[{"sig":"MEYCIQDivgWIHWeZFcod9F9GmG9R3Szr4hjYGQilIDQCg7iXbAIhAPY9BQHhriQ7j9okk9ve1GOxIyCJSr+vZXDjsh3k9t0/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxauCRA9TVsSAnZWagAAflUP/21j4SJ3zkEAR5KlC+4O\nZef1m3gaPcCTGzyp3LG17tpateF7l3YLMWaWJsjE9VH5NScyt8BmMGJjHOm+\nK0bGAr5JlyjLarlPMBvSvLFdtwTzyGLVAE2wY9E8dGrcYRix2PMa95Brungi\nUi3/91wvnGWEC7SwAh4cn4WPjPBUIh/zxtStmLNLlYe8mgF/j8+KHcR3E5fa\nANB0NEGXI+E5eW5UV8lmEhP/htanFJYwZQtPwo3Q6XfHyAaq6Hy7it3TYWCL\nwU+qpRYrEQku4bom3akxkM9rRdgilkn4MSEpxhw0TH7Xh+pYKFtj96Jwte7k\nZsglv7kOzcL8dCWQqshnzDA4NbwQwMOJoImQAT0Kz6+EPr7uIUmNRtO7lHUu\npT1InaZnWAhPMiQVYc2GquXOAhMAP+kBx837shcugdcDgqMdi3TAxTLfvL/G\n5QUi72rb28XufiUgy50JR+d3lKKYcPvM3+etU+zZjejuBmk0g/m4RrAKPuVW\n4vimvLbFkYoWUTqsH9GsHIyQcMW6VtwMIail0gZDUKTfu82uVeFtOse7z11k\nZuMQUWhZvn7B3DrDpHO68uSR3T5ri7YdCFVXVAcFxaAnXVQ70g2lRb2KNYXs\nhAMVfzvDBjqIu47LEsloVrLhLNfPKVil1lUGUHGJzXyGxL0PJ51f4Jt9qTVo\n14qR\r\n=8y6x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.23491cf85.0_1605572269535_0.6070721535747192","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/card","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b7d8ef933b3f3afefaf04a2f6c836abe023a7ff","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.b659d4fc3.0.tgz","fileCount":19,"integrity":"sha512-rHJkoF/eDyu3Eb9qiHnwUm5PwJlZdw4AQEVp7Oq99mt3UNhqr4D6EoNtoVH4mzl5H+NH7FerQmqivVO+Sa3cYw==","signatures":[{"sig":"MEUCIFApyVx9kER+r4ExYb1+0vppN9waMkm5M6XaBhENnkqlAiEAg9TiGUAv5X2Wa3NF8OWJ5A/TDNoxiPYPpZTYajr9Eg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxiGCRA9TVsSAnZWagAAjTQP/1Kg6KtOIuyUSRUeSbL1\ntq8wTkW8UCm5kctt8Tjr/RSjU/vMgi8bt61Oa7v8qOE5BFBEMY5sxXcO2cUi\nELY5HO0aTiosUdi2s+++xsnD5nOFU3vvGB7yKyvmDF71aD1JC7hdJLLiTkqz\ncSWSC3i1dGTadS8n+rc8qsVtKeBFqhG4RqFi3r3HbtoAc280W2pu2CJ4U0B4\nGp/h2jH8xTYLiV+7rRSIj0PoqD2l08UyCBWu9TH5U+mOZdVi39J1jgAVbNG1\nAFG4T8UtyaVVeSTyoU/M42yK4fDCLTZ+K+G1nP+eCKvuHCQjNVDEByB1XP9P\nznVz/L3hzjk2rVTnl9TpIVY8g9YQg9vBcTPD8LC+wssYiKh9CoMoV+FJ6cjc\nAGP8m9q+b5yT/8vTMomLn8swS0ottRXm2vV4MgqP9y0M7hXJVVHUu+05DvNG\n2A2UhhYkQIXcN2vLWyx0hN/HJd2I3kfIggZnM8w9JMMKUoFn1wBJeHndmzRT\n2yOHme7qUk+uPpCAc4u1o7vTi8MXtTMDESXC2g0weZ0nRsMFfZkAOBc8t4zL\n7bhTqQC0Wqc7TnIBY+cWGr2BT8M/BBvUyMG+WhkP/FJDQbvyPPo12ZCXTZOn\nAewuAPK3WBUogUlzczu5H7Mzx/ZvG1G2G5VsoqSrZL7bUYYDPuiRM8V2Nzxg\nC4R2\r\n=h/jY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.b659d4fc3.0_1605572741588_0.8333927944650135","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/card","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73c67b076894f72a367f0c24f31aa7d41f0c4181","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.d8a3aed67.0.tgz","fileCount":19,"integrity":"sha512-5LfYNcVHWtcqnBLvKy8fKff2LehOwZSKrCFa16oZ4/5Mk+y56XYw2E4/Hq+TtHwYt13ZlszxvXSRHmjtZja0lg==","signatures":[{"sig":"MEYCIQCiJDwyNN8CLRK8F4yYRtKsMt6jIKrMH0t1wfvAHEITHAIhAOf9rebdJU4lVp1suVm3E/nvnE+cktAmg9//kmeBHlJk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+v3CRA9TVsSAnZWagAAV1UP/RT9D9PfElNmIaBH/2JS\nUR/EOzNOcTTL+wOfXhnjTn3O6IN4XCsbijESvqbpyykcx0Z5RkqpasYL+Kxt\nMFC4/nm/txvDjkQ1r+aLYUJMJsRVNYfQ1ROGfxAWFRDkvRACJr8T+jWv+plG\n2TtO766H7hUk9kNwM4aaur084zk//fFVGMW1PIswCKbhuvB+mD5++wYtsYKk\nXXl/4igr1UzyfJ9s9WG6zjtwyI96OYTsAX5mDfMVbZnK/KjBSNZ/W0A9t/Zu\niwRjpT0SkEAAQNlizaAHGRwZgw3FAqBAXPIuMKnIGnhvbvEBeRe2uNonK4He\nDEjfp1A7Q82dVfE0ueqj8h9JmDiM4t7Idz7IMLqvuI6yNIzXBTsdlWNz+bkx\nyQ9M9Snn0/wke++wiiN+us2yfRwxoWMNFg+CUyULvmVkpCi6psDxaOFyxpF9\nZUPHUR8QnbfsdUXd69JhjG3/2jb5dusRQo+MiFHoz5NJyn0GgRYpFfABW6dr\niogamUJiwzOIsgKMJA/quEuqaAGkEc5ZINOhEoKA0sC/heCPF7KGyYvT7IZI\nwm/XG8GsF9MdHPenkA6t2RVyAHxYOfARVJf5lICe9mkxhwfINzQPT4ne5HnL\nzJz+xlX/dHJci4sSp5TLkjmglPHskMRNA2ZJGS2Fe3+yOWeKJsKYEz4Eh1VP\nq8Fc\r\n=It+m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.d8a3aed67.0_1605626871570_0.4991158964743154","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/card","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d868e71f535dd6bd6763bc46d44bb34f014485a","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.482ff9091.0.tgz","fileCount":19,"integrity":"sha512-zAvQMlkGXjqE593uCPAAVaMWUV1VXIvNni4D98Fh4Ayz1aoxnLwZvb9A1iIoYyIDtXKYbp50imeHZkOSsUzoKA==","signatures":[{"sig":"MEUCIQDyUJ23d7Xc2l38SkODEGGcJIHa4EBQr0nKeKtNWOrNqAIgJeDLnjQ8w7Ot2k70IOsq9QRaes1Onjw5ZHQpa2aDSdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA9RCRA9TVsSAnZWagAAlrIP/iGw/WYovVFSiP8mTb7p\n66oAQj5RT8Zao3FG7d9LSs81Q4Clx7iBxu2A02w37xDjgBpwzHBnNGN3FkVl\ndmZDDe5/zF4m/e9vbCagqZ5bGpiUd/ybmwRim5VFzzfaK1Ne1Q7VXRujcTFJ\nTwBsgYABX+r+mMNjya1vyd05cd3v5kLWeUGyJMz6wQFWd6eE+YHKOHSZ7qRT\nh2mi5X9ZjsynfHlksNlwTfHrQLT83Kud6ePzsEG1I4l1DDJAe7Sh55ZeuyMo\n/KqJ+bfgXeIKI8Q+Xh7zrSitnnopH1xW61fNng4nARj2phwWzWskNcVl/nUx\n3Zqs0UZizOXqCUbL4itWGkOpZvqoRNmXAq8sEk+XrsESGWoEUTOcQ8lx3QVx\nxKwZ2ctRD26fdILEDnDbeaVzhs8DHxUMvfx3eDY7eggXuSq8VHDloAwviy/s\ngYLaK/hoN0ywu9w2B08S2sPw8+MtjT1KBSuWIp4YwWNBRMhZ/pRINEJ55pA/\nh1UImC/y/qhD9fiT3oLnftp8jH0yxjCJbKbAWrthlepaD0rO4UDQMm5SwS52\nqiGZ9YZ/2wMOkLV7lzuBVMYvMq2085ZF3HPiaykDJqFpM2N+bsVg7huoPGXj\nkJaO5mR/NUEpJQHg60v0amo0ZChbb/EF7hKboYag7UP+3rjXyU5kWPa12U7l\n5f5Y\r\n=91S7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.482ff9091.0","@material/rtl":"9.0.0-canary.482ff9091.0","@material/shape":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.482ff9091.0_1605635920761_0.6118170969279222","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/card","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d91f78b3444e43875bbaae4c58fb857ba89e4001","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":19,"integrity":"sha512-Fhbu5Zn6JFWgmO7BT4xA2PRhE1rF/zukqdG6PHF0TWlehQkGoOiDSEK6O0fbYu/8JbdjUeskuiIe2UN7DNahvg==","signatures":[{"sig":"MEYCIQD2szMUL6Lx3Bs99bODljYsAawXhmqQ99BWrKw58Gjq5QIhAN3R716vTHTDYRuSHAr83BLvGBdF8mixDJtFSDt7VqwQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWuMCRA9TVsSAnZWagAAYAMQAKQ1Qozmadg/d5TkKHsh\n04Epd2/3K8fwl+/1apFG38k4iwUysOLfXOzNIxCyC17quyiayHXBoQW5Wwav\nvx2kYdtnKvWHWYgjvIzoRKvqkyDCrerdw8wBUDvKQDltACrYKKOOgpX68mNq\nk1XNS9Z52jmpxym9qRHXWMosIsT63s8K3N2xaqdlOIQjEWS+u4WS28fSpmx1\nSkhAEyp/LZImcWG6BMPTvj1O6FvrBMKYmZbDZ0cCx9OmlewJjq6heE7Vs5qI\n1GxAC2sgr2/hXgokOTiMFsMkGJ6hibaLHjLqwGrDeWXaGjAvLJx35MbZU9L0\nibJHVuR/pfhmYkCDt58EGClPbBxIGxStz39c1mAPjI59fV7NNVYJJB6V3Nuo\nrRA6jKX581Zf07wBVvdbu6NRjoyXv839v/SFROMjKe0wLCRjkXpfe15pi6Uq\nLlCQcB5EiRPBnrSLu+UcW4KxH+CLNQV9tDkPps6Vfc3hRcC24DnGPZ8efzg3\nFMmIKgE4/OYwVYZgP6dZaYb+5LhMt2nuRHyts8YbIEpndXxYGo6kp1BhBpKZ\nlB3+orNWAzFKcF4+u6vE4XfQkhFoHshNGbfzHJ8nc5O09pXmlMjF6pZQoPtN\nSdiOlSp5yA2oFMiJ4vMQCAJMLULLHIzOc/GZus2ZmpR1yBTWfPDD66VBkm5X\nLv9j\r\n=QX8J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/shape":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.99cfb6bd5.0_1605725067526_0.2670663919739613","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/card","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"120f79b4caa845810a12cbccaf597162ec225ed8","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.b98d15d90.0.tgz","fileCount":19,"integrity":"sha512-E2Ia3HG+wWmA98uvyjHLRmGNWhcGrYLQtWLztOncmp2E1zxu7iRb0PMvWUHnCup4gFaLTBe2MKRbCo7G/edggw==","signatures":[{"sig":"MEQCIFp7wp2xI17z3yAJ1ll56LH5k2+/pVxOaqghWSkN3IhbAiAM3dwFew4O2rvNy13UmToT5zhGJhQMnoGbN0KWB+AKBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGsCRA9TVsSAnZWagAAVhYP/3IeMC3SIeIoTBK9Q2xI\nbLddooWuwaQRKmhCJbVFtmzFnr9ngRNGLiKLPmuRkgBF4nRb61Ta05dksO8K\nq+3vfb9Pgbx5k0H2blHaF/Nx7p51yKcQ+3sAYBF9xNpDNAHeLb/PwBZ7hqoq\nEZlNGT+o3gV0zgjQJ7IIlYPr2uAcwLzvq2I/GeTL5s7bR5Xzj+/IBAiJzM9D\nD5t/UImSBgTrb0UMCJNFmy5zvgaJC+qK7qdgKSQ/dZm2vJzrhFkZFwnCaQg2\nJtxL7U8xppeWl+53czb6xOocKitpMp7C5Jn8lCI7GWZXiaWLGE6SyDBp4x8G\n5BwPqzmzO2gR89P388zFrhJbIdCf+7JPSaNeGy30NTm1ZvQeoHiSSF7kdxL3\nJiMb4l6BS1y1Kq20n4c77zqr8BcbJC6g/0VgmTKRuyRwPB2NQgZ61ZyVjbYL\nuRKd3t7kZ3X8e8nRNWNO4PQmaG9WX7q5vvIQ5q+D5Spuwd+pDFPx7EE7wRLK\nJxmCV43BtgszJsrFBFkz1xn8LU6HQF5SEnTvThtbVNR1U4neb8KALBU+CXPb\nN1aAzBHbsYPUkJIJ5CWUJy3j0RP7kEtcDtOg1er6QBNfAmCCNdIfiMI3+VJN\nVek+jL9MexXXP6/r++CrNhPFUXNdZ0xlOIhMUro+95coVQSLgjjtHhT3kBjX\nimbL\r\n=mUR1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.b98d15d90.0_1605738923849_0.8949138963801004","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/card","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"435b44e77f1ed8ccaa4d87dedb552787acb3a144","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.30c11bfc2.0.tgz","fileCount":19,"integrity":"sha512-19tsYhr1SG7MmBYWuE1mqngnDUMSD8CrI93sJZ6V4nT72w7v8drilm1mgeyY2BriiMYdBGihM7+gEGlctdsp1w==","signatures":[{"sig":"MEUCIBYW6kxSyElht1ZV9vU7uSRzZsSjrubeckkcjQeL+MMQAiEAxqd2ZuprX7JqkDBHIz+XgESp+QxmQZEfW22pMp/ECho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcnMCRA9TVsSAnZWagAAXnYQAJdhPHVMpn/GA3ItBA+O\nQKJWT3rmXHBCf429x3J9xvScmGmK4VbskRl5pO8tQUv/sOG2jYowwtJnb+G4\nx19JZ9uRoV6E41iGeJj0R3zlwYWGa9B7gg1xwTJlfkV6M5vZk+Ct+UXV41ae\nHdIamquJ3pTOZwz3BrJhkIXb92q9/eoTfQDJI1LXKGsZyLmXwcYg7hv/z1pi\nKqpf6k3+99io+q8PvzafoJm5A7utQlqUEeOXF7uDPcxtNsGfoClFOmY/oAUW\nga6Fy0VyJtWkZfJZDm5UDpstObGO49BN2dDV0fPSQVG0DUq05LsRq54BSgd6\n26c91ikkBizx65nyt6DHRBzcRZ516wpfmkKTicIIy2XttNeSE9AJyvBwxRIX\nOvHR43rzAB5PxqJxD8NF6/wAnGV9Fzi5gfd3/csDpNenpx1q34cwx2JKyKGN\nT9QYuZldT8dM/1CL7le8BqoXoSOoQlr5o8HplhQSjcB3wmx2jCFszQ5Jo2w3\nGNiT4KNVAPnpKtygNQ7owqXgfx+taY+H7jD1tmOkGHjv/Bvn1tOSQoAVwDxP\nbc43NFRSRLu7oIcLi607wn73vf47bIO5uB+B3gn5ECJQ4JdJKOrpjZpNGVf+\nd8kJIlVW+H7l9CPjcxWWUFL0cFEty+GrDZfKqZDu7EE6QVog9xXCAxFwZXrE\nIaot\r\n=E2Vm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.30c11bfc2.0","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/shape":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.30c11bfc2.0_1605749195859_0.21049076204401462","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/card","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75aae19f089ef1b28ad58ea2e20e33a2aba06fec","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.1b731d51b.0.tgz","fileCount":19,"integrity":"sha512-6uYwaEkG96M+FenWjyimBtvxOP988U7rtEovaRFQXfrGcOxtHt4eEdggEJlA+h92XAfg++YFgEWG2FTV+o9R1A==","signatures":[{"sig":"MEYCIQCkAzVibhT5POjDcOoYquaDbPw/Ic4SitUGzGjnA4x64wIhAKzaKOjhVeilno4tibzkJfhHPdBYY4VRJM7tiwExgVnr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8JCRA9TVsSAnZWagAAQtsQAKMm50Ja643f5kSX9svp\nmB+iInGQRjkbep2oQSWb3PawAl0IMvLWgIrudC+gpXP7lqZwje53brUnHQ8l\nGQrE+T7KrgmI41zQ3l5ouu+5T0zwja/oR6iAm2s2GF140mz0PyHPcp/HwmMU\nICP7HbWva54DfrfRknPmECW1sboPdZxSoNp6m/IEZdKdV5VHeFP9CGG/9+zR\nmghbQeegItLGgkZX9ORJCjQRwaEdgFRlfnvuE7Hm2fCIgkFwsEzsDHbmEvIZ\n9G1qJth4tnt0CfcU/wQ9eGxnZlg+kTVFuMuIb9a7MrZ5xocL+tr9Q+nyYEnD\nVAVfOsjDxPNSuwTdNXUB6Q8d1n1ZZ1U9Alrrt2IF3b+3sRLMYZSi6188rmni\nrbDWpxtFUGi47I3g6lkIywHgfqDQttW6C8VnJMnptwxLqq9A1Hr3dZDCJb44\nL5qNhcRrKphyShjlL2MbHExfFtYbQ+bWwvXMgK/cJ+zsMxTz9RvTKTWdDbyh\npjVyhlt2zKzgQJ14WuhVpgFh6/FIn3zwdKisEn35TDySwokbte02PHoL3eUS\nn3BHrBdZsSBNIDTIkLYrbrayRUzJErKSUaqmDkM84BqK0SBc7xrJCF0TTls+\nQYGrVpH34y3fS98qLufykX6TIjVe0KrRZE/aA4oxWgTy7uqol27vHAigr4S1\nw5fW\r\n=BMdA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.1b731d51b.0_1605811976683_0.02639800309177165","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/card","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3806014a48b53a060370853b1313cda88e58d0c3","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.4ae94ff78.0.tgz","fileCount":19,"integrity":"sha512-Y9U/B3Hoj1Jv68nfOoOq9MVTY/LN94XVaSOLCWIqiSoqUGhZ2F+4NZ5JZpUyjSXSEKbbOWO3ELwa+2RuJhqzDg==","signatures":[{"sig":"MEQCIFsUTdH1ECYFNzHnvxjuAR417fbbiUajxYIcebcfeCUJAiBiECxKbBUG9THgfvKSPfVa0r0qvFoukmLCfoYaVGx/2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+5CRA9TVsSAnZWagAAfLoP/AiPz1DZHAB86wQ8EoSX\n6DuyjYW+AihuZqyOZ38HaMl9kNbX/taYoEfX8DMSgzhSdzzth/NzwkcKpPvL\nLHbgaw3+ukvW+wh3oJeCuQGJiloJF+p5+lmy8GDOk0GaQSXFRjwsfcfJGL6I\nx1kw8llmr4dJuErLKHWJlh4oK6Tqu8nlrTr5NCTNgJirDzFS19jOPraRzQRg\nM1Y91dnJye4uF6qT3zMn0P5SHAQ9SIRYWMwij/04gCm5c8br2C6DqDY/E/CD\n2YazbQvkCGW30wX0LQ/5/R64jqP7Wjhm0EinFlfAGL+naGNm1qk43NS4sjVc\nU7Z78qcgenNoGkg+BaIfL/nO2/YHrkQ+o/D7gqnVHKBC0S6MrIcHRYqW0d+C\nS30npxgzI8BXIAPU0TZugv+5/d2XjtjIEwNYMXzQJv8xmfKi0/bYifexKlk+\n1BiQXi5CyXW+dTsiRVUbeuMt2SfIdbNi9OMCd796KCASS9loyKHzhnjNF46Q\nUurnHXK2Q0KSFLFQWsI6o6Q7t2kA7kPUlDCl0ZxM/G1/f/hMs4fBhyp52wXr\n08QWYDvBPie86Xm4lv6vmu6BXp4mY934abbRiiyZP3pmRA6NXOZm2gfiuBhe\nY1e7c9n59nF2KxlYtkv8sNPdrhhkigZdfVyswGLCeJ8D8OaDLaX+1C2X72n9\n5Za2\r\n=EFqo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.4ae94ff78.0_1605812152697_0.8218849890866504","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/card","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57bf182ce19c4bff587e16fc0bef10a90e590097","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.7ad038e1d.0.tgz","fileCount":19,"integrity":"sha512-+/aU4kFqc/8Rj+FBS52ecC+JstToduNjIM/NnAKkRIxrgKHXWAWTnY26/VAboPT2DMw4dGxLpQC9RDZr7MdqHQ==","signatures":[{"sig":"MEYCIQCYSEOIbpS1ynPh2LMxKyQIq51Fir3Xezj8jHkizZxyiQIhAK3pME6CyrSZAPwpbs9VgY/woAWMiixv41I7wClM5rN/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUiCRA9TVsSAnZWagAAD/4P/25P6U50d26rUArkthq+\nKA1MNE2lJA8ihv7o80j2uweeS9+k1mgUt6Wi7wBuwqlETBWYY54Vxf7TdFuX\nFqaLfBx74wn/oHq1aTyLZTxkwv57v2NG8Dj3XITdY4fZcyDOMwVfYONS4qqM\noa13gYdP3OqTWdQkA5kMCYWOkndIAWvOdfF+1lJiM5FWSvS4WErz7CDSX4H4\n3+lhLAPMuPViODOmfwWdx7VdxZHKf88ZjkDgyKs0DEPJUyPscj5pMQJCEiD1\nTfFLli2UxrnF556ye9/vzxAhNEEvtspmIIk3tzDlndNWLZ74f2o4TTYJCX+o\nK9gy8In4dstgnraixGed/RLacVupnEQG6Mv/8n4w0WiKTRf885foUPsfozCJ\nq9+uRd9HM/lTFfDeSz6C7eh123wc8agM5i2p4wFk6leEowmrKKKU3gAm2iNG\nYDzcsGNz4KPQtKifbb1c2ivML6V1Q6adF19m0nk+5+LU1JH0J0kRToEV4iGf\n24WRB7oKRYluHlpDDbMZEL+Otyb1oBATyVRpXEGw4SR7aNG4dtDbfOavC97l\nHcBnnDSH/flIYzaCxA7BC1WT/A1+jE8LwCMxzDDvHfgBhABsmhsJGCw5Zphq\nSkRNzhzjVweRad0hcjbVUuQamrsgHVpcOIdBbO0gNvSqsIkpKROZIpZWZ+Kv\n4flF\r\n=6pMs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.7ad038e1d.0_1605813537716_0.5313372793193296","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/card","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc3a99a1f492e5e3e9a4e62c892c868f6c584be8","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.a41527604.0.tgz","fileCount":19,"integrity":"sha512-pChZyJBLFJRr0ahjVP3b38VNIwq+iq1ue7YFTORylJfGdktBRYGOBNEC0lNR2GSl1MMnuhCQfQ4E6NLzZS+y1w==","signatures":[{"sig":"MEUCIEdVEqZ9q6S9va9oTzn7Ib0ethmziuRi1N0DBc5yg3tgAiEAk/YXiY3gfECJwsBs7QK0i+qfuGX/dVIf3jiOhbxkCpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7xCRA9TVsSAnZWagAAiXMP/1+g0EqrVcwmBEDr0hlB\noRgvCGB7K9AcrCOc6J2kfjmeGpLy/acWtgwYteKZojX6HgrMF5vKr0Q4xEJQ\nCMD/GQ9P1DhKciN/IqoWYvbjJiFKi5VKOPd5qj2vhx/FWibpmf3YxOdiDr9P\nidqc1Bdl6JJQHv8xBAsWnb+HwAHRalx4tc9XdgCytvu9fopR/lbnqYCSQwas\nASjTWEKRl7/FrolteCmS9ZyYJYiOE1GqRvB0G3wz/4I6OEP3EbdBeTVPgzQY\nbbSZHJ26aApW6G/6mzL89Yv7toV+E6ztCYKRcsk3jaSum4Ra1+haHJirJ0Jc\nu6n6TBmcXf227jcEcQeIrsG3+RUtq2c47xD42/3Gr8GgWc6/XYJ2GjPeFDSg\nkADACplNpsOI92WqG1HHhmSpr1bkscwZBG5+bJlhEcZcV7ltf4XZA6I2L90r\nBbmmMJ0gkGI7RQWthjZ0rKbhRGWk7Gx4mNff0pbvaKZzcsta/BPsPES946C0\n9F0tnUxXztc7pjwaXq9jjLPrDipi9N4WPZzAHbThfdJy/Tf1C/TdE7ajYFzf\ny+4T66sD+67jP24ntVWKJmms4P0y9yphHBueCPi/UP+blhUUl+1NFWQQ/h6H\nf1PMgclmhwgBJ2ra7oXwhHsH/plK+51DKpcjTqur5FLSlXx6/DWg+8n2y3sE\n9r8u\r\n=eJfm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.a41527604.0_1605816049306_0.7820550019372612","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/card","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd78841b8dc79cca4eb10e41608c4cbb4bbd29c5","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.7b0e2b377.0.tgz","fileCount":19,"integrity":"sha512-NiI2Kmi/yN39lFgWNa+Az0FW0Ncti9WR8H/AISqujP10vBS1ig+7B35RcNG7rDdLKbemlJNwc7F44kUqOoiNIw==","signatures":[{"sig":"MEUCICuy/P5pojYJcMzuPBgmFdIRuTO107r3u7IF0QDZ0bT0AiEArvnqrbz/aiO+unVm05DbBgEKHsWzD/RyxQzAT9UsnW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEmXCRA9TVsSAnZWagAAVkMQAIxDecz3JFJl4Wb4UEmr\n5mYy3JDdmyt2MRcncXi1bz5/LRHIuyDv4Sq3bi4hPwAWwYHh4D8+CUPAG/6D\nSRxamL4Q4epTW9PBZY4XsTscSwC5HwZ4oOl5ujFOZD52Fefz2pT5y3HhidXT\nwBHSIoQH9eaqfefSpNT8aHSS6sA+uexElbRkXKAtAAggTJiw8T1+WGyvGdeg\nToTa3MMQ6ZnTYs1aeosA8gtZvJHh5qRigihTEwjVnXEWrcL0eMLxYu/CFwMI\nJ6coCiSCf8g5ueuGCGpMuULh+hr54t96R27HqYVVOQz4L4YyQuyozbRpysFC\n94ql2jSRZ922NWpAJLpjdO0v2ykRFIwtUjBdVGjjfKuBU3BO9+7zSVSLblx5\n9q6+xU/gld9Zz/Tp8CFFWpNDtXPxTJ9Lk3lbteLEB2Y+QJG0X4bIhBJCJny6\nC+XarJSCN2caPRXyHb3l7PYCPz3wBEUeFZe0PeU02tePIIpJFXQkNXI5Ikuv\nZsm6MVkbPuByrgtIBtKtWPIuMW9KTEOPn4pEDqfBqh7mDIdwHnJyoxOUWugg\nHk4KN1/mxYgreKG7hs1NyHOhfWsqzCHZNlLMWnRyUhnwz2FmEivq+LLrz8KQ\nt4kY+p26ARmAF21wpYsywD+6r4wHdzvL2hpsAY/eu9T93rOHiXqXtNwk79uA\n4drB\r\n=9jWV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.7b0e2b377.0_1605912983462_0.4960755947409914","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/card","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bd325e8adcbaf796ee804e608eefaac7df86c71","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.c927a5d05.0.tgz","fileCount":19,"integrity":"sha512-IEX7BZ8CqV2zspRdp10uaW7gdxovpAP7+jGgt74QYc9gqYRmJgmMIJG9Ot1ldPhhN87+KPv2XWwQ6lK0P8HrnA==","signatures":[{"sig":"MEQCIEJmYxi6RloIhw7041KK3Da4luo7J0Qu1gyOlsIAWKpsAiBDqx7KRzacHnYqiSe/lnyfgwtFJLuI8rx0gsZuB7HejQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHyCRA9TVsSAnZWagAAswEQAKJzTUeGOte57ly1vk1h\nOvMYfSWm9VulMWNTuqw7r8GFmSyLOn/VPEphO3wAg5KP1gghuBTk4M8wf670\n+BHSYZ8EzKqn2ptXfr0EY4oy3xAZZV5z9pRTpP4RMBE0lDk1HQy1f5b9R/dT\nF0gMSzOxqR+PSeHl3sxsZNAdKpGZta5w0XuU8PMEdPmrQ7G6yhoIJI/NHJOa\nn5n4hJx6h1aSC2G6SQkMs6dthOr4CVnGbsihNsdeDgvmIwixHpy0jlrRQx/E\n1QBOQPhDWvAxwFnAjA9Bw6Oi9Bx/l0Yzulq/tMVQVcwzzGsk2+5uk/7OcqEY\nE2rppqn85UAdTZDQDCtjRNU8DzIellRmMBnITMAEBcTmZOuTc8F69lS8yYPC\nw08sJBFu3VJSc6EcEVbc8lXlljsDjguBLytq+U/ZYwvJ/vq1E1HVjNdy0v4+\nfeiDbDHjkE9iJRWVo1/RnbSWRshThBszQ0o66kazoM+AdLV0uX/Q8A4KGSL+\nR+++9XoJ9/uAgaaTQG4Yg4cV/VtUy8w78szk4cL3qTaR5bRnddXjij1rYVnr\n5BWrpX1G//x55e9bnutAPk4vPezZqpF/JEzRd/FAcj571hkSVpXF+dqpLD1C\nqGKE6UzXrbIwCiU2hY+fhVYcuA+wYPgF6vPRlpwFcMxOJ/3lmHEMaJ1gEGrO\nMOux\r\n=QLtm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.c927a5d05.0","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/shape":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.c927a5d05.0_1606160881775_0.7561111903346842","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/card","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"471cebdc2758cab8dbefaddb41de7371ca912102","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.b349b5185.0.tgz","fileCount":19,"integrity":"sha512-xZHm8Gv0cn5wb4WwaEVkOi3XS2lZW15ByJoqRMzdXePq/s7Fi0HelYPWsY8ygYkYd7qgA/UpVB1Cfv+ndn6jkQ==","signatures":[{"sig":"MEUCIQDJ2EabVrZZ6Ea6yOdPVsqI2T45tRvNkjvGDHKqg1qPfAIgI6wIZvlxYfRYtMYP7cCiSHJD49T4TZd6rsJs8Cu3yAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT5JCRA9TVsSAnZWagAAcSkQAJR3QeIQoLh0BYb7juMe\nc6iM5OzkRzfcnGy9PO8ND+byT53yXurJiQY+h1gzebj5VXdK9OcpH7uMaw1m\nQpJW43yqGKNcPXPEXY+y0pMi/S29qghRaLmBAyMyys/ceE8kX5exRkBAkbQA\n1kP+W+WIPaDO84q4+A1GgtFEOHin4MgVfwmn1JqmyW9tQr7x9mtVgywfyrEk\nhl/ZFJliIHjNNcokadRS1IlUIgkKujaZySwRRfZPtjP0ZKOsBRKCMTs8x9kJ\n3TPQ3nhscQPpiQRM2socdHBPw3S+i81ZUE5YauYd05yRK6mnXIoKPbG0Pp4n\n3cmwnskGilg9WGJRdjMNSqmAjYOZh6QUsaUUc3D+aMZmiewgc+bL0ZDk0pNs\nYPjWpE2EF31COBXBrI52BrWvUPJVB16CQ4pEXCC0yyQEoAert7132kIMbtY7\nT9m7nuDdtHihKLEJzj70yAGKlTX2ehPbVjvzRExcKPhFlWreC3WSCFBKLoAF\n70JILTxp6RbTkxgObdaMWt358aB9xsrcAnvDdhCEFa3Av0JaVxi1+Bj1IUIQ\nd1GwLcufkiqOiS/j+ZgYk0qKQPE4X1s/MpJbLBDEXko1+t4wYNXUBwlYJ0c2\nyK/Il+v2pDJPMEi5sCnGj1JoNz1vCZ5ekPGOeqfX4IrwRtwwAl5ZyVYQ78dx\nka5o\r\n=Frqm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.b349b5185.0_1606237769412_0.18030940427327113","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/card","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc50bccfa3d78676ac948c13f20d062df82a50f9","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.9083b7d61.0.tgz","fileCount":19,"integrity":"sha512-40KfjnHZOO44EudpI0h4aDrrkjL5DpTE1XP/hcu/9A3ADUsxPlDZ+3fKppazwr6YkAmishy0YOQZrw/ho+8TjQ==","signatures":[{"sig":"MEYCIQDqegtQHfBTvMUc3LxpOJfbbARg/QjY2StPjQ0Q13rRcAIhANkXYV3y1HttmGka3qSGpxEmCAtqeZkFC7G4MkjUhq3p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgKCRA9TVsSAnZWagAAmQAP/iI7KbLHra21MwXRzTp5\n5ac3iaV+n6ZHNnVK8bVQHRqwRNSgx8BwD+QKq8h/9GDPNLCUFjhTkM7twQnr\n4jA9RsR5UuDmmr1nu6zNROaI0OLOP5rKHS0hdC1QPLyPWeLG8UYBTRqw87Qe\nuZm03ShlIwpk++A4o25ehkH/HSOPQKz1k0aER/cdxl0LOTDHX+tnB0LGxa2i\nV/LNCJakMcdQ1L51cdsSbZJXboO0DqG1dIq1gG+ARjksZ2FNCk+COMW/dxC8\nn3mBWVLSvqLWb3wCsZKqzZlG9btj1HM8cLsqapnZmTuvRal+qvB5taSECjLO\nC2+z+Dgk2r5JSI8E6Vfhgr9VN8acOUKdgqy6cKZL9G4lBcKG2k4e/0nYJWUJ\nU6eqhWo9CgHLUg1b+fjKzpNi2dvJz0USb7zNOthOHI7EjQJsfrXqTbkTs3tb\n2gDwC9AToz9puswoFgAJs4zIhwfM6wiXM/JS9wyIAzxpuTGrwlaQ+EO0qRuO\n1Vl1jW+kjr7v+AENv5p5wvdJ4AeeaRO3jInS6S7StOHrU93ERj3J5yAxgP72\nzuTbFkPAFpe+EWqT6shIH6R61nUTZdcgBD2sqwgDCYpFs4es1gplJNvd7WlB\nKBDuhBnSt6kB1jI7uEELp7CTTO1x2DxWAYRbXSS43RKcs6Yoeo4iShfH7j1z\nAtav\r\n=/RAQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.9083b7d61.0_1606252553399_0.3340813097081521","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/card","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e8e7e9bec48a315eb88efb746eeeffbe14e5711","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.eff7b46ac.0.tgz","fileCount":19,"integrity":"sha512-IMfFw0dvIEcc3E2swa6zN3eP+m6y7JbaLA1BzO1vethfrLjXQH233svgPLDlk/+zKq3+A3GAuM+Rjytcqlo1Yw==","signatures":[{"sig":"MEUCIQDsRylE8UzKfVaeZv523gnuhFFImoYRZhfdyNeFgi9KOAIgKIG54lfizRJXcQQ4jC++sSFk7OXKtGo7dmMcwArr0eI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZfYCRA9TVsSAnZWagAAWLIQAJOUjQd/ibwoWsk8CMfR\n67NGQgGjTJOslbVwx5wYCwxHhqSgMC1FyWXAgJltTVMLD33vNriAxX7VLMh7\neBtMej7Er5xZGXkztmYcnRSvyeuQ8hW7QFD731qLarQcq80fGMhbAw7lRG62\nNc8VcjMj6bs4hgBXp5JPLWtYZN3Jn9wq9N0WqJ2h3m0Ld4rbm8U/SBrNRwfS\nwYc1bli877febLFL2cELe6VyjgCgSbIHmHd/47TsP8F5RG0Kix9ep0MNriYF\nXP8arWgbdyDw9hs1t6SvUZZLY+LLHsq5gpDUcBWBStk6OTXFTe+JCWXyskkj\nSYqd17gcUZjLZnEdJbnj2RXIdCQPpKzrH0N8j1qYFoBYVvqJsPNqxfHLkHC7\nnOLWlD3GNRFxYy2ov7PF+Yvu6V93PeDesTEzWg9kzm70I2mX8XGVEDfIeIhJ\n3BAKrV4oQq1jOzvwqfXVD9QRPRvvXbWaWkG3UAB/1mK5ynS+QTYf9O8Wt6CR\nF+9ZTev6hsSNFmCyubf+70GmFcRPW9tNIwRoSJ3bG/AiU25871OSbE6bfwV4\nZj8Xl4PwWwFb2heb6/fOZuDyvE6lBQQHJiMkNPf3kTIhIQ0a3pWr7YCIa0Tx\ntEaQd6/1P7m3pGtVA2Z/Z09g8BzVZKiT8ktHZW1dUnM375ZOIgLtoTxX9VRE\nUXb+\r\n=oEhU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.eff7b46ac.0_1606260696433_0.67131733404009","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/card","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e26d191ea7745e7d2b3dd6e6b2f4e4693fbb52a","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.ae27b44b0.0.tgz","fileCount":19,"integrity":"sha512-n1QblRXnMp0VjgxpUAcOlYy5PU5rRT8FZqFwJvuYPSk6z2dNABRqajOb6O5dVgwYhFwVXU7fvMoqbFdIHsUiyA==","signatures":[{"sig":"MEUCIA434cfj+DujR0WPC/y208fY/Nk69vGPGPeSFxPduy8pAiEA4mDN+cKak1U9iPAx5GEtLBD7AAVwJWFd/XnBMtryqK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnmOCRA9TVsSAnZWagAA6yQP/j7tIpRa76t2Th4ziw2+\nj9ZbCfc7qm3rb4ZdQKXZLPI/AqG4zkfbxoRU6MidtYk7xiDlrBRVYCHlSkCO\nUHIKtBb8X31R2/vqtPii3Tuist6JTg62GcuWveEiJMzLshB1n637ZSFte3Xu\nSoAA5Z3Shp0sESSkU5pGhu0rQm+TQx4pOIUvv5CjTEj0DULzuCVSuZqG7vA8\n+UgXKdjCDoa5DynJ9x9KxSpId9gux8rpjW0kckCfUSbT8efOZu2+PlSJoAez\nP4YWsw9s/VfTvflf1G9dYdfv9b3H2/TB5FEhyv2tN1i4JGY37bQhkFSJsx6v\ndatTSrVZWQKMaV31A1dbPBIN/0LiZUwRtVCSrGdiHBwT5mBX2KzwRP7p8ttD\nL6vK8omdd1t9I01w2vINOQt3AyW5FtLgoEPpsSiGW5JhmbSPSLpx3XRYcwfT\nkxs3jlh3Z/fkFk0zY9tNt11haq01tVWhWWAlS4yREakshxnbX9hYTAhUbBQc\nkoM5mPm1GFcPbhlm3X4RCCawuGK+gzZcBzA+Upm2JbRyt83+Nu0VJSXHyVIo\nYJU3mFF5YHYQFPbAKpNZ520LkEutPBnI7mu0MGremDTB5INQousmcsYJou2m\nTpmTgXQuHa/4qh4Z3OuD25gUHnF2tXJwyitzcl0WFTDgemCviF0f261ZM2oX\nOno2\r\n=2v5U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.ae27b44b0.0","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/shape":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.ae27b44b0.0_1606318478175_0.05651560462414995","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/card","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef088624d45b182684e6aa2282915acd7f696123","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.2fbba2554.0.tgz","fileCount":19,"integrity":"sha512-sAhavF6rKskjlbR6nWmaukjUndb8FHf2vLeCfWCQPg//ax/INeuMJsFBOib8QEcjan3v/1gj2t/K3/NeqBxzjA==","signatures":[{"sig":"MEUCIDt5ipa7QxHH/x/NOPZ1mFHs3plkvbM9droKQSHvsfCaAiEAy08R3T6C+TFIMRc0U5jIjt64VYAY5BGpO3oukpP8r+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6oCRA9TVsSAnZWagAAicoQAIXgC5K3VaFtAbpESpFB\nrNI7XFv0BrdbGYTHh3Ugrmqy2VA0FZaLSk7/xZWJKW6rVrRIhEjADgIlx4jk\nW8cOs/kTvUCHYSaeD8ykozX4dFWwvG5OKnMmRNOUJWU9FLVSYR+2vEfMQeWL\nHnCCrl5+E22M5KAsl9RYukteAzkHb7xFEqfx9WYorWi21Z/diKtihPi0zKvM\nLIWuKhCqnbxGJV49IoHCF0dzHr55SS2FHBFE9JF7mi47DylB8LpT+L52Yg86\nI9BXJpuT1P4tkSl9xWA0stLN/dmdKrJE/qudaSb3bRv4UbRyO+oTemRuyNn2\n0a0mwz3AYJIJhufDRrvigh/CCSq/opHkE4CTNf6F7oZ4mRjmIMulYM7ukVTi\nordtviOWmdDlADX9n13og+VlLK7HRDQtnmEXwFSu5lKpjsytjZWEw57bvnRP\n9HxnLBgkKrGmvguRn+TtX7H3yDrearyrWCt0HHQlP0+tjDUMLHykKBRo/L3M\nhi/9fw4JvfTTM1WoU8d+GHoeJIAd4UHCp/Yo4dM5shsOYl0QoXfJRHJ/s1U+\ns7xgHkDuLp88t3xzijzRLEqAMPbPdHmwvZZcQikyhXXfUnFtQeEbeR5/4orK\nTTrgo7uhVjRZ6oBmHpOIl40mwQxCWoVT2SsYrF4TPkwNUeagV/lNkgR1zMii\nWW7i\r\n=N2d2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.2fbba2554.0_1606758055882_0.3934946800825636","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/card","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2f498a596b817b4699da64e7e9e9883ae802869","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.6d8574fe1.0.tgz","fileCount":19,"integrity":"sha512-oAIVoUwUAd2Fs/pIi7RYDKmZw+/XDtk5w61AxwsciwQNLPBWNor/GWXwmBpxrlJ3CfTJzsIL11cqHeNVz+I3ig==","signatures":[{"sig":"MEUCIQChQr0LcblSEQcmt8OYDnMLCvpsyj9NDFou+XtPSoBFlAIgT0/XQ1wrs3RR6MP/UeV/6UGEOYuwFf/ew0dqZxq8/sQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTE8CRA9TVsSAnZWagAAXacP/1DUigkUfsoWVdnduy50\nBWgll8n8vWoFYO/es1Q0f4tPr1OdbSpxRxqUPOE9l9nfavT0iy0z0Hi/Weyz\nDWuZpAdsHzmTWUcpeNrmYaX6r6XTcpiDTuiTiESspkneSEE03kYYPS7fziGi\npizw/sFF9kkCumOCWHTpPAe0+H2ykL3139YM25+yW/0vwbLanZpWSjvE4rEJ\nc1mWGp6i3MvOm3wNXM+wo6mw9VVTaIBPPbCtHC99Ku9oP9zvKnF++1Mpc+HR\niEsvvdF8clYmnloIOyabRELIt4phTJuJIDKqx6Mi0iMmRwTx32foijt3Geht\nsk3hZ9zIN3eiBXbO9aUuwwuxV6ko3bkvCFMN7snFrCbS4L/pwsqNF7E3us98\nFT9JO2n2s1O4uWFv4tSGqWznXi6a39+lY1modz49/nVlRaBOcAIpnMUf5PHj\n/zpzanTq9Z5540A02nztxbBYoq7WnsfrPLFIX2TjGPxCYJ8Z0L7TZmRHyELu\nNorRgzUTwP3qVO+Hb2NGfaWAnykVHTUlEKmb2VM+Glh8Jh31iXlhQwNWx6OW\n/wOfjG7keuTZ4owY7DLgq+BxQlgWx00VgAOWciVnMlr9Wj4Fa/l7qVHiKqHB\nvug//HrpOZO3ryx+Ptc0WaJFrUw1VcyVpWbcsJzCdAk0hH4e83cqZSXyxcSi\nUCn/\r\n=NvWn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.6d8574fe1.0_1606758715767_0.09299010104786354","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/card","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b81c9690e2090cc30c3649dc3d6530baa77e380c","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.fd22355f7.0.tgz","fileCount":19,"integrity":"sha512-ziu2S+x/4cUoqtWrlAKqy6HhXJ5vrte/yeGvE80sqCGgoNRJv9OKfviaajFF1uQUHxAgWrF7Obt2xkzLD32D7w==","signatures":[{"sig":"MEUCIQDKotAcFHSlQ2o9UtnNJiu1AU3OW2ku5zxk8T8SduDc6AIgaR5HyLSGMvTPfMd0pQV0b7MZh8UlR0tC7LlTx4p5GfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXl7CRA9TVsSAnZWagAApAEP/3oIH+d9OD/MUP/S9qDf\nBnmMv9f0vCVl959VxLPuWeKFPhZzhIZo4viUYKUR3qDSBX5ZXX8y4LY5Q7E7\nkIurhzVPeqebP6nXqCHuc2oIH4fBidMusA515ng8HqKFP3dHQn5YdBdqYXQT\nHFcthx0SasGDdSSs0p+8IqjKZF5yho7BEMnBrKMUxHiGpiI8l7dnyxr9uUYk\nmi4EnMlUNxQNZMhrg+LHrHR39LWQMAU5AH63eDh6NCDDduIl80SgllAlNgy1\nUtntPUf4VqZn+PwM1YoB6qTFVmGeI49C+5IMCfGIFMh7dRKFMZHPcVo5k08j\nT0HSr+NPun2psvYz+zaLKfjXtYjw8+XE4IP7hBqvHflP4GPAE8ooVjYmDRV5\n/gqgAFyIxu/UzAz1f9aLWTNreHXDEbm6j5XG9ofBBVsV+jzxBvohnq2946MZ\nZF0z8uH62huALVSEFl1wAlgjcM6SYBZQYCXaZXmZMQlm16Zc3rWUYxl0/F7+\n89W/7lUYcTIh+qlWxlrfeLs9R0Eyvy52x1j/OEK3lohOFePSBsHdQvbszRHo\nY9rJv79YgqLlg1hpzF+gIb3gff/y9zYbnmv9mnYtPGKv3EYG/JzKf8ZdTi5l\n6IcjMjz8Jf4JIi4SNMQGBotRhxoQI514Bmto+4rCr274VA7syUEo8eHyfuOy\n3L/L\r\n=2Fjy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.fd22355f7.0_1606777211163_0.09185164045939787","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/card","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca08bf4a07c1295da9d46f72e9fe1677e151536","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.c4ab98722.0.tgz","fileCount":19,"integrity":"sha512-GZ3TyupMfUsk/AmUv4ul3KfTog3r8bHiqzadLqfrWBs+bbLHArFInsMPERt4LgHdsGAVil7aqk72hbIZU1Uh/Q==","signatures":[{"sig":"MEUCIE3259YZNEh7Z/tf12VM+PdvtiUJwNgNaUe9zlb7YopyAiEAv1ArswLltVqQixnscww9WxfvzQFhCARzyW1gv53X7Qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZyCRA9TVsSAnZWagAAPD4P/20K88fEdcXZMVzncxnI\n3JGlBr7p78JHma9hhuvl8pHr/NAkHWiTSulwMwUHUiH2yWdEm2FOCre7UxFo\nrnI00WXz/RHyedW8VKVxSpGea4zfoE3hD2ytvI2ME63L1bbaLiB3lp+54ETO\nlFj7j9E5M/dbJIP+yE6Y6OOWzqj6yAt3CwDjzj390JeQ/UbYMazs8K3ih10v\nmFBcfXxr/VrJQFkbBSJmh5AeIaPGaWtywnw1+hypRfEyllC/fXXqPRgvWWmV\nKgJ8JyZAjaluhA1/ChGjJ1s1RxHG44wvNot1Cw0vK9Sed1ABn3U1G16AA1ah\nXg9Ww5xSDTSawyQVPSK2CBi8jkzolDhkXgRmzjkjC9pp+4dJinKwh+CrC05V\nObk/yxj7r64/CCSEPD6rG117m8tZHBHUeLSaW2WK5tI4JapLtYAUL70ipoeq\n3Y3zPVL1uoxee4Jsp6dms4B0V6qTd5eoFxbaFQXBaAajHeFMfR1Sb8IWme8d\nFr97TLCmU4Atea64GUE4PNFgtckrQaSqFPotappLbkycSJZFgCrm8Hlq+U2n\ncSN0wBQF7hy3ZfHw4mfrYYu6VIO3Vib+mdxQG9xDXED4tLtkwUaFPlXiCLNR\nI+Q5Y8ZdgkfHt8gFrYLLR6enXXSUQ5PEXdGzavuAPvkAKBqehaBYPx6476LH\nm8mS\r\n=dEJz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.c4ab98722.0_1606870641783_0.2069063076054094","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/card","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ae9daa8ffb82a611115f36d061b34441e7a97bc","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.977585650.0.tgz","fileCount":19,"integrity":"sha512-nzIwUgtw6tSYtdcJxrdzXizLvnrmoyqVww49xTyxpTVhXE/3V9DAZITCWvyi9usXKeC5CJSqAFozO7jGLRb0Vg==","signatures":[{"sig":"MEUCIHoaned6SljjqPDFqInFQzz7dlMWftwiN7ahH1fhgJhmAiEAhry3MtDfgeeYo3pvog4a4rpyJb8qfeRLxHXDe5kpR7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6ftCRA9TVsSAnZWagAA0SwP/A4o5MUPzSYBXMeO4zYR\nM08qoPnX5Pb8UlFrs4keO/pdpipRbPoE2aLm6QRzrUOaW2ltB33TRbvORf5X\n/pp52WOKeB3tVg0FMTXJNLL8kptsq64PYfnJ00BY9VWLv+yIig2N5y5AMbTH\nzR8xVCbQPXrbeh7FPE+PROfJGgeXYbXeXyx7+G6U2m+a0sfrUthWul1UduQE\nxwbgvOGNiK4fDK+NBSdJsPmgiN6vv23cXT82UYMCWiT2ZonVDLQpjXV02SXy\nHXnYGfQgBuGQV2PumBnR7yGrL0JcBcoF0yVm4l3gsK54Ak/+V1wq6hsb1Tv4\nuenKJJ9B4C6jgAcCnDLHyvC+7SRhhoVpNJsy921/OQXmCqDiPd/oAD58ex8p\nT9yann8w62n6VlVY+vstWIHqZ+1/3qg4VSeUCuzrHD88IFl2frHazWLJwa9c\nnb9+DddkmhR4TbH34uR8rd7E0QbqzNuH3SBQ7qWMAKqJOaaqQ3/TRu3w+jgw\ngQTcEz8vyxbc9lQ/I4nhwgaEvCzsEPnyoRXDu2iyWsW8nAnRVGOPgL1zAsqw\nquCR44D5cqgWNFezWNod1GSwYPlpz18sbcpB900TYqKmqmJpv6cHLA4pT+DL\nDw7kMvnpPN9JM2z3pBTMwgIpyEwosOwiBmL0c8QywjM7r/fKXXoIqUcgfx+B\nW2HC\r\n=C2nn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.977585650.0_1606920173250_0.3899198151235199","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/card","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e88b93a70ab84532ebad2bc14b75f0f24974a136","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":19,"integrity":"sha512-Zk+teutFXUiAyGCAOQs80FwfwSM0jtp12zzh4ilahZA027U71awHWf/Ht5TdMlNmHlkiUf44IZ3BxbV/XKEncw==","signatures":[{"sig":"MEUCIAuRq30l43cyAAaKLJX+bkrKSxPAIQcZqpa3bygX1Kr9AiEAuzlR254CK/KRWzsfPyd9VsRmyOl/TEWqX31oGeFQ4v8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mkCRA9TVsSAnZWagAABaYP/iOY8pKZkGRWOYYResvp\nsZyb9227rQ2n+KANNDNlihut+PCPy28t0jQo2qJE2ndFEGwBO/ZZDI34YzNs\nsUBLL4sEd9BBu86X2klnQOd7ZnESS1D5j8d0+YYWWHXg9H6Ryo64lI8Bvd/u\nI6bEArPuQdl/PLi01jP5yOD5v6T9KXSBFKPHKtVsY7w9Iujx1WoWZNnZTuqq\nmDrr+GWAmK9KtMJyRhlMhJdT4xLKvh9Rlh4El/DrSm1iJvMMf/xXyDlQAvfO\nnu9BCWwjBTOU9WM/BqxM8kyiUYuxCKExjI3jKToCZiXYWrv491iZ0Fsm3b0n\nrgN9PdHM9WOSQPb0cDWr80+5DntY5l3KqXaHSxIzukHGI9D+h2sEilSqdEgf\nX96pQFqqige5DXnVcFWBCIdLd+3GL0L1MCB7cHbS6pGgnqmhhoaRZZteFnE9\n9QNfvXzUd8XC7UF/yWGsxvMNCkYrUQQ2E6o5l0v+XO1PcSsq5WCNw8s82aAD\nayKj1RH+WOxqH53fTdlQ4h7FnDo/NAnhUzeVoF6qvXaXfYO5oE/lNICbJP3Z\n44xUHKmGHUgHJqrnnQD+n4ZSHL3udosFLeerGdDZiNdGqCdwu5afSGsYG49V\nUfzzgc9hWLmTef8NUGfX3pZue2xEniUE81KL//pPBCFHCJNWaKXw7h63uiOE\nDYCf\r\n=Xlb7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.c7edfc7b6.0_1606920612011_0.7334259712276376","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/card","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b0ca4bd5613bbb98e834261e20ae5c41d8e880f","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.4f3347306.0.tgz","fileCount":19,"integrity":"sha512-Q59mNDvZBnBcPuFLix9hGqb2PHGP5BodPO2gyC2pNxe7o+A6++1Q6OT8lFE3134rQRoHkRTrsDD+CJJRWj8cVw==","signatures":[{"sig":"MEYCIQD84d4B2ByI9BRmxJuAz7Pk2jYy9z0Cv1nsbfO/ef5bKQIhAMplqFlKXL0p2ygD7rqEvbAy10AVKoz3TZUXtyLJSWTN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx63YCRA9TVsSAnZWagAAzHsP/0Wi64MoaCKWXhoeqAc/\nWo3KGmOUp4Ckugsz9LGk7mJ2kCOTUardDAmcODnJzZuuxXWPEGBnvjAHh6b7\nJPofm2RwIROUgmv5m/AshcP6rNUpGK0XD7PaUkCyZ8kyyIQLHM5fOWoeN3j+\nEpBixVUGVrKvk+D+LfVSbeN9IFiaaDqcXCJbsvTAJnhOUHrKmkm0vHtSYkmH\nkBmiddCibC54JRnAbtyrvjdquTxZvp6omWfIFLoOgcVTlAP4SRkcCQ7YXcRy\nnSCuA64jQrMFWsOAS1/nayLvHPHLM5E5fjuZxgSD2y0uOp5dT5B9+8KTLX9U\nT9y3HRvMJQEhHnI1J4Den3Edpp2jQ0Y2u2s+TNnFjkexH5/LtlSc19ngG0S4\nnitVpLyTjMTiSDNWB2mhfkErNXf5JHYbRAUUIKX2R8XVoKao6Ose9a7ybIZ6\nn1mvfPkw+q9SeorvZ9hTC8SB0nfOT8uhISG82njiL9lWXqhZp7HhhTnm+6Ci\nqBygRaYFM4tSulX4wd12CBWsMw52ZR+nGSdfIbtmEY7aTo05IcgQtZ9ENSJd\nqMOI87Egvz2B1jiKxbDh51SQtcq9BFtwfjKCDUcdaY7mRoh+BQhYcQc+JDR8\n4+KSztSKBY1f+2ZfRxy/LF0EkiuF4MD4EONBFcWskf3MaOX2hnlTjzaRv+l6\nLjPi\r\n=p4wa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.4f3347306.0_1606921688026_0.6387953222588283","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/card","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55a16d340e9856949a1f6526c8da91da5521a3b4","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.37fbae10d.0.tgz","fileCount":19,"integrity":"sha512-B3lLaBxGTIFHBPem5jbtBexDIliVzDBRQqcLyogujesr/6e8WuMe01nCCBofgS7GQ7QGa0S0cUovqBvxppy4dw==","signatures":[{"sig":"MEUCIQDGfXQgjw7ZKMCCh+nqZTzyfAPfQRmlhvKYsmO1UqNWkwIgHG8xZh2/KhO/dOERrDmc1xrsBKQ+wC8cR5zHrns9nq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9ohCRA9TVsSAnZWagAAfrQP/jAA4H8FqMowSA6wNQNB\nm3HxVSVYdBIUVbalvYGLD43FxgZBUWNfxFCT6BytUUrqomkwovXWZGiCCK04\nWRiOjPptTJk/ySiLSXdHZmnl/xFSwnuZRzVOQ9K3vmDY0kzZse3vKZrjAkCV\n42nU7DYTfjLG4vssxgVW0Cf7ddi3lh29AqQbKCje7nsaqHgNLR+YiJeJDo2O\nWnS74VEbjs9BC0OjH7s4ZNxV8VQICYBT+awqWSGjB4oPD5ULbpm+ZJcLTcbw\nBIB0QfIu4unKpwG6D4mzUI2x1h5bchW74+x5Vl1gWFJdZb3NAEmPMo6GO24b\nekt77/kXRweHY6zpjRstLfwsg2PjxHU15pg8vlRESJXWQfg/oEZznXuZqP64\n/bX1CpPqlk2JXJ52dJAgbkYvjwO3d97qb+dJo6YlbEmno02tHCh1Hs+b2xRz\nOXRj0TmzEafzfnGLcC9KLtv7yucFeknKm26RZzxuphXsjQGXPH2ecBvZ9zOX\nlKgoisfovdXCd8VLiQLoEBnmWXAPOzl3JnDy5ziJqj5FgcOTdXNZrZPb2FQG\nUqVHVQp6JEIDG9jIe12WZcZxXswMXeMY4klN29MvxethqLTJCEqSwMssbp6a\nT8GEscYCelZEL/tYvqngkJRhJcuQPaFKb3YM0NMRbWPGJ6+wqhamTXYV2+3i\nuwb1\r\n=JjAV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.37fbae10d.0_1606933024733_0.61539319699934","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/card","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b70ae6afc5465196a3304a516bc3976f2afffae7","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.11da3c0db.0.tgz","fileCount":19,"integrity":"sha512-Yu0mPlMqLAA6Ofldtaz5Dn3C3Ja7syz8LUmHnh5bCG1coXKJShyeStxXEJScMHt656QJlL0YTw41Y4zsIJpg1Q==","signatures":[{"sig":"MEUCIQCYP4buo/JXg5Zjcm4xNL6mSWfE2sTpDZo+LrsVLV8dqAIgWlN6OujZXQz5IL1n/XT88z6TW6X0ZJsiSybc7keIXwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/emCRA9TVsSAnZWagAA6FQP/3oIO/eOFuV+BSsXdpX0\ndORZr0kcyTa4Kog7U3mZQ4snhdFNjx7F/1b5J7Jp7fGTStTvuiE9W/tW3gNa\naW4fNr6xoailCxkPaA1wZ4BS60UU8F/a+yq0kfqj+rfaCwCB7cYDJUjUi34b\ntkk8myzfvyl/2BPr6C09u39bf/r73f3s7O89O9CGj0CeuwJMoeiyIdX9J1ne\n8iEfRFnnqwrFHD8rNJRfljR1RcCrF+IWHA6L/aoCp+o5v5OqwokTXR2xGyss\n1d070MNq+lLY30yfgVw5if8d+RUOa0ZbsTQ5uyhTe4gr6Gz22T91Da9PeqH8\nXnpdTz/6UsSWo5DvzEaXbly+ZU+F2xawuLIf9yRysRwfkui5a8qmQC6QuLkF\nD3GaIDdHrRp9NZRN4cTaretN1qitO3AniASXvOko5MZTNsNzz01r9ltnp67x\nPsSq10iV0/ooSzrAjXhTEw4fY7ce9UMBwTvJGnRGVeZJrEFWDjax1hNrGZCG\nEPZsbHqo2pKhXAe2Psy4ViaSxCxTLESwARD9A5G7FetJaGUQ05N/uJWskmEh\nXyAi+fxEvJwwOM0YT38dH7TB1iAABA10ycJ4R7b+qoKyACskmo6JOfSP53Sk\n0SjyZhm1JKILFMxUP9kEODPOHDTSHiQmB7eVB2AA65ckbUMaTeGznz9gh468\n45wz\r\n=eJ9H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.11da3c0db.0","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/shape":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.11da3c0db.0_1606940581951_0.817921622375646","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/card","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb017bffe1713c5f90ebf36823638a3165f20ee1","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.489d4c219.0.tgz","fileCount":19,"integrity":"sha512-q0xDWyKj+8akwTczjmCjSzm5nw00F7YEhn5pp/K84WtGtSnq4bOYGLZV6WXnnkjQwjEav5ENqAbcCNLv9+X4PA==","signatures":[{"sig":"MEUCIQDOR5InxSVObSRmd3ctzOiuXpCh9saL+RQylnptm1W1lwIgba2fXVpMkoqlJjb6zX5FpClWNZXg54oyPLsPF1D7miI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQSGCRA9TVsSAnZWagAAX3AP/j2yLkL8be/dX1GDJkA9\ne8hHh42EX16hA7m5rEOuO5xvQdWQEXMurQhazq8vgn4cNZc5NN3ufB7zUXJm\nG4Lv06CmzxeeQ1Fm7SOYb5H7bhrln9R7+NIjaH6O/cKOll3z9J78FWngg9DO\ncByKzCnH1v+3gJJbjKDNDjWLl4QMKgaoQzciROKrspxfSFb85HfJhsK/RUHP\nyFTjlf1CwUPOpfdEJ1VldckwZfcU7S//F0/3kQs/40OjEDo7Bpk6h3tGHHsm\n6T3jldgOrFXHEaHmPHr2qvbU4U/Sevqn3G/SqgfD8CJFzy3R7EkFfTsmJqWi\nNWUNXPEyZ332CI5UkndwD42MOLkBI4G/7hZPr1i2YEtNvxafPWBrg0Dz+Qa9\n/31dLG/z944tXEg1GQXeirAxDQbTlwN31SwzRJxWAAi3oLggowNDAdESQkOl\naxYABSU9OfezSyIlxbvVpbl8VI8QQ3xj5/dcApftxEH7zJvxxxMuoOmlLbSW\nTcTKLsshkBxWU439o12QR1UtlxrsbSa7pazDLpz4V4TNsoNRJ9/eE3eW2adI\nDJdcdUBAk66VdMCkOS7rrz3yLDlus65psQE7H7sqK6SDNnUzLSBK52LluO1u\nmOundAZWSaGjeUkVcOGVfsI+EDewTAy8QQaaIhi7Dx0fgAGy0iBoBzL73nLX\noQYV\r\n=LSFY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.489d4c219.0_1607009414365_0.5475926580518868","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/card","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca44e26c189d37d7fc87e8467c427d02d4810a81","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.6557a69d9.0.tgz","fileCount":19,"integrity":"sha512-qDxZqA5uGHqRkPl2IIFhGXcaK8I0qRp355q51/vdmBR3BPNzrV6pGtytaJ2H9FMMQKYAjw+ZE5N3mA6XJTa/Dg==","signatures":[{"sig":"MEYCIQDAMha86JCY8bXNjHt0Tp2/FVoi+8z6B81G2WAqy38IGQIhAJ5zxxulVxlp0gkig/0Kh2ebtDlabxl4JisdWc4R0JpD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQdNCRA9TVsSAnZWagAAf8IP/1Q3+4TKWb35qAApZqu2\n/XNTH2LB8CgKXg/NlWczWfD08naOUY2dD5f1++3J1xrdch5/xQLoWjRgE7U9\nzD38mttCvCck8dcDmGHwerOBPCHfmpWI6FBaT5sp++iWu83rrnTlvJRY+vmC\nseSiYGbUzv9bVYSz7bTqUHzIvebSNZIHnJz+IVqZYzpuuybK7vrY9HEEy1uk\nS6mkvx6VIwhhK6jSsaek63KXjY6s1+s6wobdYNyWp9ALG066pn3MBjq/WhdC\nJplo3D5t9xSxU4wrWwdcMMhntXcbKJrse8+rY5cpoThK2B6M0ONVKkq2UKv8\nYj9h4kQ6dA5HHQKl9DSSTQRtoHPtdrWNkEZRfbSAhWQe50gsou3TCFIYosL9\nsbvRKF/pAAz15ZoQiM76Vd0XMGLMRmM9F8ZQN1MqeedwcSUxfhRZKPq815o2\nymvV5dX8nunEVdmxqjbHdC3a3ZtzfB6gPx5ComoMH3VZXjk5hnnovcC1zqPU\nOr9iBQOfxVY6phZV+EBZAk5d6a0KyTyJAT1l6PMI7c8xwyYbaQTbNNKjFZHK\n2j9BY9yKhrwawAFlMPGMbhsYheczd5N4bwWN9MUKhi1NP0wrnsavb5/G7xLM\n0FWBEyIrXiLr+gY4GOA4DWvQQ5vh7S5/BQDAXSp6u/VIhGos3vZ6OwdJImnE\nU2Xa\r\n=hlJe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.6557a69d9.0_1607010125330_0.8298047376340307","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/card","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1392b36a9a90b3348df1fee5553ffb402f1f39bb","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":19,"integrity":"sha512-J5iyGHa1Uewml/l8/QDikVqqUUY4YHGeaFeUisrUmdxUmQdeYQ6QHcF+uBEevZKLeUEXhvBTu5WaL3xGhLiDpg==","signatures":[{"sig":"MEQCIAHTPqHMsmjzdLdOJalJuSJudFmugHLVN6Ox2sJOCAV5AiAcD4ORGsNkjcNtNDyDtoICtyqOPjPnQRuOX4hR56t5mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQs8CRA9TVsSAnZWagAAtesP/iZA7830B5qfnRrNVLLN\nu/zdg3GmI7TKDgjymPQx7We6VFevtFlCg/81Wlzgu/HmYfo6gHRiIAmnC63K\nJHCykGNH6Rf5DXo+dX54B970ZnLf+0gHfliAweLYDRfsk3czmyI/LnRRtjyo\n9DfSFQDlXfsJAZ3mtQ7cYCcRf0BGe9PKmalwyghaXIOUiecJZKpHKZ0iyPGq\n+jFU86FxymaETco62nQDMbmNDjD3h/xiZSBhm8i1hFwaiI/Gn4Zf+1+zdG1C\nHYJxh7n300mQhAEWdSsN0TKuxBFsHKDatKEYTSsosa8mP9qci3qqv11V1pHp\nU6vU859KCdvQfdIwEAgTNXMfGx00b72LIYRPaGHJhE0GlqfcuIp9/hKu7q2i\n6LaJJLbNQoYMCFzgwcDXA31VxQopcHfbGL7PXzFEgDgk76tNA1HIUI5hxaVi\nO5ICLnKLZLUzf9dFxO0BK0D6/h7UyoVPw8dnRiD4fuBkTrxevBYhvemMRffP\nEiiED4z8gyPLExBRJdM0+ygh+aVVmJrxWJ3K2e/I5lbqhKYE1ffrQZbtaaiR\n1wITJYcgmoC2IDMBfDjDlVZEYykWNXpEgKzeROZz8iRNCveHYRh4Ks71pgO5\nkU35dTN3NxhwzhXt2lDVd3HM4Yo57J2W51gV7zXcOMEJ79rnRqcXqhw16qxj\neMpL\r\n=QPJs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.4ea1b7c69.0_1607011132224_0.1910603740617569","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/card","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6900529b1ded3cdbccec26aa0760eafb4d1ba2a","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":19,"integrity":"sha512-UEsVXcmriarG5s9PORAW3dTepVWKBki26cyXRfYmJ8mlAMQVi1pmTCuDHBz0fW55CfqkF3V5269vcd/wqC9l1A==","signatures":[{"sig":"MEUCIQD4o19rSsgnlRiD4w55piFRH2PnKFjES2e6W1OZPsH01AIgdY4HpmNIwmV6vFSRmGR9qDmCo5sWZFFWtDQ6a2HU4GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRn2CRA9TVsSAnZWagAAVVsP/jLtvX+KWCFVQrC2hcdY\nJxuq6m/01QforFHo8RWCllxwpgB7pppP4NzE0ELYY9EunwTi2l0bGLqaY/LY\ne7iVK5hbvf3AUzMBqJvaMDFQq+Rwh6a8OhbhLIEBgJ3K4tCLYT5yiGvD+DTd\n8EhY2hXd6BB6zoF8WuQa3mR4QqCFsfyQFCyqSRCUf4kaxYdKbInIYHjXNFzQ\nDItRC8vrZxrHVHwSOIJpBY1eyBgVkskM0OHERqO6QAHkSg3e/WM2x0V4glFS\nt2GhH+0PrxOhPjsUUqEiDbEaxlTsd4oCGnDUXRAjUq6KCW6lB0A5n82X29RO\n69JYM8ogNNhGtNBEoDknMVLVSD/zV8qc5mfCt0i2wD/fJ+iwRmwC0RA3wr8y\nSwitVX+o4/e2vdvUreyODfqJ85qguTdcZLJM6GFncNRcoR4MOlFXYIg4XJbV\nDnaJbgGlB0d8XJRX9NMRwwIdp8JUP2mOaHufFlybgAUxINFRgOQJLmM2+Na/\nFyEPszjTegaU8qITOeph4QTE4M/wMjsQk6solWxBQf6AtlWB1Sn7IdQsipEM\n+sD3T9VNxH7tuAIx1AthlVUcl5UgDeOJASi3q1hU18LLtnX+/7E4MzN2oVia\np8DyQ4kb0e83IN9WYmnmabqCHBUnhjC6KuAi1FHe+dAEQSczJmwcy1ngDHLe\netzR\r\n=AiHS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.eaeb78ce3.0_1607014901896_0.28522672353880707","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/card","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10937da61e870e114e8cb7db5d464e955289e687","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.1c156d69d.0.tgz","fileCount":19,"integrity":"sha512-ED2tZIamo6vJO5qUaCWiIkLszdGXoe8dc59Izj/BS1WaE8tUdagnvQT2ajCPqe38jzg5F/8UyZsAiBujJ49xJA==","signatures":[{"sig":"MEQCIH6KDNkNUTFrFU22uUxjqurPkzWD18J1hubgxy6glD/BAiAUHPGW5PYOXjxmZ+npCA+3pOCRIQ570D4/AvisarMwdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU58CRA9TVsSAnZWagAAzoIQAJA7y55kaHwrcBdbz9Qk\nh5AnV11/xOU39hsjvPdWWCsGiy44orZ/XQoSTsj+BVGcvsLBp6KVC61LcUk6\nAp9LR+muTWk/0c7YgGCbiBzVP1tQuAkgInPOxVF3Gt7gDSSQf5nYUsjPI3Rn\nVzZH52beSNdbszlDvdsGxGEZ5Zo3IbvZjCvi75YUSUOKO+XAn21aAZ/VQm1W\necS9AJ8Ql0BZWJ/bYQ29hlotLhhjnUKVbbacOEzD/4aizDuObLWJ8Ks/aP5V\nUpKnRngwnUVyGcYXMm44Ho/JbydnZ329Tjmg7TvxH7EPJ4jSw134hTfU1qRY\nWCUuIF+Z1qQgfYfXQ9SMh9gycbc1O4g10WHPqqYrlR07E5ee2FGsSBbuznC3\nfWJcxkE025mu6d/GwNNhaFd3298ngK8Cm02URr+0zkBpcP/I2p5xKk08I/Ub\nIsm6L8r5xmTcNhkHNOnAnl8yBpEWGNro+Sm0tA20+NWKZ7VEJx/NKxuzw1Xm\nvBk0tTtFaqrMmuy0lf4OzuKrvJ3fuI+QFk4/Zd7VjIMuHqsjvtr8tcBxKCOD\n41TbG8FWq8UAQvfUYw8fre1jxjngAm1gsVLHeBs/xKMXCpb4YMPEw4VsC/y4\n9erxYR/q47OWHMhJwVAsHORJQvlr8dQNCeInRE3bFlcP3JCzSa8YyKOdndod\nxz97\r\n=FSM/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.1c156d69d.0","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/shape":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.1c156d69d.0_1607028347676_0.7007596739478952","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/card","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6f3102c100232bec60d5ad24a079e2632434e1f","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.832668d33.0.tgz","fileCount":19,"integrity":"sha512-sMWkvVoV7mwQSQ6RfKmZNWZp/o5ivoaPczJPvP/Jpf5HFZR3NYsnS9zsqLXnP3KKFiDuoBuzCz32Yd1gWAc4ug==","signatures":[{"sig":"MEYCIQCEDHiIz+TLwZ5a+1Tq35kq3DXgKCWXpN402r/zWu0FxQIhAJmKmYkBnQHKLm52Gp0j77Uj5rxMKMdZI4a/ZSQEOuiF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqoCRA9TVsSAnZWagAASYsP/25kIS/KinjB0asWdoig\nHa6NFedh/1pnQxGEn1F74jSQOk/6U0qyg32YzxWdDO3jCgEdZ1anH6fUfwmL\n4gxGoWf/AodzRtSZgB6oi32QNxiniklB8NJm2ELpYw4dCq/v5gFiMxodlyBF\n9eWLtC9M+Bsd2FcliwtOTNM29UCVfxS+xul16gNgDI9xe/a0dZh88mXG4Lt/\n5uK1ZmIkkLElKGLnFhYy0Un3gqS01itXEzcreo4DsYvgl5xQm0h7AX4HcKtA\ntd26A/LNVWmObN6MM23jnERS6R8FvtIlNZDouYzsQ8m7NxDwF/D7YyquZhWJ\n+jhq5SH3oFz2RT5UrK7fdNwoDYGiTBZWWSODPJP0wsrQog5equPA77kOitWZ\nJxK8LbsUXBVwRLER9Zhqfv/tywaEgPimtevy1g8VK49nbgXF3egKW70m/irU\n3gFcCC+836zmrQGvntHptxh2ddYi5Jx+LDNgIl0JATeBBgMmOeK1D8akfw2a\n+EgpzncaB04quhCKDM/9cScNJRLkUbZ2fHcOUTapFZhF/GsQkG7I/EmAg8ln\nk+/eGSXpcmJZPpIpT7LXIAmGYuNuKTyu3ZYC7w2wisbb+bo5VBV7STd/FXuN\n9ePG0nlYH2JiJGzxl4c4Ms82UmwghGCuuQwRNhJOJo/W6DwtuX/5LedyTLMU\nMo+/\r\n=4ct0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.832668d33.0_1607105191728_0.09261162126363165","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/card","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29b02758a92abf2578b228cbfc3fe93804885ceb","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.4321323e4.0.tgz","fileCount":19,"integrity":"sha512-OvGFXM2JJDNpsdy3aHlW4WBN1AzozzAu/2k9dDYJAyP8QgT7Si6OGkNkd1Ll0IRbT9AruhnktRTU9pDrU0g9/A==","signatures":[{"sig":"MEQCIE6IIpVl4LrrC/bIavUMaCcLxCCaFyIk25cOnEfH0s0KAiAmzkJDRB5hQZi3r4RVAprtjzMGgt4Ssl+wj+rTOOvADA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhIeCRA9TVsSAnZWagAAhucQAJOe/eORJO4GcQOlRslU\nsdUw1g4uSJ9uE/kkZMm+eTgowQUw4tFDUgb4pNQBvOlNlHbD6+v7I6miuA1z\n40k+iLeAayDm4/oyi+ygzplRex21q4/xWvnDboDqFGU8N8WYiWUEqDaijUCh\nKuyo8KdIeMp1QJdE3zpPhDGM/ql6PzNtDx2TB/AMQBw7GU+x9ObL7P/9t4lo\nwkSATyFeWphFkbGHq1TtnaG/58XtT0rhJONrFNofLPkvkLWJkEUf+eXLyYDT\n36BWVGlcduJEao0zs7cc/qo6a5GdTvyYt54sGEKLnfY0WCNFWyRMbp7RdUlH\nuUs1P/3gQM1lniFeherJm2o555p8NXnZWQrnSCnW8YTQEJTNPuKh6oVxa4Fw\nZoFBKiTkWnIg4fGFjdWr47Vg4WF9OBZoPIqggYbuLgDiyU7k53aEbQQvX2fZ\nKdv3+pIaU65cxM1b2hOPFWZH3JRTjGui2LFWriNNJ/BqLI9shKvXZEa1lp1k\nMIRurYKXH16BIJPgnS3tZCeFK9WF7g5h3mYrSCM3xED02ce/7aGPV5N7IG2y\nQ8vRiRy9e8wEumx/VwNLPJ4vj+oqME99wfRsQKPD++pAVQsVfSUs4yNETH6c\nCSjlq0eRAw/VGHvMoYdNNyYfMtd3ETznwVzTqdt0UHWTIdirrMS1rfUYFEkM\n2Q4C\r\n=Nboh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.4321323e4.0_1607340574246_0.48043162083405355","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/card","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bdb67511def7438781dd5eb1a4821e02dd1d0e0","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.2d5f32d41.0.tgz","fileCount":19,"integrity":"sha512-aNyYrXNdIV3ybpjcc4KgitAqjU+v5jZp9LSs5lMCmJMkh1YEMIWx9xFqsmOPU1an3xZcI/I1p8i7xbGhDuXo+A==","signatures":[{"sig":"MEUCIQCxfKAnhW1jE9kx6/DvHfb8n5xg1QVrcNgZiKM8KTphUQIgEvB/187Ytj3p0dItMnhGXjwX410mT0Tu8b8phBrzUPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltiCRA9TVsSAnZWagAAHvgP/29bGToGxnTyT7trF7UZ\nQhqCWRXeQf9o6TBl4TBoOROFq+6/udRqadwjSFmvx2OUdOMAl4iM+E1X+NtC\nPNn2MSgMFMvmgo6pg4KbpBPCVs+K3Z6kLsRFQw+rrJ0CgT8whFMli01+nH9G\neo05EWORx2D6DAQeas3eacMVCFDyTwuVSB3WI0gm11t49kmXOzXC/w7xZGrp\nPAgcAHi3VcxAfX5asxfi1yj7rO9VaJBEajreq+bAl2dGrToIS1JDOXnaCgwK\njIGA0CDADYMlOLjAhLJhH53wEHKyqnwJn1njn7WroStg4Ztx7Kcy4AWoUBVH\nf3z+vGctASfSoBJY5GtSMZJP2L6H9zK7G2pCPodUPVLWSKC4bdym1Ww7E5D/\nNTq02iNJpdj4TVaAtoxk5HCDH1lM3JOWSPhkjzCQHetWoeW4CP0rfe9NeXR9\ng5640vz+DO4wOqGNyECwtw6heHw8TM0IgGJKyQLDPqOzxHQ1R4tZSCY2DBgJ\ndQX+YDSQOFO+VCGXSiSooQmVBQ9BKf9hFpoGWt8GkzWTtDmQYooizmhYg4c8\ngOnFXdDsxxBpfEs2Dk3/rW1VzjI5AJXwaEYZvm9oYVymnZizkse1hwsmugI1\nrIXSwSuctqRJsIcMl5As0yFGSnthHLkrFY5LBxZUsFfMWRn+Lwc5RaPGt6dO\nS3nU\r\n=lVQ0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.2d5f32d41.0_1607359329471_0.5099387280758376","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/card","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b567b50879e63ac386f12dcf37692a6d724d6f2a","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.8239afc64.0.tgz","fileCount":19,"integrity":"sha512-htq9HC7QuuKfwL97A+LlsYE943en94vtidpElvY08Xf3DwS/nShf+qH3ZZ0bxm70kd0foXNFG9ZQCVMc9oP/8g==","signatures":[{"sig":"MEQCIDbgC6ctQLWJiG53ts5NNb/hfVbg/9Xb4N/ppnGUCpxeAiADJKqZalHbp80rUBeWJUEjM6AEzFeOk521c79pSBzW0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodtCRA9TVsSAnZWagAAjoUP/jl//dlKjBphrSE8k3ZE\n10hIz6b9QupFDQ9b6UE9kSGfW3PnAxnJu5Q8ZCbFYfpUOIGNCC4RV6ktGDMH\nxe49+X42C8p2u2a82sZYMUhus40ekd2K5CYglYX6U9eEG+fynZfEGGPVw48C\nTR2DhcOrU36YBqBShqRQVkkBpr2fIVVUqTPkpaq15VttqU1iUfcDTNlicLMj\nHFOfbkzVU0tgZ3dgp14ozCWs2xkpQ2+siulTDbCwU4RMDkJeMxEMHYlyjY6B\n872ZsIgQGB0pFPEIeQrVKK9kur+kZzeEkeC49GwvcHX+LeUnT5CfYVLVp9U8\nvyWtGmDknoJRIqqeO07NwPnZhw3Gwrkad4JSuodPOaaM+q0MrfVIHxZmBe99\n2LmVeSrDcNTI6TmhF3w262mr6kBO2dYOGxiAHUDWHQ11NGqMWtVXagJ1e6kb\nzoQ12Rml2lNBGF1SD3EmzUOjpPlp1nolZHc/+gRvlYTeIMtVwlUxKitNGcVs\nez/+1UkkoPmtiCcbTr65mGDKSQpKDSVFaDDOxD3NvOkz7D5KS49tDg3bg3Tq\nNSk3bsH27IVD71PjFq31r2QOsvnvq38Z3TPHOrEx4uSXx9T+kVLWcK7bjvyH\n/sUe//FCE5BpxAF9tP9PI4hLKbSiq3kvKfNEAr4EpzB6Y8MQllsnU2fTYXXz\n/P5B\r\n=Lz4M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.8239afc64.0_1607370604989_0.01766318611652773","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/card","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"524bba7d6fe9b5642081bc503e531eaf59916d0f","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.6871336f1.0.tgz","fileCount":19,"integrity":"sha512-1eF6j5dfDrpfLdueEpnYm4ljU1E9VwWM0ZAUL8DiX2jEa9/5td+kp6EXzGTVo7caRprAzJPiRQb0tauajf4zIQ==","signatures":[{"sig":"MEYCIQCKJr7dJfxkk+j+M1a+JUT7V80aUtq00EaexeQWkqCCeAIhAI3jl/g/JI8SgiDuSG+Z8nYBa6aU3q+4zfCZHjXMPo76","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6N7CRA9TVsSAnZWagAAKmUP/j2h5qL2a2TkYwkK3e2+\nDZOOiDPQyYrz8eOf2v18QjkNy11MXICM/5wjdlSQitbCVEE8TI5OdiLpBbH2\nBy0sxyeC2+ZFqnjLgrf8BVfBM+K2gXE3v60lTHN5Uy0+RldMhpsP2Hq/tEYS\nmWo9gs5UAXcrZ73n+HL41dTWsncv45735QXiz8PFS31jcLFBnPcxktD+UQ57\n5Wxrf7hjP6/nsdfGCFHztBpCfu0WoJqho2MxGwADv9NgXYLE7KQZuBJGsQNI\ng3i3rSERUJ+6htv5Ud1jeZGdM2yoHrGTjZkP5U0kbFALkHbixzUw9MgOg3+p\nmMwv55vX42b0oyWHd/+H7u59mKhonPmYzkJByZen9Z5H3TdYyUVVxEE50uoC\n4Di3AIHAYSHrghCvpM1eBd37pU2yaMuxOmjnlxbJhWCabT0CNikHFqaLpUvj\nGfVv5g5mVjKnmMUGvKRurSVcYX/vq8fUj5EBd+Qnh38a36pjSlVBTmcrzknH\ngSG4vtpu5hIVHM1VFLFfYij8dwYPTCYpBvsmkNxgV92+lJWk+5Fka4OyfX+q\njJTwoXpCBRk1ByYEINOFNIKKIb+xhB5U7094p5wdHfWSMu29fcXvffPUV2we\nGSs8SzPozJ1MzXNLo8rBtenGt8ioRnIah1WsBU8SWYmk2nqhG9Wo0BNPWVRf\nd3PB\r\n=RrCu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.6871336f1.0_1607443323160_0.12243488563761828","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/card","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4098fb093e7a4b53f4c033409bb579e8d55d316","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.9f718da94.0.tgz","fileCount":19,"integrity":"sha512-qpkss8CHR5RolBGyZYUuSnLZgctZH7fX4Qh8Yiue+yGKjzzkW7Ce5TvYyzWtb5mjpatS3KAiXjKZpdGDN11rTA==","signatures":[{"sig":"MEYCIQDLjsdTrPXSggwKLaSmbEwF66KsU9hjGXFlm/LR6Aq0mwIhAPaib87u6X4U4bHbSge34wkwJ9YbBZjsXlheH5cNp0hp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6Y+CRA9TVsSAnZWagAAU3oP/iQOs6er3ljyX/BYrQi0\n0mgeA55h+EWoZ2DbxDR3F/nfOXeXSGjD7J8JXbtLh0i3aWoXB+m1vB/nCBbd\nBegFeuePzQyYkqerxf0mJqtRiuVQM/FK82xUNH5CxU1YU9t2E4qMcy/0eeVi\nuQY8DOQE5tMlgN7Gb+2i5JX7iV+KtuCnzhhsJfAV9GafhGmabyTBMxsmk4bS\nOdTBKoubRuL4pdVdgqlFNbRoscvTNooQYtZ58a1Gg0sLZQ/OqIWMk40/q1UB\n8UDHgfwVbVMH7GJ08AOQ+/61DXSunSFBXEBQUQvHiXk2jcXy2DS6+5dEqAzK\nba9oxSKWOvsRfvdn22nRduXfpcJKRkc2gPeSbXsj+uFsGyEDQ64Cr8Hg1Km4\nvOsub5WnJJIqZ5BAolX6jbzMQqnyqHaQ+baa4QgldVGXqG8ay9b5vPPOWVF6\nMvCZdtI2dbMY87RSQwf6PBLrl3mCcducMfQXxDUXakr7ZRxgx34AG5EE6jGZ\n6B0xSzq6i8MQXg9dBTIjQgXA+cr57va968jxXbvN/Ud6mInHGJEyuP821Fes\nRw8ObpMPNzRz5bGwT5JcjzibKZOQuaZ/ggNIxKkjVuAOXoFkMYJle+zgXsNF\n5ralfvTokvcgNqT0JLuhs6TMKQFGJT0B0aeR3nXS/kbYqUkhMYLM705I+iFE\nzmif\r\n=41Nr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.9f718da94.0_1607444029713_0.9250497428867377","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/card","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eff4f96fca8290c2c09ce53932350c349d555219","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.1fccb1418.0.tgz","fileCount":19,"integrity":"sha512-BhmiWspkskEGW/0HlGsKKFcrm+RPUpJpnp0QYjSmehEZrG40WIkHC5QhQypzG17Wzw6tvZju7IPNSU3Z8Aag2Q==","signatures":[{"sig":"MEUCIQDq1DFBEQ6pUBC9GAM0nHrSkFoNVge6mP4QxPOisLH2wgIgFAehw+flu3Jmm8cdQm5po1b9cq2cVvoEMqeSBt6rhpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nGCRA9TVsSAnZWagAAvzEP/1eK4OXk8OpD+A3iE8Kr\nLc0QaAslhqBuOmY//HTCNQ2Xgpn3c78uhrNCy94c4B5f79iyEemMuzhQ4waU\nln1wEpIkR7v4w28mUtKkDVy37aoHEhJNwp38pGSZnDxNEernVbU8q42BjnZ/\nbPKIXTmr1Z+z816CEzoWC9WdHWbV/5OJSQRJ8GQytIwSgeH9PlYcl69DdHsq\n3iHCntZ4UdpSYy+k3PiyyulEXipekuQvJalPi841VQFPs12+9V9NC2z+I9Oj\nk1PBg+QsVCUFJ/YDSOBLTHd5cyxrSRm4byNgNIo4lMRNp0fAMX7EyIBajvJa\nmDHMRS4JgyllFF+8ggXZ+69sqnV6x3dqJrUV0K1lrFVxjXuYsFBjwy4EG59X\nODPT8O9Q9klIG71yUkTkq/53CoXDTAZ6UXpLnfGmiPwl9DmQL5nhwMWUZVzi\nSrZlko5PBoN40tgnm0tNWAEVk3qu2IbAtJZQFvHDOjEmj/kDZpM+Kv/84Hsd\nVtbZnYUa3bZZdhyRqlxquoBAHZuTHdQksDH0XT8Z/G/W/YjW+Jwf7yK6wnKT\n5CdKMHFRFJZI8A0tiRISwuAcMe+EmWZ6J+epoiT46+gRuUZKGQZOpCNO33K2\nCJuXXvkCVlaEGHubrebGYcC9NQq/ch+juX0nnuvPQ/TcEHAPAkO5+/G1DELt\njHjK\r\n=TQL2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.1fccb1418.0_1607444933633_0.003913787646241618","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/card","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"371190b6de99defc1f14c79ecec19112a44b551d","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.afb68894e.0.tgz","fileCount":19,"integrity":"sha512-oJ8gOWTigvu2FkH4hJSiywVtx8BZ+IGTCX9tO0yZR0b7M06ct4M8nevFB1aUdW0utaNv6taFWmzfKgLAxvw7zg==","signatures":[{"sig":"MEUCIQDdJl9/RZYyQfoyojZlFrW2498sM9KT4IgAwzchem9HnwIgXcF4OUcaEKMid8h1bu3EQUkjX4QFJGFWv7VoJtYJv6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6q3CRA9TVsSAnZWagAACeoP/3ajM3J2v1GkjcGECQx6\ntMhV64gfrGCMW7v7l2HSG6wBOJKYWWQzfRIctRwxIiJfpwCUl5hiVbA+tKeV\n9EpAJeJmEevWlVfdrLl6k8kbZntVgtRe4cfQaF7VpY7cwzCUHNxLfQzO9/dH\n6m5uyE0cYU91QbsnTeuNEhP7htuIfjXWzUkW5Bu3SynyOsBcH8kotl4sIMec\nNnQV9RynnIiP11MYWgkkhOx9G2gOg4L9ihbO/ex6t8VoavMr7di9X95u2oMW\nxmhg8eb+NIFhcE1HPGcwxALBYaiMj7NhMpZKd+ha2P7V9vW/s+5Gp5UHsJKJ\nIrsF6mqvmQnEEoRdrjZPODnu9jeh/5xAKnjkX69jXC+44QAOFdgwhHa2Rjrb\nJsvW/tUH/z0d3Cls3if1G3AsTUNiWXZTupUKuJz1RXN7X9XZFwgpYVw6kwNi\nRY9WYjzRJfCXh8SXrKv2rTbQ7P0ilRWyJ/6cQkvpSzcipYLYr/XbfbETK2Mk\nurExFyZ+/0TrIKsxx0+k10C7gvhb4zgS7OMNAozRX/vXu8cdv4YyH27LoBWw\nZ17GC4yRRhXiuTqMtgi6tUaqAxHcS+5uuSI9mj1QjCLBUiMImwb4J0jg8L7I\na8qDUSJBFVlQVKF04TEkGWf57TfZ7Mm8MyqxM3SiJ1gP2hmGxrl56Q+7GHXu\nYx90\r\n=0Cvi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.afb68894e.0_1607445175306_0.1905463241303489","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/card","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"223b256736bb841e7d3e6aa27d5e4df8644a6361","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.fd88d40c2.0.tgz","fileCount":19,"integrity":"sha512-uTvIV4BCEXyx69RpRwnk9qwnLqUqQGogiF68WjrBMWO/mMzw9sOTOjr0dpGWoiUUpWbWFlS2kftk9xOGMTTyqg==","signatures":[{"sig":"MEUCIQDWa8WQYcKTJW++k/ROLLp5xiyMWaH6jAyq53XMVn1zKgIgUHLyUX9qU30vxzZss2qmqcIXb8sC6YsiuIieoSDGCRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz63cCRA9TVsSAnZWagAAe6sP/3y8eEFokLI8rpTIUVc3\nXIcY2muAEM0p0TOP0SMSMcspRa8IgMuATBJC+CU4VW4YiLXhV8DQOzaZLXBt\nGnoT9lXjQ+IO9h8Vzn1wBTG/vEFC0RVepAsjz4wnKSQSFdkphma3aaCNXJWO\noxtDwOEtElii2w/LugLnJNo5Vs2Oh08kCDgA4lH3Zl9B3isSFDiS8MzWxTnk\n1i9/LtJaTrafSXlOBX1pVIUjhdjBJfnpVCgSPhtXWwOG2etr1rBREcdc6P9e\n8W4gdX84vHnDpLPK/rK3tpXnVjq6N1AD+8dIKcsGzlSUvdWvoyqt7jMg++pM\nQ5ek57E2VkA0HBRmagYQOCPGjl6av7swgl1ffpZr8zHWE5X+yJYdLFpY453E\nKBnQ9OTtOtboHgYAMa/gM61k2x6JSdMFgaDc4xkesEljF4lUbbn6OixQxFfm\nuL7MELEYaXJf0GW+DH58UbS9hLBsMaINjr8L1I05/pBSMTMhlVE4I7teF4QM\nnzIS6L5Yf6+5ewck2Qm76MFPGh5ImoDad1yVxgEJ7N46j/2ozIeA9qerMSXX\n7z8fFkZSanP4AsbxWXNiXlLCLAYY9s0NLSMBL0dYXSsdq1qCG/2NJTSmjPDH\nAoREW4jsN5JBM8IuxwdarjtEl3wwGzyRYtAnzKUGIWyaOWRjeW19NZTqH8oE\nszYw\r\n=WTt9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.fd88d40c2.0_1607445980075_0.12728372046689462","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/card","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3433072f598cea4a0f7b6a66347c0f7c8cfa5c08","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.ba9e3109c.0.tgz","fileCount":19,"integrity":"sha512-QZNynH7lgEllgWfF/PmR9SiyB2sxiTZaNv+H1Y+WkaDl9W+O22EqIwKbWsexexd1SsMFAalySvcIeY8vXGecsQ==","signatures":[{"sig":"MEYCIQD4ZiEcj4bWNJjLgSeeH62Ag4WsJ5lxVQJDCwZXpz1xWAIhANqF1/ONibpO8MfEZ6k5PIQ5Yj4CsDNYoOhl7mXPUKXI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz86QCRA9TVsSAnZWagAAPV8P/jVayxQSOA93Ma4zNCdI\nOnW7WKOvi0pLWAyWt47tvrsfZ+KkavHItVv1N2V7UVnQTX9bSOKKp8O0dsA/\neyUuYhcdAXZRvTBCmfIB/kBWGC0ql3AJrESn8Iqzb/OKDsvHKp66rNQnjIOe\nvsAHR6D2SWQIHz64/bVotg0CsWXW7NHCx31AhWwjIhJ9XdjGYUrD9ReqX4fu\n6MXOCFiqb8o5kChedt0pCSbh0HBVuesBkSYCmjFJ/Pf2B6lFs7CC3P4qQWx8\nfNGHSnapoo5wwxsuvbW2d+YizjC1Ig5CrWFmUvF+97dntwZKvQE66c0CM50i\nGScb6jF8mepb9Q2+CWCPH3o7nIfVIiYpMPPBxhtfV3bJh2lwPGduWzCsTqtI\ndsifM4ZgBvgdcz9iikDSikzbDIWfY3uR+2+yhKV96OcYvqaRoIM1JwC2rB+H\n7mW+R6lMUyFbT0smHZXeCVXqXGMoGPRc/18thEmZoisAlZ5E4Wj2LooClyHB\nVmwUj6K+V9JorCTEbwaG6WkPRxHnRK6SxpZRhNdNR+rKOHvfAs75VVB6C+qi\nAXMLYFMdvjfkJUzDoJu1ULx0v1F8+FXd9J9T52eTJDrqh2FHELe5X9t6yCw2\nPZnOfNx72p+8rjIsSXi4KWoV2sou+3Z/VIybUs26L845uKp+1xx1m+eq4SyP\nXScp\r\n=FN6j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.ba9e3109c.0_1607454352123_0.8835319167515503","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/card","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ccd8245d1c900812f19caf395f7a56a3021af7e","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.1085c3b2d.0.tgz","fileCount":19,"integrity":"sha512-wUcRhBkgaXOMOVMDLeO3wyuEtWazL9d5S+VIlAreQ8IXCRWJ+PG/N8xb8Jx3nXY4AuqClFVvDdRDzzxNoOGBhw==","signatures":[{"sig":"MEYCIQCO1uoS27N4hZyr7zeN0PGZQBht/KUz42hYWs5BWoEP/AIhAJ6dtQJNHUOTznp2u1YBDfTdaWtiHEg6PrWebtGao9XC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFmCRA9TVsSAnZWagAADQYP/iGAx/Gr7GrxbEi2TR07\njYHLGPHjfGtjyt3tYp1ZVdVYkYXhlF2PZLKVdpre5y1VR9Bz7IEVUXOVTRui\npDYZ3z7WCZz+g/6UBuTuU+f4aavA+Mv6AWjB8Vd6pwZjcM64oCocodvMkLrt\nyHubJYg2NfupeHhgl0U37bev6MMl1uur2XRlPc931qHgXn4SzxKuyHuYHRjU\nA30yoZhAiG/7XMl9cYUHvgxCRz3EwZTjp9Cos3wUNcT8xnfyTqfrVXTU3/Jp\nI8OHYslpQdAHfm4z1on0blzae5UIVAz6mJ/JfrU5UAuBVbfHZC0VShs7hoR4\nubcWPEzLjiIwCbzIGqKsrvZwQGJhwgvtCHPMNdt3whE7nnGaRsCdsNJ7q8UP\n9kP22wIwUA/UnrtvInmlyN1TZteCMWJaCObIfWYkyP4wUxhfi8FVpJhOGE1W\np8vXQAI3Wr176lQzlIXAMnDWJ+oJTHaCRJTZRFeIFa/wYcNAPxl2a14k/3IO\nNF4BfG1SpsJ7XJ10M5Nr7XFgdBoyX/sDLgkS0rb4QnV1lfL95U3GYnbuJ/OX\ntC6qvkqvLUL/CNrzLgNvf6zM9gChCbhQspY6MqpEUIcqaw/z+nh7+rMHWJ1x\nodTO5I/34HNYLC8mMgpJJFOU0vgFBCfgCkuiVc4DMKxjg9558HLI1xdOoFAL\nYNK4\r\n=058U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.1085c3b2d.0_1607541093642_0.1375751168939745","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/card","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c10241d69dc22dff2c9a351d1006fb8d3de4463","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.c5dda809d.0.tgz","fileCount":19,"integrity":"sha512-8x/Imqn+dYCHe5e4LwK6fv3v0ervp5AvEMydAn1ZdddzdNXajgWHuSGM8TJ8KVtUMZUbcK3096nsq7Xe5YrqMg==","signatures":[{"sig":"MEQCIFdW/5CZxQed8Js+ZqO2jJkbFjHglRb+Uqv01daKEkeyAiBmZzRvime9Kqcm9g7LEDfVcDBaP2MRrmAIRm7cKMadkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TiQCRA9TVsSAnZWagAASv0P/3CqVb8PC/cW/5GIrqeg\ntzv7zH9Ml5zhlrfHzTV97MIbtvTpaX99SpYxQ0VbRuEaPUkn1M5KYYQW+b3v\nOeDxewld4k5eimrZVp+0HLtO60D6yXmJmKPKdBFlsh6XOTRO5vCgQmf2Sicd\n3FFZFdjO5mPrwMw0G87wY+VWm1+/uIr61XDVtVhTdvQgTsLzASDKRKTPP7Zu\nuUQGbUtIwN7Tg9mZb53FDxiySg/Yza746CuFxpOWU64zTUWV0hVGoytJoRpk\nCKhyJ/jXk5NrQvuoss1dGxCqhdDu1+9s131Gjp/nQb1RpJtizW4t9Agn8pgD\nYe2rRGYBea4QDGnKSF+CJPfKVZNuWjnH4MQPxp9caFN2ftif6ea/qWd9ut0/\noKgJTPo240yPpcjLFXlFryRBcWXx4wFtZoFkpXzwTw1HVHynfpisUoyz4gvF\nXNsXA89KuwUt2AyoqRQ4ze7m5IKmAAT+/bDwlQcdcNIAiIyaTqxdkhOOoFMR\nO0I5CT00d39zg3PsW2xtB4+NjS6aPiHsPuDxKj0MW0dB47WWqq2gom2cmZH/\nmfWBujIMNBHDu7kuFPJHXVJLmGiKmmi/CSKCDcYQmy3I109s9zKk3qLNnKAv\nSnNEtnZWhih7s7Y+ozan3aFpkZfsvwSKjDCihRe1fDt+u8S1fXrRI7zVGqlo\n/7d+\r\n=qavI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.c5dda809d.0_1607547023595_0.7219991188542088","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/card","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c23db274e196db25f379fd9b59635b53aecb80f","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":19,"integrity":"sha512-rMTarx7s+j8SvB1uNS6wiINIViAE3hLI1JdGyT1alckF08GVVYEqbeTPMOpSusZ7cKlbHG7pWUwLFobWx1gHxg==","signatures":[{"sig":"MEUCIQDPcwsP7BTlogYnhq6U6WpSvLiEujOEa+S/P2GzLdzKIwIgGJ7ZKW8aGW45VJNK74Nm9ulCDsdGXGdyqQRmzER1bi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Ty1CRA9TVsSAnZWagAAA6QQAIOk+ejD12XXYVZJcjRv\nEfHWS4ICjOEJF3nuLCJnnD1LY40oSlMexQ3bn3FmMEuvziQeedvUX92ctT9O\nw2lUGqrJwjLcvISbR8kFxztDev74w6VCVwMIgoS96wR70z2yQhpT1LVhF8Sa\nu/gpPlHiK+/JcuyoroYSKhpybF8evy5F+56FkTSQuoU93P+eqTxjZM7wq2Xe\nwEwPgEDdyc5c1qlCHdo+5QgTgApmDLahiH0y1bHuWDiylCR/QrL0IHl3dTWp\nX7fLHik+FWfvYz3k6eVCjC3xyVddz/Mp83yhdUoZLY3hpRnqkZqivPA7cxRo\nhOC6D0h7mWTzCXB1j4LBf1DhPvkZ1SGire+ztw197uFrB2w+L/TOngiMx/bf\nAIAqEIIKYol0D5xtKBY/uy5eh3pTEMWHsAGfEX4QpSJkahMr+eo7KEEKfUQy\nfQphfnbEkiWVtxtTTXEhDPcWaJQ5foDCepui1AxxybVvzzE/01Ew05eVPm0n\n9JoC/m/AVROPmg1NMCQIHBnteovCccyp75YJyL9I0SId7JbPD28hXrBEDyST\n+7EbPpbc/XiPoKCdmlxX+JHIyu55vTelESIycXNk9dGqujtdD1gcfpurWThE\nrZ9XNEMskWTCeV8JU8a5ceU04FlHt0fHIDzHMH97FRCDp1OJicTf6px+zEeE\nY0o7\r\n=chmv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.f5f1bd86a.0_1607548084920_0.19737341917926865","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/card","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7035c5a1ec134231c4d789fb8b172a0949b13f84","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.00f38200f.0.tgz","fileCount":19,"integrity":"sha512-QlcpnKalmeFp/FN0kLw2M+LQw1gbTFmBxma7EeEDElUIH+jWM529qvpsvVsbQDmEXSybhAMCzz9/F2ZqodIloA==","signatures":[{"sig":"MEQCIEYqg9RlOXMA+15tTsqZFZqdzE0am9td2iMIszIwU+fAAiBRMxhRZHWvE7eo61T0iFo8OFHXZokguGjZhRJRlqCzcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05RFCRA9TVsSAnZWagAANe4P/ihTXdF4xWWP6iq3/pjZ\nMjxxtlog0oLiJLgP63lD3/Llo6T8ZFq+XLtp2Xvk60b1yNU6cH8ev84mLGFO\n4FsEjGFT7ufXjohCGdJ+wpejd6LK7zFMyIrXOtn5k3dg7JWefTZFaDB4vkmS\nkom7U2h0MKl7ICUi2n0woAEZSQ46cHK8OmkT1XMGDRMxKhXJs3xB99YcciA6\nfHZ5uTWcah6y2z78QhTIz3spEsBT6FIkKA+dd8jM+I2qVNJJo665lfQyJ5PX\n4RhcFaUB9gS42zWRVZsTZ6/dmMeHdr9pEIMrbuw0isRo9GpdYVZbwD//6PvS\nTekqTDKZdPEPLZrwkozBQzVZK3D7XGp1/4Si85uR9OwjncYoMNjqQInKb7Es\nyOsKn/jYHsFxWZWVBGNeM7DECEC9blspzMON1plGEfnOukKkOKB7o4xQ1cTL\nbgjqEj2o0IOqdbAnAPUZQEwh3QYj9Wynk0ceGm5CJjQETKp0arEAFndVfuNA\nAkqyFReyZy4pmbs7l850hSaApBXOIUddtqyFw9mEntf8NvdFcKlji3N3rdui\n4rWHjzgRan6cHQzVbdYxHJXc9XgJE5lGBK32AUhmajmisNyWYllCf+aNHqxV\n/P3QHGRxcVfycb49HY5eZP3pwGaM/MD2v+unBXvDMTlyRNlkwKoPyGsFmxlT\nE9/U\r\n=zAGy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.00f38200f.0_1607701573122_0.9940443501465261","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/card","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f871291de6c16f47e75871181e36e8a784548b54","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.ac41a5729.0.tgz","fileCount":19,"integrity":"sha512-c0rzVSDYCGZsAi1JbnJB0Z6Dtdzswass+eZfT2FALe+IVVShU4SfVIN7gGG/sEoXjVhLcUNgRu02VT3e/KOWFw==","signatures":[{"sig":"MEUCIQChaIJODcxOsfGmIM/tNwC34n0SbLrWj7bt8I19FS7cMgIgDksZ027DTe0QlgIIfxAu1srOzcdzp03jsevDA1hkZsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf055FCRA9TVsSAnZWagAAdwYQAIhq9NH9OqXkkJU9xyCh\nap2RqE+Aoghjc3D5hhl9i8049ueqEGs7SCK/cFqA7AarFh+ABF289RfEIJeV\nf3WFXSCqnTVpcBke45IGb8cmrX9M+Sb46JbR83QdebQqQ6sLHAoP9qNgdej8\nhcfV5VTyEA9aBEvVPtbwx/UHZkno8Fy9d0H6Ol7CfmYZR0ak7Lmo4s4M4MBQ\nfz/0DdudKSNSE246gutDFCtP9CFurxMbQCXmHIrhrJHf1XDgASRXCRyT147M\nw4H11Ub9/WbetgpzKajdPpCgl+XWJ7Vng5JTKHbjGk7UNipc78db/OUQiZHH\n3dJ2gdy9PWRLGrsKPg0kg4sFqkZpXgnCUyPCbTNjvA3RQc7Q/Atd43lQBeXv\nlYdTEAS7Crh9PHD5P0TrOumybE/GFw2FrhhDsHDJM2l1HL6V0kdFicGPhm2i\nw7Aci+NATWLDo6YIS+fqWw2liFmyCBs28ukwyt/PL/k00YM49gRV+HATnVCV\nmRG17Xbup9u4fXQnl0ol0OJa16MyCHogTy8YX5U/ZbtNzSBYM8ppW4bS5Vl9\n04iTIK1dItG+btWyHsYE3h6f864URqoNPO+zddXbeLWTxAAiantzOrVJYzEn\nAn57KgrmFFSpa/XFA57y6v7wOSSvYqIGNcCOp3DVdj2kQhJhI9jBbewnRf1d\ngW2v\r\n=Db5f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.ac41a5729.0_1607704133551_0.8180191265108347","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/card","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76c7e6d10d9e017d054b115d28e4e572fd9e7d7f","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":19,"integrity":"sha512-Wt3oFBb2/o4MW9oBb2skpFR9gsK8YOk3nUFfZ2sYi/UdxxQ/g0qacAEBtRHXw4hkoxrkr0lxoPLOeQ57Kn0V5w==","signatures":[{"sig":"MEYCIQDhWktJ3WCxXAtoLWgMCAoEjH6OynUWiv+371n/0kJJ9wIhAJqT+Dd/SuPb97Cif7iUBFgX8s1Pry7C3Yo8kHWLSIA/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06b7CRA9TVsSAnZWagAATpgQAILkY8sFTUcQKDbTijES\nm3tT/qb8nDfwTQjpszstag4+Jn5OGD+tz7esu7hKyR9IUwAMDFvA7G7d0kk5\nhvZ7ELwSXJU+EgIbIyfo3fUnMotTNOuYf3T+oOW7ab+gpiWgD0f98uOOyKfl\n4WCFDwHLUPG2M9ZtICOtWKemwNJrUcSHc7164T6ayyJrarhI32bGbHw6h10q\nfChClYpVFRm7GRlMruyIxuluugEW6UPd7sEFJoVaqDdx1lB380/pCBg5kBNp\niRp77ai+0hMUiA6CLvADRdEfn/pBAMNJnYmYV7IYYvwHBJGf+Gyy0BZld0t/\nEnstJhSiQwKEtIIwfbo/MhzlUlB6FNMLZy1xsF9TnoGLeoDj6iNu38NQ1fIr\nckzr3WSfIbgnCgdg4ynIXOAMisH7HsCCfBrvR8CEZpWzhlkxpc0pNj12mcD8\nc1kAf5fT3Tf7sMw5KGxeWncZXVcQBM7FCP5wP9jViY5Im1Xk3gxxByBKBRne\nrEeYyhE4NlwL22N/EERk4WUSsXaDrn2xo0VY0o/Ry4OSauwjMJ5nbzKlbdcb\nd1KaHwQfCib4Xcg9ZC6dLpSxpYUjwVdiskoV0+jdMFAvC66DOOlt8xdK4ltS\nUn8EIH/WTszIalwTn4rysdSkvnWo6DLbptSE9QhGc/6Z5HWCZQ3l8958+lgy\nuqcK\r\n=fQFD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.7fe0e4f05.0_1607706362457_0.7010011841611588","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/card","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f52d864408514af5f4a7595ac201d2282361693","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.9244508bd.0.tgz","fileCount":19,"integrity":"sha512-C5fqcVV/pXhdjtkxYsu6HItByrpHwCcPllbh0cCVwLrkyyFwoQSWjFvv1SaVI/uBxGjTmW4kFKeslI+168e1aA==","signatures":[{"sig":"MEQCICnD+bnMIwxUCRZByJ0LOh2ymbd7gb7T1H6BLgiBdBbIAiArMwDHt6JU8X1/1q8KFj8qDMZ/ykJEJOMCC9L4PyS1+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08OJCRA9TVsSAnZWagAA31IP/3uboxsYcQ0hhgH93lhY\nF/iMdmeilxX5/F/Vk9lcfWWwc1RPjv+b1DiwBuqTOpgrb2Gi1+bb5u4zKLgc\nQOg8bTBeIQKioOL0rkc+WFjCO6AOmWiLEjUzk9KfHHJBgkIiE501x/JnKo83\nd2TKvn7RZzIlN+P4skMAAJGgTxi4S4eyA+ngkJ3WB44pGIGNjOXXUEBbACVd\nUS04kZt3l2uSnq5Vla0COQNmN09Au3GJFvHePBOB5bJ3jaTa4QHrqh3XT8bV\ndzFwoI+fXsUtmueyzVSR33Ysw3vIxf/JFXbPFAuLqviJRsOL8IwMBf0HYVWh\nxT+dpuSX2rWFqT0h7zxaZsxS17rZ9kJexpIS0aF+t9OICVTsw3qZz5Glx8+B\nPXBPijksToKLPLdYzfCkqaqf1WwN/xEvjpJTv/IK+E3zaGe8rOq0onPUOvAZ\nFzsMLbxyyzf7Z+5tOIPlimMRToKhG0oI/eMZQKGJCn5wmchMOMFde0ZJWWiT\nAhF+9+grUcXk6rfftxieFDS8fJGOFKtRqksH7MQyV+WG2tJM8S6w4EnOh7CK\nBt2/IiclhyO9bIwlK9IDztd9B8YCz+ezoNn3mep/6Qa3RcJ/2Zafv4+n5mui\nvYLxrmf3He2zqKDdX+is1uAeYIbZXsi3o3pVLURD/XQwh8hR4CJEgmsk6Ve7\nbEmU\r\n=esd6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.9244508bd.0","@material/rtl":"9.0.0-canary.9244508bd.0","@material/shape":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.9244508bd.0_1607713673414_0.9240882534870982","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/card","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0bc82773dddf13966e11dacbd5179154f2e2600","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.384a8eeb1.0.tgz","fileCount":19,"integrity":"sha512-qto/9S5bxuUF9pEnvH6FgJpz6bPuRreu/hbSTKhcpWQDD5y6bxRXZxcjuABxVlvclnQh+1o1m1tHqg+WpzY1Mg==","signatures":[{"sig":"MEQCIEyt1duLyGzQZ7ZijsprHpmXcI0Rn4wrzv38zqCC0dMxAiBS6Nqpt0WO3gUelwugMbZR+3sXTy3ctg8lZSOLxGZOtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2eCRA9TVsSAnZWagAAb/QP/2r9lFfIBVKFnW9RQJuF\njLr0DZ9NNCW4+NmUcWZObTjYSu+lfftY5DaMjCwqICRWiII9hNwtMLcmkifL\nunDiK1KFvCIH/ksurYaqaQylIeUyQuSeNJhfXAgJ1pAPSwOkeS+BbpE8HPXa\n7OBsz+iXVmX+YoZRHVr3GT5mS5EH5AqzLxlu3A+QtOMYXWHoqNm+dCFNnp97\n6DtvaRS5tq6kTYW/qLzq0pb9qTyglAwW7MNqMnDXcYemYiEb7dEKuTNgHedz\nVSvPCa4TveHlUTAfdrpjYH3kA4x9yDpCEbjo70zTQZzmJLA98ZrqurBCdNPf\nGkS3riW9y1p25tp91sk3o55BM6FbYPng+8Pai0ro5+L9Q5UX2tQ//7kIlZG2\ny9CD29lrec9c5uE/1j3h7wu7rAl1H5W+Ub6sWtd+Dcn+7m/k6SatGmo2gAur\n8PiUkmbZ/j+TjUzIHGOwrdeJ06SUB/k45pfOEavEGNz5E3qnqXh2JVqFSvsL\nTseGOdXa4GYGiXMJBCrUH0hDs69K4l/nfVGGeZ5ZJgG2t21DQDzIl84lcG5g\no1oXNC9GjRwdAes/ev/e+kSJfU0wxMdTRS138JARM6x5KCzQA8g7j0QQVXcV\nvXPpL5miJ04OEaAQZvZCYRxcnma/gvNzjWG6FmeJedlUN9vX3ytkTH7GpkRk\n9ZCg\r\n=nqVW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.384a8eeb1.0_1608138141681_0.623969484542251","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/card","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7229ae01ad12df94b0de4e6d9081699d0ea26098","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":19,"integrity":"sha512-oojSfHnaJY13GnmYGZ1Ikyimg8Dse+7z3/I2vr9bePGxAXDwN4hjJPRmWTTiptYdEj2kQW3zLZ65GZ5ewkfJOA==","signatures":[{"sig":"MEQCID+nQOt1xonAu/tdp9dtkvQmgNau8gYOQzmy8LbkKiYHAiBldSTdyx45gHGcPSXQ4UXH6mK5vHkGCnGK+4iVyqLWfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lG7CRA9TVsSAnZWagAAreoP+QE2qC0HeMf53P5Fp5lC\njvO8pP8jH1EVbEpsQje3EjEU1Fj/PAhJV8fvdNLLE+Q69xPDIXk1ok0u9Aoq\nzeOIGNDjH37dks8rbJ+oMnsuZYgT1rwV7/Aem68Q8QL+V44k/NzVfO4IXUb3\n9f5yNR/MxkCyG2DvYi7KSqmRmG6dCi7nDp06VITKFjYzZVXK5NGB2SY2kn2l\ncXVXH5pVz9LH4rGN6xLkKssGox5itIeNtMD2pBjv3Sd2BsZN+aiyRORDzW9k\ngj7OxqkvCFoILfyS0bjPZlI8D+AOdVkR8ZkG5AangPDx6pugvpGP5nFWbXoK\n10HBACzTPjoc9h7uTj89pwcugSAYeqlijYAH2yzaKmhBFxdNc4T0Tllu8a0C\nW3+okMeCZA6psG3M9Ci9XXfFfa0zdAEJOUaXjO0ITGEbpQMH8S0YYt9E3POK\nZIe6RE5TX0w6lqJInTxQ/Z9Qv2Z3rzH+Opk6WuqBF2pzZ5gDd6BZII+J7A4Q\n+zfu/FlRy/+xYcMENx+5ow9TX3kVdUiqQTWXpaL5/4wPVoa34YxLHKfPSM+r\nKvlcaCs2MxRw5FzBz+uG0LEW37fuvViSTB4QBMSzgWSEdoQjGjYvpg8qDttq\nhDbpHDuuYUTCu74XYpuuL+V6aY62xwgZCVwuHJ21HS+NDvFUjyupnOhaj4E3\nylsi\r\n=PqeM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.eabf9d5c2.0_1608143290624_0.4694704977793054","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/card","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"816c3c4aa2377da1dbbc2f3baff37bac5a47acc0","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.30fdfd06e.0.tgz","fileCount":19,"integrity":"sha512-EemrJkj7a62mAoFU8XGB8F+rSCLuYZb5P0+zDZWz0jFEMugGlHVrHzJ/CEhrJcay+omInxipUZPwVjMQsmVYPA==","signatures":[{"sig":"MEQCIH6txDZUSMJWwl56wDSqS1aY9l170CzZcoRUxWojywLRAiAfJOi2Xxn5aRxxszGOAIObM6g0ZA6N68HkrSp8E5c7Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lsQCRA9TVsSAnZWagAAfYEP/RvY+dK8Rxc89F+WdQFE\nmRh0082R0zzTwAU+59uSQfWrQ9/RHjkbqLfdK+oy8mEhFJuMvfh/B7USzo8h\nVoyoRQYop4PqHnfJHsBQUMger4RS91LKH8XEItYTQtt2dTIWgRQlH/4j8JdM\ndUslSxhwLyG8ns0IuQsRjyQsShWMu2XeGydi3bFhb8jdavgDZ8cGbpTebK2c\nHKL/mtK195Y6qnrgZhDyIlsYYFN/sc4ZBRiFpICTw2wNMsmo6SilT8A+UG6K\nV3M9J2S2RZCaft1yKX5x0Hbre/YbSP1XgZraxkUfiFZAZl8K4Zase0nHFGdu\nCvCsmDSIxvRYaeMnmY0rb9ai5zzRjIRUL6mdwM2WG5txz+2PO7aJh06LWblG\nVUH3MEBqzbP+SKEjj+fWuhjb+NrktFGmfHFxa6DCyqiVMBzmiKMQty9r46op\nFrpAU3B+w8c90+NgTL3lrERrXf1eyPNwxUqAVB7ty2VIYPPtiHLswqJ47WoC\nNcvX3DFAImfAfDrDbmKcadEYNQxD0OVK9d0olpmSAbXZjudgsX2rwQpHRIUM\nGOSjDEfMaFhZ0Y76hL2xlYCAyrO8axaGaRw7xmHkVNVhSySBc9/VtY4DRtoc\nhwDUT04F4ThMMTiOiX0bVzTIPcGbSqdnfH7X5Am7uaWwAql31oatZ89Hf7cy\n0CL5\r\n=9ZIN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.30fdfd06e.0","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/shape":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.30fdfd06e.0_1608145679465_0.566225774860952","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/card","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53518db8a2155403a563d4c55a509dafa58b6ca3","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.9590a8f90.0.tgz","fileCount":19,"integrity":"sha512-93VDa+BFDLh8XUPHnktcaifOd7heGSiFc/Cr+1mcsZiIWoDBfBYJPLP451NZbHN0YF6RCsyVrKjniHnMdjhXlg==","signatures":[{"sig":"MEUCID3gS7ikYBEu1f/k0vzziYfsIfP7ZyIIUe5jDwHN9W5NAiEA8eF9wpruyKToN1qE4POjKLzuhqELxhHFUYYxTEu0Ssc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jAFCRA9TVsSAnZWagAAukEP/ivvxGu9DyCV8XxG7j9N\nSBezDsdhunrdLOIFT9wMctWAt/ovoXF8ZKBkKafzdB/mR6gWg0DZHoASMt23\nEHS+uJBPl83Y5TSaYOF+zetrpspW5dH6/zluAP7LwgyVrWQTVtSZAdguI4wq\nvsZUUFuGrvjXrpPquInO3N9UIaZHkNmNhghLGH0DsVxsluK6A8X1QQ/Hpd7K\nH7Z/J7aAWagJun1dIwPbqrSyCGR8I5INFlM5TOo1Y8hedgrWqn4PHRANt5cy\nfh2WcvSOPe7bbogd6mOWEaiwkpyKvT1UZpHjIfU8aW5dAIHsoyOc3tXmoL8X\n3idhmRoc002vv8bo4ZV6R4zEW5LFAIMex2gMV39ShCy6+h+vxUVrB4UW4e7S\nMin+nTEzlr3hGVAw6xC4HYh1yI9deFwXWgUXYasQ9MULIdcSLGJNSadAMhv4\nYZqgFNProuLzFIlTeXCXacRlg92K+fW5Kwc01Yi7/WV+ccgVWAP5yKqK5Vqe\nkzW4l8rjzYxlecwANZa+zmwjimGthqFdkBQCqhqHegXqfqX3aAiRdEMt2T04\n1+9d663ZNQSsnyonpdwyLnPYTyFWEkg9D977aiOHLac6l/8Edr2m7nO9xgOY\niwXINZk9NwsjwiDh0ASQ8/u+UiYI9HmgEH4/iYbf/CNdKCQf3GKwRaIf/SPU\ns0xl\r\n=KUQ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.9590a8f90.0_1608658948709_0.7991005491680951","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/card","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb60ed8fcc052b73380c4811ca26f2c81de86ba7","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":19,"integrity":"sha512-gRux0vJrOJWAxfNsV3yn5n/ghYnSrM0LO+sEdXTjnRhNCekLM1U98eue8IAUAt0z2ajqBAOP4+sCdhjI+sm18g==","signatures":[{"sig":"MEUCICZM/279DdF5vnW/ERAHMEDyhed/3IkEFgFqM347Wr+KAiEAqIKNxy67hTfnswbFxENTqPdjPT79z3HcNhF5DvA2vJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nvCCRA9TVsSAnZWagAAeT0QAJzbGKRQc917Dwjybl+x\nJaKyE4V/xCRMyEy+0FFGd5Gvvl608OE04YB/ckN7I/zNCEl/8/y6xT6XZa9V\nkl8YIF+dFHqRxF6vAAY+qjwHLNh/KNQ4hkaDtQJhOuDc67ekB7Ujn2kn42Zy\nuI9fVI62BphU8C/pZ5uJCqGnMioyE9LwslIvX0UYDKVKLOrrvYhRMaklml/h\nVhqinSeWZcH9PynKbsTk/EDlXzxRiWuhPXOTME9BoboZhOy/x0/gk/1cal+q\nxkDZn2BqExee7CM6Aw6mgYfnLIwXJpz3iycrvmt4h19vs30r00/KER3X2CXN\nIcQYVCqGVJxklcMGQJ9D//bpaa+kF2U3CwSUkDAMLb769iIwq+RMp5FI/d6n\nIsNxDi6szam3e9DoJRVj9RkT+TGLSbg52i9HKhwEWkKOri1FWF5QfUqoQC1s\n2J/B/kumpziQH38W5LPdqqqdk6Am5K5dKty/ow3B6OufnICEcu9mPDrsx2s/\ngcx+ti8cKoP80p1243DG5GBiorGk3qAI5O/I1NpMth1hpDlxMp7nbqE4SFSg\nxcg+A2I3Zke+ZpvGHESIIXAaAmUZz1DL5Jj1dsAifFaBuZjPovRFd0c8hslW\ns1Vt3FWTW/LAAbk+9hIx4zUmeNTnH7E7A97T+UX6yGg8G8ZkcdIUVeZcomAX\n2eW+\r\n=i/or\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.f89d8b8f2.0_1608678338332_0.6394551363824905","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/card","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a76d7818aa8fd1c38c98dae6febb9f618bfc3051","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.fb194dd35.0.tgz","fileCount":19,"integrity":"sha512-FInW3hI0ax3a+exuB88fGsrcNZ+AgIzSXHAlFTwCXoc2+sSMZwAhtGTv/ZuCwjTVzsofvU92LO6tr0YJmbclYg==","signatures":[{"sig":"MEUCIQD52e20RYeeA6Edo+XJLlI+pCRrU2qhMknz66Bg0zBQhgIgXwLEuKmmeSQnPukECJyBLk/1OKrLVHJ2iMo+D3nimtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQPCRA9TVsSAnZWagAAlpUP/RS4BPElqyIWYQFhHDa0\nG1+0YhGfVZOJEDSrw08sVb602TismyU+bWvGvYP5ss3KsLZcisDECyOsgvkk\nZ9savoWWG8ux8rruCrJdt+oWZe2GpUh3LBPVBdnj7x0pQSUTFnoqTU6l99C6\nOKakfV1VgvJ69id337j0h2qNtcyLfWXghzQ6iE5mLC8TbcyDCUs/pI+pv3wA\npNAASOGPJiQlD47FQnKL2ef7rvAr5vioz3IcDJ9VLGSUVMnId7ZbGMNs5/fm\nPAZE6irrxk3svvEzR6xxYRPZcXrh8P7PMtOjhVKfG3YeL6nSbzMwwfpZWFia\nbrX6/vvdQ6Dd7ROJaO8r2vARb/p+rYCQfijezK7QYOpqlbpH9nkIRFV6B+uB\n9Rqty23qiIoxffgZvW9onJdRJIiOzTIoUspiEaATcwc/zS4XY/EVWQs4uNuW\nwbqmg7ynjALBiHYS76/stuCefGX7lWYYwm7cnxarg2hKc9aqtLn/e5oJJ1cQ\nRNrtA/mAr25YgW8biNnAelo+YXgRQJ0D/yn79NMhKXfQKK2COFj2wmj0cefw\ndLzXZrIRcwPGUjAGqzL00A2W/7k5uug74BwTWwy7woggeN9IdQa22/nxqLXg\ngUBvkPD33zsUmQA8MTVyEI7ceKwDg9kgtGgCyyhLS6TE8y2NZZJ0QnBFfmRu\nYAO+\r\n=PFmp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.fb194dd35.0_1609188367287_0.556180130024921","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/card","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0d393ddf176ad4100035d286f528b73f54589d4","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.64f36e287.0.tgz","fileCount":19,"integrity":"sha512-9cV6mbj3LzRpl+4gHM43sdPtFbPrWt4XQk7gFT0zdg4aKjEyudm78CLjTjwSxUCSvaynJwsFrYuYVJQfvcTMfA==","signatures":[{"sig":"MEYCIQDTrvwJlGbH/+D0Qjc23zSXZCy7gF3+Kt8nRCWXVEcDuQIhAMLogGHgnYvPzYDhOPOPU1SssmYM3FhGlqChA6yuE4yR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kltCRA9TVsSAnZWagAAJn8QAKB8LRMilY7T5l4szMZB\ngmBDhDBw4QLhIktorrtA/BsunzLgK00GMCyl36sPi0kOwFB8sHAWVY+GHnrP\nxnRJLI3KxMcim60c/6mA9SRrwHR9JhHc2bZdVjmljcqsEFIX60xuckPEH7/i\nlnN0YZ9rXmHw6q4OpHLtunll24plKk3l3Ge+D12HTvB1+QZMGauA6VcI0nV7\nriXs2PzEm/RGmWiPOMXrrQMnbDuhcMlRpDZZ50XQa0uBypIPVZ3JyusY8LVv\nS43ssKpfDLN6ykk70mcVp1NQRKY+M8nGwnw6CoG/uI24savi/g3I719GGnL0\ncwYcJXjMqkLSMvoYzQ5GylAkZJfcG7mD9aEo9I3mhdM5FSIzSFjsxOygR4wS\ny2J7skT97fb8wV7eQaBq9tYLqUnn8SXcHnUEarQFytzzZfXi0sEcWHLRv85c\nbmoLUjUeAb8kBb7JHnzE54fZPbv4nOMqoObKRtwFTK2sJuRmmCd8pR6Ppp5o\nmb+jzW0duzCYOwJpYw/RtKa6xMn8mOgBT15wJ5yq2pMWWFsmmIWb5x3HKkza\njhJdoaF4ukr/r6Shf+Tl/46GGx59qKRz5J4Iln1laRuIsum2NRnM3dpE8sXs\naaeDq2oEU9Qdp1nzJb3xKQTuwZxhcLE9P+iK4YUTyN69G5q4mT+/wBmXb0Z+\nB7Hm\r\n=oe0l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.64f36e287.0_1609189741288_0.6901368894013715","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/card","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b571040f78430c28802a7b4b09e43bc677e09316","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0-canary.b7bbe7022.0.tgz","fileCount":19,"integrity":"sha512-bsZBNyJxWlMdvv/FecqKdR1uqfA/f+ALa56iOSvpssgIWKPzcmA02b0/FQaIUt54XsTcvdozecuGwrU4gejRvg==","signatures":[{"sig":"MEQCIEIHn6Krn6SYlvdhybJ2oY+Xi00BKYtQE+y86Ujr6jLcAiAFqW+COva2uKr/JWoneICSANo+9qn4I8rU3UvU9J5YmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63n/CRA9TVsSAnZWagAAKvQP/RJ4Dxp0xrb3V4dhy0fW\ny7aNwd3hGgMUYc66T3HxPLFdHyqBngxw9V2lbeTdP0nAQ0VD/PJiZ0ot36kj\nGNHAX4wDgoFssh3AyZp6scrbBlZEfedB2xvg3PAoNGrhT4mze+Of9PlZL/Y1\niS63OxXTdtGRJIpdrJtFbnxxmmlAW9wl+FWCWGYDDZHMmeBCmSpcyoVBq0pH\nRpSnIv/mBPJYubC6ogh4BUi3mAvigBcsOo1ZOGSO11+jcBD8Dxm25iquFNxd\nTnedr1Af7QAGjrRqDvSWrtK9SZfDB7CWO+ZqAmtkcTJV754pRn31MNwmkhJe\nh7qCMjd2BS8uF8TD7rD8sLqN/W1scMDQLBrhz7djtgOVGupop+jABXrWSzuK\nCe4ESGz6hudq1eJmfxYGnwIdk79GEKx46JiAGYOZyoln/JuRYBH7wHf4spt3\ne4zsGHFfPaJs4enjCUST90+0I61JYNcoPaZ28XfkFqOHGNoxOknWOsOBPF/y\nTqbW6fmZTeLseexwKb9DSYWDuZWJe6eBeEmYWcivgaTTqRfis+uYn1N4EL48\nLTMNtEfbynkUeStH3ZrVNA4I/v7snW60aEaq3bKbc4kBqLTOCvzwzVTOiwqB\nCyJueIujHMxuLR6nhhG7Cv7ZjK48ujEgqZ4Yu9iUZqNjeQtBx5aTZ0qj8Bz+\n/AvA\r\n=6+HC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_9.0.0-canary.b7bbe7022.0_1609267711175_0.5072189277974439","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/card","version":"9.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65a4e3090989f19448c87e9a4dc4de2d644edb15","tarball":"https://registry.npmjs.org/@material/card/-/card-9.0.0.tgz","fileCount":18,"integrity":"sha512-IJ91mWQXFQ0hZ09goMYhBCtXEnbmO9EeiedIVgu+gCd9Bu9iGCA74Hid6DBzmOkv65eZiMHdD7CW2E2RUGhIRg==","signatures":[{"sig":"MEUCIQCGDknE1YRWummU2Uf6UgGxi11rrcd5t7qOnZ7mJzVRewIgHKP/98h578Y9B3SPAeBD8GqdhQWJRR6AMBIKRe2Nv60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64ecCRA9TVsSAnZWagAA0n0P/136jIk6rPyJK1nEq3DF\n6eLsV0MAk8x5MsjeglGY8uQu4jwXPdVgsythcTWSqK7ZHQOsU5Dmj4kTQcXd\ni8oXJvpDiXxwWdiXk/UmNxrr27OORloKhOnQAAfZzcXe3kYz1FDd+wrXkr7i\nF6x4Ukm9S7zU2I7u5EzYvftAit1yT8bf195kZ+RyZeQKjFeFmilQxD/hUxYM\nagPXCj70osfpJ6iXEp41L9mPV5Od2BDoGFiJQ0pVqe/hBQkyKvpCGkxeei4I\nheWEcacsJ+4DnmD4FInDyXlDbQpnLCXbGpZgaH0PR92m+SBT7SErpz9QbE8T\nFWkI2sCAQ85H0N7NtdZfsUTThOKfpM4TJDDiVDDf2Q99INxY5Y1rsmYxlgmr\nD1K8O9zhW72u+ieAVpEM1EWy0EdTu0YNESmIVPCvkDG12haPnEPl8VCeA4Ru\nock8S2ouO9W3N0Z+Di9+Ogiu559Qy1g1jdovjaHVr33yZyBOgr7ROjL0kiDA\ngYrvbwsf4ulMAA0DdjAvPVLj7UTDlua6ci+qBvIYCjncWdQRfT3s5hUXSn46\nuW3G7tdq6N9DralzzSl12tJyrR+hV2cnbyv3f0FpeZHQ/C1P4ASRqlIZRfDC\nDdiqQ2ah4129AAzEX8ugF7j3Je680J5szGKJDKZC83fBQJD9OICj6k+KDGsC\nSgOf\r\n=H9fL\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/elevation":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_9.0.0_1609271195694_0.2146201036038109","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/card","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa9f3df4a3ff61074becf000401a7dfb7928773","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.776c18681.0.tgz","fileCount":19,"integrity":"sha512-kxqQTqUVnhIBfVewLsluaad7/vizHvjOAqmhrJOHPfn1wRM6SYVGv8QF5jvfqBN/+7cJyMSB5Rn9arXjhs8ezQ==","signatures":[{"sig":"MEYCIQDBgWRE6qCiIYUbLvpLFyImO2AvSPPjZHVlYRJuJ5Gk+AIhANaDS3fReiChNwNKaBO2U+b1UTNpcUOTxGbu3PNsOxpc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68yHCRA9TVsSAnZWagAAyqcP/370WEy/ITZh6UIhFipH\njxHcdbEDzC8egysuxDL5hmvz83qS2/auiTxr+3FxvpPnujvsV1P2Dgw4Mxc4\nAagKAzn1C/ZojUgcllpoWvReFeggeDu3zezNn6xFOH72xwNAKdGRpY1rxwpL\nWYe7frB3Vs3NoPqjyXzjFb5SDtXaS4NPPqBjABe2eSF41rM4S4taCyomow+Q\nH9NVTLG4eM7jx6UAYqWz+foDhwcSwAU6i9Ex7XYj0np9RBGklsjM+Ah/ZQMK\npFuXeBZsq0x5Ra87jii+KNWOwSF0Sj0XMlL26kEB4QjlE8zq3dl3IpPbCqEl\nxYiMrWTtU7lHM49wypVZEXtBwq6fxA/vKv/+9+T7UQ9iOe87kxt+K/uWBiDj\nbBQ5WVr5Xu2+dZ3tjCihQvVEiTr820yvA0h6J9xipFcvHOrBfpGYYxTAfUt1\nt9mmvMfK1Ede3gRVxC6WIe9XSGz1hA7ywNH2KDkscmzyJJmEW33tApQ+xR9j\nIt9HNWdgfOIESUI4tJbpQ7Wf9DlczU0T8IEZ7fvx7vpZGDJFnV2+z/KELCg4\nWNv6gwa3nC9sa54QLFS4ycLYmJuLEFPQmBdG4DLux3gShj4Uv0UkqqCX6kv/\nOmBaew0+K9vginhzINtcPN779jcznqpNLXerWYXUOOtVqd7FuplZeu6jP+18\ngLyf\r\n=9RQ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.776c18681.0_1609288839174_0.9894964716531915","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/card","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcd87e1fac07142e616f4ceb18328208f0b41f2a","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.671d72d95.0.tgz","fileCount":19,"integrity":"sha512-jPZ/4pv0IV3rHEcQViDgNoUjV1i1kh2dsdFD0KxGcywpi19ZmLQDCpJa5lMdqYSMZZx9MIrcyhDIGELPzeh3wA==","signatures":[{"sig":"MEUCIQC31cp+2fbdpV0Fp+oT6tOndmV4RFV00BODrTosJ5SA3gIgMetr161PBHeDITD9Dt2+yhBYPcbEIiax3vMDBLnXn80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8oCRA9TVsSAnZWagAAO8cP/RfinSRlvCJ3oV8gE8GO\nYRHMS/yU/L7516556dNcfpfBEh5awmbEt5xfwrJa09kMDdKu2Cuz9AK8a95u\n2YFmdWt92DxtuyUkPUi09r+JFJe9u9+cWT4Gw6cTYo0MtJS0V38cYNlDvwQd\nVoA/vgg+XkLm/M+OxqZFOaR09BwTYoQmyM4klIUPbNxeSApWZPrxhP3DeTVo\nndH7AtoaH1kXBJbfDnHKSBWbmKw6IVQttzfV7vz14n03qUBB6mJ+fXYL0r++\nVKY551PZ1LHFtYh/osy1JBF1vmrrTLPOOyZ0uWsrSYEaQVxm9WchSQhJS05f\nP6iKTplMZW1dumYNBuyuLhCZNhhGjFJrR0JkTupIaEUll31jakPeotDdhI0k\nKECZVF4Py7HY3TXJhna8vWc6tOecgNHaTGbQIs5d0eYSSfgpq19WYj8BsGjf\niQuKjnDBUcIQ1QtzuQtvUQ4HjmLBKKJtfHGo12gWx22nTQ4e5ij2zffy+pqi\nDuo/1UgSNirdiCvI2Nm2gE0IvsB7CCjajLVRpPuRHGtNgo28sCJxgXAt+LeA\niXGtjYbGAoVlfs1TJBubWNGPuuOoIHhq4xnaurVFnQBfW+ibWRAuwFGzWoHU\nQnT1pT7yp3NLmC5JRIBPu5r1fFmQbNoWEcq6yNHzD6BAmepJ941XPtonRXZ6\nV7RD\r\n=18dw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.671d72d95.0","@material/rtl":"10.0.0-canary.671d72d95.0","@material/shape":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.671d72d95.0_1609359143965_0.3447078328336819","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/card","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8260b1053bb43ccd0210079c711b50e13037c401","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":19,"integrity":"sha512-H9FaYJAqJcUOA+bkPjXPDAa+wwsi/4/4BnXWm0KnsleCSIaUMHWM/O1cFjln+UEASVX1NmKWhPzJbdlezca1kg==","signatures":[{"sig":"MEQCIB1t592tMlNKf/3CgDS7xH3+HXtkPgdQagJNjx6fk4EAAiATYCoMZwKkW19ri7sVdL3rITKZX3qJXlHHi9vFBlxMUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PVTCRA9TVsSAnZWagAAWYAQAIKJx1rSzOqD3AerKHlm\n95TAH8UG3icY/7SAyycCbINUIUDH8Q6Q3Ic09G/ZhTyIasGl9/lDNfHiLZL3\nRco8T8hEz8M2ONEkVwA57nJv3szIj7ESuyrUevX5G4jw9n0g7amqLDd6ElAc\nhxJsdCaE3LTenkDekT/D6PPsEEMO48v0aERr4ijvS66t7q3yHJAf7TQd2dvd\nsjiHjPajC3jDVvlJDfJlYgdWXXGtTRt3NGTwjZjWejV3zKlrD9RVNeq6X8OQ\nKDkh1G9HPYKLHNCLAJzjeQPdV9fg+xjSUE6Ll3DKbJIZLAjOwZnGs6U60tdp\nks2/mINdSodlTITeeeB6RtgJwB9e7LWuXxMV0VkYTrqeI+557pyghu5noJ/X\n2HM8Scgw7qI1uolXFHT2Lt/JlON4fA463/ir6eYH4LGbWsyNirrgM2F7ISVE\nwjA4WFvrs9Xl93Bd82sNERl+w6OLUo6BvIS2ElP4C+DjBBGvMF++BqSw8e8p\ngrQucVhL0spThz/eJeaE+PFv0UWumSK1ozlAij5j/ONvVwPCSKAlfr2kFmet\nQphJ/r9dI/6/ZZmeNbbAOBTSeDAHz3biY55Pts5Ek/9kWzYhLsOXgvsZRnil\nQSIKtvxXaAMCh9I1pU89fU3GNmdGRCEHKEui0S46Im8UTaDS7+WMnZg2kZ4P\nItOm\r\n=Hs2W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.b4f5a1c9e.0_1609364818655_0.4467709080768927","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/card","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23e83689d3313edccf270ac17e6d3038f6ef4e08","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.a94bd8deb.0.tgz","fileCount":19,"integrity":"sha512-9MC2LYWzu/wB6UVSoz5ummHLInl57NHvejzwZQJulG/4IXDhhwg46pqZ1eDaZ1FldQjwlU7bVUTC5pJ85QsCtA==","signatures":[{"sig":"MEUCIBZ+IvjPXhhXJy8EFmzGAcFG0hDWz2IFYYAzyZgB4wlTAiEAlsiHS/yAYlYQBn+/F+7/3C4pHj9SRbm6OHc8E9DB9YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pl+CRA9TVsSAnZWagAAf7wQAJfeiboTTS/SL6yM5DkZ\nFfq+LLZAhxhCAlPLiLHT8jNjAWpFTW1FusZ91gmqft38GfF1btJU7QrOLsNC\nlkoOMY8dWg8VY2rvrxHExc7+i2wSXjCyuENytyWoKIKpRFlT0xxRe51waMYK\n/z6EcyEUtij9cM9K0GgM3YAntSiPOrtgPAoLHtWUBgNoxr5+1fN76krUuvGe\nrxNoSpC1VX7WPTw3ImhCKCNx4wGSFWnx+R0Z7e9S+oqUnSBu8tbk7Xg1CLlR\nX7ZzmrdV3+On/1AciqLqReXR/fhAMBu/xOLIHrpMwWxIqGWzTHjomCCuxmyH\nemApQMt8HC033c9oDogNv1BLyytjQnBWMSmaYKsWyvMLJjg3nEJJl1Yc4tMj\nIDIvHjzHyciQaqCy43ATlKDa39oR7mSP2u+ZkHFPy0pc1nB3QCypdq8ObkSW\nPZ67L9kKt+UwI/L4cMNu1ua5krlJzCtvgbYbYwrnkO6bzZxRZ++/YKyXnVKj\nK2Phh6auTBhCZIztwFsxLgODTXgavQTeYLDJ1Cf4SP4znsTDHPjT0amc2RdY\noMUIXgVaAbShY7kipW0nXweT8dYlEHbBKq21qykHQ5xISOiwdF/le+v3WI6q\ndZCG8xWIl+UQkSgiPIx4bulAPatRVrLbeOxfhDfVgvGpsfmab/HHUi9yDhWJ\ngzR9\r\n=5fSW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.a94bd8deb.0_1609365885794_0.8542378948557532","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/card","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b55e5da6018e93ebb61e81452e543d0ebd74cc33","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.5d128511b.0.tgz","fileCount":19,"integrity":"sha512-FOFGtMaCEJRPOxWEPWAFOllQs+wvHLD48LGRuS3SbLCm2N5nufryfKUSagl8ufnwMH8NBzJeImrHhfnLByUudA==","signatures":[{"sig":"MEUCIQCFLqrv2lWt1sXfL6NUxi2vOwaECauuf2BkK02ymFx56wIgeFLMkauCB0fp6D7Q61yADfSUVhpLshuaaCvsxQu65lY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PrDCRA9TVsSAnZWagAAc6AP/ipeoWRivs7jl33oJSro\nFCT8G95d6f+anLf24zcqES8GJo+hjKi3MBMcWmaW6meCL99zAUiJ16oof9Qp\ngaCS+NI+nw5VEqTvzSGJEm2MYgkPlVWOnqRqJaNhRHGD1JYSOrp+MteMwOvq\n5yE1WHlodnx/4iFrBLeSaUnZ0+bHawaCT5KBHdG5IA6ezxCcehdrM9R1Kyru\nQB5/0eVm0ePER4ESXAyld4vdicz1h+HHIlQzCGEw5r6AJ4m9r5Q6UhsHk/oU\nhrcF93dpFO6epPvBWLzfRDlOriprq1wAxwciT8qqHM/WhdV0wBzYmat6eQZ9\nMf7K/gbonRiQvFefocLgv5n1GZXIRBvi593AHsWZ4kjiNEGEi3IXaB6A+ig1\nMhR4A7qcbwqq7AI7C2vRMS5kVaN9JQ/1qUuz4iX9eYCzy+EyOE0n80SPJ+A7\nfB3umCkzmdF6NyjQAAgzAYIympyJ7vuWYQXhUlXz8+hx0GIcPxEC5Vxz8a12\n/D4mXUd8//+uXJO+9NwqHojGxx/MymV1U72g92+idL+WJkYtfFmljjAoV3dH\n309VsxI3KrkViBu8luyiVzlGhQDfRcofgMKhMFr3OxUwykerfr96VRLte/Kv\nQesat/rjaHizHNeJ65+RaUEDHm/EqhPUmo50YWVpzC/UPGUmtJ2A79x7SDOw\nyyih\r\n=BVBa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.5d128511b.0_1609366211288_0.6012293443528351","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/card","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a08d398302496f2093f0cc2043ac1cf14ae7e217","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.365c69360.0.tgz","fileCount":19,"integrity":"sha512-kVwSuCoriTqW8iBQgT/4uJPAo1eaWsGzRCNgqEoM/X4IEkXMW6BHFp4y5abx2aEq69Zb98qbbF6e6tjFV5+1Eg==","signatures":[{"sig":"MEYCIQDxlaBwHDCPXV4Bqt+dQtzS68ptzgkKEVJrfzLh4aTvZgIhAIyJqSPurwdwYv80d1FLx9EsmN31jEkXlGlW56owJZ3q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KaACRA9TVsSAnZWagAAHqkQAIN+u87XWN2pa8+P7TCc\nYJUMHGhHVj3oCzuj+0UPV4oHpMrQcp8srCsphMnkNz5Uy0GqOi3mPagWl5S6\nCv58+nMMSaGhuFhLW0byblNG80oqWyjwddw52M0xw+eXRju/niVjyL/JveBn\ndGA8Cypuiv0j/T6SnGWFjrGFNavK9GnH/8EI2M9neub1YSHaqndvIqLdE/We\nBcXSvJY2OUUqz6HYYtrotGkWKbFHTRlnAcizX0MixAgawZ6+10R9MnJCCFpJ\niPPtQ3lq4KJjLkHU52vGl790LL/UT7AaF2CQCVdsTwnW1yoWUjrqYbyqp9Ew\nvWLu78GwF//mGdvp96qFCAbIfgV2dSMXzFvKQX4zv8p5c1xMJY1r/JNF+pz2\nhS8FoyRd4GsYj9BJtWvix6VvPIChfi9LHmsqjPUI0+QwfwE1vqhSpPuTJoEi\nXMuDx7ruySJyO5R38hfed00BPrurRJJeF3qHiawZa0b/jL7c8QS6YXSQZFBg\n6C6tNPWkZsV9Ud3b2mn648Tg12NUZl1ZjSkALvDKplHqGWxw6YYfSjLF8TPh\nSKJ/paOtliQj5OcG5TJ2taV/q22++2M/6K7sXi/IvTGLQ/f0YqFRHZ+yDZCd\nFzfgGvB6L5vQCPQn7SS2/WWXCXe5bzSq7pFrc/Ggc26WD4UGo6I9efPKKeaT\njJ5n\r\n=r6qS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.365c69360.0","@material/rtl":"10.0.0-canary.365c69360.0","@material/shape":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.365c69360.0_1609868928486_0.06493697629220474","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/card","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c58b2158865257c45a41d89ed43b20241a9be7c2","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.700a8261a.0.tgz","fileCount":19,"integrity":"sha512-IwfXJBh17bg5FfOZBCMX2SNwC1BgV1Ua5TymiOcAh1SRNr9i5gBHrjHkVYvb4U39nzrDkL1Du7yvIJFegGP1Jg==","signatures":[{"sig":"MEYCIQC5naZp4/t7cfJaRJ7aJNzOBD0pKXTMmriWgGF1owkHoAIhAL8N0UIe3vx0wd8lS62rjAQGBwnxAioLRz4BTUFnivxu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NOTCRA9TVsSAnZWagAAGbQP/AqOTq46LX2slz3mbI6f\nWQFspYfd645X+tqJF+CKw1JyLMJNyz8dn0pmWeW7E5gcduQHCe3vSWXymWZ9\ner2kbyYgaCAfugNdFKGzEwQYa5/N1ZO+z7SWmAW66x2hSUWiShaKCZuUm1rb\n4L1rQHYsJ33/R8ftFVNwPxcKdhZVx/NEUXArRY3GJRoFu8ZZIBagme/DTJJy\ns3fHUut4OljaruOrQvMFWJT42zKSEPPP87e4hNqb9/ibjGnBU+9UMgP4RR0N\n281Oma2phHZ5uTEkOnZGvHKfQNPrQfsWB7GY0tTWvqPpDyuOuIs1jSCcV4Hk\n8XJ6WHwIWh7KQ/WoZTxOfbATbWoV0HnUixvdgT2a2wG1nBgQPtzLTgDjDYgi\n1EQEsm9bocZ6cemXDEux4LS0tfa4rfZvOgfptBiylibNJahVjqDsFv76VfRl\n9ioreGUYJ0TFe2+Tj32dHlAibm9GjSlnQOehy5G+1DF96O+zFn8MCgcgeQg4\nmemHfvqrjUrvtAOb0l/nWFmrDPn6abGFPtIWGcCLjGCg9Nb9kCpvkh6I4seg\n9xWezH9iSXyS0UlCU5X6FDU4IQZM6UurE3potL0UTm66Fo/ZI4N9S96qvjqu\npPMpUfI3ALQylNQZMwbuScs4DZ4SwLwDor+T5Gy9Gt0qAda2Omxu3Ad5ehwT\nVjdf\r\n=wGNI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.700a8261a.0_1609880466605_0.7112651003685391","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/card","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bde4996d0a5cd2d318edc73b755ab19519a0fd7a","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.766981c15.0.tgz","fileCount":19,"integrity":"sha512-PPiImzVT1Pwi67nXS0UgQVpKFXk3IPfaDKC3XKik1DOWTrkm2fwVFhi0/+xQcgXp/OZ88Ltz6rh3HGfVEfaITw==","signatures":[{"sig":"MEYCIQD2WaYybMFRB9Im/tbXnIgGlWLMVeh1basrJGHoK9h/LQIhANH1vJdUSo/J+nanMuITuP9xJxF8RMy/EBxpgQnB+T2P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrzCRA9TVsSAnZWagAAi+sQAJlh+uVWVYJSmOdHL/h8\nxUqVSz4fy4DCxn3RRv7b7juQJxkZKhug5fahljA6XaM/h0MGSLIiOjaXvvUt\nffWEGB/AaYZl3HCWbmNhWgiNiCCWyKhmfB3GKK0Qny04kt8MrLiwOR0aBGXd\nu3pxtQaZwsTzzEYz8O250xKZQQBlwO7WqIMchZgOfQSqrrwTS9kTj9S30GiO\nep/o73xNE4F8oyOKihENbaRmBcyhHGIDbebKhmOmQTmDZBUK1mKQdUUYmqgj\n4fQDeDUMHhqFOEQbU4jF3ZINDYYXfxGV00kKsMmPOJuaa7ec6USehTNJd9/O\n0UE30kqAndHeczfQQN7FjSyVaZ0bCgHFTW0Cvva7UIstcm6pg9F6UIdMhNbX\nX+ecpgY6BLso7R34Y9xL/FzbGhwWhJV4S8LwChk4qEJQoZztBf0+PdJ0K/Cn\nQR62PC12K1AL2u1p73SLMLTW4WdOPNjRVIVFbMYvETbwF/QTMX7wZZ9ZcqaL\niyVmIIlQwMgA2AzC9mOFSXttM4wYakrv2qepzQ9GrbvjmiJ9QatJl3Jsnmf/\ncZ/Mc+L0vIjdweXr+WKeIqex5/b2smq0kIlx1EFgSpceFyU/k1JS5JzNBjXh\ns3uZE06Zv0hlQwIZAvUHaQfx6Egji92H1vhbjV0To2RxQXp1l6iCknhJ7ucH\n6lfN\r\n=9/KU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.766981c15.0_1609886450638_0.4680959463608245","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/card","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc0e9d5cf73f450322cf0235cfe4395ef6f3aca6","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.b28c576d9.0.tgz","fileCount":19,"integrity":"sha512-mqvRYjjLqCfDn7KHjw1blvyN/NRVS6I5rjc8kE8phXUh/7EntlOT1pQBkMWLZmX+whL7AGnqomaAU6n7H/sEbw==","signatures":[{"sig":"MEUCIGKEUUpmfnoptelF/yr5Oo8yfjwq3KayoxNQphBJlpaxAiEA2UNibcUQhGXRUBXxN9UAUfEk0NCW+4Ml5zaislkl+1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O01CRA9TVsSAnZWagAAyR0QAJSLP13GHlH0hCccrudP\n2CxNeRuxpnWrHLGmOK/92K7SQ7GeQJDOc8LvYHxAZA0HJqDD4uzEh33h+HJ4\n3ghpx6MDehEDeH5P3qbofxuKrTezVDn7pDTT2zpfncDdoP9+DDkppdmDdxDW\n3XvfBIuiyN/Cfp9ie0hZJQ/9Y6YMxSQU8zBpkqM3cMjdUMLG3R6f9W42uhFr\nw8BL6jIS2XTHkLw3ufTO/iq7FComC4VWVRE+IrgGwipxUUqRbdSz0e4HDVAb\nYzL16v42jAFBotITa1hQ5MvsutgGii/79VJp01sjdt0/vuB1tn/x6DnquKXs\n/5biGOVVh472bXu6IzsLHMN1scikvXMyc63VL8Jn2v0B7fOEyzN58jPehxn8\nzztrcBZLVNx4/F9mn6L2DxgGtiykNrqDF4+E+pifiFfLg1ZmFEER8Kv7f681\nAFvCd+w6WZ6H8LRWmALi3K+A93nXX8vnaCCCJ8ZGIkbJrCWWwNaruqdFhwGw\nv5na+y/3H2X5kEh8YDwoT0nIiWCZM4a1tAAwBO/2ZNGzrDMSkGCyplvFQY0V\nAwxLC6uhtLsAdjZbgd90SEI64k0wY06zDUDSCl/Bb5iC8BIHB5ytab10ccJt\nncpvKzXr+DIyURt4NepVYqw4WoR1dOWvmQj1g6deG+3yMQCSFayNVRx4U7i3\nKBUO\r\n=H3It\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.b28c576d9.0_1609887028875_0.5672274187679218","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/card","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6695c32e622726211bef9b3dc7d74a2ff27b334c","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.968735356.0.tgz","fileCount":19,"integrity":"sha512-D96mtEx3N33pcH+Bw9GEmZCAOl1TWaDYwFUz/Gsl/fAIbBjeeGAmRwd7Nyjqtck/rsRbPQtTtomWdfF8Xg56gQ==","signatures":[{"sig":"MEUCIBgQmcvMn0P63iKX4alQ4t1wip2azSGBzMZbrdoXau4bAiEAvaPvVvqaDZ5d1UbQPJzWie5TLxLgg3mXEuZST7wX5E8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dx/CRA9TVsSAnZWagAA3KUP/0dUiGxSSTUAQZ5hr0gL\nArzclb/fQS/ch8IIyOLFeD3gh+Qal7HJvZCWlU8lCN39hftptANCK1MS773A\nWBY8wUYTurY+NkdMFkBsnCeh5Fc+OTp2AxZ0wPvvw0JSoh1lRjm40ZgrSLB+\njES5Ksn9RZh5sYbn6hztCWgqqDVZIbkQI2YIWbipdh5x2OEgmyDltw5lmPU2\nL1EjfJHJERypjKH9c24bSildInS3X8PZ94CQdxL+1Z37SpN9b9izkRAz3yfI\nnEeU4NgVJKdPjvxtzsmil5GqCd3nkcWXfU5rr3Syxd5cDw2REkHx3Spe3MKC\n5yCkrLBeZzIv+hGHE/39g35tr30wZ+LaAuuvkVtLS1/fgu0OyVrK5fJOFIPz\nYAp1I5ESTaRVUBAhKeho3IbqFlE2Cjsv4wtll0eZa7uq6WQM0pKHK6qjDMwr\ni2QDEZeAnWcP8o+wn8TenOvR6ipkYKKuU1sTt5wW6KkEZgQVIHyc1OVQQl1j\nVNVzZu6UdeX/hKR/5N+JrVebMhzNsM14jYeXICkNCqhiUXt98LAjFgKHgGzG\nYothhVXex4dkMyG8ud3HklJdIkBmFmsVUvKRTluUY1K2tXdEjF7ksruLx1ko\n4RGqvnzWTSvtCUP2zg1Rk2wx6QyBe2Hg5uggk15sk9M3k14SsxQ7hImm56B/\nANm+\r\n=Al3v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.968735356.0_1609948287259_0.8045610096119142","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/card","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1fdf840909e738852dec25413b36b47ae4485a8","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.c5e18b020.0.tgz","fileCount":19,"integrity":"sha512-4oFtLcekiTYCD/3FcI6wVAD1MGvmhfb1wjDN6IbwnZ5ao8x9DBqpx6Hmvrh9QBVDWJRH/kCks1Ao2slsjxDX7A==","signatures":[{"sig":"MEYCIQCDInEoM/ipe7g0jOoRkSv3jQ5Z7GIiRKOC1doREG10cgIhALrJGi7kpdql2uQ67K++eyvnhwamrGz1cluLGwhtrchD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMsCRA9TVsSAnZWagAALmwP/1vu4mDB1ywMqDpsd6/r\nFNfNaypGFglrqhqFuX8MkpIc6ayMs6iSVE7oWQyz5SMOupKPXz4bVEMuiAYT\n6XI5toyRwWOsCfZKeB3V1H1nAiCR8nc6Ot3Wd+y1BwqwkpIY3Aa92FfNQk1b\ngUCkhspuCqkKrfiEx+KDwhydNiQO7FuXa5hpeC9XnHKcHcwlsNzU96aWS7qN\n+YKr0c2nGSlftAcvJPcoyoBmzrHHdWu05JZaiQeaJ+ref/Kan5Gn6ln502H0\nEbJY0W2A9rhYD5LgSg6epTO/jk39WhxbDTvFVPorJPiWLK3MCy5qZlQuYT+x\n8JKvZ9CA82+prwUzDgXqqGkhPqJ+c1EA4epH+0mrCIlLq8OaLvIVCHtnSX5U\n3mmuYyFd2qRpJPnWbpaEjB6ALpmRKZVBlhvYTH2VROxWi4gfVCONTy9QJZTd\nbFG+Tr9/PAzUEvgm17ZhTAdD7K7zhI+maovnkl+KErYdP8TwmHRl+WWVer72\nGSmCvR3f3P4zWnFC6qH+V9ipcuGnDSg4DjUthxOiuPqvf8/vGHBFH7aGRad4\nKN11PRhUh+3aTCF/oGbpIdEogXIEVmZppqzxFSKgXBvAD/LhwoulUv6rbTtU\neLPniO/U2ZfWywdKwdfIQ7Xq1DUz9P4FFLE/ms2kdfnW8HBNxcCWqRu6Q+uU\nD3RN\r\n=tAhL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.c5e18b020.0_1609962284182_0.17833279854002626","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/card","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"383ab57b5feb08d6a45a4597c8de499e6e662f28","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.bcff8a66a.0.tgz","fileCount":19,"integrity":"sha512-Q6gB144ndVDUJQUEzxErUfpR3vRnftIXkXT6XU5NEmw5NbVLW55PH2mUz7Pl3JMX6wy97VlPGPKYI/J0w7E28g==","signatures":[{"sig":"MEUCIQCjYpEyJGuekPoEoH4ATejg/7Qxe+TxuNEss8kbzB0BrQIgbRz7GrA69HiuaR1VEkxL8ivYi6wBz5Ecp704DBs2BIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h0PCRA9TVsSAnZWagAAyNEP/jG9fFlSo0y4fwamrVB+\nUJGhDYIpl6RgFQydh6WCJPi2CEO5AVgakdVBEY5nIH6nH183bhGbtBWFYuqM\n+kSZcEbckomVocfyOQThAV8FXt5I2sa6m4DNHLAUUoD372YewxAeWPE0eUNk\nuM+2Pst+yHle9AxILmp3ExUYYKLxrSoEYj5XsKcK4+uaYgTkyLnT1mkgg/Wy\nCUv845gFFFgvZrEw427KDvwwEd6nOCeIHPR2wOHGfOsUxUyr3LxdWJlZPuNw\nCrXBMyS2fL32ArVP9K+Y1wYcLFzzcpcx6e7kIE4Cfpyzc8ooQYkmkflQiFZh\n2xYHhmD5oSyWUa8K5n/zZ5HnwSeFdYEGizSXAaaYfc9GdVu/4PzKldmZD0s6\nZ6N+UdnsQPfpkQ0Ta6iWPTBKOFhWUSXSYkScGU0l6o6Elr50SMGHRmMLHvRj\nRezow0t/5IX4TMOpZ3ddtBzTcBVzrJtkkO+3kRpNZKwylNkvPoTHytj0bkuB\nATc8/SrLhjjGajyfPkpyWUuDf43LlJbl9bh/MuyfXPhMirf84FK2bdJaVfV7\nWBUaKYWSByBt+X0Wa+MXGUHzv4vQgixkocTnd8pXQ1KBOI85WZqv2PZQf4T4\nNY6gHOwfPMqCU+Xa/WcgIm/0yTliRfsLdwH0e9sM+wctx2HjbZan5riLGfes\nFPD1\r\n=hJFO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.bcff8a66a.0_1609964814716_0.9286734101354204","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/card","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9037dc87591be8cb7552146786313ac7ab63edd3","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.79328c9ff.0.tgz","fileCount":19,"integrity":"sha512-CnnN7qAd2PZ7HGXLq54zdSK5LGsdAnCg+a3u+xZISC/1An/ivEs264fBUQodMnG6Z/r+MU4/F5KeivqLqQo95Q==","signatures":[{"sig":"MEUCIQD6SPsr+Ee1RQYi+aqChnuljvR+5/PHCl0X8EKRDQ6rcgIgLx8BbgM9Ig17coWc/NHpfabOMZDUT4FKMpB73jmj5DU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNACRA9TVsSAnZWagAApn0P/1MQsN4MzDXdCMhad/r2\nf7NNK3/KjfwmsPfjTgLYjE873xSTVlSLY6sJt5V2FICLHsZHsbStDb8Hn0Zw\n36D5jIiOiHROguv7G97SxUfUIkmV/pkhw0xrmA0zKTQQ7fUgE+GZO7YN2lbG\ns+qFa7B72xx0oQ7R2ex6cjViuOmLhzl2tQfN7ySwO4qzf0gp9spVz1oQ+N/w\n4f1lI8wTDLgANyveFf3oQVuHoAysY4FHWt4vSyH2XzA086cL4x6lW1+zdBnv\njlx0UCyE5mZZ5HJS0dniOfHGTO2X8mvQ1LA1V7vMzLt16RxDhMiyJfhci6fc\nmPAM+YAoIoUvtwuaaGnb+dWDZUlrBpjqkhYx3Vdvv7tD1gDs6RE0M4Y0bsXb\ndmrow3ZyG2i36to1+y90u33Afclxk+vPx2IbSh9YfWQpHW3ORKl9xVXH6non\nTl2bFXUDSleulrT+m/ofNSJfFyEddw74OJxU98VvWpfSNHC1snMZNJCb9XjY\nSg17MOdIC8aJ2p4C+Y1hx5llC5tPo8hoi32OD71MxZ6X/azhVL+9pjzW3CmJ\nmIVjV5OKhQL/OBo/drce84qNgii6JO8WePDXYElvLrThSr2Pf2LLpk1ozj7N\npFplYFQHdrzr2r2xf4VpE5KsnbKgFNpxWOOkuTVe4n2nVcFt0rRBwFFA2/K6\ndgYf\r\n=OFSo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.79328c9ff.0_1609986880279_0.24570030489672634","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/card","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab6f1d1a24b3b5460f4420997b365cb8c2c4e87","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.121e1f303.0.tgz","fileCount":19,"integrity":"sha512-mm1E8cIcoPYBayUPyx4ILp5SG8mRmCxSOyX9vMkWqIOH4a4f1yN5txBTiTpN+G+dtZL9ZkLDlEMohUXz1e0pxQ==","signatures":[{"sig":"MEUCIQDzUSAEx2K7iY6H1UvnNjQsuUL4CSKl/F9IgS9RntbtpgIgddAoHzCdAxQZtACVsivJDsZ7zdyCk6gVsRTTOLmOBZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95c2CRA9TVsSAnZWagAA6bkP/jovtk5qKgGlspAe69RM\nhyHldaW5Ui+kDuIzevo5R2Fd5ug/9hYQQLVsRkvaSN0e9UOibueoPXnLwQp9\n9ICeo+CbtxT2y5Irk3ypT4cpfNdbQmHfiXrjCvG8h0Q8cZSNkQ8C6ls/utL1\nC50Xvh/pWNT0jOXQnTMMkJhsRWhCE4y/C/grLrmrw/MN5tWQNmj71WAhjDbq\n2JeZxn0y3px6ivkSfdVhdTIXZVHORmQeOe6+0IXlsbempGd92g+P1/GVe9m/\n7lG4e03zzpPxSEp2a5mfMVS9y8aI1ebX6gbiidA1nGWafAlHbD0hOzcSNszn\nKQNdpUj6buRX7jbAh6ldSUZBYu6dLhiI2f6diQSvTCbgx4lP2zFcXofHOCyQ\nBb02KRxRiA5korpk+dVuIZnPJe9ifJZ5GMaSifa4jAOAnb2jxSeFW6/3Q8Yo\nhUHvD+ZMht7Iz2A8sUQlnwCKAjPTTR0Bsps278V2wdJr+8ZTlWdjy1XwZNW9\nkTGjzsM9EIfrGbSES1bPnox4YQ4qwQvwTTq3t1fpHyDbYX6z7xirvsFBmy5O\nPsiELZQASwr+lUs+zR+VltNcoVp0FMkxzPOaqlA+Xk7zcQLdXtAUz6fO7nmA\n1EdDG93kE2jH/D6IMU8Ph0eb5l/chEqCrtq2YRGMW1lwCNCVEcqPGJGeXI2U\nIQDW\r\n=G+J7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.121e1f303.0_1610061622015_0.19967046620211093","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/card","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94e3a7d8672acb37fdb9340cc373398d5dbe4975","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.abdd10065.0.tgz","fileCount":19,"integrity":"sha512-WaHD9KPPniTKu/AKkukF7OjTpJ7kr85NmLdp2cO1MysWdM3uyb6lFC46gQ0rkuHALj5yYHf7tv/+CY6DTPMA3w==","signatures":[{"sig":"MEYCIQD6kp1lPxinr84Zf95HbF9VpBlduGtLKjf+vmv5hetihQIhAPMfMWSetVYuNbLp3Qkya3hRvvvSdDv2xcdB7BggUXvj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JvFCRA9TVsSAnZWagAAd54P/iwsaphAWhOZ0YYr3AnU\nrhc2BlehGxncoV1qYL4zlAXSUd7omlts2zOinFzwRzcrsyReExKKamsbOxr6\nDNaN/oHyum0nPboLe9WBOmcLX9ojSzYRbWMsLCXU0xwVjt707BnCjim56HUd\nvV4Y5y9qSDiLDykeZcvUFu2ZXqZWcV0sbaty0Aj7b9Ez9olD6JSDA4tnrce9\nfjm6U0RkXkvWN6qe2GVSsUYLZ/l2m6TKe7j9sO8Vxo10Z+3fTXwXx5GLA8kX\n/WDxXNBUgwVrYMBm3dBhpQddxgfO+AcmhG0wVuzWgHB2N3vdBnUH+4GaToAy\nQEV5HuJID3dQYg86dKxGx1E5+2X53rHHXUOyYrZyYGZyyrS5uHCnZZB8a+ro\n0V6GIjQg+qpGF3JGRcCvTP6KEEsOFbsiOoMY0+im3umINr8pnlWhsUyWS0ik\nLT1vdtM6TyBJF69w/ymNayerSDSTWCdFMP+S9DFGB9QUZSSBiT85yAYxsyJl\nStKlC9U3xK8KFd+Ni//ZLpE+cxqIGRj2j5ErDX14mrrxNLLocwGi+VEIfeFQ\nG6bYesDy3BV8IH+SIukNpk9jHMelJlXUMWwgpRiOZ2++XKepsv31p62ll79i\ng8U8R5II+vbR9WQ/8hwZTM67NA94qUfokKN9WcDBG1ScofT4dGAWyDvPz37W\n+hTI\r\n=KfcC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.abdd10065.0","@material/rtl":"10.0.0-canary.abdd10065.0","@material/shape":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.abdd10065.0_1610128324978_0.30855667831612754","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/card","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5d5c613a3ab079bf8f86cb0018a1e8abd1d83f0","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.089de519c.0.tgz","fileCount":19,"integrity":"sha512-IjIGR/31567o6z6dOTKw8md+JTBNo8irBlMlz928scicPZn9DURY90felJ2fpKx0PbI9A8B5eNzCs39QoxE6mg==","signatures":[{"sig":"MEQCIDGcQuFzhxrIitKjixD+5lg8JBOl3855arPOWhFxqYOVAiAaO5v+esIRCcHqsMoz39NvG6lKVlg6z2ltlH/hLFQTSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NrTCRA9TVsSAnZWagAAMW8QAJq+JbRBEUyZz3LZgPd8\n1ZbPW1N+h0QQHeL5NMSAocmSLvGnatDKEnM1oCsSnSso1VXD30tUPfMNBo27\nyrB2W007krK47yYy2zLhkh1mAELNRP3lryFITH+i74eyRjtJuh9yUnaLV4b3\nj6dwdmTaWYC5Vf1JQXyk4Pf3DPrUb8fLqUWxZI513tM/yaeUgg9Go4zmwihG\nddwY0R5vE6xB5mcOj/DfpceXg2phHBPX/o1pmnmnxtwD6ZvKQZeZfuV+Fa0p\nHQRv6a+uQw2P2F6Rhum/av1RR6UMgtAOqA74hJae8zqRwIjEKGrPdPhDXPGm\nzNVIosasIR8obJ/xFLw/M30u5kg32daBxEXRkoCf2FicnTsQKJwpJhRtbNup\nCOlKn9TRG7gAHjKepYas2IcWyCXh4yuMu5N7pw615bUnkrkpfUB0Sm1lasMI\nnCLRtbqHkC1Pu4fcFCzN80kZBsvYFeEGXvawPFBpej1K3l9TZe/tzED0VnWy\nQpEPknD2GfGJHrnTzNzcz+jDntBqvyWfL/ZISk0q/zLoqAzvkws5qb9zoau4\nXmUEUlcgP4zT52clbounYPyGVlRksfb1Rwcn4iQac1CilDbce4wPkvfRQKEJ\nDdyn/5R6F2CshodYR03ROViorg6zGpmyZMi2Dlr/PIHgdk17ETx/gIzVdH6H\nFyP5\r\n=15oG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.089de519c.0_1610144467451_0.7460707995063107","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/card","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a03556143d3fb04a88e90566d77f61fe9448557","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.163119837.0.tgz","fileCount":19,"integrity":"sha512-rkuUMD8oLefXrorh7z5bvF+km8YljsCwGpe2TJDkTEE2SYFPheUrCNM6rICymj0EUy9e8d8tMuUjL/tQ8uFgfg==","signatures":[{"sig":"MEQCICCmJcwuel2YT4L6UKVhDgHtC1WQW/tmjIYyRqEaKbAJAiBoeto+Omkr4vPCsYJi+TZXdXqM25GtsK3SdeI1oEXe6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6sCRA9TVsSAnZWagAAPxUP/jcFcQeLp1nCT6XIEfDD\nvk/vjbRXCWeyLrGOqHxFhY9ZPnOx5PX/q6nb8VhH40O6pfowlBLWGKZGS6o1\n1FOI1/iIdVeejLgjMrrqo7qQRyHLaRHUKvNktW90qZ7Xmi0VQym8RQ3A3j6t\nvss3k6PKNPwKlQd6feUkbVUJJ/dnEO0WPvPmHQ32UrXmXAQMo8KW1whER3pG\nUirWoIUu0gmKLmIZKwKjuStfg0ybYkyOzIrPcSS5GLIid0dPE/RLcvgZLxjz\nXonMmDUBrhk929HhlyWluSBlsKzBOJVN7N9WKfO7E247SNaK5SpX/jtw8VaL\n+rXY9ynudsJeP41R2f/iXxvIb5podLKneYwjJa9OF9PPTur1OY9zNrwLDiTV\nYOJUsiNZmtVWBp8RVZEVPEPWNg4wVD9pxNUlhpljYCAQVi6Vp3gRphf3bFzQ\n7MZYDRG/cTHViKuXtZaC7OQRD2tpjGS+UVNFX/frjEpIOv7Fu9S21eSphpPE\naPi+z2N+k3DU3r4nx+bVXE3zK0IuXYidc9ntss69rvQkFxHxUN5dol9c+VjL\nV2n/WB7b8BNmsTLoSEuWPCZ0rHvar19GhdgqiVLxhafpnbME3McpECUzBFWE\ncnQuOTlcVtOHLgUyR2fuhd3EZujiCI/aAndqAe26eyGlQBsbG+PEQrvr2pko\n+r4Y\r\n=5ukC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.163119837.0_1610149547810_0.2862249643829602","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/card","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e50182b3224e6aee41137fbc000c93b13a69da2","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":19,"integrity":"sha512-NliSdqW5j7sEJStTIuTd6r6+A8ARarkaAQmRzACQ2JK8KDT/pUuxzn76qk6hK6j8sjsXaTFL2LuXxn6VHolvpg==","signatures":[{"sig":"MEQCIFrnuWYLqIgOWJ4UwU6MC48bZPrurSK9Xdfv7hc5krewAiBtVuUZGhW0ASAM2ZI3+xYRx6BlvfFTL00xeeRH5Vve1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HvBCRA9TVsSAnZWagAAiS8P/1v9lXhh3Aa0CQZTzFFd\nBm6VhBnquJLxSF/5ymmg2OKo7jwz5nBBQQDiYyKTRP+SJxIXoovJahwQldCa\nPotIoZW/y/KXg0UW88RfzeVGXogVCywv3dyAznJZQBWPhYAvDfBuw4WbSDQj\n4FvjMRTZkuwp64B7Fkijs5KbLORuUFD/P8Z/BZj3JvKFyZikLuA7GlUNNd/j\nqyVWu/pAqaTif+k0e97j4G269hNNQoM8zJnAWh024C8ZdJ39srPGVTDoEdOQ\ngz2Pgh2OIH5qXdGJqhnICpxrIqGqmn9liY/0QnSw2nZBwEBxhvwFFO4MgxIn\nKkGSq0tzHJhhoI9ylKWpVoLWSk7U98HkD6eaTKQNTvEfSd+t6YN0ajAjv2uN\n/H3l4JQjtjsjZfKS4ibIYH6fbLbloAoW9xnBnTrrJajNd3G1aynSUFzxTUl5\nkZe/Xiv9IIOLTsS25E3VDLN819+RVQOQNUsDnEA2FAikWsRPg4E1vemA0eLO\nlohaBNxqUDSfYaArVjVetT213nbpG1kg6Tg15lOIXjwrmYcYEZKL3+d1AYV2\nFsKiwEKbGMqiJ6IgWDM/GWuevBXsNlbR3VIf/gtVCZyn9AGCMDuzESxVVqyn\nTRvGAnz0Y+0MwPQVqsZlfv5m14c6dfvn0lydmj3LMUpHL8vBSkN5vC2Mtf7h\n+OA5\r\n=bKXW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/shape":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.b8a1a58e4.0_1610382273305_0.5364249393900418","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/card","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"446bdad29db2e8484d8cd683f864a627b0a2ab3e","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.7584267ff.0.tgz","fileCount":19,"integrity":"sha512-gD04pmCkL2miRcTjk+jjDnHhjkWnwC4M3/HlgX9AC6tWJnvZXDyB4ny+gkeKxgZOxwMyxdLoKmK0d+A4bWBtnw==","signatures":[{"sig":"MEUCIBR6sDft5ANyp52BwxW77D9hCMasUXPU+SKB75GhULSwAiEApnTa/eG1EBGfjLTnSXsILixZyOLiMBWypUh4ijcQQq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PeWCRA9TVsSAnZWagAAmXsP/isSH0UZaCsqqdy3dLzK\n/8bczEbsaHJHOXggEo0JPMTEqXVdRwh9+7FxpQFB9ry5w0C+j+KVEWwk9d4i\nycBkQQ8X2WnmHzT4F17Y8K/eRqzsYeYcCUxO9EjgdJWuQ0fpSWYNkjUQVq3V\nDBVg7VtpA0RUY0c+2Lweagq7qzvGA7/GwG5+c6r9IgQ3BA+eT1n1lV8caycu\n2+Xf01hlZEBIwUTc6F5RWulF7WkMXx4WFSWqbGFSxXXpOqJKs+iyB6uQH+oC\nCbp+TiMQVXOMoDqF+91zzN1hIE+bM+uqB5XZ+Wleh3IaK4/UbddzWXERv/qR\nfWPsvtos19iXzqE6WfJG+3Rm7+CLWD4vhyrSL8YD0zqy1f8LXTI/TPgNUgZI\nxApmG67NzVDFLpN7eDiEvcR3Kk67URkDNYl/ffd3wvr9EAWZGSvGx65TG2sX\nT2SNACijE79ZhMvbFOJ2599IaUsX7pHC+W5rZkzF+S5x4T7GHYKlnOvJ8N8U\negAevMZGNidV2GF/MOkCtIA757gWHnjDaHSoz15xShg7MubJo71Lnq/9irSh\nEyBcGEHvLVpRh9ahnkjoEnTpOUiISZrnZNqRNzCZPy2k3knoglu2mip+l7Eq\nVV78EvB35qkrFJssrnRZZ6eqwxoQGkeYuw0TOeakoimUTTa72iuBsDTW4UEu\n6iSI\r\n=aztg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.7584267ff.0","@material/rtl":"10.0.0-canary.7584267ff.0","@material/shape":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.7584267ff.0_1610413973588_0.7977549295810893","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/card","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ead611df07f5e6e3a52c8ab04e90d5d27c21cddc","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.251ac04c0.0.tgz","fileCount":19,"integrity":"sha512-5N/8rnJA0qHnIlurT134SWaLJZXnSMlNMPAKZbSrrYaUS3shFdAaUtOBFpQwFR2tNkyM0Q3Y//Se1KvU6L3Y0w==","signatures":[{"sig":"MEUCIAdWM+SaZgAhEAXGh+5Y5rHLzVIFUbQU00cxsyDk1pTbAiEA7W10Dh+nlM93bn2emDYuhNEy2D7YwkIyhZOVTODTXe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f7DCRA9TVsSAnZWagAAE+AQAIt9dddmrk0nUuCKTndm\nMjd5ixSWtweNHWk5jdNAOHxlBRLizM/z88gZxDGbn+peggpv8YjRTs47/S1M\nKNpEt5tpTe6TBi2rpa7tA3qjChb++2s+tXS3zs4DaP6QpIFSoGPSXTIvuol0\nkYHhflmV7x/FE/Ob6+N0N++mREprH6pckEqSJ5YFsc5dYPnh9cDo96dEEndY\nFZEl7OHQRHPL15N/xBtSfKT5nIgS8b3TNHwisfRvvayPd/mQ1P2vEsG57vyg\n8mR7tDr7OguDVzk2fvM2sgM5mRbmq5GxNYKP0tv+il3sPoK5jVISxHg6IKqG\n63uR9bsyZQGR9lFpM9Gpw49/D75Lhi9UxjFbRgSgaS7d/KutR1L/gZV3SOPR\nZw5KLG8ib4vSiVYT+iyYtzGB4Coq3xKuc7nGM0rpyyo4Vb8iEnTLmwU8BMjH\nlUjNCd0pvVG5R1X1zRjJeyyywevckPvnwGtoIks3SPlpcr2OT2dQI/t36rxH\nz97RDJ2HTDjf/AN51Sq9zo3z9/UAiS4WTEZxYh/GRv3IQG25rtr1tf4sp6ug\nwJ1rxgiLutbwqiSixQTofxCX4XRg3brrCFREkjieRcNgwKARMFqyEkLpvJs6\nuh2y/dvR1OaH17UnLJhc3lfV6KwYjV/ynfYdc4qbwt862dsN9tCOIHGh/X5u\nUjZy\r\n=lv5c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.251ac04c0.0_1610481346695_0.1665582653639348","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/card","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2455b45cfa2603debc8d6d5ccc7f9ac9c1f408d3","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.772cc1068.0.tgz","fileCount":19,"integrity":"sha512-71g5yJimv77sBAz3A9T1jbS7eizuHpO2GLuShVsFqM7FfpYCh0FUxg4D3vZ9rbwu8Id4cjI0lfEvZR3LSiKGtg==","signatures":[{"sig":"MEUCIHzUu3x4bTEUUN9rrdyTZ6bqxUDus+w+yZmHbC/HBUHvAiEA8pC17a6ZDmkA2amb2+xgFuUU2Qiq6hiTT00s24/TQ4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4tJCRA9TVsSAnZWagAAaHsP/AiPtUP06yI30ochpZqN\nDeXXC2czKzHqUkWwhBhCSxDalo1M1v49md23hBgm1NHJyHIszqMuWnJ1TRAw\nL2x615aeLuWRJZ35AymWaTxngbrIaaMNAM3eciYUzmDpGIAN8AZ/FwdMduQR\ntOt6vkf92SilIikH7MxqRiXUyoVdMpYcS8Pwo1km59yXVQpJlf6/b5OvGJSo\nLWZv9FA6Agcjeh0mtRYULfHPSeG5J/9RMgzi1PC860KV7QBrMlyXbPn3oSzg\nWCs6LNMuxiPk19DzU7w1FI06SdTDbHYhAaEvYKEjp7DAhg7i4VPj/X9a9bYo\nQKI/+1ZthrDaeLNoA7/KVpbvM/zFDfrg9h5fQHBMLn33m1bDxzQ42zIYvKxj\nVQVl2SCwAzDnbIM9gMAameXpZob+bCSuOZYknOx3Vn0XZmR00LeVknn3gmuF\nTnOaftQMs8KAvmgkkgLE94JUxy9zZ3+JfQ6WLkZEVn7wJb2CZaBo7UVzVUsb\np8OBMW9BExnv0vr3Fd4FBP1iD7R4mrmIx99t3NwnVh+O33U7t4WY4tKJrnuT\nmRtsmoT31H293O6IczauPzMAEsK5w3cN5iieGnJOr6FN+3mST27YlMMmxWAn\nl5maPSBX9Ct6Spuwnpw6rpzWp0L/LtmU/q9eQ6L9FNbbLq60KtU3NljiIe4O\nIoml\r\n=BVR3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.772cc1068.0","@material/rtl":"10.0.0-canary.772cc1068.0","@material/shape":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.772cc1068.0_1610582856865_0.2743592967480646","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/card","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8695a1bb60bcecde96b51d875e227c08c372441a","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.fe13dd130.0.tgz","fileCount":19,"integrity":"sha512-REy4wpUlMDLvqEV/UhtLkT4WeYboFVGJbMrXp+9kOWCQq4054Vr/tSY+GtE/Iwt7VilNtrBrXEzo4dAIO/52pQ==","signatures":[{"sig":"MEYCIQCPwWsmaW2XETSd7RRsKSIwhZucvAw8eKF3tgn8wbMQaQIhAKp5VPbpTNVyEl2YzLWkoHTUd0xwEVSfbhKo3FaK+rQL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5oYCRA9TVsSAnZWagAAmxwQAIrYKudstcUq68Eqf5zj\ng8VeCGYhHzsTab6OIDXWa2utOB0GH8C7pp/XyB/+7vT2SYUXBpvkUy1y4nkt\nXj8BztGY1VZ1s87D3b3N1HEufGtg7KeOwJYMXCMcPNdcrOjgSuYWD6mRGqTm\nncZhgyxs1WdKiIOrJOHzJ2hMkHqMsgyKjinpqWbF1QaWgsQc8yFZH1QIrD5j\nZvY2TZDdGUqHmgwUBucnyGLdfVyx0gSq40t4MVTd5SwdY6rZJD8r5Hs5EE0V\nOECAu8YfNyG10CGgmBp24zs2I+WKqhiox4kPRUNqdMPU/S9+/7U/XkB/zrEo\ngFaZAmPHYNuRKYW2wibAT32ZKpvsrNskv00p5Q6QAcHmaAkX4Dsovbd3fN+A\nKCdb8fZy67lTinHdHW7sxMT4lGE2yvRpHBa61ZVUrqv9ZDHjoVy7uwqmcwFx\nf83SnV7alnFJvyljI3aKrkXfU5cz4dyqIAbEurI/pXIZp44fjd9VtM2jnQMV\nsLRIyWxypOAlYyWWF+8e4UPpwC56SRVMSpcFt4k5O+8GqLY+KDxpgGXQqH10\nKQgQdcmxtdOiwICjCmii6RLO3RUU4MWVjG0qUkttVhzu9b05scOncVHN6Jln\n2H2szSjlrLgvztDy708e9H94zP4JjladGwwDA9oCR5J7W55bYxD0qtwZN/TT\nA46u\r\n=aAZo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.fe13dd130.0_1610586648478_0.6559741911346506","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/card","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e0c083f500da757bab7df0ce3dc617eece7166b","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.c7c5da28f.0.tgz","fileCount":19,"integrity":"sha512-1qOEPTdS488ePmtqgOdqn5wRJmMDWnkblS4Xt7VJfGhJiKcNMrB+0M5CmBckehwNwNDC7bw65xvJ3AhhoPep5g==","signatures":[{"sig":"MEUCIQCvC3O9ALLT3LsgKP96YFM47x8SziaZjp1HlwSRnmHckQIgdUZniMJhhaBGg1erFqIqq6X7NgOHqewW4GVWAldi3XI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+yCRA9TVsSAnZWagAAE84P/0WigIin8IYVXOr0bJv0\nqT7DQxJNMUuB3KRgdlE+fXXAd+tjk9KERGtjP+FOMHqlx++xw/S6ZlJdNzK/\n8JflokLIFSYI0fZpzTQN4pGouB1aL2CURuQ7QbUKgvtkmbmJJx2HhN9NuACU\nVSu0nCQPErV28nTSYysxYN/QhRsbEB2UdX8W121q12IIoApkbNmGYjxAiERu\nS9Z/Y7dwcKgTFnWgQDpO+ao/0ObUHZcd9VGA0icmlIQsvEiL1jWwaNwRce/Q\n2dRO22TuZTPZ9Ydxx0t3cvrIZaT4ZJ8YMEP11QKqdPN8YI62HqciQgE/0HPM\nq6zJ7dVcx6sKF4qg4GQTSBzuw8ZoU4PMcuInTAJ502e/oEBQz1c5eACXClmN\nvuUzfbRjYT7FRS5WUzfnqNT9L5Co8BukxyoAbbhzqHelcJPqp976BbtpgY+Z\naFfj1jAeckNCpymZL3CMXH6G38t88n51tou4nfRQM8OnaafDOkeBsFPu5AbM\n8HmIlGFPKIkfvmya+1uKIeabgNRBP/0OH3x5ltF1YcxIv2EiFIolkxX7e8XC\n8+aDnYBzYL+OQbVugZCW2LYwp+9FI6+UkIUJB1JgLc+I4/w4HD8k6bPBxOif\nqAYZ9Sv0ttxKSnk173RZObjHuKnJNAyu3gMarlk1tHPob4McnsFn9HQIdLgY\nt5ii\r\n=Om5N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.c7c5da28f.0","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/shape":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.c7c5da28f.0_1610588082084_0.7208290396483663","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/card","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c77ed732c310913cf20f390ecd683dae780acddb","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.b2faa116a.0.tgz","fileCount":19,"integrity":"sha512-qCh+LFe7Z7dPrwD/5FRIMogcx58/ZACZ40Ev3JJmxXAW5sW0wKpN9n1YAzSOh7f+zJB5137QXYdfo2T7rR5/0w==","signatures":[{"sig":"MEYCIQCjbVlyNsUEwrShkzBmsJUG9vsuNH6LE68iplAEbgdhegIhAOWwNamRg15U0DoteXxSv95Z3yYILhvXtrAvQGFWd6IZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzKMCRA9TVsSAnZWagAAhEIP/0CrnRZUEjLx05i0kP4l\nD9WA0YhXxRxFlyEJiRoZzAqRbPPVqLNrPzc8d0evfSOeoWlFNdmmKE7dVqLr\nZEEmUYzCi7UsiIuwk79x4/mZV1O0kmgpSmRfsGh7YFsMnSp+DnYpja6ojGIE\nEOBcgJuaYWv6bymYmTYTEtnYdGn/3obM8Ig7D1pPUnVLPzFI0Ydq/5JFy+Dm\n57Rwfj8sVGmebElM20HLbIIiCyeDY5T+ulNx4VHhXo6FwLjYsJtHnY/RjWdw\nW2J/hAVZt1LYxnDHXmnQWLWM1MzdB/J4Wis/Ctt5+1yDoy2gC2Ufy+KymqXI\n7uCvaEAsC6NqGjcxxoqxDrcDjrcfHZD3JUCyb9RUlVpuiz/wqVuzVsosHeaF\nwFGKhrjM8PwG/P7xWFTuTWaXcjYX0ejr2fg4GMHBwNGKS7k9jqBKurNtun4f\nzR+JNpIrASj0lDEXQNL0iWycDfrXQVRU/n2mmD4CHnsm1V8p3z/EfHfs4UIB\ny1jMoNuA5X45TXKQ9IoEWZgR11LFIFLbbnS71s/QHXoJM88Ugt8KJd2Vpfdr\nDMMc+D5Q9T/gI28aexMlpmzsxdLvheqNYTe/Ro/0Gi2CFemCdHT6/RrnkiX5\ngc1vBxBFgUx1W59NawAIhlgCxoUnc20cQ7yZws0qjjplXlCGhmdeoafgP+Gc\nf9qo\r\n=zUvc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.b2faa116a.0","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/shape":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.b2faa116a.0_1611084428354_0.2419144948134564","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/card","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce19ae8248156f9a86c22d9fbaa010e7a494e62","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":19,"integrity":"sha512-N4NQtj6k7xxy686V/wNjsnrmDNtr2Fw8eB3NMqeLZEjBxCNvekiYYg8+f6vLEz8xC3RI7KFBvi3VZQjKsC7hTg==","signatures":[{"sig":"MEYCIQC1y4lGMCaGyzK2+sB3ZPoEf90kZclyhA9i/6D+GXI8iAIhAMO0motLCY8TWjK9gOziwQ+XdeC6agU944N117aLxbDm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2McCRA9TVsSAnZWagAAINkP/3iRLSS1Ib9NI3ihyxYs\nuYCH6q9hQnePcj7UtAEdStxplkeQbXRw1EVnEArVgDC/my9icckqa56jQkJW\nEW+MxpKkw/c6mrlXjBu3qZOmmS1GwoUAxWFY+MKbt38kp5Y/uxwh0hQGKkYG\nYR9JnnxUOJ81PEa+ZjfcnR2zbbMqAt2PllJm8mccBh/nq2qAuBwOnvE+NLk0\niJrvw2HqfYyfVy0O4jIwam0ZiET22JY18Ohvuj1sc/5n1MjBQwiG1G7NGD2H\noJqPKdaGSrnESpdnNTNfRHly57ewrGeFWiZ+QC27RX9qJj9cPXnz7TMKCqIG\n/hVYjIi0nnvBDAN/eqd3tMF7W0RGfWj3IdYDTyHvQH8Asu0bKQpiWx34cE4N\n6d0KZVimjEjlCEI5Gt5tx/FjFj7TFJNuFPrTpYub0bUwr/UPd0+YHqANtlkC\nEKRePLO/1SuGC0jY8kMCtGKwz38+NPPWSbaUYmSEFTvaTUCPASGG4/gfGoCa\nVpi23QvSmEEzU5M2cWAgCRDu4YHRSPf+cSo+79LnlNhmkRb+rfzv4nL1l/cD\nj3fHAYCLtEdJumHEhB9KavT8bfzFo0Z5LzS7xs3X7EYRmLdcN7MRdqy4XG9B\nAXaFBOR/AzTu5nVNarH2es1eap6rU8NrkeEPZVHsIp3CHp9nqYMhDRI+fMJy\neP/d\r\n=5b2+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/shape":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.0c95c9f7b.0_1611096860468_0.012878600796065065","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/card","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9a426950de27d02d4ae23a6c1ec849c5ad57036","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.5268222c4.0.tgz","fileCount":19,"integrity":"sha512-kJOg8pKgIzAnbfWtP66UsfBUaWE+C+liBGxfjcmuCJ1mJTvc8BuMFOXhWFkcyeBUtuKm056t4wKZjhFNSAyGiQ==","signatures":[{"sig":"MEUCIQDK+h1/e4GxgvZWUY1dI66VSLYXg95643ghK2Xwk4xc+QIgatQ3wNXmUS+rxyIb1xxUWBEsVE8D6KUpdreY0LVN7Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIJhCRA9TVsSAnZWagAABFEP/Rus+fM01kgi45s8UROe\nNC1sreV+YYSNvRhjTDE5cyWC1FGlDa47bZcq9QUedyh7x+idjBOKxdqQBEou\nrWXMJM8rA9IDtvWvdHurlNetD2EsuWH3ArOgEYMVTbAKeoaJGvvQIeOaLh2R\nXjMiUal1ngVJH7J4TG+BOk0uQHUfSKmjlyA9XZUtNPeoUS6h20S+yu8S9IRd\np5/rm07HWAJGbuu08AxP0b62d46H0zrXsrpBC+EIsNGYaVVFDkOiMrs4sgg+\n6IPGb3fGvfHorhC8GQaeo2DzJ006CQLLP2jqUSyKuF9+iO4kOqgsaHpumY0D\nwHHh9C5dBq7Nz1Oa/LvSgM/EYxJ7sGvJqIVNp7IuOyNuDiUNZUi7wOwKWwq1\nD3oTTsRBuHLzNNNZ+IhBBkAmqwCkHSUHzp0sqAfj6cfK/PqHPgYEc06kOZaW\nr3E4W0WFaIHled3vJcOsRYzs0n3y5zY4Jvkn6aM29lDnl/3xpgw1A/NTp6fh\nhGWB/8HF3nKiiGY6fMewtocq8JSXh443nMo2iJQrUir/GO2aRpUvifuFzm8S\nf+XydRIVlAMZBIvYcNgG4qfHkWqpTCKw4oXfhUho8G8R0m1/fCxC7iEuu508\n+8a5N0eNdg+ZZT+zRTwKlykrkT2XVJA4u6Vd2atQzRMBLiU2wCHumI5q0ynA\na5uV\r\n=a1lH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.5268222c4.0_1611170400981_0.5275782355457923","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/card","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd8654673796762f35a6682330277bba89eb8df","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.2ed2d829b.0.tgz","fileCount":19,"integrity":"sha512-P671ueDjdHu5xPTYtNST08gi4bV7x7Q0UvLdUyrH/x7AlZabNcMuDHm8ccfDtacN7+qjU2t55LdDNBdqJhIXZQ==","signatures":[{"sig":"MEYCIQDreo1IUJaxU3uz4kXDmjjJr70YPoxs7q78IRNR3EqWvgIhAM3qH8FO9qLADNKXf5Qyuugq58PSji93HYAbhM4aTTYT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfzCRA9TVsSAnZWagAAOnwP/2kPowjZ49dS5zI6a3AW\nx7llZMPphKfy5kR7yYX4qqCXaiirhoyiTktdiOBgxipGCPnEsdmv01Rk9AsV\nN4+tUm9zed3gVpGCC8UZF8ubM0rZ/9TVH+THpVVsYWhkZq23w8zbrTWb608Y\nursF2T7Kjfqg3rZyePQqQNcBOPcbY1KeQYEfJHsKzeY9j1IrZPEq27574EU+\nks9A3BQOGVgZowr9COqWpHGh3SMfcdUTDIeFfEdtxseQWzvm5cA0LZC+rIwY\nejLVusxi/T7OGSJo5UeY3DPJZrKwDpyZ8q2dya0AJ6dQOdXIhcnCjppSurEE\nS7bN4rsbYlpJWWknXrYxE0C7NHFx2CEaDksCH/lAVBvVKMX3sgrHDa1GxBaH\ntWRt1VDJnmC2Eb2a95ETumcXo/0lyA5Fl4OclHIAAXB9ngxlwf8J+1yVeDLO\nRvqMYetudfDAs3QuBjSE5YEjm/T3eQEKwSqQ6PNpas6Vb6yEpHGpUxzNAjU0\nAmUa2wOcl6JM+CCV2dceylIPb7PStTmRKIzzp5SOA/JS4h7axnoSOiy83w/k\n2clP3PrCSHeL8XxUyDaq58JkX0ltgLjskDGWGoyYnXZvJjsBpupb6VDgmR4G\nYuXurfYCPtUSHc+7mIonldgGmD8kzisTyDjqBz4/wUFWN8WUiKgLrDDzuhZ1\nzJfS\r\n=Mc73\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.2ed2d829b.0","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/shape":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.2ed2d829b.0_1611184114424_0.8607631774986513","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/card","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bcbf68c7b22b3d54ff7f1ec51a6a2a2d45e9dc1","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.df00c2b30.0.tgz","fileCount":19,"integrity":"sha512-qj8Ic+z8ws6427pYqk08hV7MWIMqUjaPU5anUwbJWCK0v0XlcnJjdvKZ8RppQ0s5MtsKpB8nCiXG8yV16HNsTA==","signatures":[{"sig":"MEQCIETb3itbxvcRzGoqXfEfCInl84qfHCoscnr64QaQOhxAAiBSRKpm2BK3dUwXE46GgjwYYlsI1O68iGCpaAhgFpwBXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdw1CRA9TVsSAnZWagAAjwMP/RWRQkgYkKn4NOjf/JIQ\n5lrxhZfaj4q/jmJ+DM2DLYAmeXhQcmDtsC6ijdgrq1S1uu4f5ngXJdDCMguk\nSAs4fKBJWlDM/Ghx+63aC0MPHJWhd42ryj6DecK2bK2e/XIGQ82fWZYBcxKP\nUDNbxjjTB/UPAP3fPV02uvG+Mu/9+MegK+oPJiH2uq0WvVAWK8O316GW7+vC\n8A4hNOkJXTO/bOzH7y52t8dP8BW0XI5NacXKjTZG/bkU6la/SEw6LRpEa9uy\n/Wm8qB2NyU8ST4uhThtRgDnnzVgHHVdbJmwOiOY4gH82V9lE5ijq6pE2OoqS\nce+D+dfKI889U5lpZ2ci6xTsVVaPEulB2wv4l8Vj7LHobaoH4Jeb1mbdfjSm\nCtSyuZmLS8UYtzpY2gytjKdyNlN+V9ySNM4QLGPO4lEegi8/mqPkYbEgOiJ/\nhX8ugZ1hQv+gyLf+XTremUVVWQr0thucHRwLAiaU463wLccX9tuSmp929Fky\npzJd0BcggdMxcMpvNj2adqRC39a+yI2zddj6pztzVq1UjsPkNOcvR1GgSQ6U\nlTQLvw87lhVHZ9zjskDzCcZozXXOGL4JMtVY1rdP1JWbzcbLKRVUMsNj9XzA\nANFkONCRvnAdFDgXCjg7BpFwtWdxdYm0p359c8tbL4E+o4lhDZddBger1vWz\nUPz3\r\n=eLI6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.df00c2b30.0_1611258933020_0.9004107312352907","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/card","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b891922f819552a814031dcb31af68766e174616","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.fd61b0476.0.tgz","fileCount":19,"integrity":"sha512-/joj4UTlQ9+fM6Og6rIe0rl0qpNXbwJkLFs73lbz/hYHk7GA3onRz56gYk7F0toV8XUitWyRBrQO6CMJMWXeWg==","signatures":[{"sig":"MEUCIQCrrXH3/8BoTY6kGWyy9IJnwnd2INqHGOK3yXHmLdPs7gIgawJ6KSaBshZ8Be+O+6SheEs/nHMQ7rWdH7EO/jaBNyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+fCRA9TVsSAnZWagAAoAcP/2/kFMmAaLArSv8epZ+L\nxOAS+N+RfBwfQVwkdkF2udODtfOhBDkl8BxxyIfIblG1fpGyUbMd2T1ysj/T\n2BU2WpwPyE7n9sA6++G2Khy9YT07Yx9nMfWx52xYv66Wt10ahfceKRiITN1j\ntU075bx9VTTG8HAY12uupcXeIgKwvkm3H3SxqJkqs/Drnr17Pv9eCgJcoW+E\n1LdX/r8+3MboZyc/+0ZtMYWRDIxcgBQfmJxNfGM6tVs2j1ypSfMQ9Rh2+AA8\nYt02JEkdTRwrgvrYWFcN3rJHyvD6+rs9t6JsSMFZgXglkDWvV7lYutn3wpAX\nBFXCQ2ghlARF3Vs3mCjzsNrWySmq/iipDuC/bgkhdtUML/1rQ1RZ83n+nL/2\ntejuNXTgOZUOMImNUYk14zXMexVZzHCx01tnoe7MGC3Ao9Y72ENoMYvLgLuY\nYkm59fxOKrQx6qWXDRaUqmRfDq+oKxX2c9KvybDn/0Oj1Vno6akp/X6Y0Ky6\nLNsAcPZ0F8L1Wuw+MJtsGCWSgi4GjE0gKiXm3VJtcScjfNHjGGATGtyICVDX\nsoYBUU3/6a4Tusj029+v8Oc1QjZ6rI5kY8dZpkf6+vvuXVggoDjL47dJlL04\nSw3BcTrgxgINanI2N2BVj6FsXifynK5M5sdek2xecyZNMS9Wj67wXhHA7zU+\nMj51\r\n=QimY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.fd61b0476.0","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/shape":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.fd61b0476.0_1611259807524_0.3868510091042199","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/card","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94b98d4f0449610e049576c66d0891b863152bd5","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.3fb3a0265.0.tgz","fileCount":19,"integrity":"sha512-vT6XEzvyl0k7pBNg1pqM05xqjGYrt6zU2v8HkmGMwtlXD5nnvSlcGygZ0iu7mzdXs+2usEBKUbo17YfP1J/Lwg==","signatures":[{"sig":"MEUCIF1O2t+NQpRqr6+NM9FpAzvTZh2U2g4moyRlEVGNqw2vAiEAtdUIzsjr4v4qCcEHYaO1EpzrecMjKXSIX//MLTrhLaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbECRA9TVsSAnZWagAAodcQAJjddrmZcri9QIBdwRZs\nI0KL0B4z1EBSc2WscYIaT9pl7ZDyiSiDq6pebiiPxtJ6HMuTSmGYvK8HnroT\nGcA8lbeyIn8sKxZF+PjF+aqJ4QR6+hzeWh/gHQlJY2HEt3B9Tt6dbKTxSgmH\nafC1b48msXuuiKgkeKPv69MMEewKSWUNPHV9GtgdC7+tvZPW0I5ry2PQmJGd\nbOovcwtG0+4VkPK/KqEeuDCbIDgxb4pvjy6gBkwu+TsYcCCKRUUVfKVb77KH\n+ha4FZ+6FZD3S81tAM1CRz0hdvT7M8WttFyzo2e+h9wnBKDsbdUnRgmfgRfu\nR365nTSWWmKu/hptNZ5iz/QBJdXLzx8I8/BWGY1QXcFeBrV5jkhV7h7m8cPz\nHaGBjtJYLuEKLRMwPX3EFN+CVbqHNfgdTsE1n3usHIlKFI6wpLiph11kWV4/\nF05DX9XtQlVCWtQdI4zRW5VJIDDc6Choq6nq22RCEqdbq+J55Y6px51jTXmj\npyT3Nfxa1HcVBG9tzS1Y7tWlYrdhO7FMyPpH+dGNyIMTYTVz+FxwXpl2mJzh\nr0++U2YtcWUMr4qxfBVaVY0kgJQ6DvyWMom9QtJBk6VRoMhxigWL1g7Bjw6m\nVIjq7podA4prCsxVMbHQ1XrdQvmo4R2hExAN0qf5B1mI2noLzsgdEQhANiWk\nTI5/\r\n=BJ6c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.3fb3a0265.0_1611273923487_0.3355297112171578","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/card","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"848e94db6f85238afa68bfcbfef77f7cd9eacca9","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.07deaec27.0.tgz","fileCount":19,"integrity":"sha512-/bkL5Y1zT3nbgIeABbeGtjRQY8diTKOX6CCmiOlWot9mePyN0HRuRVK4A1H1RhhtU6GoVxbBTW2fv1lBLQKN2Q==","signatures":[{"sig":"MEQCIBZsAPLpZhIJGg1dRjypMXWl9vD5jkCn+5HZ52Ar/hm8AiAyXqLSzcHr4PW52iAxO+1Fv6Fuu/GvOZk3YYbk5l0ytQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwPYCRA9TVsSAnZWagAA7ZgP/2xrzqmjZYjy4yiKzsY9\n9OYclRLXqYRVDvcmLkT1xGuttLqUTxh8MAhbPi321bE79pGYeOs5RkkMfOba\nbzv+2v4+rQuTDMnDVeRFVybNZrdO4sfC9EObDT41ZMoONy4h10kYnaCrCATr\nvb7Xr800zbIgWKIupWKHccnkujcvBMH+dWSO9Jd1unsUbegpGd43fi36a7Ko\nd2iNoYdPhkisGXZ9YQav0tVqcXNhHDWYy9t90G6X1D7skHBMlDjV3NDFis2r\n1ONzQ/AbCOUGuHue+jY+zVlBLV8YdPQ3E8jChlkcEI6GCq2v54P3jjOztviG\nPMDiI5N0B+bU7z8nxPYoDDYcXuCA9mvFgOcBvFyBb1ZtefstKoP+j+bZkyhW\njvXzyc9Ap3mMas2KBk2szCS2UztuSRgmCwiYe9IlDOsD+ICm8+ua/+P+J1r5\nYF4wtr2xZbyn1LXkLicFNeLjn32vuuefjVuv0gK/R+8hq6uwxY/wv1SUqggn\ndhZw4q+lhuIAPKM6nGt23+rT8rcIdOEs8M8Pjwp6uB5THj7q1XsX58SJYhsq\nK9ZVQ5oNHAHl7Q7yzu4ISa2pOxxocG6u0MIyGctjmIJBQKeq+gNBfpxz4t2q\nOmCYHIi5g//1lbzaCKi7711BCqB8EcisOLpIC8swSjGUho9YQd9gxBxGu7HG\nD4uD\r\n=exUo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.07deaec27.0","@material/rtl":"10.0.0-canary.07deaec27.0","@material/shape":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.07deaec27.0_1611334615987_0.7086157888979294","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/card","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcffe7794713053a75d92ea60965582c6fb6964c","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.d2959b16c.0.tgz","fileCount":19,"integrity":"sha512-x1cQprOCsQv8wTWkINleT5cy+kCcKuV3wLIDjDaQd85uSwBQGigz6gQvnBeD0cOt7zJ0LkprPrjZhRIiN0G0gA==","signatures":[{"sig":"MEQCIHLgeys8k3knLASlXfOfJdMtsLRmF4aHMPYg6akyJsMAAiBk0kJfkjFmaTctXQFYYDyd1h+wCrNculKJ8YK2vJIy9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx73CRA9TVsSAnZWagAABIMP/0r08rVImSXSu/TY117Q\nTvJ6YRbbJjtpvVS/akiFw4a2t2TSK0eovVcn+kAKVqjpwCh5ItllXaMRCcLV\nOM9QOcbmqlK/cbrldHIyWRHyweV4BXs37H39ngkGvfsbXNWv/NTOaVqB8XPK\niMzSY6EenYEKePWL3nNxfHTg/yIB0XVvoaHBDuGEDsAWW+c0h/NlLcssbZ46\nbNyvRkNLqp1LpLhqa0tCTpD5flXQyRSgg/46c/obCi1r/zQPT9Qf1igDDnN5\nog0nSTNA/vz8Bz9iHpeZb5qECZYkONfiw7qL/GopPinvCUITIGMg5kPvk7pD\nBvAEjG03+CYsEl+9LDgAgv+gQelIE5RfsIJbi63c2DmTPcgJo+xEi4IrR2GZ\nV7ddNBcEZI5BjhLKxpU5jQTGcKWTfwMRgXEreM3kgg1t9PgOSjXtjBcPP9GI\nJstHubH2OpzWZhKNkVlgwNp+o/84NDJORoxLcgB5sYzuLx/myFqIgNEbCa0D\nwt9T3D76XREin9ZmVLvwMl0xYqNpdmLxfBQ63gRpGXJnBrideMhbPgS8+jK/\nqbMrbHjVUZvuHxHH3n3dg3I1P/AdG3U3WqPesghRneF4tuRGi5AUO/DtIbHv\noBvTqU/E79FgkRsEc6xjfOl46BaLS2nVtyBJCz4jY4ktnlFBwim29urV9JZG\ncZz1\r\n=5xkO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.d2959b16c.0_1611341559136_0.4425534937355311","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/card","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b4c829f09fd6144d4963ae5b7653b8bced075b1","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":19,"integrity":"sha512-BIJbdRKG4CEcpNzN5aJyW84CaWyQa27zaItzapDVXvpt1dbMwEC+6FzCIlRiqV7h6Zambcpaj1lnN5EPY0mnIQ==","signatures":[{"sig":"MEUCIQD4LH3zWHpDoXvCw2k4d/q/3+DZqBmEJwHOiNhIOs6VfgIgL7jgndi5AVITch3/jl9ga57nKbwkU2kAF+bVIuJSQtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1cRCRA9TVsSAnZWagAArEUP/iW5vj1M+tGrWPaMOgoe\n7A8iOVacInXYZ9z3CRK981CpWFae+oW+lulpLiaglsVfBYZxoOyleotfAoN2\n48P+5YqiUnjr1852pKh9FuRos4l7YlVlxQoA5bmvribjciHg8M4TGNBE0plX\npJ+2YaXCbrQN35BVzPRtBeCF5oy9TqsY1Y7nR6/nc23XZ3qXfBeUXJNXInLp\nZz01BB8vTw4OOMhUlkdkp2bTlE3A6NmH+XyydHkpzbU+2VN/5BI3WZa0sK5X\nd5aUiK+WTMaoL1rINmRb1xgAuNwfFv4eo+Was97knTKZ92JXS/1EOOjiMln5\n476EOxPn08fXFTFZkuqM2bcYXe5MQ36Oe6wxkMbvrADKqW4ZqqKKsm47ClrP\nue0zocyXcJO8C/CMwWigsB+Kyfokpk70aRa77MrLwSZno3juQQoBcFKgJkzl\nAJu69YWG83hFNXUefY7rxGwrA7oyQEvvrMyZEWDoQ225ofwRAoQEtHtTZABT\nfJ5NspRHbMZ55Kf0PsSn5J9p6J5w1iqqUUgJThJC1lnJjry3SJtzsJQqewK4\nwNEBbSnhrX5LAiZXMGq7kOxa9rtSYh2cOidznbBVygFtQ8/+48Lr9QA37jBU\n9HVZH63Eniq73b4SEalR0KEUkFPNEKuIemtwTZGb7ILoWDa8cZ4bBiLB3rv5\nThhF\r\n=WEtu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.75f3bfe7c.0_1611355921124_0.8982504057669589","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/card","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"086f42cb01aea4724cd68aa18a77a1b80f7b0157","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":19,"integrity":"sha512-QCUsa1ubcgSx4etk88dKD2hbF+wHiCAJLd4VL/cAGLAN1cpqkM8zrHPOFgclYvy7fIWE/srPp6yV3xToGeLDCw==","signatures":[{"sig":"MEUCICnZFE7Yu1T7+c9WVfJBLxcVjV1iqzarQ4u/JxoE4tX7AiEAxQllGW0aRESi2wAchksTxmijZfWLTRValORreenwYYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2F1CRA9TVsSAnZWagAAIXAQAIBkpR37xGpqTpicY7WH\n4K4b+0zArWyGC6hN+xl246cb5S8aZp+Ym/hrSRg8sTKgBt6Fhk0cZOivuJBu\nA5WzSnT9pxCA0wZAEhxlq8kNJku/emF9vXT+STVPpr16E/L7BoUqeCyT0eRP\nrIkwOL04tpIGi8rVTJB/TTOw4n0pP3ZQxhLHDIsi9vJRFKEonGQykwclueRM\nmIs8fBJHSXlnmGLP0Lu85nxy/KiZeb3Pbaid5yI1lWhkmosx2gkjiB7A11eJ\nlAN8iuL7mHjyKBUysVKKjtiL5aYFPDKzXI7PWxjApaFyKvxKZk9U0MZayXcr\n96BJo3JMsrDhBR1j+zBZWp8MjWfcIqgnFXj8PhDfJnKIVUT5qobiloISDxBy\njJKr1tDN81Y2mWU9OwH98w6LKhfAeRm8w6YGrO1TAyW0PtjSImzXYOC0pvbf\nDDVKoK3cyrh/IKPe6wW/xeAWuq42WBFjtokhvW3MIvXjGA1ZLxDpXczwcG/E\n7gszkOtRR5l4fJDX9udPkv9yJRKjsVVMd8P/YYscwbffyoGVZ2zH96LffN07\niMTdVOFubMagotQGUAAT2ka+Wsz3lw91HMndRI9iXh9XOP8CoAGw0W7nX3DK\n0NczVkxIqzwJ76Z7BMuOObxWGo8IsRi5BquNhRhda7q0toOSb1A6HSCDv+Fp\n5tVZ\r\n=3zii\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/shape":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.b9adb7a0f.0_1611358581138_0.26634106206485897","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/card","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4735c64f1ee29e55044b88b44fbe817e7149778e","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.d29ec2862.0.tgz","fileCount":19,"integrity":"sha512-Nlg3Yn2troBInd6gZi/r0NkjuT5yhRm9nleFO94+QmAsfcn3Tr+/6YnCOwd0ynzXntzsIeSxIlDaoLurcf50Bg==","signatures":[{"sig":"MEUCIDUUKoan4YDllzuh7b15thx7WovsctRHSSyygm6HEXLwAiEA+vGdXZqJuB7iEzDrav44FPEE+Pj2LU9B+CL82W0UHZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvDCCRA9TVsSAnZWagAAPxcP/A64rZZqirTEeqCuTJlh\nAOct/VQLZ4qVdnHQrbRPTqtbze/VJY6uErjfPGDbqjpjYgPyOEzYRn+GYVDj\nUcgLh5HC1b0k4EjUJWnIQNexm7ydHslYROK2mFOd/Bl4qlaJPeycHuiPl1Y3\nq1i7Du7KKJOcJuQGnyXgg/kXocnD82YZNMAzzhziA4Cjt1HZrPj3yMmp+3NV\nv+klFhdAiZsnSLh/42LdoY1mXmcX4kgEBa9sHmLFecDHxHu2CnAPa3WsMASM\n2dP2YNHdBP4dupAgLGuWnA3Ia19T9brV1+pJsRuTzI5wU01yKd5a5J/TeNFa\n2ZZnTAzlQNpwZ3vct5rdA8FXmsHSwexPkyl1cFA+m0vZcUmoHR47wGjsH5mw\nGOpbt1V6o1oPtdvXhE04H2PQkBsvAyjVjnGGkWPSB9lYIGbs5k+Zhiqo1Lqw\nqylEWbaG3QomwG5BJInjRfTboKtK7iM62iqZWthiWbJZhUPfqiLKxaFoXRMn\n7bF6+SUi/QYGL8f4N6ve1yAMH3JhRQNOxfJBs4gLTaC1veOXLgsNskKGJfKg\n/gXf8Jy0rErXhjdbf19JwNnXMgSFb0qRytHRgQo2xTzKgHLy7YmxbXSOcceb\nPqu0qqYmcnnr/+iplF/hWL26BDMb4p3bxKpPdzKR+ED6wXSWsWGvbTJmQYec\nIS9W\r\n=Zuxt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.d29ec2862.0_1611591873722_0.360554527857891","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/card","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b11626d5ce659186e45a42efc540aeddac1a90f4","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.96be07c68.0.tgz","fileCount":19,"integrity":"sha512-OOOHwVr75rRX8LRCd/5VhELU2WRgKQbXZD39Q7zADSbIPymia0AWVq/yydhqrj+52rIcYHnKUPJMQpgR+x6Pfg==","signatures":[{"sig":"MEQCIBzXM9kmm66EQ4XBKzSoakBiD0BDYT5AUFO63hUXVejrAiAbMKECjgeJPQnZowvIhyiwzhvdVPn4IUg4+g1YfnS/3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD14FCRA9TVsSAnZWagAAHBEQAJ0n7eg6MobxAAZ9KBw2\nAi7VnGzxUaTPyGS6Q3gxaFNP9rMhSP020eFPAg7NkaGB3ZqXA9oWMIfFuFe+\nRnhZL4aKLh+WZ9yC12s6866sZbuG/pXSvtLWgEURoOB9q46PvTHSyG9ut2ZO\nBwo8GY2VWclUXXPCrhOQJ/IKArSzSWMTuCHwY11DLfmRHs0EajyO6Be6pVDV\n7Md3SmXhxj+z86tWTcREIWqLb1ieNArXSgqiNPf6hdgXvX5BZERtG60oK3LH\nwiZeeg/Y5gCEe56xUamj5iuN0PJjypAM0q93vY7GyG+TpzJT7+grS5TiyQ4I\npHfqWcT67O8VHlJgmxZBEv3ctQI1h2NClRFrb+VAWTmm3QvmJVsCDVpZh+15\nHFNlg4SK8KxLoUDKJxOvzhrBxy2wHkS5/sSp5+98W99kb2vp5JcqmipQSbX1\nnWSFFt6LYGplt7ji5QnoSwsiFEgTYpnQtYqnSi9omUrrC37xUHcW0jlVleke\n+MWRQhuW9ZVkyPmEhLQtvjkEEzbjC182xnrsG5u+upQMIhE3rVX83TEp3Mz2\n8Vhpt2j+O0A6O/imGlrhNhrXb89mLxoBNnQbvKsKS6te674xeCmISLZFv0Kl\nIBHBkyRDObStcayuS56H0Nxq3y6h6OtWbWYkJbcKWqrk1eKF6hwoY+U8n5Ld\n1518\r\n=8Xgw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.96be07c68.0_1611619844241_0.502420503092678","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/card","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25bebd3cee03fc33e1b53152b314b7453623d591","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.e383944e9.0.tgz","fileCount":19,"integrity":"sha512-cJrfbxEkIx5CL5wrmtxiUHqafdpBXR39IcOr8zZQ3tYiyB+rP57u2YeKaAjyyDut79/WzVXY5joq2Q2aVsLulw==","signatures":[{"sig":"MEUCIEqaRBK0qIty+qWq+AuTIsRY1UFyqSXCCr9MEECH50+/AiEAnzpG0ePQPq/HCssxskwK6nqa1RL9oJwzAjPZfG+8TvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3Q6CRA9TVsSAnZWagAAnQkP/2ip9i2NwtfmlG6Wtv6s\n5RbUPNwG7AbQsjZhRGCayX03Oec4tW9WGG8OwPqYAKUj6HpKKj1XLlGnhr5s\nAvf1qmGwFGPlBrj0XQ8pD6e8vCduyKwt9r1JCgTuOQfcGLPJmL5xCcHYV5bn\ntUcd37Jo0pOTqXbSk7QhSD09zMxYNr0i5RUdjIFWp/MMtTjGswFgIagwKp14\nxbYkgtkj8I4zMhip5gbH0X8CxcWDcu/oDdSp7ykudc1r36U+HvSX11mLV6In\nyKi4D556wrj0Sil1/5bm8pu+cqB96cCtTCja3/ZDEzntNLhIL0E+5YZQfKYv\nrZMCkPCxnw50nkIhjAfWMdCluSmytp0dTNcCZlIpIeDXqBLYmVE/ixMmceQO\nj6zo8i1czmrKlUelob+NVfH7vo+PmJBfSskS22MUuSfE2nASVMxWquR4HP8Y\n+D5CwC4u0P7W3tfCazXU7nIl80uhCc0IzOAF14zJy9Mz02csdOjh0BOJk/xR\nLyMuC99p5fnxHypwHg9ugAdGv3EGmsuLLTz8FNtvP7780E/fEuEB9X+MnJaF\nvSoYD4lV4TSg+U/iKqAzWSo/9ynWpioW/n57DQyfhmwmvaE2/o9A/vUEOmOw\n2NV4hJxw2AK2vpWHwirbKlj78fML77yAf4otxF9WNvq94aR1wKtNDXXT4/bB\nBpK9\r\n=7OvT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.e383944e9.0_1611625530167_0.9444239948581215","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/card","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f973e229278d65d2314a1090f1c66e49e864b55e","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.623af861e.0.tgz","fileCount":19,"integrity":"sha512-/NJSWdsmC1C6xftrgOMMn9jgZiiD4xixiJ1tm2fc/dsr5psPMIh7HNyiLY4F8T5CAuhcP9dg+JG6KTnQ5JoNPg==","signatures":[{"sig":"MEUCIEr7wZ6hS2cyep8feTAqEbtuCVpidEfQrGk9p5NcavYBAiEAxpNbCWWVHFRsMMmAziV2d1iMQ4cnb4edPYyKEP1T3h0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BtCRA9TVsSAnZWagAAcIoP/iChMOI3lAODSWaobLmg\npn0Ua4VDBUFpfj7KA2aqDOEmwAX3t3XOqSxt36m7UJZ83R5x1mmREazOn1+m\n3ljtAqqmm+LE8sNQNpCpuWtVnE9E2YNd6EwEDR3QIK8HrLgaiFFRlxpl6+zK\nRQy26e8EhRGLpyI4b7M377DoX1ztpJW3O87J0/wzRgkRX0DVh1VcyUSP7A2+\n+7W2lbVdLNnUrDq/lquumoS5pMZYwhJGpJclstw8aQCal9SNPQNTPB5rVbmN\nGahv10NIoPxPzC6wLpo7bx9Id0gRzWITG0kTXS55Qz97qnB2VcjxmsLYkRB+\nkuxJwX2Wl/I2deaU+lg7pTORouOBmM0wh/QcBwFxhoU0D/C9YmM3kkWmxG2s\nJvEKQmSlbH2Y7woMjoEYTOsWutVGpwRIkgy9OqJOwaFVUOdp3kP13dzeZ/uy\nZe4bODEIloSTvOCZydGbGNA9o24X4R9YMyklPEg5XA+7A1UoikWXzCQRDNXA\npMYNaguLtnBjQ6YNCmewqAVxgT+FkGoJxtv2OkCGLhHDMNOaVNamKz3Quk1K\nbzETf8Wa6hZcD82yT9zEcMMQNDkWrooPenVJVvYvq5vYDUzUNNGJXIkIktLC\ntVFvfkvxi4x45b3RPhi+7MRRAlSU64MZYH59XCxk9K1OGFHCWcIJrJr59JIK\nVVVA\r\n=EzFK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.623af861e.0_1611632749242_0.19954863761967512","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/card","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be9bbe431c8de4b5ef6952e7163197194e82f5a6","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.6863fd43a.0.tgz","fileCount":19,"integrity":"sha512-ILKm7rkRwa/IWm6cQzamXk+U8zPXlYgppuggkMMMhrRxJ2tR5j0DklAN8etxbDznw9egfJ1sXNuIGabDSPVG5w==","signatures":[{"sig":"MEUCIQDviHTJfu26KZT0ET6X/JkugvsYC5mzVIVcpb12vrzPcAIgL4WJopIXfbrw0ypaVpwYtXDqMRvOZO74a+BjSQRvLyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIrICRA9TVsSAnZWagAAK8gP+wScRyLcnjuFvvemyCZ/\nokdl96un+Dnu/AO3cuZICwhHyrklmOxszyctcCRvdzG9FF5td73GTYl6NctH\nOHy3TGUrnzGcCImfjpZuA8n85qIHoAGGXun7ZoM9sRN/PEH9zscoK9NK8BpC\nbmUXO4BQjnMWbewUGUc1OvgB3COO6bDIGwB4BbqaajUX6UypTmyxP9gvXX+s\nPuEm8xR2+zDYRZ5Jh1AZzKVfNJs3RLBoD4LxSGLLhnlT1O5VtM46TYNvsQ/T\nnSyTK2cVspXKD4/10Cg2Gsu00fUP57mE7usQX8Ik+37vu0flH0J/r2wtYFoN\n/MX+TAzogWX2UGKvX+gYQud9OZGOKYYyzUoPhOGO/RPDsJmK6PEJpcPhtOxo\nAGedf5l0FSbnqrrElT05xGra/vxqPTLVFeLALrauZImAgXRbmbYFj47oXweE\nEwmfn0W0n7HmAr1W7kmKyQ2lsNDwWxXL2PkoL2dvvZGqr4XAVA5tHkb5G0r/\nZuEF8gj1FqCEqbwnoKSvOnvPJzecRumD+D5HvshSGmP50k3WOmhgCai8llX4\naHVu/X4JobnjgGfq1pjGIsJWIbszrUuFRlyh+i7OlO5ep0XRSDNycsmWJr3b\nn4QNTLUNxSM0kNK1tCa8oz5aD+GhIpeaBYr2rLExJ95N9M8qwpldo8GX27LR\ndGby\r\n=1c9/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.6863fd43a.0_1611696840038_0.07934120299162806","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/card","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeb2d28a8f98641b45c58e3e2375a03d1762cda1","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.ea55b87ca.0.tgz","fileCount":19,"integrity":"sha512-X5C1XmE+5QK6m6NBCU8RxX4mEhju80RRP7ClFSukcWPcOtLA7d2lh+C8ah/w1fiZWC1U3iFbyJ7bd38gHu1wMg==","signatures":[{"sig":"MEUCIQDrolNoaF+Eq3aHxk51b0cMV/pB1128XdQkAdcmjT8RRQIgcco9/NQYM6XlZ8i3G11am5Sppz4D7ZwemItrMG2UVFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKniCRA9TVsSAnZWagAAgmYP/34ETMq73UWH+C2DsA+2\ne/JNHg3Lxj/Xks5RZ3lVypmETqjROyv73dOSu2B5VZLxPpwqzg1SaPVY4oqp\nndgkH0V83h/2DibGl0sCUZgELM4B6XD6uG0vIadPsdBFMIR9aBiKRyLa769G\nTZA/YEaf6PQww2I3DerbgJoEkodwmBWvviYm5M8kSOWzvrVSDXXAIWcdkiqx\nmVTzgKMfvQJ79xLqzeRaOj53vVsNTfNdBBQt5k1OW2808Dw+MhYRelSnlWQK\ncrny0nIBsVbq4wdv+dL7NOUjZYM8BJY+P2t9xq88PY0+ZIWwTH0KIwRKcQrY\n3h/+ZasVXNp4glUX/0OkeTx+RsJZC6pPPYECSRgM6DVO4KCItic7EBPB1ZL4\nIm5UdyEVnpZ1BuVpxr43XvDGlSA5bTxaBPJvFCx6VWgU/CeDaUVGsOSTWIyD\ncV2QjK2ei1wMCUF0OGB63iuxFBOP52vmPXIwsVOs1Tcq6kaW0ADjaUgKJ2uX\niStp8XfskXVw/aNE7HUv+UWbu4IKE1ELRZEwQlICrlDKiCTptpWgM8D1D1LL\nj01oHYkA0ScS/l/hKVPuNmTKFMXUzH4x6A7x81NdyE9Mx3d50WWxO7dHQGgm\n3E7LDXSdLBJ1C69AoDWyZfSyj2+/46EdMRCJr8mKcD4aawJ7CuLGqgReyVGK\nx1Q6\r\n=WjLO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.ea55b87ca.0_1611704801551_0.4440262915665081","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/card","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"830caeac0447e7b5eb8f6d067b329fa3b4115d76","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.e902ff05f.0.tgz","fileCount":19,"integrity":"sha512-TrelOL4qHR6QhHhBdEUcGBZpnJh8TCBSHD+NU5kcOoIEJ9mHIWPVj9OKMRbeoOoOpodtp2l2fckw7JL//tvf5A==","signatures":[{"sig":"MEUCIQCU+8dI49XFr/3VeEsGClTkxSisYarJWFMzD3p0w64StwIgEDZQTRiehtSf3mpra8mVPP6f/5eGq0gv4u1DxHM+jos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK4cCRA9TVsSAnZWagAA9X0P/jQvxcV7HxrmFi0M64UV\nwPSTwwKG/FD+o7YYXsmeScrBUjJa9fRjg9+p6WsWnlrEiirXCwrB3kC3mjq9\nZHL54o9RFTUPDdHGMhmshaj6fpqw4KSRcgwbM+Zb/8XNGSwUS/w6hozjcCKS\nafupANv/7T/yEkHLj0vtDd8kxA90eEzsSfrVWfjkU+GLrLdLQbik+Tfvv5Jn\nlG7QYjt0Ve7CKDGhP2V2/4AjE5JzLJmkVKGuLUQygJGpRrL/9CdDgWu4/8V8\nQje7DEJmQuYMEHSqqSZeVwvVTYEugjccEexC6bf22DlpgFrVbl7UhwrSPYcd\nECwFt66Gpg8+TLAYY4QW40tsFDnBVuXiBc6mkYgp2Vnv7huL8xLj6uLLnKEC\nl1IWebK6tgzsoc1MJg/Dn5Uvy7da+vii1NK5/7RWEws1TXDBpLQKjeWNKjId\n9KGEAG1Uc4gPs1fJ2G7OoLALxOrFcEihuPInqC2WOoi/BEuUnJhB5ycsdbVI\nst6jI7blrbhi05X2ZzdKCwdcWAwtlPC0pmrVwc4awU88UvjEBMW67eOoaUHt\nu/pS4sxfkd4d0q40eMGaFuvVxCLsF9zL0XOJ5PUQaTddVn+0fJvTJgsfNoob\nZXH6VpxJw78DRpCa8554TKyUjW1Ea5Yqw+XSzWXs+OVclTz6/2FLokVcRWs0\nQkW4\r\n=Cke0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.e902ff05f.0_1611705884485_0.012944100810350578","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/card","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e3306eb45c727c3a042f4cff4a5f4b99ae8e6e","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.2c9fc538a.0.tgz","fileCount":19,"integrity":"sha512-qFB/b5XWN0+ENL8Dchpwux5QYtd8lWtFt9AknjrZNb8kZc/Tcb2qzTywrZ+usMV5nt3ZWD18YkShvIrwTT0ITw==","signatures":[{"sig":"MEYCIQD/UjSgPAy9mQjMhKLlHA3qaesfV4sGTknrf5/eDqABjgIhAMnpx2/I+fgpMMv9LMnnma8BNKDgqPHincMvpSzdi/Uo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELODCRA9TVsSAnZWagAA99sP/2BrHMhcRKTJ5XGGNY3c\nBYme0l+uSvq8gsrBXCIvvmDTeo2fQ1+0MYy+Quk2g1jkPtzporeIStHG26/Z\nfhKM2VECX7bGJlqXpOKnKo9kj6OKXb4WRD/ZLmyzy5QyeqQ99+Btp/eMuOlH\nx2u0gFZJBiEBw8gNqq2vs5vcqdyCe9SCk2BEQozPFBhiP7yPUAAWlz8hp6Ty\nUF8RWx/Z0owyiQbqp2LiJ5EnrEVQKJ3o+K4g/ci1jyqWi7krXDBfe4ll+XZP\nWHIbmreyQ94sXXbm+pk8ebphcP5IaH/CQfXCVfkvwcFlXEGGEinMiP9SbIEp\n9U6WMOf1UDzTo80bHyVn9I4cSNeJtFt+lTZO/xW8v/rpndfnTEHOvY+ZNy4D\nK2N5MHHfaj1UU3uu7F4B7CIp978yaFr79S8Dmj8PhGd2yIxl96PCF0uXFIU2\nRoQfNMdUc/LucMmy3KIskJrviAhkrAH72ms7F6wHlPBAm5AlTKitTQ8XBpY5\nzSM5oqJPsJtVogwMlMespFkWExxiKoQFWO3bpePTFp8WBwmsxDUnUl20FUYB\nZi7HjxZHkGYPzonpR3G/WhxGn754iNdb4PYegpOt0ylubMDhnOgwaTbNkryZ\nAj1cwRY6xXmUMUWbS8IpgfRrgLQKQ/OnOtil/VhkMDHjXW5EFm3EgWSmIu11\np4As\r\n=TDav\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.2c9fc538a.0_1611707267431_0.4752586160630221","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/card","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfba751f315dc19947c482992bd0896cfb7e8747","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":19,"integrity":"sha512-2MS4eTDkA3apWWnnmg1TgUqyKg+mJVnGLVfRSVH7hO80Y+P8wGp63TSrdqR2f82L4kmrg4Pip26Is6i1RFPDUQ==","signatures":[{"sig":"MEQCIB9Bi7Nx+y2rvBdfiDmpzOjpRVhdoG5+aL6m/Igd+kCjAiAi3Zh+YaZ5XQuLkouNOczXXjpjFl8gXGP9yEUyWW4s4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/rCRA9TVsSAnZWagAAW7gQAJStkYpMHL3oS3LbJdnh\nHh2mj7+qqLkcJGkx7NXlzslDn3tqpV/GgcX7GE1vJ5IdN8oDPEXiY82qgIgS\nR/Dn3D3rQRn21ZuYdolzpmjcAr4oM7ULLUUfr9YT93+PWZN0eeC+1jhOAY7M\nCu/WvOfvwNY7P2cFBVcityZhPHsjrmPMCDrQMuniQa5LYl8HQzYwf51DwNCd\nfnua+L2sPDsYncGUE5BlTpPrkT7tLzO4WlLmyVVno/jJpQjjnhhwNHvNPFXi\nRdzTNMx0zPb6NQ4/EYypY7GucJ+qEQxULzsgXpM/CKDw+PnSc0fQ27Ukas4J\nLLTnjcOJ525UU+IcXiTbfuUCdvhAaw7r+lyww8w26u/a7vYxk2mH190lZcha\nBdygaXn0OqZllP8c9qh/XehO04oKcbiyH3gGOoJmC5RKtXzg7ywvXtBfe7SW\nv1Uf5YYfF1J9yL9nKswj2YvD21qz9JnGAzbN4TINDtmS0ceuZrr2lBLjFpCR\nE+3x1+jRH94jMJm4mX004+e53EbIS5wgBX0c6Cp0xUN8LM4tfb+6vbxqtok5\nxD/lxaL2xQ+xnWc2Pdu0o8+Qq0+X2NM01AUkLyBp15qAlVYF8sYJ/W188NBW\n0ndFJdu2qTrb8Jt7afxK5JQOTYgGOynU1E3IcgFOEprDglxVNIKioDnaRl0E\n0v7u\r\n=PFFH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.6bf56aaa4.0_1611710443127_0.9665784848025378","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/card","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfb1163f9872a25ba6eb1fcd584dba91ba2b2204","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.994873795.0.tgz","fileCount":19,"integrity":"sha512-Xui9NBPU1j6gBuzEYdyWotsfUz86IcPZKwgMdJmedNXqJOu9qrKld2HLs9sguyC2JGbbvoT6ZTTmbMXoC9PSYg==","signatures":[{"sig":"MEQCIDLgKoK2GJTqZ4iOt/b3omYSgVkJXdH3Pz61bCPxTqM8AiBwopXTc9+9T4PpHwYPX4MDOmyuCyj7/Un7LuaoAu0KjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3+CRA9TVsSAnZWagAA4WEP/RlXwPMhuL5HFbuQW1Gn\nO9pCJCPlCKolNPEVS6RH17rQYoP5RKEofvQWt77KFaik6G4U3tpXTJjmBA6w\nguMXsb2lsVLitxTUll8KHnW9hzXkHr/Eqvu2wWAr0FQ4Q0FNHVolRhDB6jyF\ny3QhLhP3SVO12/0UHwR0lRBsOlek5YNlkGuY5ipz88+oBUAUbq1JIAt6KINn\n29aqAON9nLrYu7/2x+SGUi+D/sQ+r75kKLD108Wd/uPpHdGd+slD8lJfoYZ7\n28a3XPsXQ4g+FW7xQh03lxBijfJreBOE7vYbbWDg7LQhVWVx5O8X5WZFdyJa\ndDiVWhU6qAARtg1Ja5eANQQmheoc4kk8YZGNEmSStpb3bqgL2xqcb/fvrwNV\nJLnuRT6Ijm5LHkZAejkyFjG0EEM2bj3QTCqAD6NSzsr/Jd5kidqFDewANp26\ndhI8AhnHAYiVHL4rUmXxlkLy11XpbgnJc/vdfL1jnkMV2Ykn44jWhAeHCUaU\nbyHYmF766QXteAY0MvCQ9JfOv04G5e43pkZekrONdjFllUDnj/NnGLXK6sI2\nE5oOYthpjBo08tRlEgZG7RzcQu0PC3c7acGVeK3mSSCV/u/xmjPyZcrimCV8\n9Wqn4f2IK+ao8t6IcyVY14Cpfrcpsi5DG7mP6mtLq5Yl4YlHBWgs7SeQYAAF\nFHeC\r\n=ZBUi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.994873795.0_1611759102217_0.5212716089869363","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/card","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae0ee53d2d877799053bc330d8e7258780bc84c9","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.96878e1d0.0.tgz","fileCount":19,"integrity":"sha512-tMnDcUWxNl9CvZUbmIiogm/e2+CGcihcZac/HEm6fWN7f54rJi3wrULq6Z+wsoTAVG4cWQgExG7FKq5g/PmB/g==","signatures":[{"sig":"MEQCIAzisB7SL+cM5jw1ADWsJgpGASTcx8oAIoQhf3951/8YAiB9Nygl207QpZCnWYBSVrg8D6tk84UmXDpuRsT3fbJCRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEarNCRA9TVsSAnZWagAA52YP/jg7/5h3C+qD8mdM58IP\nGAXkPV3Bc1sUXexowYF1NMg8+qxRW7fpff7JRUve5OHxH1XpD0vU6CLl6bpZ\nhfZYAcg4p1xR71RiFQ6w6tVecIrqaBSTpk48VOBz7WTGMa3lN33M0ETlqUda\nzCXHgIA7b8AxT0RzKA9s1ZM7rLvnMMVyUeY0UKwsCJrnhsku3unHK7HdVeIo\nnP6sb2iXn6d/OYv5qUuW4UhydhLbhg0UOc3Apo/MpIqcWrsYo32NsFBxJ1M2\nV26rA0GvK6ItTaG0i26LaC/Rku+joD3M8ccwJl1aO3mt9ymi0oDxa2+l4qs3\nSAP2xH8w7Nu0tDnZsa10yUK+TLXHAIvZdZ0EBF94avGa9P/1dRF3drjmLoKj\n57luTfZBz2V6dFwJTJRBv5NWyBXSwh0JuSSznWzhpba1MWvREtGLv8fVovIH\nynaUx/rEeh7L7OlwyS7Y8RoRTC45BIVYTQmP7UahNPiVcLYTS0/1k5/c3eNH\n3JtPNTxyc1r2UryjkmNWbxFOyIDyEzuLNwe+DmmK+F9RJLsU2Thed36djsF9\nEgxTAQvnCUqMzcQfSOB/q9WJbsE7dl3AFvP5FJXJ4iGgO9+QPdRpylPuB+q3\n+tWqgsiJYu0OFsI+/ugR+5k1pxZCTCtrAWeASasZnL2eCM4Zu0kJrQaWPG23\nv4zH\r\n=A8jG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.96878e1d0.0","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/shape":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.96878e1d0.0_1611770573429_0.5986515678936293","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/card","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37d0be2f0080453603c9bd07ba657113ec523ce1","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.3c117cdcc.0.tgz","fileCount":19,"integrity":"sha512-j6PX2lhMOyX+/m7wyZnSnAbRqFH7h+u4WcHIQTBk4tPpjBsAVjW7xNyAhkX9eRtZs/v6Wi1BBfrEQqsy8j6TBg==","signatures":[{"sig":"MEYCIQCKPEeHFl/tM9f39QV+eZt/YRVraSn6IHEWpX6WTaAmcgIhAKsTfUHMc18wFGHI4PiF4fvyMekAaUtEvwr/GbFSHIwf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbHcCRA9TVsSAnZWagAA1U0P/1Bse2UD5z+yf3diYB42\n5oF4uHyU+d01r+MhEIw7jheIip2t3kLcqpeRIcFZrWJIieaiC6z2PS9xMeXh\nqwahOLr3N4rP2KsUvHt6O/B7rOqaH+MLPYJBn36aIDN1+VtpSUVObcb7SbPW\nf89cHsgYXLxmtdAm2+AWOruvs3N+OqZhSeAj0nPfNkdCvo2PevEvhjD2911q\ndEkwn6SLAX0xK0SNm4hHw86fqFpMK7BNTlC57TQ1FkH+AQirktvLIVD2pAeX\n/HHOLMY/XutCKhi/Qw+wYBBRF+npU7+dK9sjwS0xPFD1GHcyWpsQokspebqO\n5EdT9EvU+VTfvtctx0EQ/WXdHTiStN97PqiSioo57cwJ3Q5+33ZtIKlL6PHr\n3LcEpiLLmd7M2FS2+GzEz+WRsRdUGQzejg9AcWZsWOi4vcJPLEnkyXKg6Gip\nAarfxiNXhJujDU6nLry/bnoMp+su/pN9s9kBctbP9m6aCFWr8KCVWGqV4oBb\nRXc/A53M7Mew5b/CoWxE27BAHhRhp5+T6ZO33COzfD8XzQv/ixaJhG8bIRfN\nUvGSmkTtekgjDX39vxiXpKV2DylKWCDZuegcEo/SP6dWPEmW1bC22LZG+NpM\npvm75SXvi4dEYm/+M/D7dbjxpfGXlPeBKmUP+FQBvKf+NprJW2ZbiYrEsfLD\n1qRn\r\n=Dmgf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.3c117cdcc.0_1611772380295_0.5818690144651066","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/card","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d384cfb95dd5c899b8f9b8f36dc087dada7274df","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.b411e7033.0.tgz","fileCount":19,"integrity":"sha512-E6gXSNGO5vSDOeMD5FCzt2wAegBTFo/fp6l5PaIY9Y6UINpN2aIHOts1iAuog1pFyL6TmFyd1tPxVAh5Kzo1zQ==","signatures":[{"sig":"MEUCIQDzKmPkN8XN4KZqpWIrNOnQ9AVZdOK+m6qRVhVmFwJo1gIgO8c46hkzVL/xFtqHwKNLnOZjpfe1PbM6HZbMKY+Sqxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeNcCRA9TVsSAnZWagAADj8P/26cUHGv3PIO9z19WcGH\nliFVYMl62syccOeV9hig6F0Y0+j85jehbbuk5VWI2011Fcx9ZMLo/18v7wUc\neZRcky440iWyPFkxJYHfyJdb1BgAGRD7+ZB9NWesOE/Jl7EBbJMXA3scTaHt\nj0RAfWg6Xr9MyzJVkPnEJRytmBzIvhGYjUHm4YxzsP9C9hLjBWwCL55sO3b8\n+3873IAm/hGUrZ9fdYxsOq4ut7hC5C/U9fchK8XLDzix15e+4SBC4tGyoNgV\nFsm2oecF+4QxurLq6Ti8IosnNUqDE9f56Y1/Qp5PEYd+fFBmMX8SYkbVO7Ig\naq+SNd5Cc+xTVToEbDEza8+dM+PlEXqTAdgQuJRGy+P3FnPRybQWwvE5Etnf\nDfkmw729d60ZVeypCt/eR3pchxx9gD5gzDB6PnQ+LW0FYJb2EKrNi0yg0WjP\n7PhdOiloSdJqTSm1FzdNuisAcieQeMM+WRQTs0HAORNMbCle5f4TGhhWGKDu\nPEQLH7V+n+mEHx3BOcZlAa+C7K1FtSUFSaf5aZKRT2YlxB31pqxIoztftVZ8\nzFp866EE2VUq82wcid84oFWrDLB51OvHRrd96RRLglUAraLcHjzmzzD+tV5O\nt/U+/vBa1AHdxcKJPjJqM0VPh5n+Zr907ZSN9m0q6Y5zd0TRRlK27QuoBdAJ\nHzq9\r\n=B8hT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.b411e7033.0_1611785052178_0.20444098857288173","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/card","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61db9b057c6ef3319abecbd210d60399f7e0edee","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":19,"integrity":"sha512-nC5mPbpb7N2LOA7Qu13INnin7t34yLFAIfIbNBtoFgvRJIaQpl6u+X5WeWHorp0bqShTo40wCGYgotVM+o40jw==","signatures":[{"sig":"MEQCIEEzX2PKHztD84XckIyOU6OksxFR6dJGGIXifgGpHSjnAiAh0j+BBa11NFJAdxRuzvAwqRyTIhnY1MZ1yqnExE/5dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFqCRA9TVsSAnZWagAAPWoP/29XYJX8/Id0aV5VFaSi\nVqFHqKL0E5sQ2NaZPE+ndhFgbGF+i2IWnBD6LeNGx09PgEuFVLoi4ot5ttG/\nfeEcZmggJfq3tx7qaJmsvbrLEHVvN2Sx61jO4WtFdXISsUwY99IYTmuh29oH\nm96KWngIVppz8i0/TYi5J174cI8iIMLkNVZRJcP02pG4g3gwriTnmwZjGca5\nh6I6VuGHqfhPb3f1TIEQcxnyWWlSxjDccgUGpmXgLmiEeQxDIFI0gWo/WQGB\nYOBazKOC8cJ/6xrYdBCMV+YsrStxsTLixhmOOdHDUgsknqgoDUXz3Ec5DR3S\nA7tG84SuDKu/S6QBxnImZ79VcVNOg1EaBVwnFqa2Qo/+noaP+SA+EzxXsudn\nR5n3cRtwp0TUkpXCA8BQwFjxkQJ262XriYya7yoW0G2n/DHWJGJNIRKO1Zy9\n1FO2TXMa+mZ3TqFJh8aTTa4EBhjCAF8h+ewObk2C5TUX1/b1gJG5blPEDwpe\nfjWm7aQLMCwsaMbopTPP3zpyugkwdq0JNRoN8uLv/i3wq5KlF2hQXLboMcS6\nBAhi/hhgDc9aZCyCqxbh++7nj/yExCQf1HIJP3JGJtbRxURIL+yRr0dGt8cl\ndegqLnai6ONOLnIkZNCOhP4o0yySc62fF15HQaX5+gaQ8aitKJz5ddoMYyTQ\noSnJ\r\n=TPND\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.a9ac16b4a.0_1611788649686_0.048012345674596224","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/card","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20caec9862e31bd0a4ac7a5175ad2d6fffe99c04","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.fec7b42ca.0.tgz","fileCount":19,"integrity":"sha512-Ht+tQb47DJYJ5eMxWqPG+y8+LMWb4gknopIGgLXcGXm9D3R8bvZf4iTG5s0KJQLkwZ2QuFlyZ0D1vRqnyY3oOQ==","signatures":[{"sig":"MEUCIQCPR824hJgltK/3bDWZSwZxz9NKP/4bKBHQZuYooke8BQIgWOzmYIvqG6fhHXxMoippzTS1Qrmx+RO5VZrRUrD/lgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1DCRA9TVsSAnZWagAAlx8P/j8XnyYx+2mbgzdIvz4D\niVv4IZqcvIWzuBHnB8hIgY06VH3QaUQQ+v3K9ICpLW+b0/jrjRXTZVnwtY10\nEcRTBxGrCyvZxAjOxdWWmm/9H2amEUNB8+Vxxfg6EF/lR0Bnjfkk+P/EgIcj\nt5o7wELLkGIsK1T20BLzYs/I3zzwKV6osJLFmG7TN/vHlLUkn+J9whnBBmjE\n8tWo6XjxuRnQaP5s57S28ngNXtfdmZSSMnWiAZDZ+udIDwjQX+G8FREoI72i\nFAuh2zXmsOzOjOF/c+3Ch5qZZlZOUrFpdHPLSxPtl89PohwzqgKluJcytvbg\nxznVm1XgfL/7MW32FthjeffODb7u68pn8tuIpfpYsiIk4HXJJg1gr+FlRUPQ\nEN6hQGZjHccl5iC9xtI4UVA/R6slSFbpllENl1Of/4Xhlosj0UtSQ8UMHFOn\nwf07g7ub1rFV9voFsEJYSx85xbRXmG4Cma3TWFsAfNl8O3YKpdVO2ZwA17ON\nSKHpCW82wL8hJB4Bl0bpXE7iKzypZ6TT5gPSIN2TavOEm4Nj72IBSCWI5aSV\nN9Ah7TrmFF291lN6IoA6dyAsUGSz9h6Wz96u/6wBRCekYbjO2aFITMPK/cfO\n7Lqk7lEGaNBANtXAAK16lgCFvl75CSHLYKC7aS48tUMkypMyLvkqsfrQpUOi\n47Ib\r\n=aJwU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.fec7b42ca.0_1611861314289_0.3860636611142505","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/card","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c1c24e8947bc9c9a74d962276f654b9bab6168f","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.8e66dbfee.0.tgz","fileCount":19,"integrity":"sha512-Mb2Ae1l/UeLQvd3McIH9Aa1FgD8UeEGchqpvpkXuBMbyj9vp1O/16XZXgXgtLWPdJjnmQ4ToohSiv6v8h4YWWg==","signatures":[{"sig":"MEUCIQDgg36LTdiXGx4DpCKlnCp8sK48pgjq+DLX9NB+j67ucAIgOjiaYe1t44DAQMAozVqgYvCAY4+iFMaNHYm7u3cxY7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIzdCRA9TVsSAnZWagAAak8P/i04WQrUSRecjfNiOMu9\nrreI6HWVkfioZOqqh33D88dEOhIIvrKp4v8lHH76YfnS/aCFPqscGqkX98Ee\n74Q/ot3gM1noXeYb1MhjurEUqsrOywDmrj0chlCq6TwFLcUvafDohibgrmKI\n++RcmIZcfz2vKyTsQSmBu23oLVoZFQTNa/QflMwff8ysESLTNNIBMIi8ho54\n1dIVQgib4b4lqYaPtaw9/CqV7hxy/uvzD8+UaYW0ZbHXI3SDWh9piFsN0Q60\nxkDayEWIpxL6PPxZ25xfpiZf7cJOpXkO//hq/2mr3nB25yHCbtInK0pwvvJ9\n20FLl0fZy1oKavVgjaZeAS8Vy7S8xsa6z6tBXeQ+wIMBxFMt4R4CKCOCSvhS\nCPcxzZeuKtfl7ZDVNfQy3J51ioWi0sI8BWZTavPZ4zwXlJE+0jjlRj/GVbYv\n6ZZ/eYcD4w5Z2Rtxq1dX0rDSU4xbrc3FaKt2ihojBjME2VzzNljtkbvVCqE0\ncQIvqH+1jYlOC4V3GudT4XSPJY5JEhP4mOZjQRPcoYoYOiTMtTZ4XmPFkYkq\nEoA70DSzh26dEVfkJN/wlKN/VRLdqs4/XCdWdxpG/SAxtNIV4gRzBh/ce74X\nds++IZ5iVV8wD4cGr8vOSezHsG/Y9KkZGW2yAjE3ck3K/WwDK3KZ7y6aDe60\nEQo6\r\n=O11Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.8e66dbfee.0","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/shape":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.8e66dbfee.0_1612221660445_0.03678004330791884","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/card","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77c2f8872be315ec663ae560be7b0a3b23cdf47b","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.637d15da6.0.tgz","fileCount":19,"integrity":"sha512-gJHSEpi0yaYE4I66gn3Mwydyp7CT4JsjEyB4zriyxjIiKuQ5u/Y5tlnVBVe3Tnls+CWJwNIsg1mWWFC7bOmg5w==","signatures":[{"sig":"MEYCIQD1SZBFYx+KhbfHBPYOebt3i6/Hfc6AtXjrTGJp3QdkhwIhAJVz3XsTKxDLoFJ4hwt1F9IuB6Tb9uvFdfIYID1q1Pxj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ7OCRA9TVsSAnZWagAAmW0P/AyxkDJQCDEi6Fw9N1sM\nQumj0B3OVyIgqYuLB4IHoW12NhS0gQeotEfbGK81ThoGNQuNhnHY0lKM6Tjf\nGA7Vy2bQMh7VBEwATJeZZmR27KI1cGTw8apo8RpeW4izWYQ/RiZbahKLrc3x\nytt7KOADpSPjIrTiUJrtAJBjHSs1F9NFHNrWdiPnVRRR8Kl8fWoJ7jBDt7WQ\nxyBjQirz4qeQ9wcI3Fa1hiLwM7SA9v+6xeToWw3KhFW+8iKUogczcahdf50F\n0r+6Rdi6IC+SpLifSwFtrpgklBlCdHA+S3xsNl8laEgQBmg+eEHTw1KX2NJE\nbckTW+R9c5lfkvLI1JoD/29cZkcaOLw9Yl8tqereaIvm7VxtDuWzmmxsOZoS\nV3yrp9ouaajOAEvV7AabyW9JaJ0v8pOu1iF2zOdzA2neHmo4VCm6h0sjGZno\nOJDWi6FGz7hr0QwBK6seS7ebR4QJN7BepnyprITXWMVtthkQtVomtT4qroh1\nAnweWzkelalvjb6C7zuk7pMR8fbpdgYN8Oy3QiHo2F091jK5t0RiBGu6toeP\nVSA7PGAUE8oM3IH3E3+z+5OWo5+dBUyjq6FbLxyean+EcajFQeR7OPRtzw3o\nT15jPLqT4zSM+/CEhFiKmlmndPyJhEShmepKKzNeQ8LCCQj8YJI2T4LwZDvO\nf8v0\r\n=N/jQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.637d15da6.0_1612291789875_0.08645082337592647","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/card","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98a08c3d8fd9091c4ba5e8b2eea335582855c7dc","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.fb793939e.0.tgz","fileCount":19,"integrity":"sha512-x7WUpKN7SjnGcyCK5yap9oVr1p5SqXB/QFFF9CVZVtJzUvHhb8FoQdA1o+fAbjG8reLizccWUjM9ojIudWHzDg==","signatures":[{"sig":"MEYCIQDNECHVBZVwaSorOXA2IvOaNK6JdH1lgvlBYqUTHV4RFQIhAJPAiJjbtsiqKF4YH9XaCxrFr6dJNP4NLTo8PUPfrauv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOtCRA9TVsSAnZWagAAlq8P/1/smZsPmCLro4YUFyl8\nPNOjhnh8rNXw12/JTawcEzDxUkKHgj1DW62r3f9oAc1FKt9J0PuFgsmUsq9H\niayKZkQDZmfMKGFdhBVGKqfvI7IRXVH7ooS6dW3jlFGVhDFmh4AtpLmh83pm\nvfzuolSc5JNWYo7S7JDhYW9hsl/6+HGqyhOzaqP8yseHcJzC96tbend8zfay\n/XnQy1Mz3k5aRCtsOs7ZZXQno7H4UsHJT8yWHa8pH7xgfho2i/oUzB1K7I2H\n/960ty4DgLZeLM6gyzbMb//3b66vrYciks1WxkY/rT0FHdHjj7vqQa5TTMyw\no8eq50D0t5hyVUryx8jsrRFVN9W+bpfbc7otQRx7lHbzVCbnBduRxGwWjd1I\n+HJNA5VPofDcrsL/C/8BDd80j5P6rKQODY9pFJrn+pmhkkOmY+F2Adf3+Nqt\nhxGI/jNmVZpjpGWF0dqNEkNZpFNo6GJhrYgvqVUdRv7oX9h/Ja1NlWcHYlO9\ndMQM4KVeTaSx70iR3VYy02/YjLsVG4LqRr9x6XkQS5ZODh2xi1D+4A5jL+38\n0kv/A8v9hzvss1zfZSHUAVAa2mIH+XJmsAwGgUJqlX5NA/9MgNX0W/Mvv+7x\nIk/EG/ZYnVWC9BpKkFyhd9ecqMjot16ZBdXTIBaaIXCyTpJbx1hbFi7LR0fK\nD3ON\r\n=yi0t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.fb793939e.0_1612309421408_0.5701412301285298","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/card","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c100b2d80edf947b187aac17913f26f0c7783929","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.15a4d40dd.0.tgz","fileCount":19,"integrity":"sha512-PG04BLuacFOrTGygUKbWjFsWJBxOWbhRXwIgacJnFsdulPbzDrKKxyRB3aAJDl0TDT8W99lom1ZHjbGYjkk8OQ==","signatures":[{"sig":"MEUCICE3sqLZDqvaV1oOGI18cWQpb2QBm5hM8mKCVWv6aGJQAiEAq1OVTQlPx33v0Y7ANq/uXKjlr3SFy1o+qnRVb1QiZas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGggZCRA9TVsSAnZWagAAYbEP/2bnblowT2uJwhTLJP23\nCnNkcdp1d+c+Vz6O2gM6SHvEhdq2TPT0uQrjiLXHwumHx30Si2t/PwuBTIH5\n1by9nX7AD33tVINGSxwofYblmp9O3d26bK2DnOUfYCMZXj0l40a0egK+Q4/j\nhMJseqHpxRrenr3chnWfxdQ18i/f7276+vi7Pmwj5WfG/+njTQ6T08PRRRfd\n1bcQBTDmOvLlBGk1mRPfBnjv18N9jZU1XPzNFWuLeXQyCmvQSAfSn0tVysLU\nQuAUxUAIyc264zwUBjadGFY4v5xMgkSWXxAZ/te+mzt7Wd7O6JGzxriaBNMc\nS3cuj0riVdl8qgWDojSm93jo0rmjP555HD1/ES7qjqTKvAm3BqkYb7WgRBf9\n1S/7hKcw0zmJ7LVOn/MbZC5n/QLzBfATfJGsspxkyqWFBcV8ai8mHoQ9RPaK\nSB8Drd+shw03dEZnZqzoN8DLZ2ZckGzfhDOO/4p8sXe9beCW+6HtkuER871/\noOL5+/pmEFy0ckbapQGXpnRABTh56n6ICUxQnxZgWdOX2LIbJE/h+ZZemo9s\ny3xuHdeWRDD1BXOONE1PkmV86ZLH0Ipi7vV8KRzyq9LrHc76x/RFRRUNeLmw\nxlICsq7NtvRT1OSZdiKNaNZTHqKHwP8N2VLUkXfiZ+OeNiDJfybowXa3Okkh\nNCjj\r\n=MwzC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.15a4d40dd.0_1612318744858_0.984624061007396","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/card","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdbc88e60ea79999ca13ee4b4d7a98ace95ea570","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.7a003acf0.0.tgz","fileCount":19,"integrity":"sha512-iIBS6qAzMBahM0b4sLO34hU6QqahCCVydaqvqtB4MQdC7oK1+LRmP1/PkMeCkhP2PX4iPS0M0i4WTvaZLpkhng==","signatures":[{"sig":"MEUCICzweMyfxv2EawVRgBjV0pvcovnWzZgdM/za717NnuUTAiEAx9vfx/cPGw8JxwuOVqVuxk6wrdB74MppNZDoLZKVnzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG107CRA9TVsSAnZWagAA9LcQAIk4l/j83bpRr57tl2Xk\n4MTQxEPbtn+7T9DqAhfRKWSiQ8s3TSwUdGMQgp2bGLTy+QwSnymj8MkKgo74\nw9okMc0453mZKJveH8uFR8MI+TFqyIpoeB0VzBeBPpTG1f+mP4rXnIUriobj\nOLswJCVAF1p7TuL5dj/3GRO+tohnE19v2gLQsyjhUqxqVdVq81by+uAG53a4\nASJokGEA8w0n+1mNfqVk/jFybsY/1Eg/DQB00sHr3IIudOo5SuraQ8LyQNaF\nTusyt69dnOCiHasxo7nQAxAcwQr/l2U9FLd6U1OXE6njpvmLuFDKF1TqHSpv\nCawn61oovbnF+pmGe/W92Dnx2bT0N+JIqbHEr0QGrQdmPZZ3gUhsTqEcjisS\n7JtXe8doMKfxE/ACgVeK/uRM8pL8SGMXZ/ZAsCIkebMBiVXNmjn6wFBa2nb2\nOH8tZtiztNohGn+xoNamXR1EoCFSg4UQTNFwjNkORtgU6ypFeG6P+px7rGQE\n+3J+KlZ0GjSLLmuM02l3e97Cohs2LFTRWi2Eh0v3klqLCM0U8cGl4YIDJd+x\nUR2V4keGyQUO5ZofYDWeb1xchNAahFcsbQoI25nfJS6I4D3DE5G64XH2GPOe\nOGx7SD+mgrXRJNurox/eENMY9ZROvEVzeb04hdtkNaOV/k6z0NHjIiSvHt6K\noolL\r\n=4L93\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.7a003acf0.0_1612406075061_0.15027634874731022","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/card","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef62d505c0514a4b4c2d4830f98f1b426d38a13b","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.05f249666.0.tgz","fileCount":19,"integrity":"sha512-fRj23bIZG1qKby8L+eWxZelCP5VMq0faGtFgDqwCREgWPWOAsAJQSHNInxmJsHN6z83W/Cd504n5FLelbfYFNA==","signatures":[{"sig":"MEUCID83LHQZ/6BxcrAkZm+mps2lWxoPTHqFbvXL0GKoeW2FAiEAiOuVjcTJjAWeuBv7Sa7mwVKbkkBixa5sdAv6u3xvnHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDP5CRA9TVsSAnZWagAAj8YQAI6mTvTUz7TBLTtrwS97\ndo4ne0P3kfiW2ssmUEK11kITM1e67x8ZIZcOwb4gIlCifg4xh2A2zVZtDJLX\ncTyjqkZbCGfsV/4YVkRMn9zYPTn9rity4tnEX1d4yN3F97fGj8e+sqz5G0kA\nNFAdEDa7NwrihLjq4PYGIy4nSU0LhcGeztslTuvXUjd4NjH5C3XK9AAWfiKJ\nmSkFX4jM/Y/wXTE1VrNsXIpLSDzl6EOaqeU9imcSbdraSso3TdhjK3KjB7JU\nSoJP3hweAS9UM3FOVcZkB5DNxgYaqYXwYOozDqEegZRcRDeiqWhX7UyW5fy4\nVdBt02K2p+A5ngPzXAq0Q6Htvu66iDLQ9a7AcKRYXxTOcRSv7g3zyqgqERob\n8c7bmfPCuMj3XUCQ6xBH3EbJCSbpVxeKEXWRe8eclHw2HTVLB23LWqiO763j\nJoygKipcoxeMbb/STF2azRy8MA/NCBxB8+gobDrc1ABprc2boSq44xWUY85n\nu3IE60oXMsvCTqD50G7gc20wSwvJ/2D1MLFX3/E9gl7UNqjGDOMkGRlzN3Mw\n55TgbkKEro0u0h2sST/RdaQEonO29C0lLyd3cTeIgVlfcEBGXLWRriCp1ZnY\n+Pe4tpoZIIWT4edNjXEMiruA8iktPzBPRfPy5L8hN9cvMJbvSnyc4HLSPP/N\nJScg\r\n=Ykad\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.05f249666.0_1612461048791_0.1183970878503775","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/card","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d4584c62827d0f5653e21d7a2e8386ad12668c8","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.1a3a39629.0.tgz","fileCount":19,"integrity":"sha512-RywmHpFBwvHcwmjf+hVnPBBgz2LSkn7mFaix9mzSa75qwKJ9Vo8ejrlSaC5ZZKTwpUoFEmUi0jMvxkCNEFIm+g==","signatures":[{"sig":"MEQCIBkC8X9Gt+s51iUzLkcCPCN1KO4h4sckOd502GJZwyi1AiATsFu+tYy7FPp2JdDIAfeRLDReJLZ4JYsikQJZllaV4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEBlCRA9TVsSAnZWagAA45gP/3U1DqquhnvWddQimF80\nfmqHTDplIPjov2Mplwn5kvhrB5lGjfUj9RenPJT+vQtibISGf/FqhDkE6k7u\nqnyV8TrTFAKBqF9RB9qM49T6T5ug6hfGEuuubPO7oZKYxnDtDpz0PtI7fAWk\nLJRPCKyrWpYxxN8tMQo9YRH5R9eyLHouEpA0dxcOWXeffAJB6u93rx6MQPn3\nAjI+uGDT4ZPSnBpcpLvUTZFW5AfC2V1yEbXk9dRMm+oG2/N0I+6RywHONHC6\nWv9gz3j8C1K8Ziek8PzgeesvTjUxCMAvjPUnG8oc0RrZadIqaPQ6n2HrqiM+\noiplsXkrHWs95ipSlLfE0GZK01rUXN5PHEJWyBUPszgezbP8PCCiaBGr9a2z\nFOEfgr7PHjJ51J0kO1XDp7ibE5woYhUlmVBBr07rX6BT30chlXXXAeYPjJ/k\n2npFwIafQ6pktxGAF3mXmLEQeQg39hvCAaoW6lS7ESf7q1KUKnGOWAzBenGb\nZSVIdKF1c8VX7t4z9a2WYXjZW+hbHvtz+nexHgz24v3IJypIZR6ZOalOfoDB\njQxJXBavAZ65QrI4KrOrLXjmbJOEp0rQ52eMo3nj3IyVGGxbWDJSm/0aYjfg\nJ7aeTNnU5ui7WNc7fWzoKdWWfs87EKF/MHPkp/BCQ0gmDrXDoHi/Oy6qV/u2\nEA1L\r\n=XLYA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.1a3a39629.0_1612464228542_0.42603518943864294","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/card","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2304795b511da1ff18225d79e73fa52c95ce0b5","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":19,"integrity":"sha512-XO+6FHh2L9KWPzN0JN3KTNEVlf64kBAypUuOfdxeNVisr/r6HKHUbBKJzMYxtGtbXpE1qKOtxR2XqU7RivWx/w==","signatures":[{"sig":"MEUCIAQaieanoLmifi8bTv1m88cBX47kwnLDp0vvGjxAu5k+AiEAsODLni/IhVV3yFw6NO0qhtIEvnzwnTj/KB2wySp1/1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHaxCRA9TVsSAnZWagAAquYP/j6riFTWSm+C7/HKhqQd\nI7BChrOa01nJQPJPRxzbeJuf2zHXc2rPE2Zy9Yq+NlTdkHtrlkWxO5yInboA\n6jMIvvnfHcM66pVPk3R2Nlg0hTeetvbsj7e7JppL6+dngpb4eZ/nVeBKUAOP\nid3/7hSmwfoSz5rezlPYmU1WSQO+5vliUxZuHMykrFJ7Nf9AvGrctOQzqSD0\n7JzyjcklUGjqAG/x3LJYdiS4v0rIPHY5b+R2bziyoOQvQWIS5nCCoorF7PyA\nD9VCDgT+1k/MaXEp/sXlL90SSI6nTi/SdgsNaK6qhymIBu+u5qYHYms1IL/p\n3Bg5wHJJbzYRxmtP9yLCcEuSPy6LczvORZmTrAYWLXoD9Q+U1sytt48O0F1y\nt0EZhIdnZXgJPzwtltqP39YxPsdkAsF2uL2xaHe5APQRmq4KaEmFGyeMaEOV\nxRgRSl7g5sjI4i3yTCXhvFeSBt9n54fqzHkcOZRcw0vbWgmqfILfM6eulp9a\njyB6mDjPDUAv146rLo0Gf84nsB3rVOG9NkUSzIleJNNkNca30NEEG7DyRzIc\nwDdiRPbcwUFsauj5tdp8/qvxzHSbJ3VsKGyTs9/IAw6Roeca78YrzxKPDXRo\nVFJkvRjEQm3SijYi/Magl6ehij5TUrkqZ8+j8Y9B9ISihygShmyOjHSasFyS\ng4CW\r\n=OCrL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.8b1cdb1be.0_1612478128624_0.2444427772019535","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/card","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40a780b4cccda068ac78e556bf487debe350a58e","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.8271f00f7.0.tgz","fileCount":19,"integrity":"sha512-0eDr0sDPiApKX67aHR23wkODBPXsyWzWt3huBzTTYHDs3zDFC8Ent0OxNtCtAKFaHpfod+3SFLzErJ/qkA8unA==","signatures":[{"sig":"MEUCIFjttwLmwK+Oo6PQSKxry29KeelNYQ/GyfaKG+NLeMhKAiEA/iuY4zywbVG05eAeWPFjXvIZqxpIntTooFkNcAY8GO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHy3CRA9TVsSAnZWagAAnQQQAJJRJgfJga/nKYMBkuvU\nrOFLcwYQ2XNKs+kzEqx7kxxtaZRrrrdt6pJcZfFEwOMXjNXGlDyEOBYIpwuy\n66wa+sX9SHKMDD79nVSxut+vPkRu0LeOVGym6F/VsFFKdRleF1RUtYbgb/9b\nVfMXIj9jNJBygzrOGTSQ9qVz97TANjZczwXP2fcbLA2hxe7Zeic6lvEU1nQ1\nMiOkjlHqtXmGe+5AMd+JaqGUB0cRLeTarARy86HwW0juuKrwxzWjCHW9frKa\nSpv/zWcwDucoou0HFqH+aENw9PFxLxjDDdqKUwnl9ws1bOv3CXDPTtQuZBd2\ndafAAYERkhriS9YZ9R+SfC9/g6ic+H2w5IWOJR5ZQ3xzI2iy+9NqAbHKN8OT\nPSVOxrAXmhpRLC4G8AuirK32l1Z77GFBpqFfncENCloC42IKGNYlxvRrQpEF\nImd9X9JcNHiN80jrXGlbh1GuuOw/Xso4chH85zyEM2uVJu3vqOhi/rHnih4D\nDGhoSAAD4qfoXwLrqEQZBPaASci0hN0J/u0WTl0hxXggvJOzOBkHRf2qkM/e\nWyu4NTd5SCrB3l/K0BwA87x5oHK/tThRpa4wR4NHlfDZ8JxiMxtUGa+mHZu7\n8MH/mW3iM4aFZQwxUXgiYkxYlDrAS3IZx9pEkO5L5hdkeWPyRZwdSV/kpdF2\nAOAM\r\n=8z3M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.8271f00f7.0_1612479670707_0.43261468498326683","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/card","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c4c349dd75c5d5d4d774162aa40f6dee860a55b","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0-canary.533092a90.0.tgz","fileCount":19,"integrity":"sha512-tXa35x6+R27RcT5VWewIFAerXABuy0MBLhLd07P+KRV5uEYiSabVuMKlJler0QX8VC+To1aA0SOOqFP//ewC/A==","signatures":[{"sig":"MEUCIE9M9YXe4tJQ4gYMIwBDei5MEA/AKSUB4aVUZoDQsUGFAiEAoLKnuN+lrs7x3WvbdplgHftk3xeDa59h/9QnF8lSQlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/ECRA9TVsSAnZWagAAYDIP/Am0Td7GHGZ/w5JIhwy8\nBK8Qv0hsD5c5XKFBUV5TZNUKnroMHhfGZvD2ExXyn7J9iV2hRjs2uchZfeSn\nxOG+cu6gj/6k/m6F6np0boaB66xvu9+9tUz/7GV9FOcqo5JfBHL4/HNzO7Uf\nOy0xerl4+wkCFmrxNFQKT94jLBFH9C6wxQerIPz1G+8yz/5mnJg0rI6em/N+\nG9Eygkceq0AKgoSDcXNLe8+Oa2CH88WrGJqr8a+uHRasICfZSbxWtpjaNmbJ\n1aj7po9YBdIz8fAwTxfV6bZBV8ZnO2oaA8LjTIL9hc2nzrEgBKbuZn4V9MNY\n5peKuYu90mLIflRDA66GPrBLzk9ET/PKOrGUxa37DfBKxDRhBkQ2RUUrTWHS\nZGa8cm0Y7VmhIkskVls0iHVg46uNidtTswYkIn0OdpTNWL6UPJiRRoG/Az/3\nVvWHH8RutChKPqAjDZnTUXdkl5Kv5k5T7/tmpkHO1zoni9+BMpki+P233IWT\nZt6iz4X0nCx4GA3tyfO1eYmFRnMWuRz+ATtpoLQkkgKVPk5elE5V45lFIkIU\n1HR9fpmwAAlKRzzGMhZdG70YFQUUvjTFmegzNCTZ371FT0bI6SUpQXLxGA6a\nrIYjjcf7syKv5shj/D0sy4IQCRpIi79BxiODAG0+09fHa6q638fWdxyyEZxx\nWmwG\r\n=RgHj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_10.0.0-canary.533092a90.0_1612496836409_0.7189956987802764","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/card","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1313d647dbc977b203212edb16d761005aacdb22","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.633a9fc7a.0.tgz","fileCount":19,"integrity":"sha512-pIaacevm4zdJgm1ka0Rmjoi7junoIIUwONxp7AEBqkbVJNIHM6sHwQUMq2GJBos7emPdISZc1BCppxb7cavgkA==","signatures":[{"sig":"MEUCIQDC2zCCgeVLv7mXmsGOmd1Fuckq+L3AyujuQTAu9Chb3wIga/+lIA6kV4mSDo+di5duGefQf99Ua5kUD7DpGEM97ZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+7CRA9TVsSAnZWagAANL0P/iipWSKcsUA60cazkxlY\ng6lKWaLcHxxEfPMNzrXcrXfPGx4ZThnFIGm6KlQVw1XxYmpHkHJiGoCEUTH1\nQj7EGbN0+GsAso2a4WZY5J8v3R3GxXhR1YM1/VdAy+bGJfORIdxumqv7CnEG\nTat+Yl23mNKb3N7r9FKQDx/R+bKeQuhSR7a7+rRjFgsekFlcYBnaieRj1A4L\nSXdCgkI+sekECisqHoJ44s5L7YpQc2CyYJfsdd3YbFmSwIr3UJcuWa8jYkJh\nFanHKef3BVXcLNMM5kkiJVOwo8m6HkcJKqPw9H1UsmmtqWQs2JKXeeFAiagd\nru9fn8WD2NHd/J+TPh0pjiPlIDfdEGFSymv6ccLKcga748s65gMqjd1upY4V\nAfjAjW6hZzYVVhpxiWy3Skx3uwv26oaU+aFABgLrDAEF5mwHTCVWz590hlBV\nwqNIDnpij9x/59L3JQVHJK8Rg4VD9PAF35iEbWLSgAp4FiRE9v12eca4cW4R\nySUq7uP8zBzYY0BziZDxLBRQ+eU7zAprbDwqS07+dr5D9JnjZj7aFZpF5B3O\nOVtMhVm1GjS8iu2tMVtszG5lpXqRZnpFMgEKSfz0HMls4OsjiOKRTW+lI3/b\nhQPROUZV2myJKvfihErVY6EHGJg/PIg0U3wvDXVm78eY/eSbWGGr8m1C+79g\nGlC5\r\n=b5HR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.633a9fc7a.0_1612541883157_0.8880513211508223","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/card","version":"10.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8747871757c5a548977bee177fffe4eafbc7f9ad","tarball":"https://registry.npmjs.org/@material/card/-/card-10.0.0.tgz","fileCount":18,"integrity":"sha512-IwdmUdrMDKb27K6xUhRSafPNbrAmcrPSxM3E8ad1Hk55+9O8Tl9SnGfOQGNtocGa8O7qFr8jsiqdIrxJN85VEA==","signatures":[{"sig":"MEQCIHZ9nI5WEGQI3wvbRpk6wXlORYpo8Z2ZDkh+BwKZ7PggAiAt7ozAELnP2zzam7A+GhIBAB2SIASxPVvLVkPYBKtx6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAUCRA9TVsSAnZWagAAWhMP/A2YcWjb/VDkM0gJiJGS\nyd17ZnaEWCO/lFVvaUPSwPZibTsE8mfsKxeM5auoT1SPJfmkbrANVQSZ25pD\nYEn5wmpdNaiBnIglWHYB0kK+3QZ7Z/x/V5wd+g8fMXubcSMriFQYLLCe65Na\nagB6GhlGTMP3/3jDoDnCQaKKfAR66UvetmFzhgB2Le2LXBWF9xOobkubR6N3\nK+jwwIyf/3Fcjy53VMTmX1FHERGZGjCdzpW6nSf3Gsx4ukbJdXLupIpA0297\ngUAfwzZrq7SIL1Y3y9/UAahjE2TM0nXopSbZrEhAcU68txef52IK02xO9lSA\nqh/3qcCTc1X9DPTKtCQyQujqy1lqTmpGzKk8fAVrPGU7HYSn7LiVxFpqgRjj\n3nwceidDZfFlUfITUKOU5zz8XiWrQJb0kq1oD1CnMInGbi7p1fbdQnBa2bxS\nnvZAt2+aar0SPlctxfAJX1rafpPDOJGS8pmvvGmPu4yEjU9SHjsHsS2Dv8Y3\nsnk2PxPsJekgAzoQ3GGP7derNN1xrKxws6OlJzKt42uD+y1fsyaFZsAGELsB\nPfUTXJNACVLa9/2FoqLsTH6qtgMYw98STFzRbU6L+qJZ/1pjuILxKeQb7A+z\nbBr2xgCpuqzUpU3OkvIlme0Q9h/pXRb4hhBB9RvuPwYq6SwCcjC68ynccZwL\nwvBY\r\n=62XS\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/elevation":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_10.0.0_1612541972198_0.97904716893144","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/card","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d502edb87e0346ff4d785d9d85ed2dc147fc5d90","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.b5227247d.0.tgz","fileCount":19,"integrity":"sha512-mDumFa2nGBjUqXtShuvgNxKv/aHc/w6djJZxZqsgajbawmEUqiAM0cLb2ueya0MNj+x0NhfZSsjlGELK9dSGeA==","signatures":[{"sig":"MEUCIQDAjWvQl0Cd7ip1mkAatWqd7w6mrwLfYdwAPfm6aeAcDQIgA1grs4rEd6aDDSokbmaRk7T/vgTBQdVHr1yRJXa7k9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYONCRA9TVsSAnZWagAAf3UQAIXcub8uMH/MYKgA0YTP\nAI7vexL4r+teqMWahSvCL12ZUhHUuUeCPiTN0Abn8H5Sx3dkX89SZ+rLk8r8\nOApnMorHi/Bdo4Mi6vg+wF8seXGAkJ+1m89Dp+h2wqU3a1qbjrsMr8tBgg35\n0VHqV4ojPCzqmd/tnrBVlyZ1aLiRB9fc59vY/HXRTcDjbMACP6LEyvInL/B6\nQHJdpQoQAUmHA+sn1SnsUOuQMLPECaG0t8mvsA+22MBmYQxhBpSausSrzEhj\n56hyAZsR3YgVirCIV9YpihKgKXHcBjIF0+0pMUjn5mYb1vpb+Ywb/6LiMAzl\nZ9iLMyoifdmYMC26q6tyiuMzVRSlKsTkZ6S2415Mq5mcNSuoij2RLMwltXPW\nIXvfruWV0blpEjM4e9lykqI2U3x2An0JldIKJxXpcfiS1ww9QBBGI6sbshuB\nZ2ShxUtevSHd3y5nau5SYLy8d2hcylohBjmyCzG2B3ZQUlDAlbNRuAyTbQXJ\n0aLAqpdvjQ6fbTq2RtF4n/g91V2ABER/M/h4VELib57+KUV47LyxMQNTDtNR\nWreFX5c/Cs7qRNnwVll9Wy0IsrYSHo2PQXX+AXroidMHui249ylVSN9PJb1P\n08/b5dMAad+2Cro45IDfJ98CFOE5pwcOJNT2UP/+Uaa4sItttP3AywAP0jq9\n028n\r\n=Wg7b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.b5227247d.0","@material/rtl":"11.0.0-canary.b5227247d.0","@material/shape":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.b5227247d.0_1612546956736_0.9923019690345807","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/card","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"718bd3591a9f97843aa7549e4063d98dd2a8fe7b","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.95322b11e.0.tgz","fileCount":19,"integrity":"sha512-6ZWcVGLPeCAEKiN4FgZnY+3nFJfAe1ffAyCjm1B4D/9ZWKOmd2iynYhPrbvIZIrf0TPsBADNOrkkELzXl6Ox2A==","signatures":[{"sig":"MEQCIAbsRKVAXErX4Ztki9pixcM7jcmOQCIrNWEHdkS7Zmq4AiBFKhzOdE11W6fqQVElTYzPfH9HgPddou0at2iyT56Kmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdV8CRA9TVsSAnZWagAAi1cP/2TrGt+yi0OyycF32J/z\n1X5aFna+AACbUfM8oqBweg9rVQl/8oxt076E0BdFISNs6VkBDBupdnYdx+kj\nnVr4rWOy+oMn5tMMBBsFPABdP9z6z7FQMCwa0ZtNAwod//kh8tRQ6iUS57Fk\nUsgw7lPCT5CL1DBoaCSIKB4f7OGq8FY5tf1JUdhtpEIEgf1QTIoJYlPdJgn3\nZMK8+kcgGANm9Sph2UEaJC6L4XaW9NurBedNZoQZNMYB4HXHUslxaAkOreG3\nf3d0jfdGiPWbJ/Idy1aKt318LBF9floO2OXR2iVKVXDMvGJfkhN/KBHI0Gt7\naSpl3qdqzv8j+zxGAivr6KknxwHUkerGli488kEJkCHEsynMaXynUpBIwiFR\n6URHWK0HJNS1pT3EhsRQVlDtPF7m1g4hh0zFGJGACsInte7g4XXiGtIqoD/M\nTZtMCbsKzgS2NuFKbQeYfOdYzSsUhCmaufKEujzYa/jTirl8KQkrib3GMDaD\ne1EPfEFHoUtk+WPkcWtC4r++GTBKWWW8ZDmY6wsu9p/uy/RcJWBwfwmlrZYS\n8UfP6z5ero6GaWfWc40sf4OTM9nV9CunXhhCCEvMQax1pLSV2kPVh2jQqOiH\neNUFR4UbSwexzs6aP0Sopy671mWlEVYiMMEm1pmS6avXOQckeYQbMNU2SPgL\n3X6G\r\n=/uzA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.95322b11e.0_1612567932050_0.9956281313202227","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/card","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0b76aaa37a934f318b659c32e95283d4ab03658","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.1f318ff0f.0.tgz","fileCount":19,"integrity":"sha512-j8CkYkQqH6wmz/I8CekdkPIpcZlZsGe4GMRjhoGtgjdREbdlu/psmedTfE5xIvR/wo6wnbDCZoUEfT0o3w1lFQ==","signatures":[{"sig":"MEUCIQDVEum8mo7zu6vz6qzzocaunFjaPeb9uoMQvHM4rkRTNQIgD9lW4k+BCjtzEJ1YFFYXM+kLrDoIekbV4mofg18eaHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd1CCRA9TVsSAnZWagAAEjwP/0MQo5zQYN0EBUkJ/gW+\nHGLY15hQUTmpeY495m4Pf40zjgRL+8FCoarEFIBl2yBSLMMtjd3egsH7do8N\n1gScWtkKqgdtfpdCg8eZlzYzQPVN33qeK8NBRli8/gqgITpvsOuALZXEqyKo\nj25TPf3YD4HCBjNAZhGkh7qiflskjSe/6DzdtcyLnPd3UOMfkBq+rc272MX4\nHyp1OMyeymDOdmY1rHb/Tm76K0PVobKb8VGEQmj2cPOKzRLY+iHjz/DPz9FD\nJM7MIhMmrh7+RuVuNKo6G02tCCVhZPjwmy/CQg2oumz+xl4oU04+FdYNEioW\nP5QfOI8XLaNFWZUYMUbOFgt7l4NjdPlVXM5nm/v69/s/6nBxX+LoQFoDE4S0\nkzVPDtd0YNrEA63Y9AcV6A582tBQ9YtXVWn7MLg2l8x7Z8rGlkGrltzPmNlw\nwTj4hmwlm6DYl4ECrbAiuPBPFgi6xmo5pLAvw8XdmMDTHKFJ4xEarQwNGnJB\nCXLKO2bFUnGthnN4+TSg5M3DUu2g8iCMiVZyae8XJCgj97I7MxD1tRMhliT5\n58y5T5JC1/Tagng/3FQ/aDSxBXN7/VrfGd02h8QnBnilGg2DNaPNrxJZx5nV\nYdnPMBnWQtkFbBNaRem/wrd4fTlJSnZRGvmgAkko69hUsSQQD+z1MbTBHmC2\nq8V5\r\n=P1+8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.1f318ff0f.0_1612569922172_0.13044189314463073","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/card","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a260b379c529139aded567a43891ae23c852a764","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":19,"integrity":"sha512-Ul3gQK+CCicLZU45RIqUiRZgWtvP2eOYBv8QZpWMmMjp4T5i9pJhKPjWPebO1uC/izo8AfW53gtM1K1OqJ92DQ==","signatures":[{"sig":"MEYCIQDX/hlQ8vOjN1+5pSC96RO4IuVPMXbTZL0yUic7gK+hjAIhAJ2yznjrI3oSsRHzyav//ZYhTi95IqOTDug6rbAlqY87","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLyCRA9TVsSAnZWagAAXl0P/2Lbb1Iw0zmLv5caoEIp\nic7tDH6Tja9jClwL+E6VlpPUu9woZpec72J7TwXqmzvvqHLV1w3LPsr0q6DZ\neq16Ze8D1+ZaF5twJDvivc64lxyMxBjIEYYlJ+sQnIDmB5l5p+jTCD5u9wuX\nlcoeivJVhLtLHnyOn9G7CR1qPPk4NG62T8/Ym8PIsOaQhL1uxS+yCnf10IET\nfy27pg7hfcxnXnH7jeh9EIiAtvZG+8Q1l5SQzbTg227/aVNIGjsXCn3f8uZ+\nXUZqLHmFxf23H8fCHBPyL8m+9r3YAb40ivCNax8qVKkwEI1VzsWaUIU+Q5L3\ncpXjbdCdA70S1cCQl55QJvjZe+Fp7uxkatWaxtNSFteOr476lFF8MEnH/XvP\neW8XD+ltGNhWExjJ93f+TDJiDd9bdGm9Qg9rRz5xJlZKvkjoqvmBG2XXySWx\nPG8iMZTumMe3bmwdJiQ6n5HkmUEdeHsQUNsfFhFgZr25MsJ7DtXnD3rxVUye\np4Vtz8LIvp5wuKRPmHtmoRxrJfHEzDMo+/85plVZQebuGPyjdU6FmQXu/d7/\nXQ3+PXRzG5glqw6RoouEm9dU7f6eiExYoawqHMkNnK+dS5Egefy58yBjsWr2\njqbDdAKCj4Nhpp/m2aubfImbfAT5cpNenbMhKfJxMBSKDf1WnR0+4uFcQidY\nOA+W\r\n=qMGY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.ab12cf7a3.0_1612796653670_0.9098677669047142","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/card","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512c410c1ae92fb91e4e6677dbbb0ca231402cb6","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.98db2c5ec.0.tgz","fileCount":19,"integrity":"sha512-5bWU7QO76QLOYxg+GCNxt59h27iT8Sfl1kEcr0zOFiaIfsZxqsNzyncvcOIrWxdJ97YCQWb7ilJk/3CljC8gJQ==","signatures":[{"sig":"MEUCIQDGP1H0xlScr13esYi1QMYUA9Jzzhr2WFWj6Grflr2wCQIgFhpnmTe8n1i1oXc721X/S8rHRle4DEsyohkoCFnoheM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVotCRA9TVsSAnZWagAA+lEP/1+T4aKZNOHPlnsskfgK\nx8h4qWItFkqGOL2j2X73SZB3HqErqRIXDiu+CP6j6N5NuJUJKTRklMQkHl/1\nuibRlBdNb6hiUNZWsBYbYSsGJr4zn2VAAyHLkDjr+Le8Vxag/EbPaQiVZjqE\nVSv7MSh2Q8Pots3f2C/jdAzXYQuRn55kX8WAs48F3GqtcnJlbHfTab9nFhXX\nbwtdY5QXQwK6VQINz2DQUJ6dhcBXClTLojronRETflk2mhV2TyuJnlQRgpa7\nim8sjlxki0PFqpnjef0vdc9Y/vd+PlVxAe7INE87ZZC43tWDwK76UmV0pRzV\nfzDVivEhC/Oj95ZOdSiPgTq+IvBOBykWQOqqtn/0+M30GmWUsovZp+2d6qUr\n6wIvlogxKcsrLH9IVvkLkdGX6OngTMEmUaSJ8VwYDMkOeSf4StBV+r94WYOg\nEdo6pemqY42sPy+gKR7lIjWosf+DqwPwN5kh/GRXOI2jrJhmXbBBAPEWnstd\nsHwEP5p5S8P1+Ny0tuBrljPA3jOHSvAppLcv83JzTDeuwQUmdLnG+6W5LrhM\n2CynCo0o20m3mmsDYDXYCQ//v8DkiY7RwAypqWmvxxAZ3VrvVFG+b+8GUrcn\nxwzntkw9gOC9flAgUR+PFG7MdYmgOOj7fzCBuGtATnYaNK/4ztsc1F/HmzED\nYm/Q\r\n=KKgZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.98db2c5ec.0_1612798509097_0.18453174747144563","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/card","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cceef479fde305e4b7b20bd34b80df4566d872c3","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":19,"integrity":"sha512-Proa4EITOklOwL495UqoTpki3otmoj5meuODslQNqRbenjRS9Go7301dytzW4aHYFp78jIyEG9cX1fKiq5jsxQ==","signatures":[{"sig":"MEUCIQD66tQAnFXe7qdfQh3coK699tFpNnXMxI2iFjAFyt1rAwIgNYR79jHzBAE8kMgitRxvo/Cu9tOOJWYwUq5Br96UzG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJICRA9TVsSAnZWagAAVF4P/jH7J/5D54FuAaZhAHjb\nY7P4uMmyNabSXTGNvdbqMF9Ayc2Dlrio7l6B8rQqmlMo0fpD9V8B3XNKK1d3\nIYGtjufy2iz59SuBN8e5/omlYW+77vkU6U1uUKjdGg6HnJCX7ttAMjnetiK9\n4sfvEARi1gZmD9B2aYAk+Cw6/ippyfJmdS53Z4m9Qh+FMAzlTKYajPidFTTJ\n1ZFJlScKhCvyZTnBafY4RdLAeomWo8qc/CX2VhAvZ+F5V0Sidfjq88sWneKD\nDnqzlhdizDtQGUpOCQkKf3qrTPsnuJdkg6gAypiIM57dM7ikI0vroNrnPV0P\nlWmLBCrOfktSNWtSKlUunbHmuHJ5M4341LmmLGSKb9zi9tvsiQ8FOU5ocuL4\nxfZWl1BDZlq0Jo78q7F9KGwB4oDs5hfsLu7ZEWQJ53Ykn8h9Hb8LiHp/w9fE\ni7CKqNK6P8MaGaTTkpedo56Qly0enzXkkZZY5LVfqQCjpKwy8ysvdHHjrtx1\nOEDYNVc+w/ooW7Fq4DzlnYrLuFoC2uZHm1Dd5ygE8mKf03r53u6tuk6stftJ\n9kvhdFAtnI2poPUK0ZwWe5LD3aTMlxFP2spPMDJ6ouZfG4TcA+pTGaXjcHTq\nis4BdasqNhz+/ZSv2cepgA/TPQDAT4r+FZlI7s2kG//e1f97ABxquG95+3i8\nkr9q\r\n=cr6n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.1f86b9f6d.0_1612804679970_0.15220976113354268","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/card","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2f971713719073ea1ba50821df2eb89074126cc","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":19,"integrity":"sha512-P1TfbaUP1v/l/Pl1bjWHLvkcvWyTO6oSL8bRR1rkdmmYfO/PT27Jf6B5BrLVU6FR7c2vAtGSPUQQiQBrzAvCZw==","signatures":[{"sig":"MEYCIQCGmAIis6NjQnKAV8ZqrPVud7NZzC+GNXjn6ugfjbQ3ywIhAIPrSbOD2IOi10KhkmP92yXpm7q8GZxRKHMxLQEhFLZ6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXxjCRA9TVsSAnZWagAAiTEP/2NGnZzE3h/5Fz5hsckM\nCfyMt2FN6uKdKtx3gkw2Ee0fZzsdfBuetGTmB1o34HrlMCvvehaoyr/sEl60\nlPes3sg7GGXFaC3PcPMh5dQ18331Bn0Fr8zqaPnmK40FwXkFmyDASLG7sPNs\nWjzCeSO+NUrCTKtw+KgCzTBy2/slCzIQJLGzgkcfGOCHBZqWysK/0ZBF149j\nn/8AG9H63zD1UKvBuG31tNsjN0Q8dm+gACUhbRmlBYzyNrEmmFRF0lEtjLqD\n1mMq0YAGUC3SkJAHGo1xK8xapIwCmulkjjtqWT3q2fMmuae3Xe8KHIH7ixYy\nC+5A8XOV+mu8lK9sNlSyrx0SwvsOWAsM4vqxqcwnhZWNKA2juc0xP6x1M+CZ\nbBGDRhsiCcOLxsT/94AzVcuVefGpMOSWxh5gQwfCsGH4OPfnw2HmHLzCuWAq\nGlc51X+9HRUCTiOSLbaWIPi1fkZVpxT18hFdupNWZmY+QgL4tpPptZ6g75Ee\niNsVzJhKC/9F++myWgYnwYEDxRgVxrrmheH2JdMTteG3xYuf4y1S23tCcO2v\nd6DeTNGpRyPQ9nUthNNYTJXb3h/IXsSpMl3bmW0Kazn0ylpvVP0U7kJQIZDg\nS7tdY+2jxZxOJWJ7In6HDvNaLQnu3XVePwifPlpUzfCDT3U2mDyqXv2rdAyf\nkemS\r\n=r45o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/shape":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.aac8f5d9a.0_1612807266541_0.37948801945612254","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/card","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70bf66b4f25f45b021e657d156d551276edc04fe","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.750e18fc7.0.tgz","fileCount":19,"integrity":"sha512-mtL2YAuJJQSPkDG66S3vu6sEx/+a2QtkQ0rPR0nTtoC7Ic7lncqW8zxWXOUaOwHVUHoX9NeLtjdO66vKwl15WA==","signatures":[{"sig":"MEQCIA/UV3vT9Yc5wISd5JUoCxl80p8HVmnXryY/JaJGmLEKAiBeeXMmcJF22ecsa87MK1mwjvp3jKdzXqSbMclWWKKL5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbAgCRA9TVsSAnZWagAAwuUQAI8sxlsGOwC6aqFMyRNo\n4xV0UiINLOBf6Z8KuVkvEIutdngEvQ+QUxusnXbwhNH9EjagqxlGBA9uexM+\nSofbWX+T6uJLan5jOwAczug9SEu3J6Obv/wLfiIx4aWt7t/IkDhi8+qTg2v9\nLSI/UpvZiy25q9r9R8Ui7SgfjELo6mwdfS2ibpofVQupuwB4UExyumcq9rZC\nEfEL/T1+2shD0EcFRcDHB7S/RbUR9BBjMzbwV3V+GHJ20tyWYgsbiUsL1UOE\ncJ1tx+0Ij37oejHASpEJ9dkD18flNzNNBMwyJuJyBVHZBjHP6e4l4b+dp0v8\ntnosSMn78sqAuJ5pxoBgGGv0hWCKZXTl0lzns3ZYqO0lAtmoLpuFM4Wdvlc3\nRdGZmSIPta+oTFeK3YKuPuTJ6HSNxUa71lFeTmWWJQB7zGvQvQ81D6DmpwBJ\nSlujK0tYi29mDbQw6+ggE7KGatgQcSdsdU1gN07/qSzWW0YxyG3nOBNTyj0e\nlJ8RvI9S1VweZ1aRfwRnuUD8+dObPzoFaF40q0J9EHe9aKbEeyw6nL5M72JT\nOytc1pI1FMedSsdlsEqUPQ2PaY7hwWlUHsSdqvypl/4lAMz35EiIJsx9MLJJ\niuH59p6dJWbwa6eMA542Oz7gl1ieLGrwjl+2aw7y7VE8evzKEKy1qnQzMkwz\nFrHI\r\n=gSsw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.750e18fc7.0","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/shape":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.750e18fc7.0_1612820511964_0.7413096278379057","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/card","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"367ff007257fe45aea801347fae5b5a6d824d801","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.b62b1266d.0.tgz","fileCount":19,"integrity":"sha512-jTe4iJQ7dQ6ZtWLRDNuPtxKiDPgHdHtUCOaJnJQEy4t5WqBg3WGsDNpo6mImTkQZ5JWZur6rjGysubvwUK7ZYA==","signatures":[{"sig":"MEQCIAqiZSu1cJX0pDHBgBTtwU4aQCN9JnKpSqL/KVKY68q1AiBW7xSa3L+JN16UCSKCx5/5QujsQkgZ7PMXa3lR/+meSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwRLCRA9TVsSAnZWagAAJYwP/RappOh6hT1d3ltmHI9v\npBrxRUQ2B1fPjWOJTvjri4hEL6cba/ZuTNrVVUgbH4zR7b6EJUfY3lbICw4l\nhyrQuTZO9lHqZaTUVbT7Q0QWCal8Uw3ID+zcv5t2e1qgmzr9qDRmm7J0r7X8\nSG/eafIs5zT/Oqn06jdA3xvN6hxWCip+bXZYsbvhh58HSGZRd2uVsUr6ZKIf\n8tWKZz/7+JIKsSV69XyHAQeXnw/LqiqKaZehqyVO+hXGGcPMdIjqVboCq/ml\no5zTLunrM4Jot1rm5T9UI/0eyIavD1dp4L7i/qk/LMI4s7Vgop7vz6JQ4Nrn\nw0dZArod9Tn+jmziXB632tp6/9Vxpa1jiQx5cnPRe6M1Ntuo+N0o1W8IiQCL\n4cT5NQC/XVuYcREgCUlShpAqv2SR+lskJ2e8SbNDLB7yQbXLL9f1WdpCbgKP\n1U/nR7s+NVvF9Ku7by5MAHWv3LUtxBXAV6wvpN4TtCkTe4rCxEymoPvqDdpZ\nDcWwhoNYUrDWlOcd5W9630EIgqtG7PhdEGCtL2BqHQUsGAB0XirhUmqhDacq\n4woI3JklSzbsHHcWFKv9q2BJnQxZMiUIWJtEuSegTNlwB01unArTqBF3D6sy\nGsQtcc7y8qAsLlqL+P4PqKnKCss/G/Lj0NK3Hjqegtk7jiKYlNI/zsd/IJmG\nzaSP\r\n=P/vO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.b62b1266d.0","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/shape":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.b62b1266d.0_1612907594753_0.775464729023811","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/card","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8a568aefb459d4c06ce3d0dda713729f5dbdece","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.a6b3101fb.0.tgz","fileCount":19,"integrity":"sha512-yJfmLcrnl+JtJc84DuuFXeCcmvyIxDxasbr7OBwUeSoCB1fZCEbSndhE8kBP7lLG3zl028Ers1SaBSyNF2vi4Q==","signatures":[{"sig":"MEYCIQCTEGD8lT2kCLpyvmQ2oIVP3eewiL2Q8sZuiRqECfaUAwIhAKVRKGxR3QCawdvPN3nB7RODUUoZj2fH1W3kCk+44CLx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbsRCRA9TVsSAnZWagAANnwP/2Xk1k4UFO+MvPM/4fy9\nHOhxHu316yRRCU7P3dLwgyfs8GLcpIwzbY1UpbNkuH0j1bHsscPX0+XfPJ8r\nQ8hU8y6VsQboqf22cSmxkp9y59o348jmf/SWhX0/PwfgdLNNGmb2IpBROYGo\n41SmL6ipuu2ysn3ACdzz/nleV9+4oZum2VmZ6SnVM+oXYMsZ4TqiaXxz42Yn\nRGuAjxPMLRboWmpaxdnpEwRa2y75hrh6U1G4J8NGlS/HqPpQjiBvWYHobxHf\n3F4QgGug2aUdEZakU53KFOLlhmX+dnfXngP6JBYN4HADCbxeoidYk1vscyDW\nUdB9RQD6rQCKVO19+5qW46F6rM2L5me6UiL4Hcn1E0sq4e2b5S7CR+loleKT\nktuj9fcvFuNLPzJboDoCZyQ90CWimFnGt4kTmSae2LFjdI3ui0Yzhx4yamsq\n6hF7Q7riHDs0bYjKILL8np7Q0euuSdlYUIdLHkcKHgpy7rpH6K0y1Fk6Gk2f\nPlr5Oau1ePBF3fqUchSX6nWv8zhIG2qn0qP9DGU2ZbKeBhuufHNzpBqQ0E/L\nhEVqBVxMoRIoVcv0rA3uUxWsRid+RuQlqYULwt2ITiylO8aGwymNW8L9Q/f4\nUQy8pyLiR+oGT9p6bbdWOcSAFYiLwZlyMLF/ICI5bZ44x4FTY9C6i/b5JG9k\n/vnS\r\n=sVS1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.a6b3101fb.0","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/shape":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.a6b3101fb.0_1613085456637_0.3613489757804067","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/card","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b217cf580b43b3177e906643a469627ef16023","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.ed88df700.0.tgz","fileCount":19,"integrity":"sha512-OutWdE7nx6BjywgIY4GPuTBauENJBv+QDdkSNySecDTbq8yt0TteBBCfQq0JfbsdsxJB6Av7mEUgP68KWo8FTw==","signatures":[{"sig":"MEUCIGPPCPAmUCbF2eMkdTxfv0e0jzrccIneNORFj+YeT/kWAiEA5RosZPwqFXrVSc7v62ISnZIQ1OYLww5YrEBruQpYAiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJca+CRA9TVsSAnZWagAAGtkQAKQ/gciknEhNIoda6fHb\nucIdEEkLMcULP4VOAvznDAd2sGof9CrPAH2tTsPqCR4E98/PAx0jaUBv31Qe\nX7iHO9Q3qu1NymGxLmuBZelLHQ3rTqBk5bNVIQqCgEv/OVqTW047ih0rnjX5\nhi5eq3TtuG/m79ZcHZ2y0bGqC227QAEt6nY+q5B2pQ3gk/xGDQE3JghBkJVr\nRq6n3zDfDtVERzETrpO1Fyk4U9Kf/iLdpWr1dDSg5Hf7vitTgyqN+Py4kfxR\ndbz60JMwCl/0hwpON1vTiQCs9wnN/Cz8psWB9hy8MryZkupfnQocuOqvx1c+\n8/xPneUXavS+IBAgKf+szG4wvpySFysfamRwl8FPRbVX3UGic77QNXVY63M/\n7rtwZ56xFlNSLwSDqs+/MzZHy0tYANIN57Go5phxeoJM2LX9I4kOErZivZxW\ndfkzVHI4pL2DCPezdmV72FLrXW1vVJMJj8fgfQUJzurumjGAUFt/SmoN8VaU\nzmsEbJ+Y647hqXPEH7OfzR48l6ch2tiUsousD6ZtP4/ShmwaQ6Q4JFerTger\njuQNYBeA/oCZPSDFQ6gQ6Fvupcc6jW4362jntYB4J26AiXJB6kw/FZNIg19z\nA06BdwR/SeXgk9OABaipka3fJb/vyopOVkBO+46ryeywtcXS2aXUhxIw9uUA\nPBkk\r\n=ylMH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.ed88df700.0","@material/rtl":"11.0.0-canary.ed88df700.0","@material/shape":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.ed88df700.0_1613088445992_0.147329735562725","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/card","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"661bdfa8b25e6c6856be24709f979260e67f22c6","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.d30efe6b4.0.tgz","fileCount":19,"integrity":"sha512-rsli7ZNbFw0vKaHhP0MDW1e2u8k8shR8KRopdhfKp3NyzwmJ7in68cM9Pae0fWerIKJYXO6JNOMi2CHzvYNTgg==","signatures":[{"sig":"MEUCIQDhw4MshtlUoCY8BpEO2nDbNnSS0pF26Dy08CttMmLtmgIgKTGHmQJfLdyraFGeHc+IQrRekuUo+r45QbJ5J6IJmt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJesTCRA9TVsSAnZWagAAZcIQAJyPrzdK+rxry9DsvXE0\np23VNrKJbJcH53K5h4RsHY7fcm4KmTZmgt1DYQOGhpLlZrAkLeJ8bZ+YNPPY\nev+9CY82SZQyvViHNCuzkH2UrRwl4lA9A+KfleWJksklYKKQ4Hj+Q/EG/PKH\nsrC5R11u4hkcPAFE3ZNyIwQYmM+J/tp8aVg/Yz1Ofu/qUDYQA+ah5CYdxd4T\ntNbZDFPTN/J/ln6MX8qyKdpn0xgLVihl801782FRiXfaMPrfG2v+HbbGrp3H\nQdxZLU8eED5U8HAPmMPKAQuFe32c+C/Xfjyff+W08xayMgCdAjNxDZo/l+Zy\n/79pzWlkWIpU7XeAQqTGs4eFdvc1oETJZ+NUU1Dxpq/xhNCalS11SHzDdQhi\nUMyBWjvxh+cFRc5ryoYbc+2FoPkUcE6N6qY9oQLz9of3a4ZFKJNuFKsIZXdG\nAKSWeBBoUw0Q7SEn6IuTC4QdA9zETjZXawXxA9J+Z3ltbEp3KgsI4UE+RBRH\nrh2S+qTiKyNvMZRFNQqOm4gPR1Hb2jvCHTlLJGBfExnhF+vq8xoosEV1NHM2\n5ZwSzrUFNJ1nZA9Uvbbov0TIc2Z4yv2aJ0LsM+do8pbDRGnuAnaTe4cyKrk4\nXbiF1v20O17peAMCQeq4SDZsqLfHM780DNPSKmE77iQ0iioJ3y7NGRdbeLKU\nf4XN\r\n=7VNQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.d30efe6b4.0_1613097747042_0.24117009031253067","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/card","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5af3041584271bb2c38788cf8d2e07ca36f307f","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0393bdc4b.0.tgz","fileCount":19,"integrity":"sha512-hpuTNtOPsKCj8oqUhvg3Eu5D7qkPjWP4s+SehmSVBNI3rVqck4EwJLWQO90fDZnMq50Cc7P92t24U5Hsd3hP8w==","signatures":[{"sig":"MEUCIQD5uDmbaN4hq+oCD1TbJ+tQgLQzYgovDM4Kn2MtaYZxBAIgXNK0cnkT+xt/QtUAlkHJQSluRCYxCmpo+BsCn/WkxvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSiCRA9TVsSAnZWagAAs8MQAIp5u/57sPfZwuF9FyrV\nyOAl8n+HDmAQdfCPwccDgYTen34NSo17isJoLM4yyeiDVTgI9nO9VN6W8xfr\nBhA3MAW2vFyXCMhdrBlzky0pH3NjmHTXsbahwSs/MtJuUb2yExCdAcZVD1Ec\n7oghdobV1HhM7U9hlC7MhDlESmfUGB3YVoqiZOngD6VEFU1insJwrC11Gyq7\nEEzj+tWVqVo+YRuC4ik83rp0I7YDiWFJiRlyfYb8xvb7sV2zU+ABpmRw0eLw\n0XVw5EzkHf7pdXA2Kww1vGL68oe2Q13sJBctlrLQONWtBp+b/OckCLbUGpEN\nEQPRcuAcubZFfHBE3x3xlFCda1LCsbU6RICbIVodhDKVyFc7e2TGYpFXPGd1\nzF+nlLc28JAXnS3LgnRp5t11qJZJx8F0/W7fVB2LJeIPnqcxv5Uk2rH1PazB\n4DOp+a0VYLtOuGwUw+ZQu34TPdDqGxYddm5gVmsZ4E1uvfKixZUBrFjFJ9Hc\n8c9fp+/tqRQ58R2/uQZZrfOcO6LV15KmVXaO0TxldxvaFW8R3GYw6WyITd2+\n8s6aDQt8bGCcnXBUxugxDsFlz9tTZQAdgePkmSS5p8n0VtJDgmTiU8DnbPOt\nxiEtxAXACaDE847z6SSInIo4EGC5qeHXe470x2dwm3CNQFFnZmM/XTHqQ4iw\n/aPn\r\n=36Gj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0393bdc4b.0_1613104290230_0.3652546949732878","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/card","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c54fb4684840cc75b7e2cf92cf8198ebf4b78021","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.7cd26af4d.0.tgz","fileCount":19,"integrity":"sha512-iKGsc5YIdP8x4g9E7JtS2zgZUaiDrscsbC9s/0VUm5SkxFKRSkQz9kSyPT7CLYiFXHH/NQ92tpKLweQexNt+tw==","signatures":[{"sig":"MEUCIQCjkv3Drx3gzFWQzG51rG7VvcnZEbgt+awtGOS8MUvpQwIgU9yzwhlNssI7iClrQv7uZI4RC2EWeukQO1KO03YR3FY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqX9CRA9TVsSAnZWagAAJBcP/1nrACWTV+BX5O4pX6RX\n6teBc3ZT0HfOufwQDBojA7eVc8cIPKb1GTe6+xcoAXxGEu/gFREaKUpGjWY+\nNjfI274M3EFmArHMDjmx5rSNril0gkoaaLR1Cq5Euvq0cg+pJdZS866HGouh\nE16+z/Oy2IXG2gTozocTYowEoogJYsHnDDjLhOvaiHsrvcRwbqtPDdcWOKwI\nRiBvSNfUlohHGFluUeoXUKPMSpsleneCJ0/TRHJpYkNN5kSXbnJIjb/nActG\nS47imOTqFcWm/1spzuWbEtRT4OH1Wg+GJtspcJcVNTh1xG/9rJ2mGaRX5EfB\ngAUA77MLTufjBymn4fA/jYq4u8uQJZq5+HReO7FCjsOxrxdSl94Zv2CVmzho\nsQYaUmqffiVoTwh1jjFVdFq0jVuRtS4ZKg3Uj9btoHNTqiMz3oIpPfxEhKgM\nzvsprl/CiMxBYvVH+j2GZU9jMCN+YIHoYt8J3r76RfWl7rvZFujT2E8or+0W\nO/ojyTTIXgW3eSDzZL3XrDLpYngOht/BHqIekEio2s2GLU1yqYUf3I/vIjoX\nXQ9vzj3TR/NnOoS5HcsrC0FEQOSjPR8ctQ5XyLFpQYkDyhQJk7fLdqCbCuH/\nyFXgFlIG2XdKX/ePqHiQ1bbLid6t7cJ+z1RKWp2IFZCoSNA28WrYRzuRD5M4\nGQKS\r\n=KrW7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.7cd26af4d.0_1613145597164_0.1599308985675727","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/card","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69038dd31f4cac27acb9e49124e9f9b53cfc8fdd","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.71fe9a067.0.tgz","fileCount":19,"integrity":"sha512-/UckJaWJxv8jO8o6MBVdxa7x8WLWJwX4R/3Z+UirL5+iN1fVWRG2fA+FTt25/x6i8+9tngV/bGfV1+vth9dBtQ==","signatures":[{"sig":"MEQCIA2wkAMMgH+KOhqJNR+jhizsIaIkulcbrV3q5/VCBv2vAiBAAxCZLx5LiYLj0ffxlvCGP9YtCUGOC8vs+0PbA8HD3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq1lCRA9TVsSAnZWagAAYxkP/RXYV1/ycushflVA1mz8\n4EPlfT3fEY3sHF8/CR/nLkqgiP1jWszEXfYMU+HOue1WuLUKjJKz/+XsF64E\nZ4WdDko4lMUAOgcFm4DRRNYTtolMtAHPVRooNZKfyHBrjzEHKg8I76tiNa7h\nr+s9LqZGqTNe7HHtpEDYQFwiQklzIGlaaUDg8FOtbgQJC17EwWaSXYn3xQkU\nY1BUVpWB28zA3jMYCUXB1VRQ/UV+Q0fQbc23Y3cJxByyFvsnL43IBS0kTQWl\nUXsRqhMrKzXAR8ZhSWtmRteqWD7crYItHpqBSmYrn7Mu/5b57O4XaH/oEykr\nVvSZaF4JctH1TN4lFr5akkgRkDxq0fv8i1RELEYR4GCoMF53Cu2vUhEt0LC2\n6DhotDfDrpnMCWLgxmV+fS2F0vI0DOPjn13GGx/eefmOiy3ilOsMrXQdXjmj\n3SWsWFFPYdAx94QT9AKBlb4tdDDGrYx2RMsFkXnTOaL8St4evZFj7Bixetja\nA4OH+ywlYoKG/NTkNdWlCtHlkmSTf83UdfoaiQ1wKsaHoiKm4ptlUWsYZgD1\nZdhag8Kvm1hNRVwUMe21yp6lfrpeCMCf9UnRf8qrECWzj/bBVcHsL3F0hCDJ\nBv60WOfd9dNd5WfKbFmfxvx2KsBERfOoRiJoz298m947Ne77ArnXPPJNrGXg\nDgM/\r\n=pDW1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.71fe9a067.0","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/shape":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.71fe9a067.0_1613147493044_0.07412979537817366","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/card","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da3a89be05287ba7696087eabc66dae9f25b89e6","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0fd56a86b.0.tgz","fileCount":19,"integrity":"sha512-7lvnsKftathPr/rqDLd9MbC6PBWPMXpuuBTOIghqxZPMjKQOevNfmGSerMtcvEwWBiueF2g6T5mvhl8iNsPNnA==","signatures":[{"sig":"MEQCIELBOZbAorqav8DSxQs9py5+LneDZsN685iDvzkhq58GAiApT8h+7oMxI8DiPbehwxigBK1s4Hm66GE5C1zOpWU2SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxllCRA9TVsSAnZWagAA8JsP/0YnZcIacm7StH+kzNQl\nfowxE+SJQSpuIYvC0EXDQDEaLWH1czfMlDQqfbmKz0zTvpUj/8zXp3rNJE3w\nLizIbgMJnGNcLimwqZeBcdXLl1rf71jL83+HxpqLCzmSqM/Q4U4+W+fxkWzC\n35g8gx+C5pjEM+lFg7citsh/iepxaW7jaEPLBhzFh40egyuNQlzOj7BvZYK9\n6wGaVpwipOZ28PrGd1uIz4SzkQGo+jBD+kaQgRjCWb5vtYOyTIr6zDvQMfOX\n/Hm0rXQk1CW3aPxOuQyJE1DHcy1tRwV5VDyc1rw8LFh+Woiz9O9YvucrrJXs\n/vEjQdGHCtXhlnYTVZp9Oke8NzH/W/fqQNdJX8En8pRsPnKmJMPYCjbFYmMC\nTyB4BUku8nzWqUqCXBIrR2m5381adrPZJDYKZEVpNPdMB3WaEDWrNeDrnSNe\nPwjnvklygkGa+tjT4iP7ZeoYcN52vZNkT3rdz6H2dOD0kchTb0jGELhdRYU5\nQZjj+Xc9AAF4DfexJKtzDaA0yIQwOAYUSnIXcunH5iombQluoXyMMD3QmHZ7\nw8MvoZL3DFjgT43LMbWFDBGbXhCZJxchGJC8DD2JEzeSu7cjVQYT62KICNRH\nImcsP9BRbKsNf1bcbmJubxUnWuWDgEXMb7XWro6RgtxwVULGEy6M51fb9Rds\n2g8g\r\n=jxU+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.0fd56a86b.0","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/shape":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0fd56a86b.0_1613175140974_0.9674338769943494","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/card","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16bea99f19057997167b1185dd40af1b8bd84851","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f19bbc4af.0.tgz","fileCount":19,"integrity":"sha512-nnbFVsNOE63sefnOaj1GrLZcYPXsBfvg4xwM2aXybUKoXad5JbQgIAs64bqXYPVRttnytkcoDQ/H/+2G3+lQZQ==","signatures":[{"sig":"MEQCICmppoltj3WtXb0HveRX0dZEpXtXmfvD35Auzpn5zAW7AiBUuD4Vqe2qaWsm1hlt4pcXvjcCAvW8ayBn5np9B08U8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLERUCRA9TVsSAnZWagAA+R4P/i5cqiNTSOy8lXXhtOh5\nSRjkphK3WvpCydsVNkAwfjcoNjBmscch9QNoSc9g5muWiJoH9IP6eY7Sozhj\nyLnw9DWKcuWlY/+bakUSOUWPjq6CocFyh58IWj+afXUJ05K64veVEfTYH/bJ\nAksylhJYl4DiAyeOYpKjtkwHINTcL1Ng3p/YRbG/fR1FX5nGBVPLfrAKFXuP\na8YAoprkxliVcAuEUj9yuuVoep70DvdyCCYA1wlDFdsvujIzaQNxFa93/ayb\naMKdFP5Y2JMRo46/ljEbUa+bOu0Vbze3G7rfJuHyMef/LrYyfQYVELnotbdM\nkjHgL7c+94gPBzYH6uHzuWnh/vjonVO8TIKSi4uDxhsrGUxtsmPLKyl9Hg4w\nahivBGZ7uPlCBQnXvzkLpN23ZYoj5chRW9xDi4cg/fzZ/Rl/MMAo0Qy1TA5O\nYq4FRBsfGKOy9b7ZUbPRz9tnCZKrhw2R2epvLoshpftiWkBQ/uifHm83TMWR\n+qo2/Lfht+P3gX6sL4JSrsMz1ui6JMo0CtERbNOLx7oN/9dGX/mwp/1+XxDn\nLgZqUssA/iovvFo1O1fQzypwnDQH7whuPeIcS27WXR9v4mvL4ad2IdX/q+yg\nIppeLCqxItUahTBI+WWIlcGV4H0EMvpaKjfB1lgL8So9xU02GG6+e1Eun6yT\nal3w\r\n=bwgE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f19bbc4af.0_1613513811913_0.6672004534429932","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/card","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e915ae16a7f60261aece90b09ce424cdad09614","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f9cac96cc.0.tgz","fileCount":19,"integrity":"sha512-oBi3r/2HxkqigjHn73FDX6prgDchcHC+tiqiz/8R1sQQhoCeut9FFK/5exBXQf7BxYTv6QBdy77Yb2MZUZcqdA==","signatures":[{"sig":"MEUCIQDzZLYIZEMWkDAlIW/Wx5ZVJrgPM+FczZ17+q2e62Q5lgIgFmnEWB4Loj5ewpWbA2Pb8YFRCCImAfyAWasRZZRFTLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/1CRA9TVsSAnZWagAA8pUP/2up5P7XyNmqTEM8saAU\nqY9NghxwKlWA4dU6/EJLDySXprY4cFuLfmgofL788UmeyI0JwgPUrTBBM0w0\nTai1EwEw2ws4mhkWPhpvyvNjEHwt6ql1xTsJwxWj8TibQG7vsMuCXfnwux6S\nlzyK93z1UtOLbskXIZvLURlAzrT2VBui5+V/6uSmmg12x+EWEOB1yvaFt+T1\nPWTJctVtviP8MEcdn26QPVbtfqkFPu+WkZNIdY25OPINJHBbk6d2b+f0X/tD\nKhAqZ80u17/mJAGcu/oNit4D5PwdhVfPO6xBT46oP+zivn79/EDoKl0JUtxb\nEBAcGAHHYZZhQ4frCAqvANaN5TWwx18JvdYq2mrfkDA27DBR9JzvQDvLETfz\n827gchOzzURD4MjEPM++CVEHNtOy8URvP0ZedIDqXYKbksxT9igpXGXffZU8\nxFqfmjLEHiqo7f0YsEXKWf3ai8vkgiaE1ncPVxv76CKaw3ARLf+jaEtaG31a\nt/OlWQXZktGF1y5QiGfI9aiw5dHm5zGyFB6hWL7fEtBV6gv1KJJcUkFtISYq\n4C0dmPRkvYuDrQjEAJZV5ld8EH8wXZwofEPLboKV5TzQht9aXsecdUSDhPRK\nWQmm5JnNbk8DLnk95ni3swjQSf4hZYD2e48rZeK2/PfEmcBehzfVKGu279aY\nsDn/\r\n=LMJE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.f9cac96cc.0","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/shape":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f9cac96cc.0_1613578228563_0.15538184906866537","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/card","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03dc614b2f83f1b510a905fcc308ea49671deeae","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.79ce0878b.0.tgz","fileCount":19,"integrity":"sha512-WudWp2kdjgudxVKyR/7qNr8R7uYiwoZpO6jmBIQgtRdPQsCsiEsGs5tA9zvGDRLr6raihSCKHUDtCPQ3bVZQNQ==","signatures":[{"sig":"MEUCIH33wq0Z4qIyFTEQDqCG2NSKcw7BTnvMNLEkJcNXWqa3AiEAkQVAptMH900idNvu0A61yQV2efmAephTpN3X/xqdkr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW20CRA9TVsSAnZWagAA2K0P/0OK2DXpLFzy+YPSdKtq\nvHwlXUsgKxofPl7mVAtK1jGY4515nB16P7veJszPHR7JXjuY+IHsnILT6kna\nyJI1wxIKjcldT8Fn36wH5aGqrl7D+ssR7j86kjbSioplIjjTlaT0mvAzoSYu\nbsuOGdHDLHf1FPm8gVnx0fVi0QUPWExsGNVJ0FNupqA3xv0+8p7R7V2+Nob2\nHG3Gd4+5Ykg61VsVx2+0+BeU5phDSJyi27/QS8G6qCFzmtiX4hmITnjPRaXR\nwwTBlSEesMuiBi8o4QC/Lm7DMQKYhLusU9vFQhqsqwWxjCeVXvrbcUFHNg7F\nbzSKYDV3cpAb8RQ1WlZ5MndFglgz5Q52/PEkw7y97qRel1EN7lPVfiKXGf9H\nw4g898DYdmeJ72nvE1Vpn+ADWyk0yAYqsLUVzuNer2X5YcRmuBLK77N9OvBk\nYdXGWPKIUJiD3ZdaoGhHzrd3SFypjYt46i9GJLtLyg0L0cDf1KUVQsrRzEJX\nY80d+lfAjoZ17xggsdHig9s6r+QL7Pha8mFqJ0VE+VwbegICqPYhqK3tvZJ1\n6i+9WvySWLpxgP8vIUbgD5MsR2ZsLugmwYGsQnHxcuVI70VFshNk0d1V7QJ+\nagW/b2j+I/+KYczBJNqhA+yR0+EoEoh8kP80vqeUj9JoIBZPXckJV1uXqmxK\nSP/m\r\n=IBXT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.79ce0878b.0_1613589939575_0.5783561306342602","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/card","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19b3b64b464ff0652ac99c3c023cd6772cd75158","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.d6e507b5b.0.tgz","fileCount":19,"integrity":"sha512-AYoObFMk986QXeYgNHv0bpIHGNZ0tX4agVg7eIu4QQHVCI64FPfty9S3BAeM/ZWmgHm2Xgy/+5NQsmnRgP/WpA==","signatures":[{"sig":"MEUCIBHme5gqBauoDNquuPdPVEwOHRWkMjvwoDQK3Ms9d+FBAiEAuLHBCPW7M4zjy1F85Z/sJop612ALWxE1vHwu0BIvPso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVvCRA9TVsSAnZWagAAlIUP/Rw5xDQvHRyZP1QSlI2o\npp0Bn7MWHfp2aSDcjnL6qJO6FYN07thhcaIs5ByaiYC41sFlnGLdwHHdnMjz\ncLYDFK9mwSErXYty8GPbn8W2NLpy19CD/wufUOjcUzlad7WAcbiSHTa1GkDC\n4j/3u0DJDUEYSx00rN2jmOyUQYxHyQ4tHZ5iikpHt4vDzVYeu8RGpjuPjkFC\nnSmBlYMBsV+pbvAH1/8YhPCsXuSBuscf3SqgNuTQgO7OrGcq+eVq+GL+uAxI\nPq1wUiYlzW0441r1ebkRkPuyyOqulfsyqpcDJnJP/HsR74OUhq4DmxCUlm4E\nA6Kef6p8ktX/K2ApHZytOMenVeSZ9CXdQ4H7TgjyRyDQECdAdn30cei7rEvz\nwVyfBgrYAnkG9eQcI+0x2LFOZhmhFvDbL/yKb1vKAPgPb1/fgHlR/7Ztjedd\n8GRYpQWJeXkyJb70jW0wlHYhlYmeTs1oh/UG0buNX7kMnXJDt2Qda6nz84/4\n7M2/n96h18oyzbTzRH/tlSRJGEl6LKE0jvdBfuzp/d9Fyl6rvFUELOOHovnT\n/Wu7h6fVvRbRG1BKV54D7VkLjEx0Ym7+k0J2t+/c75IeD4+JxIA8I/y9Yqre\n2/76hLuD6llqTuBxOZGToZ6kO38F+g8geVrgj7iRMEVmwEWJptrIpMudxbUW\nNqWs\r\n=RVrk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.d6e507b5b.0_1613591918949_0.4448249882782722","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/card","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a9b61cdf1ca23f3775e455635ca4c5b27c45f8b","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f2658381b.0.tgz","fileCount":19,"integrity":"sha512-fME+iFQSH7Yo5BjinPnwal0XmoMJqjHuZxoVqLv6NNvR0AlBD/jVlhgb7iP5rBhxbYUOVdaye+nY4YDHfNWJFQ==","signatures":[{"sig":"MEQCICtmV5BrBv6SAF2wKPE2llcS1w7Hh0Di4P3GSu5wYfw/AiASf8cA70QNYKUQlOFZP2Fb+Car61HY7A8GMXYN8oO6kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZx9CRA9TVsSAnZWagAAz/8P/1BxfMC+WB4g3uqruo6A\nT2YKfObj+c7wq1wgIHR5A0D3rcsY3ybuSdZlJKiYiXviqnRZzIPWRrzUJGE5\ncV4V3BMGfLAFVduDT+EFx36WMgfSzN2xngFpieIBMlHgqdhbxcijH+v3gV3v\nKf8C2tlokuH7bxOnakKjHPQxpwqkPapEBZvPUlTRnWqOBMw1bzJic+yHFFLY\nNIeY7/AKuLP3g0FLMxzD/T3vil7U+tcxv0tiEeLGsUVsFIgRbTqXyGowJ/ko\nkx0WGZ4SNlMBthDLXMsqg2lsF5HhhKEZRu+uEcwRBMvBC/79vmKZkkrH/oVX\nie7ucssOCn+eISv/YdBGOgdb+1lvzi8pbh3VPjKGjsnI33DKGFVJ+wVxFBMD\nzoTbWF9tsHaDiZK0ZwFdu5yPwotZapXzM0Y55KudGjlSAoJyp19r2gBaz4NG\nW6BvLlEveRTKrtCHdgpzBhH4hzibwN9sVuDwm49/RiiCjlCsRr+ogfpUYS7U\nVOXhamClTNqK2iKgIbcMYN9HsGv8zGHHbDPofJCok2/JtpG/aOGFRBmTDumH\nVZhLXiSXwLBbMalwkj0fr1QyKj2Ybg9FZC6bI4mQVcyjPGFox8WzLUA6yTLI\nmKKVc6mRxP1hxBvPADNhatt08Dm3eNPlRT559jj+Cf5UGtGN6rvgZpblv1F8\napNe\r\n=7t2V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f2658381b.0_1613601916730_0.2183195444750501","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/card","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d719c8ba86b85b2447ecb653ef567f40092288a","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.97c4d4035.0.tgz","fileCount":19,"integrity":"sha512-cVxk/HFbkxkr8IxJEtD+6IbZgPVmskPzwIRnDJGIOHQd06OZdBenZRRy8mAXjY+LQZRJ3mDt3YJlWHonDChTCg==","signatures":[{"sig":"MEUCIEcR7t7R6qekd6kBnMDmRfqSFmbj0MJTLp+glbTCQDNJAiEAxUPEr3ktD92m/pEk3849nJ9NpiPG7sRrroGN4DGH0tA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJ3CRA9TVsSAnZWagAAPT0P+gMbXVOqfaRjGNk/m26x\ngmUmSDgG9E5bE7cNtRPebnbVopa8ZFTYU9hYKf1EdDAYwTYM1XDA0reITz2w\nYAg7iABhUQMDKOjbasAquHR6eVT+jIsjt2wbW8uPLuAkgnI/LE1bFwg0tG++\nx5jsWURYIelsm/+6DY3wkCsC+3m87CWcK1oWdqNu4OrmerSKSj1pPDT6I58H\nNsb1YD1NoPe3wEv185528Bk8Knvhj3trSZriigsCVuPb+tEa8uLLtJsI+STK\nBKyZ6H08eBk9HpMFbdBeE6Ic6q/98LyL4jsgvCaxm4QUFkZZmHDeYwPZbu9+\nU7eJgH8x2y9aCJrWC6XyPaXSsQ2Xh7gDerQ7x1Za1nzYpqmC8oqg6Yldic1t\nju29QwK6++r5vvzjOBNsqxAViZGjrEheIP7HdkjIuuADoC07ae0p4GtAuAIS\nX3E1ondYx/g3Q014J+1fQXQK7f/KqKhYNBiiEBVWju7JCrkrlWyrZlVsg5nW\nhsZ81JK0k4TkNRGQZIwwlHPP7MKPVjdJUQK6USl0bkj4n10B8RKTrfjrg5kD\ngBcU5FcmaqOoi7cK+Qr+xxJISEM2Hk8puEaZOSeeUs8Y7cIaONfLyxVp2ntA\n+vIcsunHaPgMe8E9QuGjfuB+JrHIJ0AAtl2y0/2Ycv1FCRAKlU2bGOcueuOE\nOokT\r\n=XA/7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.97c4d4035.0_1613615735403_0.9383260473916746","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/card","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b32a2e10a1fe131af509b7db14c2e1a13b10007","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f5bb4648c.0.tgz","fileCount":19,"integrity":"sha512-ifNAkj2yA0ZxSY5ZgmBqLrZDPUaEL4daFEiFC7KQ+ym5qspz0amE2VH+O9V8tkygTypayHTDPAcGl0x0zOzivg==","signatures":[{"sig":"MEUCIQCTUAY44fTHCME3bOoI3ft0CXfNV4OaCW6tbhhQnmVnOAIgN/YamkqHlUtZc67MTX9eje2HOpLCL7YqP3pIJs74oVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpBuCRA9TVsSAnZWagAAWroP/3E1ucFvwTTfP4XZcc6b\n01gDjxSWMOJ0Feh33y9a3dOH1peLQry+Ph+K2dB0DQMra96F8IvAU4kaArL/\n2WjRW4wAf7P1zr5TKEGruJWGjUrSYasz7g2ggmHY606svQj9tu/KI3uNBDY7\nlpIuca2wTNW+acfGPpAnA2gIUfgvxC+L6mD0Yi8mVcPSE36CYMveayp9B8mL\nY2xvvA9nRCyiaEEgUkrJtFXtmwFpKOEbLgjUcEUqAHw0eug525ZzgREsn/Yh\npgFDixzU9WDHsHciZzmGVeZxGhQJobSfHQOQPJY08cK3/+6UbEodBShM3wCf\ncRkgvEmjBVR9JcUJI9knilmJAc0zLu4dhUCTqF0Pt+3R7kCmFv7QYNRhYI9H\nnwf6KslZqJzqW9PxrQnE7Kj5tptQ7OsJZYNB6t9dIwghL9IJeLqZkzaOlE9B\n+zmb7PpEuOQY/j6b+yxTKkaSbc15hqol+xjrxdp4KoXHaQWkJdJN27j8h1YB\nqfwNmnyNiDEreeueU/I6t9LdsVyI6/3QLpCwBeHq++hYDcv9R8uOhpenGSWJ\nuMu6KU85rRWerfgWcZGRyPIumJ892C2TDAG1YYHHTAOkcFKC22+aLDWRUdSZ\nE98ftJI7u/5WGXwJWIqSuLGKoLFo+f73qCkPZX0oqUunREATC2HlH+4glm6m\n1+6d\r\n=f0qy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f5bb4648c.0_1613664365396_0.8738904702753914","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/card","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00f3e7b059628f13994a64a86f95b912e84256ba","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.302c7a960.0.tgz","fileCount":19,"integrity":"sha512-UlxUrLh79mOdkukWCCKkynKaYEcKKv/zGYdtE5Us421D8nlngKz3+2asTBefEfGjLw9xeeFOPoD3ZXs5Iotw3g==","signatures":[{"sig":"MEUCIQCsVPjajwJUY66YCxip6EEBUCA61F4uC5prHKeP6qPewQIgCNdx699chlIII0mL409gXUJLPvxxOhYzrsff1/WVS7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrQ4CRA9TVsSAnZWagAAnSUP/i30cZenkft+B6MMZo1f\n0MtKJxsKq+tExB1e/iMW6sxuRRxDrXppKyKibFVlZa9m/f/3bgtdFim/VO2B\nGK5wtKVVYlW5Blk58tFhCoflxFA078LBG3BheGFM2oMpYZSXasG9UB3TW4ll\npqM0+ADXqnIRjHIKY/gU6ZdJSHLdL7x1EL5iNtKqXR65zJu1jZ6Ceh60AhpS\n71JhvHducyIKB50xb/mQ7k1cA/hrOrJcg60axqfxmhkhFV7How53ojLOYkZT\nERR9M3ULb6B7CS2Ng+NV89SyiwuqPRZKNgtZqzCykLDDvfkbSa73bK5YtYc6\nmwMCH8qCoNqvdhi75tgbccD1qBp7S1Uh6aI0Imj3ghVB/hxAs6WOaojFv0cQ\nZrDOtXkoZWxXHuhVAc1eOi8LQxoJ6GlmQXYit83b5ce/RYDI9Io4Iomvo5jS\nQghnQH4CnDpKRKhAFd9uPCVf6rl+YD7bUqsIYs+Gi900d/CUGp+byvQsrd5P\nKEhBC2sR8pQOO0qZXvU6dBMHh0B/W5/Mq1TvnT5hhThUnp8eEZ0VOhb4hYlh\n/whWVaEUN1qK0cyAtNVS68IRFU3ftNjDUFI5SrSnJJsj6qC61XLQtVwYXxjO\nhlBv+Zk7Udeu/k94/tleDnMczB9opBIbxg42JzahZBbUx4+YeXZL9DbK1Oft\n6OLz\r\n=UNcq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.302c7a960.0_1613673527830_0.3869730476079385","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/card","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f2d5492e08f377d97adc2bd1355f8285303a6b7","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.aa0aaf026.0.tgz","fileCount":19,"integrity":"sha512-G92XijFhS5cTbBoTfiMrAKgIZ9elA6lFIjLOOgGfZSRtoIsXg0ys0dkvSzl1lLci6ZfxlMKIOhOqDPP3gk10rg==","signatures":[{"sig":"MEQCIG4o+Kmvhf/j+50LZhjsuD9POKCT0yLCosz4BzMfY/pNAiB5BI9hwP7RnSz0oX52YzHhWCKJ42qqgdQpAGSd0FzF5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr7OCRA9TVsSAnZWagAA3tgP/jyEtdLLNqDT82nAXNa/\nqtSR3W2nm/EqBufAyS5N0Rc4ine6lY8gWO1X2gWlEKASw/018lHHdtUhD4MS\nh4j1NJjXU6CUJ+FZ5SGL86yoqisk5TdVJ4RtFzRlm/s8sxFuK1/HrWw3vuhE\nGHUO1ANLxtqFR89qQgsyX106xZmVX4D5t7O7G9r/J66Rikd7wjwQKVPBY8zr\n8sHsIyOBtHCN06IZtoZ279Pbx5/CilMPJOQWME5lDkvz6iJpa7I0rGB0xw+B\n1IS12EuXcWjLdcpDtuqtKqKwBbBVhW1O7YNt0OPxM/zIxLSZ5UbjrJV/EJ6J\ndmJrLLsmTmlU7tpw8fPp7Ts3ekvum2VnfQFtMZv5xXxrDdiwqZ+ACTe3H242\n4p/K0v0ZpaoL1GujIqzpzXs0GmgIhTj6qTT2dqyJYlkeNQrAjn3WLzgtA3uY\npU0E/uUhbPXJAnIb6ILIU90DlaD5ZppM0L3o1IDdK4GOu+LHA+RAC7afoept\nJnwTp9/21X/nJ3FW6ovYNQ98bxoE55BbqjyMhpZkQrefdG0u14Ax74QMDMN3\nBdOmb5QYYQfP93hdlYDiHzrLgz9yXKxtnh2zVhXCK4pH34zDIc4+Q04xrw4k\nFjp6b5Qx+LHB2aUAtuE3goR/yyAiZPUU3trbB/+zpaIZz1ic1F3pO1DNCdHG\nJCd9\r\n=ckPm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.aa0aaf026.0_1613676238447_0.12421595976661992","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/card","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1314a0259897bba80add137359be661a244a8292","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.07ff0c452.0.tgz","fileCount":19,"integrity":"sha512-5EIsXzDVTcMxD9qw96ffTrZz+IUAY2nPT7cg6jM8udiPq8wvrTg3gn6wp9YwwXcXGMWBFuyW0zIAy6KpdD7gQw==","signatures":[{"sig":"MEYCIQCQheQZcvjMcHlopypY7kdXqelmB0K64PwTnhg4CeRwjgIhANoo8FwzZHdfdoIAkiDzl75hvEEJL4KVRCBnLqgmi7NM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsNCCRA9TVsSAnZWagAAl9cP/2WXthINV6TrcKfmL+1o\nWmu96fpABSyHBLC8QTrKY8QoinQ/ojXLX8MrIimiTsL4mnjL2k/7zMBE/2aD\nUSBvXVJfJcIKTgJ7xzjUA/RTQRHtcdZAOMbQ5kyFwsKBlHolToEa6ibg6f+W\nihDXFLGBK45w0nPV5SXMQ0bB2nt4awS+MAq46Nueo/qJerCjnmrf0jflEBF8\n8QHa2PbQOsV6tvEKUt922LZfen8ZJ6yMjPxw1Mnz4xuZjsVREpAuseC+8fYF\nq0A50vS4jCN+rn0cdsM05BfRRKPWFB8FZ7X/rUaIewgkkkoeJmgqFS4SX2U8\nKkSEan/bCCQuubrYkJT4ceVuDWGEirl78W++ozH3Q1i2C9rV3jtj/OouZnkG\nyxvesWvg31qSfL/d1rtyQLD9Vv5Xi8eFAufNZB2XMrLnj0AosQZ3eCURM3Z2\n7CSUBZaDVgSpPBe4R2vSd0WMmLwDswiaJM9JS6F1s/iDMkIqDXVNtPsgeXBB\n2ZsyJSqepDUKujRKgA42KcEH6ToSWcY2zGBWMqL6RQC0V6RTzRv75iw8N0Kn\ngdbO+6cwsiVaeVy0ZTxYNUjJdDtlzS4l4Mz3nTgan0UXfXkJq4Ooc/0zqSt2\nPKFlx8QZx0jyfaF8bdTwS6tXqW9zx2hrx3D3P0YAJs8duec+2OEm7IoVIAHq\nkCej\r\n=ouT/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.07ff0c452.0_1613677378458_0.18715463754872408","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/card","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e50264da8402065911df905dca0e712aba0e1ca0","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":19,"integrity":"sha512-e/3Y8HNoJotTzYxQV5bdpFqfwgGrYA6BTv9DP7PCAB2up8vDKdwZBW/BeiKZ4mscHT4l8qwYR/k3DwvyUs3O1g==","signatures":[{"sig":"MEUCIQC8mAfGHNNX1KzXZPjWz1DHSK1QkJagAuFaCTOf90WLIAIgeOcw36bO1+rnW/QcGFwRzbH4s1zn71cVEG6Y3oRIPVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgDCRA9TVsSAnZWagAACWkQAJ+kJK2JiXfz5urwPRHB\nrGvOw/uGIy80vQI/7Sud7/L+xEIkqzrgIeCTcJt/LBcq0aie2twaHUQtdDcl\n7SiRtb+8PV50pIWpJE2pO0jobV21Z9+N5dCbkLAbSdsZ8TkNsAFApvsLg2FY\nT22hoEaY3ykvWOlhdlrD1bZNZ/TZChAiaxIzr9v9xpR6KWvIdMFid4dqHuWC\nwtmMhIxsZwuOEpoE4EOMYj1F+7IJ6agqZINxElxv3vDeJUz3Tpfaq+lODt+y\njFPDBVWhBY8rQERbFbfajk/uzvOL4riF9ntsHtQlnnimg815TIe03XeXLSXW\n2BzbbLczJoq9DVAoa1GYS7d1jks9iQZ7PUlvRU8dnzp1xU4GTtIY8Gg9tlam\nmtBI1onQrkfD/Tj8QFtgQB368FfSzCL1/Yf5/5BlNWwKvUYJOVIkptyX5cH3\nuWnw3z7VNbtmvN5PoygVatYqNZEQ5DPgTXizNzIruMEcB0tLqT8jaeaT750M\nyYPPqBS4ZntwhVgHQE8VnpAAhE1IbYRMLwq+IWKQS0MwZzLh38CVGgXXLC7n\ntUZIw4JSJaZaMRc9Ateq7rqnNPBe9Pn7oVWKLspTXUNUvERBAtVY4GXk7Hkx\n5M8Nd91EF2Hacojgz+XNRMSkHcgBSGqK3SbrpYdiFduBcYItRuFDUL6sycjS\nq/u7\r\n=9nX7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.bed7ecd3e.0_1613690883183_0.7441834391006887","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/card","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7575a9724e8bda9da30b4eae27418f9fa9dd335f","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.06dead2d6.0.tgz","fileCount":19,"integrity":"sha512-TUvN+DjuqMqYYiHNWKn57ZgSFo2JpxALvIu0iEZT4YopsrP2kjgyFPQH9vq8X1+C5ArwH5Usil6nAFbf/HeDdA==","signatures":[{"sig":"MEQCIApiX8t/5dWp29YIkjNsD3JoyNsH1k3uXi8nfcRDClzQAiBCTFEvdrsB8hhtAx5/j7fB0cblC8iPUNpXHeA5lKlivQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwhOCRA9TVsSAnZWagAATJ4P+gIg39ZM9xE5W6jEZ8oT\njgfm1P0/hi3GsDbooSFJNRxt140Hu3uTTRpWDxKbZUys4WCtMA4NDBAfu2D7\nBaf5xLTvPb9gfTQwEtQ1zP1oQd9/t825eBqLIqd1cSpH17eZ8njA9Br99F/Q\nVEVqDEs5SzaIGlMp1fikFElwWE97cYuKVy8DKYCk0UzL6+BogoLp4VQMGXbX\n9SYrMAiJKyI3UrW1c/igalvtywvdwMM/HjPEYMz8baPg9s2Yns47QZFfzg5q\nioPSTNqefuzAnvBHJ5QLLGdEToApEJhuUFtCec5TjH9wxkFVkXCP1Xc4D5zc\nKQ3Z4wuB3Nys3fICZ/tF+C50RENwqmISgm0PtTa6BnSfYcsEH+hJtm9XFw84\nro+9W27ZGnZoisu/eD6ZwTLDPLi5rdlyl16N7OaBCut9X+TR7tuYrvy3lTvM\nQjEgvzMBGi6O2uzEgArFQEeUjysFPZCCKhjTUm0RZth4vfwvZ844tAHYp0CM\ntbqshqLTipUFDPSizJlrbP1oL2F9uvhICbbnk5CTLGVYIaH2KX6Uii/iOPjd\nFZ4AyeYd0VFPiPRTL6VzndLPygbZ9xNMMCJ5aPKOnOnrFU3syVdSwyd3T7u5\np0J/UeDjmIFHHbv0Syy3LWZ4KtJALUutjQPTRU/5yv27AaHJmAuIV8o1O8MP\nN+8Y\r\n=HaHm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.06dead2d6.0_1613695053594_0.15325953360027578","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/card","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a858d6da363afbc4d9384995a83cc724535de4b4","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.cddb03553.0.tgz","fileCount":19,"integrity":"sha512-HnNf242NZxZdsmTSJb4sPDiJ1g8adSFHA4kPiRJ/V5/iz9pLJGMfj1BPFLrTv5h9alLsvF4Y0236cFpd4ChNGg==","signatures":[{"sig":"MEYCIQCj9kOmlYLiqPZVqrN2bSiZRRL2xdmIJm5/HYogso2+EQIhAOZ7AoUKVMW0RoEQO48c57TiTPKBUYeRuwqNWqU7s9ST","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzlCRA9TVsSAnZWagAAUAwP/Ro9nKLca6rE2nO7h7HN\n1OlffkX55gTXfmvHsfkh563XBPt/Zho532bVjCd0YPFEwDb7NJ4T3bWAnQA/\n59aHQpdkPBdwwDgVcQw7m+X3j/RXA75ich0/ehd/Xcn4qMdGJTF6Q4+8HJXL\nNFJb+1xGM97lEQXtLlbH1GV2PWiU9jrVehUkA2+PvZVeo0eU3/z6/k0aeiou\nB6VTRIu6Wbc6rdkzRL/m6X5Iw69icAs8PcGnOpjE6rX9+sG3LHgvSVt4ErZP\ngmg2M1Ip241iVZu0CqsiVWEugTUnGefJDP2HEw9/hfta/j5Ms22zmFv84Uhu\nIi5Vsx9Uu0W9w58YGTZu0QmgTqXihCgp1ztkhXinYLRaK4npRqbsUo9xwoia\nLqi6VmTlXqqyNqVmII/gzaTDPhyMQlLz/x2XARfviAXUtfpvBjNXh+TydR+/\nMCMoH1mgEVN/hLTEIDY2CowNZM05PTH5IIE/+O1igpmXwVBhk4SQPgYfiyFv\ndXIk3Nwnf3xErOisD5LYTF/qGOQ4KvRBikzlF0Ztwfas8rBSPZ2IoC9g+a+6\nz2nvl0YOsVdBtbcJ9+11GSJLZtdQBKhwpBiULgc1ZWBV0GgEO82qHkU2IqMF\nF7W1+kYbkV2UOd30AqdHvyFSQ91vIORes2jEzxYxVPp2PX629NQSvp2YploR\nZfvt\r\n=AnmC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.cddb03553.0_1613704421207_0.4572425951418171","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/card","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2411ab427d2cab7c2456c00ef7297d14c3b85ea3","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.d6d8d0476.0.tgz","fileCount":19,"integrity":"sha512-XxUb3TC0uNoEF9dRiyue2LDtNtGTF9NnmOPc8uy7ML0weBMho2j30AZ8dp/EVjryjWBa2cANxo5dtPCp7H+ekA==","signatures":[{"sig":"MEYCIQCLSFbQamxlQwz3hPKsPit8qZ3pTIWpI6o0w9W/aORgiAIhAPbg0U6ThwNMPiL3aJ+f7mJPPjaGi0KNEMny1ugSknHK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL06HCRA9TVsSAnZWagAAL9IP/igcOVbsdjRf5DIJE2t/\nRtnXQ/0+gqZUVY9hvf0ojhnFcCRf3sq9FcPfUuZ/HnMyZHeMqLBKdr6Sflz4\nYzEugaWL/QqhiiduzhRIGkWyrVZ/e+nDBHtM+KUM5M8uPbmWF02F5PiWSY9D\nVnR7RvjcMTUPSadPm8t0RUJm0OeRCdPLXfa8BFtTOFOZnEbxcEbYFHZ5YnLR\naDWShZyFQ+iuvzrlTnuoP/GfU8AH3+8ZCbXcT/Vy0i8svYpjZeXxemmiWU6b\n7AbwWtryt/HNNKxTLt1KREtJm9iINql2m+q/xFtK4bWylXHUUoujGElvaAod\njcRahZTA03y1gahhBieOkRQ03p9PTEnqIM/73vUxI0CntDT2zDLaim+OJ7KO\nj8ytRjQy+8T8qwoU76wLYIZU7O1rf2lMQhJSOYX2Z8dVEMPMDWGS4PlmFHSW\n29nGVOsyuTBAp6SrxaCkaaw5uFmx13R1wlSRqMnyDEakNEmdyMlMawvQJ9PU\n0i5PnrEwAv1qfqPj+65yqs3c54C0I6pq+MS5Q3BzJCKdYlT3y0R6bNLbFEmJ\nwgpOUoiJL/zK6kJcjnCCTErOQz57bQCFZeR8JnQf6n+E6+gOoiL4MBa96tZ8\n045K8MT+ypv8z0Gc/s8cMsMNhsHxtqmr6YGabk35zJp/dmJnXaru7RD96ekq\n4Z6X\r\n=uQPM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.d6d8d0476.0_1613713031166_0.8654191215973144","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/card","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a1a367f8a5e343ca4b19e559234e60b4492a603","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":19,"integrity":"sha512-X3XiajFNWBcb2ghY3zRCHdBS+fNODLTGx3nbrAqg/Mf5WNJv2bucDUGpH7usFGNvbCAymaaH1sMaqwclnDFkeg==","signatures":[{"sig":"MEYCIQCRXrRhljKTx2OVgOwSpgmp7lXUZ8otaVwFwkzvCuINRAIhALAo8uKvLAe5qFq3oX07VGrcRMCJw4GsLu654PVY0X97","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL91ICRA9TVsSAnZWagAAZ00P+QGRKA5htngnRutyNxc0\nKhGHUryBd6WnmMi6Czn4gC0ZIZYou1OZ3u9HqCW+ZxQ7PYOm5VMy33s0hbot\nPTPJ73UfzDEGrw7fl20GL5jqULR7OhM4Yqvq39vG9QmZ4joAt9pCtQqWKUyC\na94T1jayDsZKwfFaSUaorb42tL/ly/q7zRMCP4QXksl0jKfCdVRyBbURkKll\nvHDUd6ZwW4uKYBCrvtP7NbEC1r/tCkXhU9AXZ79tYAZzO6ixgamTLz/vENbF\nXulHkv0uDvMn7c9erEZR9pzjFqH5NoOB/4O1kxOlENdhBMpcEgeD1MYOdun6\nA+tHPU2NFDo6hhwTlzSTxsBN0V/Rdej2dug3rkg2q66oj0kB22L/jxgmiQzK\nVRERGswIJZhEyxluK6nXnQ8N9sXsKhWsf142wDzCYrI5qN9Hgsie/XS4QuQR\nwoPRnCnf/oHAMSBDebs/t7t+j7P4Bu9zBfwmEaBkALzhtiHnLTg3l5T/O2Aq\n2PgMGHFzESYOfoT6/nxulq48YDsugpHCraYPOrvjxMRN1o2YqzmOpBiWXJrj\n8Le7/s4unHpH8KvjphHKxaqMjHffmCJeSNbtMzG1ndtsd8Q/n3qDLxoLnR2A\nGbvUEFUoI2Sx5gULvXCnzR4gx9bETEGdjuAI2WX0C22Fx2IwohmhEm3LoqSs\na7tq\r\n=uouj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/shape":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0b4a4b2eb.0_1613749576055_0.4430104268180486","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/card","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"003f89b304dcd9aa498cb62735e5a164d7892c4f","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.3201cae47.0.tgz","fileCount":19,"integrity":"sha512-o3GRTh5IZBSBZymF2PSYTyATuPVTBlvXw99K5EbxzITpCKs0Je2pEvSa+3Q7V62CQfVHlbfj7dAeIiagKpDGUg==","signatures":[{"sig":"MEUCIQDnz3YzlgK/culPKQTEqBGQHOIytI7gv22axx7Dq9T/kwIgVO992SP0JC94aNQsvv/i/7jjQ/hfkUZH4DlvnVAP/yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEM5CRA9TVsSAnZWagAAcjoQAJ+XE+3DJFVy1pTzyAFQ\nQmhjI190hzGzdHCo+bVdXVbky/8oJrfux9ienaYLVdQzvjEolyIqv3phPgKR\nOTi5bvYKRyYE87/hMKVVNSw98tymdwkhMuUEIV5+fEec1GxwSfJ/Mx1R2RU2\ndwjAf8YKJ0XakzeMu3/kqDAxO/PZC73c65BrwjNzUKMKESn2XdfYXRMLXn9S\nq+p1sCbOXFPCPqRj1oKwU9KaxYplc8C6MPMfO5ERHv0zQGwSH9YFQ3XlUngy\nCFgANlQKuxtJwkknHi33bd4PlUG/T6mirXHugxO+Ji7R5qTNdZSRni5CLqYA\nDuGfwQVmSFYECbI5IFsPb/DX/7mn+XdLpluQIhjTlJ67FbOrzV4ieqML996l\n3M5XOxu0OA7eplwXmAocgsr1s16KAE1a7AsAo0zbpw0sG0k3n+ysOwhI05J1\nNXlOiJKRObYuGRjNhWIc4Up+CEvciHclj77jfXDLm4LOzlP1stmT+HOCHdif\nfsscurPIQBMFoGk0LAwYdjiLASJ4CrMJd3YKGhR/tBHEiTVnZxbiKSAu8r/N\nvT2WkdypRlbYnU3vFkClen7Ia8zyJ5ACH8y838wcIGAEyKKl121vaWdEEPQf\nxcNtktH4yikEA0VwvB2q/EiPRkWhQuyFuw+qNRbHkAwBoh2qyf1toPVciXNZ\nNAaM\r\n=18z/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.3201cae47.0_1613775673293_0.47066504302058854","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/card","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a98780be0fc5617de12522cfea8f5f66d8785952","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":19,"integrity":"sha512-oBtDMRMgmztz5aWEXJNnzHE06Hgo8B1YlnFQUGvk5ykC2nCOlXwxy1T2DPkjU/Oa//7jcjCRuny+Gf8kvmT+/Q==","signatures":[{"sig":"MEUCIQCvlPUbruSmoyOBv6wm2YykYCcj4bnTZFMpiSqSU9bd6gIgVbnkPTyGFUOgOKQxudIe5XC4AbENS8UYUixarkRU7hI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAroCRA9TVsSAnZWagAAfywP/1jlhcVeDkkQozpRfMRs\nA1FD4ixOxeEweyADw0A+riAuCWfK//z21AnwH9kaODIXWMmKaUjmyK83EvEH\n6FY7oJM4PKsdhlj7rMigQR2bXmSjJGGDj4GNRCsmhcUAVx7BuQIWoFb8OXEq\n0F5gkK/VSClJWukFQcUgKTlde6o/3o7b7jJstuA1rMh2pm6MYUzxQ3eZrvx3\n+PLlzXnH1j3WV4gEU59dC3KxkUOVN31224mrrZiB4z3xzv1DueVO3uWcJYDe\n6VQ8VyEYkQFCNkrPJWAbgtYQ/jRnqwPkI7td+wdwHsSEBp8nNlU/9N32Rx9Z\nO5nojDwXEOTMCx859oGXbvyjifkUtgyHU3NBdE+x7bcpYFsdJ/YXFxbZaTbD\n53/BBTuiBcTDNx/4Ll95mnRy+jmFSbnGGxght7kzgSVjcfEkHhi53VScPA1X\n4XmO+B6g3PyN3rMpCroezGTcwkksP0Vba04u5E2rbJEkE+XzOjBfylhbJDiI\ncuQ7hC4nrBIm3pePKjtIdmm8IS0LlwLho8HBwg1trvLcBbO/ZbXyEq/8rCRw\nuFRSoeTx4CsBqWa/BSsM3XDWxIb7ScA8YUHZ+lZhnpCr9v88da+duBV3FRmh\n8yscEWWygdKxoklphJOJPTtLHfZwEn9J92VSDdk7MyIQ4JbQudGpM8BFATsw\nR8or\r\n=GN9/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f1b1fd5d3.0_1614023400248_0.898336676369393","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/card","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d169f95d81bd680fc5cb041bdeec81103c49a15","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.7899e0fe0.0.tgz","fileCount":19,"integrity":"sha512-4g5Jf0E8z27jxIQz+kzw9VKtPx+0H5OpwQiPSTfRiNdfsoWwALrK8YxDM3X87z2CuxXraQAHyqPMKkR1KRh/Jw==","signatures":[{"sig":"MEQCICLjJanB4Bb/yFsFDnWwTrSewJmEbegLkpe7KGX1RSfLAiA3joZBCCPrPh0fgLPnWKI5GriT8XlqBa+C4AJNFUWCGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRBCRA9TVsSAnZWagAAzH0P/RSjlOWVDq3gof0PU1EX\ncz010fs2k20X431ZakdTZMndENEuuVmspy44CLgd8zwfYThNglZUkApdN/Yk\n035FbNNmUtsJWRddYYj6Rmu+7kOMEHj8DjqGpURmvgTiZoAmFgiRkj1BSP49\nzS1wv6wP24N1MOnDmR2JXkzXZdOGjL9Iyev2B+a3j4uHP2lajVL9XPGFdkF0\ns7aOC8HzzcHoxeGgeXjDRPuJ9BAFezhvvEFAKOmy4yT39KOdaz9M9JzflxnZ\nEY9DLaENkQfVwd2tEV1f2z68S9K1XmiAuaw4tnQC78+5SRC/iOL02moSaD/m\nETu55qMV3ea1x13jPUr7afQGjMPFW7beNTFtUCwSlQg+d8q69kG73YS1jyjF\nnud/wq13gnLKig3Iu6lhAGtfTgsG5NPIprjsdZZuuOLXjX1KxXLnUuFUphyX\nSEYQkb7s1+o9oN9GRmsZVW3q4Nr3KgL91NgHTLYfStJEzuCtjk5ABVOz/tcV\n2aEXp4LB0iTbIkSqVNQBbz++H0KKjFu8nxR3c+TgIiYweTy5WE9PeZmM0ATF\nhE72OF1VNXkRcIQYOoyTXQFirEXkYrheT8C59mPd+1fn6wxipOttxscS73kG\ny3XdcA3ou5kx4/W6oEXYvzYlngd+GgspTGO1vj35aY0yLk1PP0hbP+txCmUj\njUP5\r\n=ioVm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.7899e0fe0.0_1614033984740_0.9976810213466922","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/card","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09ba2d4401d0f6596548630d08f60b93ebdf3547","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f19c86d13.0.tgz","fileCount":19,"integrity":"sha512-9TDbnxnJj1MhtLdlMXWbS4ttgW1Uf2Wa71XXQFun50BtOVYgfKT7ecBG0u2GeWepFWzgfr7UzftnDYDZAKbfNQ==","signatures":[{"sig":"MEUCIFn9HmHe2pcF83fc0clTFEGIseZ9eiNGRVKD/tniqCafAiEAgVPLTzarWp+vPZH/EPGebwbHPWaajKtEKliJK07EMX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND67CRA9TVsSAnZWagAAHmgP/jLjZRqEQ5sP8Gi0Tstl\n1lQqM5dIVV0Hf9tk5Z0aClpCn8qZ+Cq8Ih04F5plNK1lmiabpP1IGfipG5tF\nSPGNPZJ90eqSCRxDLf0n21EXTP05oma6refRU9MXtU/Ulalf3WdTs9ZCOwjQ\ndszFp9MOwgTVAqFXQyP0ZBzJvp9o/1JKX1GfOVNnOZt14UgSnHQTSajN/PHs\njWbUDWJEuoi1SnpllW+AR7+JVdSExEZLKnrwjN3lnWMYI25mQLhVvNGSDjz8\nfSuH1JBLzNSVMSbYw5kgqlNu7vh3vsluQgtWXDaHIfFc6+MgJfOWvsTc8Evr\nNruiaTMIGEJ4BwnQshOXkQoJgDY+/IWCakdh5CVJv/+CwueWLaw1KXa/oDva\nBHIdqH3uP7f/h+Y9I3slWVip+2wx/huvAIYHkVcDJ3I4IYXbBKseESAIOdOI\n7Zz3zBiEisnvcDwhRLTxHzHJ4BeZVpacwb5kR2MnbCDW7KjKtXWuj1ZiCJRN\nh0fieFIzoJ10LjZsU73ZLswxdkFLX3HGy+YazAOZXLgIDqJNv/NTwMr5et+3\nfg75N79HRNb9OhFHgUlMltJlQIntTSpeHYf55SlDfLJKgkfOYWae+5rJKh7s\nsMsrB58c34NkBLWspb+gZH/6ujKQgyR4kQvyrDwxjmUA+/OgZzsFCXMyA/af\no9Os\r\n=pbHD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f19c86d13.0_1614036666661_0.7533149319417942","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/card","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2caaacc77eb4905997627c7517502672d2726d37","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.60e892d79.0.tgz","fileCount":19,"integrity":"sha512-ssx/B1g+ovCTu4WkMQVLYojWlBFETfY06E+P+CgFEvw5G6Ypy3exf0SvAjjBVqMJunuyqcJ1LvM0msmhxcGypA==","signatures":[{"sig":"MEUCIQDhMYGouu4V+dKVx4+HerI1XYh3VYT7gRPWp6rFJ96UQwIgEZPFQMJerLNt4l5DgC0eUwr4rjRbKJd1Lg1YldEAAec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFcACRA9TVsSAnZWagAAvLgP/0KcOckeoCuDANSe2LkM\nK2oViwz23I8JsqP+pk+GN+0dHtLP8nvEKwjoCJyihitTavd6hIFQQYLYmKHL\nckagRWTd7yJhumXPzAKW9nHrEgFmdZ+d1IqMp5lsIAfDUoLmyCckm7vHfBDj\nvSsfuehewQY8eBT2H6nLHrxivymWzG58MHDWSbpp+eHlBmCCOku95gb7Ph6K\nSLuL1YG/DlOUyU9+jj/pvZ4yTFPvofTANM2Lf/+vbFw59HjNgvLM3PSUXpCM\nvug39Fd+OK/4AEZcr4QFOfsg238yWI64BRc9u4H17akuXAsQLSwmvsuIweNC\ncfy2aaYm9HmPqdzkQ/1wZQrWG9/fYC+9dTLfmRMBILfSjIMQFkQa2OyWIlKE\nbONXyopLRD5eNfLm4rZtENnvBt5u2R9BwTvsVeeFi5g19vU+hk8lt0LUevoC\nTj6REFpES4gGhVBEG9W+Yu/yi61tEMBLXpPCT2tA/0EN9MRW51WtB8uLzpyE\nj04aSGkOL7D+8NwfUwSawH7Of85qXTXj3opuwCHfZ1t12zZ7AQJ63W+DSg11\n8zvezs/BS92IT/Pbhp6arMf1Ngtlm1M6zixGKerkkkwJXx3MGZ2L8XilAfVE\nvHOozEPIwE25Rtkt7vYzRlq1DMcVt5YU7kvzrf814zSEAzNdsryL68QA/9e0\n6m58\r\n=PgaM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.60e892d79.0_1614042879545_0.5888555816271388","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/card","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac2538143aa944753618172107e2a15ad352cd67","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.c96bfa495.0.tgz","fileCount":19,"integrity":"sha512-bSkZGyyXTstRDCuBB+4JcxluZmIwS5khkMa3qBmsdzr0CXHSdykg2Kt+8UtIlRfdEdyS0ZtdeoFIEfA01+9Cww==","signatures":[{"sig":"MEUCIQCgpnNY65J7Ew2dAhj+NmduSG3dTCAkG3kHXeI0CHOn2QIgdV+apIYR795RV2TRgPxS6A+I+TOZbiEyNcS+Npv4j8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNViQCRA9TVsSAnZWagAAoaoP/AnUXf/KlLVBVIXOlTFn\nfJqDnveY84/owPsk0ulCXF1bAkjpHN54yuzwQmXxzEVrWgra7QcFyJdGKs2J\nL5SGSOTkxyKYzHBExkCgxzf8BjOJmWy/SVVNCV3xuWEsMKy9lfMiD3/X+Cd0\nEA64QvrNW48EYeBtNji2nadQlKI4POfKboENoaNVqzq/ZY5eG/RxFVLXxDKr\nNj/0B0vQfHgcdqdOCvCm2pwIqd5KdJLjt2XbXNI1uIoXXmQuEdiYoNbm+GP/\n1nHW91BIwjKY1A+wUr+Ik1tLAlEbmQDoBf5Q20rbS/0UgA324EQKPL6E+LHG\ng9h3QTUL6Xd5L1Ioc14CPubhRgKiB4b8B27eNWIruyOEdWXyZ6hBD7X4+pnn\nLrXBAc/XkXHb2tTIHpnWF5OU9cUWgnVHOi72mgRzigiE6VzlwG1wjnZ41YsK\ntmpz9tHhQm6bRXJkRyl6gJeJu9dJfRL54NmUJZSS0Le6vtHJo3AOIXBkXo9N\nDIMS+lmr+8jkLhicOWBJ315Dlx7Q4HZcVp2gvZJ7Du4deA9Q4xYzqKdjDUVV\nq1jQB+72OgKtiLOahkbTrsTOxlPkLLcZEwrFVeI6ExYxQx0N4X7gFQBQ8qOx\nP2IU0Onhxa8kcuGmeLRgZUvBMd+ne1n2is+IQ7l7za8Rr9dZLGTzLc02w71r\nohc5\r\n=q14D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.c96bfa495.0_1614108816226_0.06577098113173507","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/card","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0adcdd0581aa105082bbdc9ce512143ddf1a916","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.fa9b59f67.0.tgz","fileCount":19,"integrity":"sha512-g3eI0+dWtObNKMkNkwRZaLrPFTfrd2c7vb527VBT2kswu+VAgtojMCgOywThAqJhZoV4DPkkqibO4a7D54wa/Q==","signatures":[{"sig":"MEUCIGL0Hl7ewMTBmfKGC8diVvNK8qKZYA/yAGWicahLJElMAiEA493CURZubmumssKGlEFXJZAYUDur6IIOKGX48+r6tsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjeCRA9TVsSAnZWagAAMIkP/3AiHJoPm1//hNE6S+uS\nlJ4XQ8nH/wXv89ufqrFoNNiqpjBZt00eibxf0im7W4e+mqQZ3JUzsgSXuidx\nGTfs2SCoO4fXP+eIZlx5sAx/D5tzxHCy8rswfEHZ4lS4a+jwi2zwz9q8blfs\nWiWBef5XcpUZjTprMU7GlClT1OGQkYwisY922zXYjCVCAsVFW7YETGM0ZuGQ\nCvlFMDWTB38gWjA32BNzWfuG9pMm0uBcWVRPfoK91FtkQl+Ka9WrcwM9YOh5\nXKSJBMPnSqZoqZe+fB7+9jFLT0CmMaEWyeuN2MITTX8lFpXRjAfC8AG9MgVE\n4TcI0JHUOEDLEdbH3YsEA33qRshf4xvfPGrJY4ePwVFjB36RlVC/yI1YnSff\nWSQxbClPNPz+GrmAlnmgTHEQDWcBg5+2X0vNHgiExcCw6iM9+7mqwQLHnwjc\n+xtefevNJojqNUHnuW+B0NyrQkDFgf4yQjXly0P6K7BL1fDq2/1imxo/sisv\nqj7rgFpMv2QWabopih3UHvjV/yLvfPeSl8vwIGD0Jis6mHkDULFsnvPigBan\nlSBzGGuOfUYd0F/gEAHQs4l2nnb3LPitCgnvSFtWjhpcs1JSR3Wm9fMIhk+5\nAfK0dVnC710SHFUSJvd0KU/rgQk5ACvVZTnefRn74rvZGe6LmuAIJlyM4WEO\nSzdN\r\n=J79I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.fa9b59f67.0_1614108893990_0.9499605682532424","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/card","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1507879121ad1d6f9d5d3f6e6dde430fbd08658","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.869e3497c.0.tgz","fileCount":19,"integrity":"sha512-li9k+upP3ep5UN1E7IR1XdmDTgN2tEzS0KOeTEDlUMBYXFVg4OfHUk1VDEtNAi9a1dsnhtx2wv9txFRJJgqkdg==","signatures":[{"sig":"MEYCIQDR4Ml7m1Le5qhXJUvmHshGPW0nRQTQ1d6nVdeLiq8aJgIhAI6azXtRckYdKmAI69QhzQ45DYP15bv90ouIty56nXZU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVj/CRA9TVsSAnZWagAAyHUP/0N6Rzu1gE3d7SNtZ3qE\nKyuQ2t3BaldWnKVt+cIJ+OlXuxzGLZvbJEubFPXlE4kKBvkAr1+worC3PuNN\nX12UQfLJs99VvYC1CNuuOK7r1e66bMBN92zY5cw70u0Vk8zxnejimPmP0vBA\nVeo29nLQN1RDJoU2GxdMLSO2a2yWkZ/+77qCVxLRtUY05VjWUBL6LZXjJxOx\nhM9t/Xsgh4Yg82aVhh/ahRpksoqzBBIk7MNc83SxnJbmqLjJBQ+IalcCN77k\nfeYQVaoCPsyokqxDWn2uUrpvbRemuxcxox2fPVEO5gy9D0k/5WdBRZnSQ1Ud\n6beEgZAVoPX/ZBLlnW7MK91gyrjz3/6NmK42Zto61b2g+cBa95WZvF+fUEPm\nvFBJgJO/v6rqj87E6PSTa3EGGD+TF66XiNVW4VK6itEiE02MclT2bqUBhbQ1\n71BagdbqK0zz8FJku1Vo4/mYqGtGpkAzCzEeDBO5SJ8EUj2Ikh/JzJ3WR/FA\nEsR0I29b2Sdo1648brXT9JSvcl/0GIn7+CbjTgHbdsFI3TF8rW5FBBYgeG30\nXRewOpPw9V6qU4Uw12BfMh5+IvUZ0uOf8ooEzwfJCYE7vPoPxs9JsskSNA86\nDAm1ZG6w0BE+1gXCwkRJdFrt+feHDerABvd2zZKfKZ1l0Dr7n8RPn4BBvkeY\njL+G\r\n=soTl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.869e3497c.0_1614108927017_0.8341526182129471","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/card","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74c8c25a6626dc823d877610243ef174a3a7932c","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":19,"integrity":"sha512-WXXJWaMWiJPJTVz7xs5+dm5EzXIZKDhPgWsrpls/Gn0BuFq8i+7nAvQPZEH4n7FblWYNyY66YhdP7XNYC1jWSg==","signatures":[{"sig":"MEUCIQD3t2ua+naORIX5Hyv79LL3V/zV23LDgNwVpeLhlwM9igIgPepO1UH9FN8Qig//s/9NCqoX5RCp0PovoU8Znhr1wZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVytCRA9TVsSAnZWagAANHgP/2yt/fO5z9anjjML2Afb\nkWJFRN18OkGxBl4J7pKqndu+UWH2VbSET/afpedkUnY3Rn2yuvkawItBH2Ul\nUZOcQeIVlPjTQL5pHbpFobg8UOzA7lYyTCy5eqk/X9GgMQR2cesuyPQXj8a6\nQ+SNtnsLnpeu5+kWbbdRBNIz2/sWZmK3aEenIDFTOYUr9NDsi0yqPcM7LhjS\nldOcvkmLk2PeMSjppXZR6GKJtkmynu1IQGGOygNyxyrNbU2+VXazbcWs8+Lq\nY1V40GD4jTUfI+UV8/t/LXx1Z42GDPuQCuREyepfm/GKuZxQuf3q8uOf1ySi\nOCOKqtOwMjU304ekMhAmglS5xYr3aFoa0CfKzhmxCBg7GMX68+TVz8rCQo5G\n1Hqtfoles+Iu0ZH4s81nfd8oEX6sWSYnsMJx/3EAtBubJXjabu0miitu7sfZ\nZhZJ1UYClymJtURRrWDK5F4g7IZQ/Z8NuKhW2PjFxnD5nraATDa6dKsjHVA0\nTkhyiVIC8nZS1PKE5+92U2xqTD0QDz/Pugeo6hLTe49EbbH6E4VjpnXGBCJT\nizg+bO6SEqR12kmUDq4TqOlBmtQQ9lceCTz6HVAKmUZ5YEer/xRQLVAMQ6ZL\nmHDcmOjNaJhoMKhm79QGxEN713soR22BcoSQ1iqopyX0zrJvrbpVaf4MTH/j\n0Vi2\r\n=BrjD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.8ecd7c9a9.0_1614109868307_0.6643991581807398","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/card","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7778506e6d0c1163a9f1dff2fb46c3caf7cc8391","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.9c85d505b.0.tgz","fileCount":19,"integrity":"sha512-cgFfVSlFunhnSE3C21fGTS5qPFTfnBhlsSZtqFtLJMb6i3ylbRaUFkA2qfVlnPdguMUTQEmhdnODS59lZ5QT5Q==","signatures":[{"sig":"MEYCIQDgMjv9uuSOKAfKuSbxCK/ibC86CUtyM5NLBOTguoPX1QIhALQ7p7NetJdP59wC8tamY2kZV7/IQc8RcDr0Bj1cZysy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6oCRA9TVsSAnZWagAAhnIP/ibdGrHUlA73JSg7JJMu\nvZnp60olxY2XasKv05I6COF5d+TOyclBOay4ti1J+OWxGuaUBRcHQvzL6v6O\nf2OlNp1ncbT6xsXMeQsAxAxCDLgTrSVSCK2gYr1U8S4PcpBHmsLwsCJTU7A9\nZX2EHzns8Ja9QjkTuxHyROCU3H3/fLgmQyA9g7j7km1olIIKVqFUAR629jrp\nkAE6IFu7S/TrfotF6PxCAkIp9IvZTolnZEw5cfANvpAgeReKeYp8MUlkCpQ5\nWS3BWQQo+flnjKUIBwnb9ILLEk73R1+bQyGq0HCuxOvbNTJaKGq/f+nVEDkZ\nFojWVTEw2TOCzK42lqySG1Qbewe32ziBDEF1k6OdFesSTkxrwGQrUI8p9apm\nighZNOkhlHNu/aU9FSnSoV8leQ4ikC/4OxRYmpME+4nUv/TfknFVIkDI4hCv\n9b+Vdn3w6v8dLixLGT2YR55+kF807dxlqDP3k7T8psTVc5En/3nm+3vYIiOH\nGaJdRaNYxnsE0pDCGohVRGmCv04QxQjkyhlU8dHw1UYpb2nL+1J7MqG8tjrt\nYqPLV2ZZd8ryJ/QQ/wBzckoYSTKCNDuUcD76pm2HwJZKMMlW11iyNrvoonDN\npAdVxwg3TnkbTKbCJ8UfQ4rUo/MM05i1lziTJNANNXCunrQfraUP0O4RSwQ/\n/h6d\r\n=E6Jq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.9c85d505b.0_1614118568245_0.1472444953741614","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/card","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"196da925a9ce6bec41430a0e161afe307f73fc11","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":19,"integrity":"sha512-0NKZCn1j1HfVhlkO6vaFi/Oj4VNb57QKpRCn5v9LFR5/3JGTHExYgvMSLXm/+AWDiu8c/7X3xNVVLV+xPm9Zdg==","signatures":[{"sig":"MEUCIGz4W8GQKfp04ZeSWtvR+0jE9CF4NVL/578BbWxWTmxHAiEAhHW25HoKzLFCJUZnXbV18beujjEQ0ukKU+bz8stdww4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbCCCRA9TVsSAnZWagAAhK8QAJ5UGefbyJVgI1HViIJZ\nVJr20TvCMIYsfEVhsllCncbqVZxIeWrcj1/kZYwDRsG8cU3dC+scwDBCAVm+\nhPwzYW/+g5U2yfPLPJM7q+a4XwrxEQUaFIbdmzfBsPQYiQx60PSJgSJGKxO/\ncPM1o7NCTG2CpKlXehgYHpusrbUxMMOZPC+ySQT2uUVC7qX+JqPKxtdGKUey\nL93/HgtogPxmZSyJEjNhN4ncIrcdu18rc+Hi7thm5mYWpiCZ2o4RPuCyiksW\n/qCM425B9GUBlKPDBAEO7nLq8gBuQmKhCZfBWtsT64aSoOCFIsclCSSWSK6G\nhbP0ic4XhQbiEkEzMmeAAT3JseYxsvXz9ysThgRZQdfGpYxY7Mescfkf0tHI\nexE1T4w1T3jygtINUdBgTFvByFGlE6CqL/jtpIT70tOtVPzEbZP2UFJ/JT9l\ndPsFJbhIsioHORxGOuaCjcuR6eUg7fX3vyZgSfjip67LBtmJUPIRSGVKFXNw\n8CB9ctjRTI+dth1rwSLmAihjUm1jPBaa1/woj32RcWPSW8tM5qYXRkGjuQ7Q\nSF9xR8EmVP/hRa3rtigKIoeLnTe7C2Q9dZMtF3Hg6VpRH7AIfC4p+bjOgwkB\n57FLYigEBtnVm+Uqc278wwYUNf9NyMUNvGrrxy5JenwbdzTmGPyxEmD4DNtW\npmRI\r\n=jIr1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.9f2e85fb8.0_1614131329975_0.6235286192019456","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/card","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f54953d66d2a6befe32a350a045d0c9c632793db","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.19c4f29ef.0.tgz","fileCount":19,"integrity":"sha512-7yav0OVgT5cwT+BrweodTC/BJ+xEi5FNx0Rkb1teBh39dg+0FCm/yXZa2PC8UeUZMLMTlN3aJX/5uOrbsrg4EA==","signatures":[{"sig":"MEQCIAPLrfV2piMzP9waiiYMv15wzpAbpz5gr/Gz46GnqAOsAiAyQPlxXT+08TeiYo+mFuOsPUE152tDK5xwQBVZ56tTZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/kXCRA9TVsSAnZWagAAlBMP/ikVg1v/IS0E8z3OL7vg\nLa2Lt/8Da8Uz45wjDa2rTDVShDqRVDdJnekFvwe+6p/oBHIdJ6m92krEpt6t\nzbf5SYWXTu2aeBt+wKgoPNZkeZGewFP403s3hKnrq20q8hXf8T4tIDOu8i8Z\n8n6o9/5x0R0qvf1ZUQYecfwn7e+Wj2QLqpm57nD+JwkIJmhQ2uJ0/fC37Sgy\nuNZ4JF5Zz18K2g4K9oZPagPUh8f5pHLedmFOMdAPIO9b7brh1nZ0YSXEAh7k\neOEb5NY8XSruA5ATk8750WjfNSryQeFgYMOMYN42uYDFWiyTLW49GYNzX162\n8eT8uyDVS+95k9OOUlzDic6avp9SCXW/4F2PiwI1ZwKId/F47Ish/Ho+6UVU\ngX5xEOJLIL+GNvxes6Mg05HcJ/Ea09C+ivdPijjhS4li64LPgB/hM8XM1wZu\neg+L5WvWwjOQo3alsC+XJ9zVdM0Q1xOCdu6n3RN5UO6hj7e9mBtHnRsjP+Xh\nSUt8P281tvF5DphBreVPN+9TsWkxSA3LbW8To5ctGXcHj20ICJAqTiZ/1K/C\ncFNNG4K/xzVuTwGYa2rmwrXtHqA8v3HuG9WgjJ9jRsNa81KHrc3ukmo71ygq\nxeogYipR9ZtyWH56B1+h8yVOZ2OZ8KOgSJ0+V5OUV/xVec025Zru/IHdPYxH\nhDdm\r\n=LQHy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.19c4f29ef.0_1614280983265_0.9497936129097422","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/card","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e964d5652a07a73caf5e4f4819f83421e3412371","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.63df6e9bf.0.tgz","fileCount":19,"integrity":"sha512-lTRcT+x+djzkdkbi8E6CaAEuGb4eZltoQEcVL9Y9Qycd0NzFbTtfZIJqRPBOTSmLSe9pnFlkevrR9Z16URQRSA==","signatures":[{"sig":"MEQCIA8WMimEXuCRkrn8G6GN77QNo4SqMtwkErWOeZy9LM9XAiBWSpCI4npWPtE3ue1Z+fbiUpo5LEgRnIDGYjKhLB4iWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/yCCRA9TVsSAnZWagAAkf8P/iaUJ8GbA+6gZOeMSgFf\nTRvaQ8jSvhLOKw6twGhQW1BZ9DqJcGQiPSCBoD1apw8QEQJU3xHPUo+VAARh\nZF9ca2nfIf3QvPdHXCJ4Q39VYw0jc0RB5xIhnQ5FuvCNAq+mYz3BBXL3WJFp\nGZ3q34SkrinM2chJce2Z7V85q//qpveWLyL+cUMll68bpyecx9Qm+tl29fyE\nFuniP8hm5kDd+iFAJ6m2WIaAxL6QcDbqm66fFQDfChfy35sXMb4OqBohgevk\ndDb/j4QUXd6h+DxcoGMVoe9xeDKYSHCSL5slBW6/2R0/tw+WBGZS2RleHekI\nVCSSkRZMjzyGNqwv2TrvpNlsPnIbEkagk4zpmEjPzJDhIRt5rwXPqawN2ovG\ngAY3tWQtKt1niVi4/Ep+jDqiTg4Xwo9GwBbcaMjBV8PiVeBVELnpP4lc6a+a\nRpuqdOLp5P7bc2IUq/jCwOE7js5WwHZ586MH8k7Iq521WHVAdmOm29J1k7sG\nI0MDuPg94Tpe6SUAaRoi+BNalyY1QY4T1OUVseJ3QlwqFZYeJ8ommgaAfIOH\n9nICOykl53Vb7YvYPGzs4cJoY44ZcYZsc0GXURIu1zAuiFX++oRn0YbUYoqp\n5RmfYl4hL6QJxtRf9GbG+3iWvfZjxBFy5beAVcYI8Mu3BXDJcncAi2lF6iiA\n09a9\r\n=2juo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.63df6e9bf.0_1614281858278_0.5151489934453555","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/card","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb228524047b5ba8bf3c17fb14b852985ebfc594","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.981ad970a.0.tgz","fileCount":19,"integrity":"sha512-B34rBMvTKPqq61A3vJzII7woCE3uUhEvx4/VH2tE3VTkDnasw2bPnYsYkx02l6MU3SAZpzIOk9i8yxGtH4nYmA==","signatures":[{"sig":"MEUCIH8QYaKv+3HTcQF2/PnU8/qKNwHaONQvWOXclOXLp8bPAiEAuAsEmBcV46Ni51IefHfOGdTsVcSEvBzVJTYQpcA+pRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODvdCRA9TVsSAnZWagAARjsP/0UAQkKrVumwGH1B5BuK\n3hzvOy4P+Ip7YyHyo9S74bO6erodobKggAVJp48aQoQqsokF5NaaCmjhBNyg\noRfHpXaNV6JZ5cCkkR7Tb+awSaLK7fmesNCiioRDplavigcpol9vwan9kTVd\nY0EnFqLKbw+qOL5iiFPtnlIP4w/DaIfZssrWMeW2mpX4rGtR54gnN2tYTiwu\nIEme2tTI8YGSThlsUK9Rie8ZAysy6yR6xG7hiYEehsKTzSfQ8YsASn/B3Tpn\n6GRPnORhMEn+vGjyxF3gzlgnzwwCWS6bAmBVVL/AsA+SKLtsjNY5HvJRZ/mh\nLPuxmysogLuHl831tVxq2Dx1UGphwAH2v8Op/BrUG4P1LTxh/jZddhgqM86v\nhq+VfygrAfnGn7kqjqacKta8kXyDNv8qfWdoEx3HCGHw/FYzrGhSQO9LFYas\nyPPlkIFwQaRyVT8lsz212HYLg3TiYFjrqPNC1ZFxFvj1zu8Vn5ji/itsCHgb\nEoJk6Z93GyaOgUbvteeSYEesqd6asa0FYaIHSFBXVCp4sGgqVRFPUzqJ107Z\nEdeCCX0RxDPxcqJhgJF00nIe/QvnG8Tpl3yT5oflPh13TfGhGaGFYJkzzHWb\nCfxwkyURvtfe0AsQ/GbnW3jNs6TwZd2hhH86nuO6VLHWhBlNG7MdjeodOOGH\nBtfO\r\n=L8SC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.981ad970a.0_1614298076321_0.6661081589038411","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/card","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2efb4aeda59446a66bef7ef121a9d7cd6dc9fbee","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":19,"integrity":"sha512-d+04GXQ7bMYkRaW8l1aJk/GL86Svkixam2CHKwU+qDpLp0i6XL2BzkaIuuUEeGtrney/DgFFB89CnT4CvlI6+w==","signatures":[{"sig":"MEYCIQCeY553RiVCfgBOzsxV6I+mQ2oZIiIX/sKyX0wQrnn74gIhAMidu6eTF0sXPk1DBBmcEsfAhE/3xdzJGSKBXrBhn4/5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUBZCRA9TVsSAnZWagAAX/0P/j4xasiKY0OXVl4W2IO0\nseaJ0Whiqki+3pDGv244BuT6obmEkBE9GwkPp0a22NjaP678hIQBKNy2tbYw\nxDkPK/c13DNiMg1OVtHClMoz46rCSKwcvRyxPLtAbDBpK4GFezmwPen/AtJe\nmli643cEk6hzUUT2P40otVDLnA7t8a1oB/V513QV/eyEEXd7H9zkA2l4q+hp\nR0hdm8LMd7a7Xllu5W51ej6xiaeaUzt0R5UGC6wUPDqMSxQmr0ZcdBZWTlVd\n2hlHdXx9/pKTIO4rxy+S5jbJ9bo9QAhA21wi94StyV3a/xkLTYA6agrHbO+p\nF8iwhxSJBxx++AKtStxZK4LduBQ6sAn0sXZhM2VrcFChV0sr7mm+5Crfcwsn\n75M0SxlP2zObzwSiY43SK1VId4li2XNJYjNiGJEzmXVEJxrH0OWq241ORxKa\nyi/LTjuv9RSN7SqYm6vYhP7gz3DidautWKyB7tpXzLOOVvn92mjDIzyQvFA7\nqSG7OdEBduxvRISbJNxoSJvC7ei0tK2DzFSxe76QFN6zIgsTboNt3qPdq872\nty60tchY6ojfj3Km/KsBmBonrrGhL/vh1QClv3Mx34QKCdd6erQUjIV/p32f\nz9XdJkHA8gVDl4N3nN3A3pi132MyvS9bzzbJPKSA+qevDnL6LJWkNB78H7C2\npX9o\r\n=pyGO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f9c9e39d6.0_1614364761255_0.5659621646159725","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/card","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3cbdb05e099f57d53daa54a14540e21cabee356","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.c97d7d881.0.tgz","fileCount":19,"integrity":"sha512-TOU4CaMIdE+Vxno2hL8NXDewwoWoA2l9usdIRw5FbHgvpbjv5QF49+ybpieBuLpaGojv4z8SR+DlHSicx2imeA==","signatures":[{"sig":"MEUCIHcr0rgZ197QDt6fWSbTUCKeRE2x/G9zl/E+JJc34sRQAiEA7uEcaESrkJWU/Ck2+ZoOpFIJUHywxTk5Ui21c21xONc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVRUCRA9TVsSAnZWagAAI4kP/Rj6gNx1ugpqbDoHiWHu\n+IV7Px2Erqw4eYXDnmpgyL8oClwKk20cm4LJhynIaA+tXmwGPmc+TaI+Zarc\nhj+gzVYt1ZW98/h/fkirlr0pTRbf9y7YLsmt92g9T5GPNP5Tf5BUFRF7uP6o\nzXqmgKiJLzen7lKPkWFwDw6oTzM11XjtXXgr9BlJKdyVkhrzT1q1/FpCu+Jx\ns1MruzDnQtVr8ZKvk2CQFCvz3oNnMyTmd46ViUqFk03b3pVV+wBkqlcy4c+6\nfHuiRPaeCueFw7eK/TG5WzV9/3+jUOFDbZHraf7bKM9UCr5kKPuhXrlIJsGX\nN5bbHKo6kE2/X6ga3RNMDfA0Rphyk09B5OtZcnI+6TMo0s7nJ+N21nvtHHhb\nE7HuiVw8GPDKAW/rEc2aVqMA7uq1esv/Fignyu3veTT1cMxTKUaF80n7e8iS\nezLakl5uv5cJR92GyoEmOrs/kVE9fNcRDbFc/GyJjCAcFnlIPOungFss3pou\nL2HI1yIxc2eP7J47WJaKZBQrQlCanChnTFdOSEjpizA3/Og5IQVOW9qnEjdE\nCKCwubByBRd9YZ1YcnLe/EeCN8lT+LgFEXBtJD4tDvkMEXtFoKVOgCGvVPLh\nBi6LCAIrr+NyI+5UnGmvUdhZ87QweQ87xKEJIiBt3f5pKoUeIWwo6hJXWEDJ\nM9Wa\r\n=dHoO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.c97d7d881.0_1614632019881_0.34001842645350466","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/card","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ed4e1f3f4d34e8db0cd7f95d9eb60b9bf68a77e","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.bf670dad7.0.tgz","fileCount":19,"integrity":"sha512-b4/ckrnyj7dwylpI3yOt2FQK4GJydzF0WNfjPdYN8CXQZCi0IqjRIzIcNjRMsV4u6ENoK9AIPt/6lNOxSIUFtQ==","signatures":[{"sig":"MEUCIQDUp9BJAbmb5g9eyriHwB1KxWV2zahPqZkvekKqZEhZ7gIgImR0pTP+qfA8wsRb6hWsldfh4An7jkcoA/MpyaOYzPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtaJCRA9TVsSAnZWagAAsbQP/A6O3ELzU3c4bAIBoCiA\nzQNYNsRUH9d8To/M/4gSbGzelBznyN8nVp62d0LR1Z8WaaQzJHw8nZD9zrQR\ne5VDiT6XuBKfouFIOw9kAoiqFAbdaiQ1Xn5un+BxgzJlxlEv3MFTMUYYCAST\nVdNzlxb80twujBCDySMsFIuI0pK/yx0eyg4usaMVX4foxxUMfzZ6fMlVyijq\n1OTlDYp3pixXU9OwtipdAUPwh1e1E4Bt3TH3i9beYKyOpEtKs3ofaTI8mOYC\niSmpRjKH9M0HuXxM9EZJpO0bFKgV5uCgTLlAbp8nckx58t1sN0H/5BC2m7MK\nXrAUaHN7WIXqtIkR+2N9uuZxx/pnzexWKAmVDS5HMW6sZwzqG4aA94UDFe1S\nOYni0GXc/E+/cn25XZV4wygaEPFXNIsy+lGCS47s2VvmSIKg0uTlzQra1wX6\nLI6C0aJxQNzduXdDto5SWy3af0h/tBAgyCfLTUsyDb/gefnW6gYwTEY9C2p0\nsqjv05yui9jzGBAAdNbjDEq4chTGhua4VF9/Xg74fSH2v3gElpg3X9Tp8Nnv\n5THVdobu3eJTKEA6lT5VyxMknhGyEEm5BoLEf79Xp9Ut2xvVovuVj6/EVgqb\nw/Tijyyg3enDW0ANjyhAVIEZ3FOALYn3WVNFlFBR+G1DV5/wNq1Mobt4bp3N\nMAGQ\r\n=cInx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.bf670dad7.0_1614730889328_0.7469435309341945","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/card","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41743e0d9a89ae9417eb220e968103ec32516c0c","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.c7d98fcde.0.tgz","fileCount":19,"integrity":"sha512-KVy3HiznUNHCj9/we6gzeRZNTgGdXhc4j6oc3wQiuxWCdCXppTgERE5pYfuRZScZMVyb7AiZsKWWvjkc4hr5yg==","signatures":[{"sig":"MEYCIQCVb1ykPZtiIpd8xjDer+XATEph/9iSMDzpEbLwt6L3XwIhAOD5Bk7dK1VxKGnxmzSHqg5Bzd3Sgq97NoYypzJInU+e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/JXCRA9TVsSAnZWagAAHekP/AliNiWrh6AE+gk/Fcf7\nXil8iJAVl4wczofsJiJ1jPWAhQr1OWNEU2l4L4FqekbQCJSnow6nWrHN/YRu\noCqn2yp4zMXSbI9tJwF+OEd/w+IQTY8Z4YZNOGeoqUl+UDO65wJ3tpFsc5Cg\nrrF3BmY536ohXu1sYN/yG8uBuE4TZfE+DR2SqNcHilgTWcfx8QW/UN5utpYz\nBnGwiQNOeZbuBQ2FjEncrkSZ1z+DehmHc+gLUgsSC75+uzwo96y+QWTjFC7Q\n2k/F9PiFVxXITE2ztnQqREijt47Zfme/4B/96BeB1qxtmvAc+4PdBEa6vv0s\nHsWHB5pT0RT/rqzC74UdM+rA/M27HNAc/fdUdK5GwQILJ0nxb8DXBhWN/3S7\ng/lfuy4xdO0Z0HJHeiSaVIJVe20Ph/fG+ZGvMgFwQdvEwh/2hr25ku5L6SQs\nODopy0uf8/8DC+lBGm+lG7oErrpHcbGivybCp37huTPkAdBdDzqcLUuwU0s0\noe7moVy0DVQIFhG+PbPusx5naChtpnY2wxCA8dOstY3++c4LFBGcqz+sxoQ9\n/tcpUUhnfcWL5s1AOs+pkF/E2su6uABPShIy7XDL0uQS/IglXc6Fr3D7qePL\n4AlysHN9sy5WCXVHxlPmXfVM+hdua5Th3aS00oVAef+FK/T2idxmB7HsU8Hc\nZCM/\r\n=j7xa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/dom":"11.0.0-canary.c7d98fcde.0","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/shape":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.c7d98fcde.0_1614803542943_0.38992981476903155","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/card","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"596eda47a92c04226b37f145b4a75909357e2602","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":19,"integrity":"sha512-vPO48D9qSw/k8IrYaYug5fM9U0o+xCl6bMSuXgo+Bf5ctoNYdRV3zsJSlVVlSVgbwHNBJiAHXDpaM1cc6URIjw==","signatures":[{"sig":"MEUCIQDqFPjqMNmrzUr3gEyjznyWM0M/E+EjfuiVo9rs7jRS5gIgKlAgLDehjpZnsMFGYlm6RA5ZngoUfCY5486l/j6vqXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBq6CRA9TVsSAnZWagAAXIoP/1JgnOgceS8HF3+VTa0u\nJsgepeQITAsp7J6M/yEi/htX6It3i9x0gMAK/6Np5obK3H7hBwHKL1r0aKKP\n89PYxyVFMGlsOgqNnbGrlLmNUF2WN5kDx7lHh/Y9q1D9xVc/u1N4ccndEUkL\nIeoRa6Gcg1Mi0MPHjKtK5ljMzsW7UBh2Bq4MGF7tmYDsncPnW2cZK92uOtCy\n3m64oABdwYU37uReSIK77wwjjj0yuN0DKhEUBwEz5A6bLi+v/e3j+8EGz+Rn\nDDYWUm6faBvmo5tUaGxfPQJzQTIHUrfuWWhUYvA3EL66GNBGaK6uSqNMVrcC\nUlon3CeIAsRB+oSssEdfrUhGmcJwBiOvaCkI6v+E1X8/bSZ67Ib/n/zmbuVD\nszQxZ5iBjjzjbNf2n/NX6qpRzesG3QxRcYYWhys+k1G5njFc8fhYcmsW/9xV\ndyjHDAoJJq4xOpP4goK+fzWucDnW7kAkr9KjpMtJKWEETJVTQSW0gufAJ1zG\n2LkhV23kUhUs6E/WNTbvkJOz3fl/WzKL6UN6yaayr9BDWSaqkvHadp4kBKgT\nz5jnoQSG6WG+UMb0l/6Z4stegkecH2Mf0spz9PlJTILGuTT+Sp4pMPk4Qfkm\nofth1H15POngIWGJuyMFylssxAtJTM7WkWkSlUy8a6qreR4TK2SDbAWp9D4Y\nQoo4\r\n=+VDh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.4fef8bc1e.0_1614813881757_0.27858659948367737","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/card","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"042f528025657717be4297bb82807bc1b731b226","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.afae3a3ec.0.tgz","fileCount":19,"integrity":"sha512-dWp4nx+IdP/f3McrkFgagZbL9ufnaDfMXQqOmnWdBCp5fzkJdMTT8S/SmA+SotupVT4V8w9Htt9doSI5dRcGOw==","signatures":[{"sig":"MEYCIQDefckj9HjbJnDSIgcj3L4bBmQrZohD5N9LI8Y7hz8CEwIhAIsi2e95QA/jrbGNMAelnE3pi14BHbQsJ2xZYaJyo/G5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7vCRA9TVsSAnZWagAAPOQQAKScVm1wMjyhSDFpsrnL\nKgWJZiULHvztJpuMSN6KNjkyOniJcTY559gdnl7iAsi4K1PmeCpoSwFVV5DC\nuLdCKbM1fqhk8F6s/lf4k8EnCs+1yBtUtjQIOLVXZE720/YEmGjokbw+5lz4\nDi/feh3Q+/76dUPHieQgY5Vmz0M2IcQwxcIbNi8P+xR9tUsy4vFUSClEvfBk\nMJACYZ06LAbOqlByQ770kIQqfQk8mDV9Rk92+1daGG0BLBSKBn/44Lo+wkEh\nA3CZpaW9DHBm0GlwcX0VIalDoffaHCwwYkiHpNT3855LFCnZ2KGYAn+39aaI\n1GOcXcaVpnGMqWIBqIEWoF2AvAi8uAiV0Pei62O7A6PbsIK4OPyz+Ms1Y4N7\n+uOtdqDjPInrH2Dma1jvJGnsz5dGtGHRiYRDtXFejATkmzH6wjhOHTnG9HOG\n4VU96GvgUvZ+fb/vAuPxZ2VssIUT3xHaGkx7tB1yM9KZ46UeSivw//wr++7C\n18lb7L4+dkarjPmaoXV2JTR8lmuilnGJ3WoTDWx7fV5yHLqb6XIvmL2Hd4Yp\nVjjjurMg1d3WRyfRygnQ99FsWoNaaXlMPHf7jCDbGqdypxMZaPWRHR/kWXQ8\ntoUijbRGyywS7ydLjJhUlNTdEzS0hciIC/c1fTAY5mFOP1sLzwZzexAgpuW0\nSFHu\r\n=8hmH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.afae3a3ec.0_1614814959080_0.27205336590385487","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/card","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1041258bac54ebe3e28bc41b91283c416ffc341b","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0a0b10f22.0.tgz","fileCount":19,"integrity":"sha512-zxfvrOWQhZKgW/Yfz8fSnJGjgMVfltVY5OLXmkCKiFCX3Ei0uv9BIJhIGEN6qCWHgQnxcQi43CMMkuRQyQnZKA==","signatures":[{"sig":"MEQCICUUncER6gRn1Qmgg/KH3NcOhRUfmtkeb1BnRazSgSRnAiAm8s30cQLRIA5FOpXmNXGWxMsCf8nEptvOZlk2JYG9Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCNZCRA9TVsSAnZWagAAm5EQAJd8rOiNvcfq72QOFCrC\ngo0ce2Eanx3bNqkd5mxgGsyqYskw2F4CxGYuywDG4un1+irDezXZ1cE9jgG7\ngb4Jq3c1s995oeZCJOthu31tyRkwUH+lR1TG/rGiJqBfLIiLww6U152o0jod\nMfWRQsfgxdXxMDZg+TjN1MMPHL9ZQzRnNM/ghs9CItcPk9Xil4jEdGVJbtiu\ni0acxyLZ4qJ/KjSAnpbfsLLV7nrOf3r7yqjkYQoONPoIb99twr5tILe1n5vj\nUD/zeWsYCFFnJ+bOIyIDq2Xd8oRwYZx52oDVpq4Re3XHi2npvnO6lRIKKIXR\nVuTCVzCwH3lgs3xpgSGOL313pkbgzZ9SdXeTWvjEPfPHS+ZWIam0qdpxsM26\nrXThv808T9sdZl/ED6TN+F4kXuKI1z55hIkrcWfN05nEFcSyq+VzXWYpr7Mi\nzrWm8Gq+trWB+CmnhsVRWZ4eniN726a6y9ce0R4v9BkwALmCIQXypgHZlxc6\nFgk7ENz2wSJ0Gjv0sqo5Qw/gwmwfciDpyeZVGim5B/QFNjnbC1gHakV8RCHe\nSbJnQQZuttfNIpm4JH7DXyQQPSc3h+k/EI+4rmJQ1Brmw0I90xbWkHoqyxDM\nEjlJHTmALfE/UXBdAhRogH1shTjKhnwM5O6scJnMkrYYCwqa6rlBSx9VDnTE\nfn2D\r\n=/FSk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0a0b10f22.0_1614816089373_0.9968935624486119","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/card","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dda1c0a2bbf68106b846eb3dea10d2ced1714427","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.6f678a91a.0.tgz","fileCount":19,"integrity":"sha512-P/iV5euEj6dK2Kl8nQtZm9rbdD3c0/T0/58rfFXQRnx3l5yKawG9+v5JKVD18g3ePv2v2Nir+Gl2bSRVBlEJAg==","signatures":[{"sig":"MEYCIQDRchgfdZhkDYGpWyPVSOJwoAbNnedBpH0D00nUaKKsegIhAP0gqnfaAt6wykegR+bEzp3GMLhG8wEaehobIygc7O3D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmlCRA9TVsSAnZWagAAhl8P/RhhzO5KIYOtBFM560rf\nmUiAEDFMt9ucYanZEJzhbJ9S/wgNLp15ZWvr4JadgP2NuTiDqdwCOyijlFJ2\ndUwQk2k39n/NTxQvlUVXCUyZK6am2U2Cij6w2GFjXS+SeLGFTwWlfPbILvv/\noVy5vzxFI5SdTpequkafHlliUZpHlUzWnLwlW3qMAqcbywCJxpcx96MdmrqW\ngsZaE69S0mRVuzh6gKK+6kioT1Hu2id9qMCHcuT63W6UziA3MheDURJ8B7U3\nvjf1d/z6PPBRVa+gb8xmvPtjJVBKszrxlonSzTai70aFKc5yiD60SrmGOlDK\n3PydZfvV4mLvBW5Q/j6ZoSIh1828E8x5QbfvzDKKJ1qMEejsdo0A+LYbbpbX\n7cN7VTvmE2fXfbbIu0BI7lrNiwML4Vhta1z9v4aGl5Qdx5ccy1hisTIkpA4I\nXH/MJ1k/cCN9uu9TRCcg+1dglC1mB0ZvcbwK6MWxxkdv1c6lKeZTBhXDWpqq\nd9yEN+Ncw1ydrIeY934dgvNKj+tUp5DINry1NCuUyBoF726fOpVSYmw2DKb+\n0BiuLnFN2hWGIhDrnnMxIb+sM4+zRqh33HlEWCswmtUBGxviZOc6tmo0/UG0\ny3dANXfFJYElmyeTDyxLJMGNoGcgcP2x+OpgGN73kF788HjmU6igRP2XNYLa\nLwMQ\r\n=9lBO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.6f678a91a.0_1614883236466_0.43764662640273433","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/card","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db893a53da721ff76c81ae5c675074cf44363690","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f5f1b613c.0.tgz","fileCount":19,"integrity":"sha512-PX7ru+WYZPlhFDu5lumk/ep9nJM6YmgIr1OEUhY7FfTXAR4FoE4CZ4eDxJLIMO1jZCZKuTBN9dU6B40utBVEDQ==","signatures":[{"sig":"MEQCIDZVOCP7R8IH/VJ/P8iUFU3J797a2zAYWNnQRN4OjzgIAiBHFInZHIRIAlLB2vQl5Hw3V5cazjP5eTFz1HDh7KHrRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUf9CRA9TVsSAnZWagAA2dAP/ioTzHiJL5j7tYCzjy3i\nrzzCnKw66kyzKFufgfN0dTiS0d0CRDK8UlgHAsmPl2FfHnIkEmZ9o3uE0jk5\nHl9EaPO1KLZrRLdXG+HSEzXKUJAat1Mp3sR3xlO8T4kVbTyepu6bl0EaeheR\n010AfrPY/y9d+Mjd7uvMnqrlGcD44MN9u9zyDlt4mvQU4uBXUAWPyI50C1D3\nD9xBNuyPwLBYLECx6FDuP5Hdhac4p9tPCfJgtKz8XVuzFqgfzGE6/H98I9X1\n0PVpf4h3dtcIRE/mGkIpc/CoLq7LbsVTO0Ft277bs2MOAynLsg8qt/19kAMy\nw+IErGGO5kWsNg+SmXgXZhRwX7SCT4TzW1QUEUIAikXSf2w8r5xXlfXMvEXu\nqZAedXUQ7BE/7VQV4Mq7lSj7UybwanFXOjYQwLluqJgVlJaojusEB2IBGqZa\nz/T3nxp4dlyFZb4/y2Xi9ZXgm/iUrCujNuA7Mq/XSiN7bMzBUYrAxkXAU77q\nmcYa6xsRubho7o/dbzMuUoaaflq2germKnenqgQHmpxRXV4nHmwhRmqKlRGa\ncR0ZmrtzOJqsEbqt8PN96AiBKIWta9CJt+Q37FfLt5pWDyYj+T43ppLu0r4D\nnlNRyEThA1XJ0dhfVw5EyuzfDZ47uB6GaP2VlU9dLtaqfs6sMkKpERiyrep/\nxamM\r\n=Jsk5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f5f1b613c.0_1614891005240_0.8591961209967833","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/card","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a78aa937bab61e8a79203b29f130edf7a4d6b3be","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.606e767ef.0.tgz","fileCount":19,"integrity":"sha512-S5XRsGB/Hzmc324hIzTqjC2i9Lm/8Ugm3QDmP3fQxUIncQaHoAS7Ne9R/eLR6LGbGAR5Td0clM+AgjYtgUGNdw==","signatures":[{"sig":"MEQCICXOXCLfB5GhI75+roKCwTUFJ0t9zcN/L3G+o/+4B87LAiBeRwFkK/m0TLy+DYpg2iQZf4686zblOMCRRynLurVT2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVUiCRA9TVsSAnZWagAAtKgQAJAw+dC1RarVerfCfwLG\nT5IMuP9ltQ4+gCmGnJXVHWdTjMdW1KJfi4wjqbXItDyksJIrmEo6c5/G689g\nhhJo+y24GnuWAQTkZa1BcBfJ6QzyqumDcFaLZouemRO/ECJ13QV5pkRDlVty\nN+YpnWhtdj5CLLzPizU32Aj5Mr2YRUsJISwdJjyx3n/LqI2Ym3MxTXs0XVTs\nSfQJcJN7c+fWCM8/Unfngz3WMrIPiqKoyI7Ly2skoqB9KviizB37oYIp/N31\nEmEUmjLerGp9XUXwkaPcnyp0hbf4Eb9GpWhIdzYRFMed1IRpPyxQ4UDq1Nde\no9a8WyLFQlopOxOEIxaz0BM9YHGrMsLVbiPSa7HB0Z4R3MBc2oBz2S0Z5Flz\nwqNc3rZ054KeY/jyLYLnhzIETM/UDQmhANGO47rRXE2u9FY1WvlASwE9uW6V\n/SbGc2T3x8J6KTwJrhBaECQ/4Z7duzC/yhsyJKj8Xmq34bA+3UpF/xu88ZCU\n6KhGyDjfJ20jPRDHMSXsRy/rBjDi9KiM5tQQRQoX17woVW+DyMTfao68FI6g\n2SBnJN4Gt1p0wzIJM0NDahR2GCHFpQXdzSdxje8U79ImfqZ0TdigqHCEjt8S\nKYsduJZPUfagI/MNhkMMijn44/kaiEIZhU0q8glPK9hZBBqNpYatP8WlB9/u\nl07H\r\n=dX7M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.606e767ef.0_1614894369973_0.02265058036195411","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/card","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3079b1d2c06fb88413341b75b70e10ef9b15082b","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":19,"integrity":"sha512-fClDD8WRMY35XeyJrz5Vtose1lK/SScaTkn8bW1ufmadSh6LeMaBYeEGfk+jqPOAW1mvafLnqoicea6P2Uxpyw==","signatures":[{"sig":"MEUCIQC0FmkBMA/MiaIpjJODJOXkHgtAgDms9+f74HHDRSxGuAIgElJdC68rJG3kUHrIDOio8zI3CkYsgunMWuc9zcshBHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwe1CRA9TVsSAnZWagAAYS8P/0I7X604EHGrZJXzT9ni\n0MCKtyjnaHk/hfEuXbwTMbqw8vwdIzqfROKCnizudXnkC/Z2dlXokP2u7q+N\nW+Y7Upt9Z/d4fTy9+S067K//RXlzf9DaIyiagYWgnvLbKFsDdHaeUHHzcQQj\noy34e1ZB0bgPLzXkVg2obXVPEkAFAwm1QTjnCseh3yanTX17CsSXeRc0sZPf\nc2bqbtbc/Ovghbh4M17vZNqVPoGfyOmIhQUKXR5zHtM7O6ZPvMJfjMbPZs7Y\n5B9+RQGqME7nfYKMUMH95BBNVYkH+9Nb5+UPWetvZWiuL7p2C99+T9tqnfe8\noCmJt403PyvlQ3QGAU/+Rp31eh9weQCiSBhAbgRwPlgXAnMFQMzsKA1/jY51\nIGgkKEB2CJpF3oSMpBmjpDy/8wWlnXGSoDT5dqx7uA40dD+7lq8DJiaktbop\neiqtPz6Obp9rM1UjEM96UDftxsd5JJZvkmREgjAEWiTjUgOXk2/QQykz17mC\nSRDo6LlzOfwzO525WcoUAl5Sd5yXVaRXrjLOg4Wyx5jUdDxuDTYsztlOhuT4\nzm9rsdfV0ab/ldkYuQmZMPbKKXlp1mRtDW8micNyG2/H26a8+8Xl20QC34Fx\neZ67sN10om4c1Jc3mcZLNQnhOqxUe3n/4yLb/lZx6aHCcyftjvGRa7W6BKfC\nNSck\r\n=gGiv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f77a4dd1a.0_1615005621322_0.15409548277077034","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/card","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"319c269342364a031e9d808b1fca0fd06663e352","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":19,"integrity":"sha512-96oZC/1dn21Yri8CNinUXCFqEYVo6niFxPt8Rh1Zodc3Qh1wfFc4Zc7TAlTZ2NT9RmvTuN2tKpP/gdX1Tvim8w==","signatures":[{"sig":"MEYCIQCmScloVlvLnqrrJ6ZfoIZqjs/Ef7feU/2hP7RNHXnEhgIhAO8uRGorofhjVzJr4mv+Kya9BtIZn/qVcUFjlmoS4a3m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqjUCRA9TVsSAnZWagAAO9UQAI9gt0lIHPl8vyHbzOS+\nk0hYYqgWJ6009AXPyH7Wo9fizmqSIx3x4te6C9nfTnCT/ncUNwjJHikrHr7R\nlNbvGUDnzp8OunqbdurOUCTGvHpClB5ZHdRdyewcr+ja3diR+g/GrHxHewm8\nwPc7mCGQ+Gg0wYt4q38AFzHcpk99isPY1ASOZXuDjpNIBjqw95VJZtJD0tNA\nCmVnhSlE+duVgiNmm3tLXaV8WTT7Q+6qawr6sQ+zNy+SHg3dkyEbYw/29h19\nDjSarwNLdm9A98DuyQV0ziRC054Nd3VVltFYfw3kN1injHM43PXtm8eJ/d3R\n8oVGZEV3GgoJX8agfRgt0sVE/Yl4iW3Sya3hbBavh55zCEMge/EYSswym76l\nIc7etO6/SV2hLzWW5vtaY738mCIdyf7R47pfq/L5pa37jdo9CBw2KXdV8eAD\nAk5NHOzk1hXPK8B9E4rprNsWSpHIs98s5hZZNyADRQECEhD3LDEydqHHJyup\noF5szezqQBsj1WLXv2L4ZdqfbxzTO9mnIo+VoikNzOYuFyHjFAALz2Z31Lby\nOWcoQkDNWxLmRIc/YeeBSxHX3DZwsHlRqxENeqxDaS7JcHKCq8VZw0pYe/+a\nCcDYqQ6pE6KTNBxrqJpNLcwYETH7xtAv3W1UsnMNyZlxqrAZAdi1zYmbPf3F\nZbe3\r\n=R5LO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.2d6ba2c23.0_1615243475780_0.8987090359681202","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/card","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1425be755cfc277033ec5ae3bc650482849c209","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.7522dcaca.0.tgz","fileCount":19,"integrity":"sha512-OihOdSYEBqkGhXKalzLxnMHJZl42pVxJuVZC2uFDDPgVSFGeOpWnTaRX5OxezCLZ9n9WYbGM1gQS9GpqEtcVYg==","signatures":[{"sig":"MEUCIQCpdWE72zThzyQAL46zsnFEjHKz3L5002rFnE9VzGRPMwIgWPJ1n5Pe7fnTG0yWnY3fslt6u4DxkfhLzyGsqBWyxbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsEPCRA9TVsSAnZWagAAEJsP/0b4iarhcODCyrb5bGm6\nGLUKrFGciPoKQOkySUciB+JIqpfhhs5joXpdTBvmd0vW8dIyDgHJJw1M3g4L\nTDRiwcPUZKO+IzI5gJGQlFUR3BZRp/LTW3fPLk0f82MNFR8P2iIP0n2B6DI2\n2EvFTq+LeZ7BPhk/7kVARDst48rB5nFpk1Ll9IXMQQpRmMnVnEzdl4QjGuOk\n1welup8Ppvu11rP+1oQRnXhSvq+p+Wma3cDGybC1gTF4UsBzb/JadyUSOARD\nTYq3XPUBShc8g4CFuwHSRrrSo++ml3g1rseCj2Grr1CfPY9Z8/JxwiqtGo0V\n8YilnVuVf1HYgNKTHek6DT4Hi8lnnah3myNMex1hecU2iIeaPmX3ncpv1CSs\nBWN2TOd704y+r47y/91xV1B2YFU0Ve2HdPmkIxBpuBIn1uTxtuDsop0Civyp\n1UplF7Eq9g0yuVWf1FNzOPNQcnCO4xUHkrTLuTHcGa7Mz8td4NwODWyQG2TM\noHWslnwglWd4spEgxNmlPT3AaQQE9zj3GKMhQcEhZXimSQlUmUJFKWxQXL7Z\nJLEEg7wUSvAa6tGkCh3oBqKtNqPd0kQVyP01O5vZU7Il56P6aBPr4WotQfqv\nl0l38q7BGBatgA5+rDJKF6H+uYyRr8/bWUhxBsZTGolpyDO3AI4cyN6rKlLj\no6Er\r\n=wQyG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/shape":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.7522dcaca.0_1615249679326_0.5739192363704464","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/card","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88327a3dca26c6fcbdb6a7c047f23ae9bd8ca182","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.5c0ab7401.0.tgz","fileCount":19,"integrity":"sha512-h5gt8e8ATs9dpon1k5VYqU/0HrLZwK1WIhaVrGEjWp3r6R9A+uvCGjJ1BGB+G1zCuzd/VxoEp2a2VLVUmgwDUg==","signatures":[{"sig":"MEUCIDtdBriJtl8/rlXKm8RnYhb+oGGcUsVZdSgJztBjbWL2AiEAnFAvrCji6r/adjuIhg1hcnG+vN9hstXltlJxGuDUpng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/xBCRA9TVsSAnZWagAAED4P/3ZMy1githz949qNN19N\nzdaSRCQfRGTUXmS6ac7S2msVM25B1yJM1oF1BQwGq/bZ22U/YC0yC0XhZiDP\n4He873rb8wEWSaOgheZCD4AcrJ4IJsQIjDYvPVY433u8U/TjfPOVAIULx58B\n/DfL7hoi97ilzfHT/KUxPOaS/E4Odab87gxUPyLU9a/I32F7esimPZKQFMgS\nbNK3kumU3k0YjJ+Vyk+IffmmH14t4i38YSY79zRJRM55LOb7uIE43N4kEc4H\nu7+XpGn26TIVK/29+vFWE/pKBYgN6n3uRh6Hf77eBnzE6cNHz4vk7rCo67NY\nQ4sit3VDV2I7/eTNM9ElIud2KG2aceziooIgZwPCx9hI5xutVIePM3Nc2752\nvhO4NfvHpUyvWdpOLYmGUazAu5dy2c8reI/VdJTqX3e1slSjKC11II7UOIUL\nbwKDm0LJt+3KR5uH/thTT4a+WUWHV1NQS/Qdbm1VcKWwG1bcLRLtn3ZBwl5R\nZszr/rGwS9wQvXUk+i5UTuuGJCA2nUnfuBZtCejmvZMF6TTfBHpbKc73yDxv\ny6TkAmfpE7Fwkos8FM2Oo0JOvnx81Fya8+c52oPX4JapZ0Jq9JbzOJ5cDwLz\n3hklwso3AGrPjcuB62rhhlDzv3PCAAB5UkFB254gA/Ajw9jvnJMz/0OlFJAq\n6TPC\r\n=h2do\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.5c0ab7401.0_1615330368592_0.8442656966652822","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/card","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbd9dc1cab93ce3ad18ab3d08a30c80c1b3e2c10","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.59010b6dc.0.tgz","fileCount":19,"integrity":"sha512-H1p4QB4k2vh6GzZsV7cVCPeiBep465/G8qZFSmaGv7AE22b+fX80k3iUDLur3TFWswXiaPUYfDTgkDuOqV7KAQ==","signatures":[{"sig":"MEYCIQDDiF11yPhgb8S75tTmrKIHTdBLVmApowFYnS3pIiga2QIhAM2+8oEWtb21lijS60gG+O+pAJ6074edCQF4FFYNsI0q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPqKCRA9TVsSAnZWagAAmBMP/3so3weO6SQapqIsY3g2\nAhOs26AI9JTo0b6d7VMoCoZccLTvmXLayojzFVspRg8Uu/cEijqjHempCNuL\nhULiRVs4GD9M4WjeygEDmS7WgQn7Dl8PCiaK4kpAZFIVcPp+gckuRxGJoKQX\nfGEoG8ocDjT/2nGfmAXGZSy7RN6MVWuHqmCcScX2GM724/2cxgrDXuA9LcHk\na/kAmUSZtVZai3OV7sPgHw8StvpIXxjscujFMgYumx6ZlgDwtOLuoT4uccWi\nzViMs5OEtoTIy3LS/kyoqraL6wbXfbuIzWXVC+VMFM7faphZNLL16GvkKP3+\nWkH9vi8AZHNaMeK4twiz9vugkNT9PMZHahYF58+/OZwqN65n2E/ZvKOe7I0u\nc2NJix18ia8GvlsRWHD3ZKKu4xrvRv8wDKdOhY92rpwuS3v/5YGjguLysuWQ\n9wUNC/eFkVJvRAkDgowtP0KaaMdz1dU3ICdJiAxWSxh1yDKsG9P6DZkGm/VP\nQ1w6KjtIfJa1MFQ2vMeEvYVeQGCAsO/WqaM+gl9SkYepb9KP1nYhZRcz6ttz\nQ0HOyPniR6K4d6qNrIyscbbvflwfE/7CbuXrmMgL707XSQX82W4TBsrKTY6O\ny429swb/xyoEh8H9oA3MVz3q1FaAx1ys8NBKt/JypgbR+qDi9Onlr6UQ3s8N\n4QRg\r\n=qy3Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/shape":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.59010b6dc.0_1615395465883_0.37760466841062645","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/card","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b2bec3732ccd1b680f934c8daf349b59093db6b","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.9e52f5544.0.tgz","fileCount":19,"integrity":"sha512-8HlN738ArXoxlwfNTrH/BmMUYV1BQpkQIL4XxIGJTNyK/emKH6S14qsk6DrmJMrcPdgVu7Kpmka99pfEDXDjhA==","signatures":[{"sig":"MEUCIQDUiuAQ7oRPQtQ0mi7UPOve2gp0NJsRDAa6iPWS6L1GxwIgU3waIgKiOCx38B9nDq81iYOkNECmI8SnXOlCfeKuaIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVlCRA9TVsSAnZWagAA7gMP/i4NpGAORBQPMQ5vf2n0\nAcbbcZ+veJTOC0TU53OzVrYP9h1B9UH+E0ISRYdMtx67k593tXqt5Ga4b2xw\nFYu8eDX8sn2hm6kUnZ/0m0RqGZwmziGHRhfZlpMs2UXdy2RnYd6UO35+HGQr\nuO6jTqLJLspThauXwrAXjhNtYipQH03h28we0+SWymtQvoiZUPLI+GpI6asJ\nHRFbSGkqRr3sj1iIpUj8NpNwircrn7Oij+qEwLpJ3LPHFESpMQQMSPQKzD4Y\n+bRVx+PmN+ksbr0HxZMbd3fbAgypN9TN0P9SKTbqfWNqxTujC7zRAs0CpnDS\nA66/f+gd5U/Z7iFX9iSH0+n2ctzVj8r7MQbUdKJFaCFvyxJpNQewKooiWtQr\nbI3qUop0IKNzH0g1NVkPqkrnew1S7qJiiDHfVkqMo6/tTMjlaPcCinPQCUp/\ntZxKEye9P4HXMjGaQtvC+BYFqrlaPrpCh2IYM3DOuFDYRp5NFcx/+vL7w93z\n11nMmOaLqVQ70SoUT2JQIMYJfuuZWm7csMh7rAMKUiqdgwG9uy2L/2PtYW3J\nLXYDHYRgKucTQpbXmt9tVFXhlBj60qYQXDcF3LR08hcYvwVXMMbT6WgXbjS+\nii2aqGq9Go0Hwwf1mwoLCPX3UmcXr/9w5DNCGBLjAmSGwS4SomcfGmB9Xo0U\naChU\r\n=YvRT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.9e52f5544.0_1615418724910_0.4102745622103039","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/card","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee0ac94218915fba89932bc0039c0cd761d3b64d","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.a678806f5.0.tgz","fileCount":19,"integrity":"sha512-90Shng8MXDxEFWLzOCOz3FojQn7A8RYYbws5lZVXx5C3LtjHeKSjykhEj+ZM533+THr+5TPAQyoN4WhcEhGffQ==","signatures":[{"sig":"MEUCICcBwJtLmJrI922aG2vzRfQPs3OhFtjbC6VvmpYXm3YNAiEA71AnzUXWtWK4OCB2qiYKr0T0aInv2PRExYvWpkcOQuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXdeCRA9TVsSAnZWagAA1QkP/jlOVKG7eAcOqLJMOedO\n2uwJzcuLxttjbPQwqM8JUnnONO8fleXStWTEbnWsnruAVzsJ7t1N5KQFaCFh\n6wik0QpXpPPAH2qwyM/Gx3iSGNilP7ToExXHXBfZiz8g1n3rtI0tUmQjoUgN\nqg3JJ1sWbjwoWiqXQnz28+cBG03PqSFuql85Sm27LpiNwkimSZAmd5OpW1yV\nAEO6cXx1AvjbSuy6SFXkiG0puFFiIGhBKmCMBP+/t8jJVpW/DqxXDqEU5RcO\nQJXkkuEEradaPkmNZgPwDNfvg/J8I7YvX/mfj9gZkCwKw3m3OT380Euuo3NY\nxGArl/Y9RDKPtqWLQ0qgbhdiLv42V/9uU/iUoJwlPBVvQgm75F4LgGeWBAbY\nTnkW4A2FmMht0oEpGlz7BttFk7oE3eHM9+/9S8WUC8J5M5mUGdQrEylmP6Qb\nRyl191kWo6flaE3bGxr2BP55TuonPfGsM7SS6tjOZrG3BB8LDbWmDJ4pgStK\nBMynbWRvnDo/SeB612mNtdexQfqykyfHL7VVLsBJsSAJBxIxELhLJ1yMqOKJ\nLLmuDEeyiMaJjZAjFvDZG/fJ56aPjDfiWv51bawd6DJ39hOHJbO0MVtXpTpF\nOwhxMEWZ2x/PvGheJzLTLL9pdjMJWmdD+EuyLr2m97YOuFA2tMkqmBSZ6nKt\n7J4j\r\n=hwRC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.a678806f5.0_1615427422165_0.7980759457706221","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/card","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbc0c6a574d6b86ade52bbcb0c04d68f6cc26328","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.b2d22df5b.0.tgz","fileCount":19,"integrity":"sha512-LLluyYe2HPTCRxI8UYWUgMerCBxYoQknxL1pd6SlUqLx1+pX2nBPFRyaWU7t3glMuJk27xKdoZLmlgyFOBQ0yw==","signatures":[{"sig":"MEUCIQCCKISpAkvnl3xAUa48GxSP6jNX16hrirui1e3XUjihxQIga41rs3XHwqZTMLIc5nnMr3RFKxOLeNsrCYSxyEk+CTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk1PCRA9TVsSAnZWagAAzbIP/08lvPmWy6zfsyQWV37R\njmy5Gk6Z/qYMudJjEoRbQI8lO081YnuZjpCBjH18vY1rGksreSMklfAAaOcV\nxS+8jNQip5YiUAxJYQx9vx354C5k/2zf35dAxc0Y37AULlidaYuNXKXaaFcj\nhEKix3osxsRTWbCZKNrTGfWFhor6ex5BZHxGt5zNFTjuwbyYDGeqcsouwETK\nEip8Kv5LDwFrxLpNSpsxCFjuG9CDAt0ES+mz0tbDULqmn5xFdkdn5xGDbAET\nQo6729PwcVASkHY+2M9k6XfBAnSO9FCU0hOOeY5FHzHi83yYnOp78WYbCcG4\nUH1sXGLxZideAaNLZQr2W1j4OKughQ6fIuGzfjQk2e6WXmJokjeuImVq5J8c\nLbqhll/NqBUUc/9DMZPa8EEhgcdlFfWvOF6q7fR/+4ypkDk9xvngQ1Ql4mcb\n3BYjCSkRF5E8P1AazrufAtMkmIh41jsxKgpKX+UMiYLT1aoU08JHufbXn+Tb\nZyvkjItp8V3nIYH/ov311pK52l8Ui4qtwfNWflfxwmv0FEyn4avi2SFfCY0q\nnyot5aqkwKUd+QxjaQYsdY/OXfWBOuulVxiCQEA0qEf/GuAbH0lczWtgMXF5\ngi2z6WaRlwHd7++34mOI3t2wUSPHq9y5PcMVh97S+Mt/ERGXQtdZubTYG6hm\nAunR\r\n=ra8K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.b2d22df5b.0_1615482190731_0.5294800220414462","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/card","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"192e0b684d272f5cd7accae748d2a4fd07ecef37","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.81911b707.0.tgz","fileCount":19,"integrity":"sha512-fWeRozqG6DWB4vJq9eR0E5/puxX0Yo/LQRLTjTPs/+vmPFlHfN6wGayZ5S+dw4UBRXbtN+UOjtfd1MXaoZtpXA==","signatures":[{"sig":"MEUCIQD8TC2sm1F/ZWpdKS0nO/lyWYw4zc0tgT9ntSUWUKNdvwIgd0phXfTDdPPhFp/goKSmUoH2YYs2uvEfpqWBMVUNXm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAxCRA9TVsSAnZWagAAHrEQAIMQzLDPvGND6HFZob9I\nWnq9i9aD/OD4wOEjXGC8HlOO5C7qr3RjZDDZBYsaQKb/r3WCHqy57Wbs72Hy\n/bBg7A3cneUYkMupyyQtae8Fu/n/XTNRnRtVOvTU0xcf7GgN6Uknk6jmx+iO\nsKj/7SpKYYIlg9MagCrbp1lWb8Z+SfUFaM8fhssVUYN4vB/YzcXKb0TseZCq\ngG0p3UNlag/xSBhPtnHRs0P8gtUpNj29/BKv5xE4lzMt1yxaF+wOJ4kviMxs\nezwlCxzxpgfd82zULptmdDIqFiD/KnZ7oMTgwzfnbrHWKCyudUwC359r9SmA\nHM0YoFfuzkV69HIxJp/HAvFJyf/g4swiUds1QtiSnbOr2VdD9WnMryLZ2LO2\n3K7d6VjJlOuPVL9/d1DwgMz0w+Qttu3GRgSPePZ/BTnnNd3rZ4b/5cY6He1S\nzVbp/zQ+URxtqBIIR7wjuywVz6wv53Ehz1/47IswKEYtUAL9MEqWgXQ2Dewy\nNVuCs3im//VsBTc2GU9zQWQd1AIRY4Eiq0iuhzwi1jkEf6Tf6RHaTaDduybp\n1G3zjjPNP1x2/xR11we9UHCQF94KD+KmTsxLHiyeF1PJaRxJwzzoPQYyNjTV\n3h2nxZX3S2/N5Jg8VQt4Ef88epE2gcyGKTGciGMqSuOSaWuqLr/mXuB9dpKn\nuH+d\r\n=UPWZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.81911b707.0_1615487024884_0.9753287351484916","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/card","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"078edf67991ca462a4f20dbb3bf9caac582ad6cb","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.9eeb35c38.0.tgz","fileCount":19,"integrity":"sha512-qLufQb207bOrFOtE/BwYFA0yzlBwIYuWTtKI1P+aPm9xNOoM7MvfjU7P1o0mLGleksHxMo7YWdoT0VO1GuxTSw==","signatures":[{"sig":"MEQCIGLGFz7OBbKgpmKlS/rW/tqlhit6UdM4RRGvubVxvvC4AiBgTq/Nuqhb0VCcG2/SBc4Mh1HoGQE2Nmxp+K299jXcAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnFuCRA9TVsSAnZWagAAsJIP/0v+8KGc9IDC1KzSI008\nni8GWpvyYBwV9tX5HPCkCeVvyOVIFZ/2KByDvrb1F4K32OS584In/BFW7kNT\nile7eEPmVe+PSoqmGkGv8YwVhRLqiK0LoDY+y9a4Mo045Ucgv9rDQkZfNxUY\nM6hhak+r2bU+YlwsX2JJdSHjLZZFes3v/JXKtcWbR4glE6dPp9sVYB/CoAXt\naTDeukavRZFCGYd6WmYXpdvttAUZkXFQTWwMN4iWESZ6gqy1KsHLBCa49H5t\n+fTEeB20dtUujJ+iXHRCCF3wq7I7RPghghXX+pP+iERDLQzUupHrZdkn3mlE\n2mrA6pU5kqwzjh++557vfUY540vgmhEAdhKKkgbhAzB9hTi7nx1Q5xoB2Wbb\nxICE5E2LzFhbyAtRz/S8uKZwpEmdCZDeXJLsRlwLRUQDEgW1lODM8D6qBANE\nDCzIwGHsXUPuwjPZyH4LJdr12u+oKqPmqKt1LhweeEOOQDzT/fpWkrMw/bL0\neE74QDSE/FW+Ul7Y7oQO7a1GIvD7PB0Tho7FLQes/unYLi9ONKqdwO4Yp3ox\n+LPS5p+o4EzEPs6p89vQkvaE9qLBYnwQvt1c5YzmILS5NHyiusRaDqNvUSPW\n6DC4Hue5jcOnIVr9eoCKB+MIFG/9DTWgCc6Wsk5E3NGdbNXU4/2StMUpZ77d\nYAGc\r\n=jKiQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.9eeb35c38.0_1615491437574_0.0570243932529777","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/card","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"013b4918b931cde53148d3dfc334c001d151a201","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.12be3e95a.0.tgz","fileCount":19,"integrity":"sha512-CJdrj9RsY+e7N3ZQL3QZN5Oy3Y2+O0fIhmUeoXIA4jNaeryoF8/Sk7H/Q4qtuLMMHKFp/FtB1FE4YNTPoZbrJg==","signatures":[{"sig":"MEUCIG7LjUn87B+qug7EXRRa2rRRy+WdjeZflVslQY2f6OjtAiEA+kUHJis/Mva9bKA1NT45pIMexgqDV6EGD5AeCI2CIxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSncwCRA9TVsSAnZWagAATLoP/2PgtZanype/yj2NpE1b\nM2gBp8YpHPpxJC/UGNFSUQfKYmaIdy9fc5GLjpKOITcsXocNes31tZr5hdad\nQaVHxz8yH+4AlaVi+vswGU6J5+BT8xdUyWPdIK8N/k6kOMrt9jmmfL0fDHZB\nU10gvoNUwjgEGbVC/EATQqI080ZC5n2AInWxg3kviZYgPRtteQm1nzgiUOGS\nNc4CK03rhX44IsMpnAdGoF0n0WwWrDdZhGOvqYJP8jwFEUsi8egvZ9WPVet7\njyWE2TGafHqHNyDf9s8evjaHs7EQSNRwT62Me2Sribbffka6IAmuDsqI2Gcb\nhKa47bfFN+oJEd+9QeHKHsqKTNt/Abg4ezTJMV+hqFLP7wZHZspH+CnIa01v\n0qdOUVIsrr6qSdpnEvkJK3Op7yttyLzNMhhBSllehBujkuGNkRmrHYe9a9Bf\neBoz6JNtJmFMOjJKfHohyyyik44TTAEJZLFNx41G/e2DOed5PXFxEbUpu5tH\nH3C+2d05kixrK4buadGdv+WdbW1Z+AHwscUQzxN6Ls/6zrsbSOlp44YXxmC3\nMuRtP2G49eYvKcB6oSW5OpMw5nAzsd5uHqwIBV8BYECCcQCB0qTH9I700g8A\nG+Q8jA+P/J1lMv/eCC21vuNYqfuxAsloIXf7mdhqh2zphru3WBcf2tevuASz\n5617\r\n=OTgf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.12be3e95a.0_1615492912045_0.38221393261425174","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/card","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cb6b16b3582cc5dec3b40d6036f07dec6124641","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.e683bdf4a.0.tgz","fileCount":19,"integrity":"sha512-QAgQLJ+NUsECmPAKs/zpYItEHGIwznl8iVioiJrCxBX7Tc//nuLN0VSge/le9GJkVA2oCc4KKhPVe/ZBWPbhTA==","signatures":[{"sig":"MEUCIHQfyd/OKdJrZFcB99PJpO6s5Z2jmaPJTQMeE21rnp8kAiEA0bxzFIsGkrmMqicqfs/EQYPiNd5arZfDTvF+DXH7GRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjpCRA9TVsSAnZWagAAkfYQAIkSIZO6Ic37cz0Ekp1O\ndzPJDH4Kyv5W23aAIYWTn2jk59ShRuokAW86UFAcBggdfdp19/3A+zfSwK2G\n7zN/8pIb57pb8G6g1aqhEdyyb03G3cRjqWIW0cM3pEz1cp5TuCHfxtQX2EuA\nFKuS/P1rIXGfRT2UOiOdRVgDVLi0n6SV+Li2tGw/Mlam1GICIa/CVHzfIMXq\nTMwsB7s+qLrqgbeeTitVGE8PKXGHumj/MgHhqR7xXFQnceFu89xvNxbVmKnP\nPV7wZtFoEU1ypvCGgWtiUvzvzXXGtbJUk0aZVeB9rjrZTaCZTCEiSojoAL6Z\nFlrSbnteoGZs7FNhGso/fZlzA28U1Q6pQGQoN8Facw7LgAPgjHP92GtsnUHJ\ntZ703X5TgHzlzYi5YIIGOOpfGy1i6YqUBBWKV6uTA8O7V+GtSAw5W9/UtAaT\n35aSlhR0kM3UcUtKP93aHKAcdJok0IqikIYbwS3WxJE9UBQBjRlkS4Sui1u9\nWc0CkjNzMLKOej1bC9kOneb6MEEhPiBXsYeyocWXXOtEn53Xg71bLGxLqZDA\n38PaTxw5k8KEyQVfC7y0OSHmJ90APfZAEIH8T5gsqbO935QfoGjmRAhXFBqL\nohMY1RmGzIea7sbJNK3IxDXRClJi5alzF6dFYjR3/53OV9zvlZIdOK7zBcA4\nXeKw\r\n=16yK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.e683bdf4a.0_1615493353046_0.9395038535899949","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/card","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e579f16ca4382a7e352e83cb66550706beedec30","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.a07b6d486.0.tgz","fileCount":19,"integrity":"sha512-aYFUTA6zjMe0Z1doIkMYxM05jQmbuOTBj75h8yf/j+M/5s+pWCTD1tDpuMetuydBi+gJg4uWjNwdtV23b5SOJA==","signatures":[{"sig":"MEUCIDBymj0g2xgu1N8J9fdddd5f5zuZc+X2tgybTPNelRfxAiEAnnU/BO2PdYT1g0Cz4NbCnI548JX2zMpV05SqAbocsrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6fCRA9TVsSAnZWagAA88oQAJDxZtfIvkuF7eqbUC0i\nTgjU3aMzf/gnFuKnmIWT/aFwsXlsAe4joxJITLnNiIpEBUDdXFOacVkojqz/\nVEA1sHoMmQRCKWY9XM7aIkO+7b99l08ci1khvJTKNP3ClZiB7FIgPC/zUD2a\nb938Q7L6bImiujjm6bpsUI95On+kPL4WaF0qLhHuWclUUQVRG112PHNdQnMY\nsY/UxFp0dnpUb5mZlo7pmfMARguWuXZdxdfDuahkDePjdQEwoHvAV6Q0D/0y\nguqSsShBMkRipbEQmhmpxanxlTrK05UmGUza3OUrH23SS1Q3Hd8OP9GRM/YY\nHfg3QTSDOypvjNOTwyqPpzmn4WT01Z0AS8DLCwswvHSFBEoe8O2br98+kjh9\nL/++FKRKWiHYe4VoRXuYj/wt4q2RKu67LH5rm9qEpuHROWE01kF3hwd3ftuG\nIumntx37xrfvzDVmlp1EsmaQAWbHx0r9b0znSCqvV76LHT0mOSiUiXpLBp3w\njr2/kJCyvU2cjONuL37AUTqkbDMVhOqKLbTFyQWLubZLty7L9aixSTQn8PQ6\nrtWz0JNugZLywEgnbr3wcRsxAn2vl62pjgBf/6NkkUnJ1oljb6VrDHvRznM+\nel6r/2sxAAOVv+cYDzXJ3rUBKqVAy5im16GMU3XCJ7pbWXv74ML+R8EoUUNx\nK8ui\r\n=41uO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.a07b6d486.0_1615494815170_0.9324425244258348","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/card","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83d86913bd0ab4ca7537a0c8697c08ab7b361f1f","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.1e0653477.0.tgz","fileCount":19,"integrity":"sha512-ROymSPmRsOJOMgvwmWJz9K2LDim99AAZFZ2AoaqMbLKX4pL+smloW17suisGrQWbIXs0GpKM68KWwvAkQkJ8aA==","signatures":[{"sig":"MEUCIBUT5IBZb+jDqi++9/K/PkFAUCutepDAqwKQsWLDvy+3AiEAj2qXF+N1yCGviPCrZliMhXwMBqP4HZWTpRmDAiNWzoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoBXCRA9TVsSAnZWagAAW7QP/1q4aeFTXpwA27xiPD54\nxDxeYqdpeMeVQnt0VSfaGlYtT73LbWnJr+AqtSOp0TyfowJDtdHYkqmeQajj\np5K6VkUmySFIm3CypU0VaGGWH2hDf9W7G6g2NP6EbZy5Cj1PpH8KzYZWBUtc\n/KigmU5pczV4jUkNjiIWzSXpM4nD5YPGsvEm2tzApaPdktCQmbmznWlKjBLh\nizcoIsFxgXI+bi3YIItdMzu6ubQVeNLT/AWZPOzB2aee74iqhCLU7q1TN3Bh\nE/LkXDR9PyPnsFYvbtuAP0r338gFpC7fYsNL4G2ywUHW4eCttEvlf5tfzKjI\nO6J1HMhcVwZnHvd4OkB8JGVJ1eNdAMIbbaJkLJM0G7HQvP9r6m5k4G3jV/+7\nE6QO96FQJidtUa341r+7jZ2VANGboopjTRiW6awUN0pxFRhMeu7aII8Unjx6\n0/Z58Hh25GFXYHp9iRFi19A+4QGYNDSAq+eaLpg6ba/+mdTBfGaqjnG0W0Z5\n8OpXOqASdnTuh6M6bjMSraHrdKhk1tGIqgzyIz6AaAFkPVcg2iTZqLZhhyBS\ntHW+ldD144zju2L2Yx7a3B1xnPeAQ+zcpyUp2eRINxLXNaBt3fZnrfaNplm3\nyp+cDqxt1BRac8DxQ+TckFLjn4JNF6L9Ry59eef0p5rLj41Uh2Dk8+Pu+Rs/\nmD+J\r\n=B2go\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/shape":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.1e0653477.0_1615495254664_0.012187986099567283","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/card","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32f1270a9673f72ca1658357ee08db16832b6c52","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.148e8cfcc.0.tgz","fileCount":19,"integrity":"sha512-03E7xyzv+idKLx5e6XyxLtnB4vJt9zaun1QyE8r/4IjDUntfhRezAo9Mg0FQvBsEcjOD67pMfoZRlpr+14FQCw==","signatures":[{"sig":"MEQCIAZ8nMVySyyLIh6YwDbxLYRNI9q60Zc1RChCpUUdz+NIAiBCPQxOq1rO41XTej7o940ixxBX5l3RWWltXQrDNEcpbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp1XCRA9TVsSAnZWagAA8aIP/RN37ihnk9CzBk37zDMT\nyshFRXH3tgZXk+smBXllHaMG1kJivlrDDIG8xGFAKbmlhV3lcNz9fYzHIQpE\nrgp7YUqahhpLJdgFxQcvTv1+er2i858rPiwnYkSa6WYE0h6YmCDzhZ5ReFG6\ngT1zcAoQ8zqYwzduadLvstsCr98/7I30gG2eBqvdjsDR7ezKoo2w1iMNP5Ap\ne/i8FKxnZBpFDUm2og+aa3zsQEqaCVtlnL5V3yICniX3sDMUlj9YMm5Xn5+x\nkxIkiituBlCEy06bIibR3ah4FsVhk4Wj5e+JdbrCe1UmyvpKUKeeR++uAg3X\n61YuwYoKEb8fTu7cYE+CqMS62m50pE6GTc+Mit9zCyHK+e2uWxR7tMPZ66BM\n72GQLs7O68yX2xai8n8C5ox5g7urCwPmEHfVL70RuThhgPvn+QNvNrtMernA\nG+qwvFE6HYywJyhCvRwVl7L6zWhzj+DQ6LT0iBBittQ1o8WfUc/RfAaoXN1y\nlB+HPIi8CLDHPJ+L6KXjTHnSIQYug7H5K6roWaSG4WsAh9MH3YumEKk8dZZn\n9N89I8FS5C+U5JwaZB/HvECHROvT5sRuTt03DcaPaMKAzedGXswop6bl//wx\nbYdnnp2NZ8Yr7VF9pafNoX3CTBGpFyxqkqwcwvn8f1XO3Rap8UcAHgiDvREo\nAhf0\r\n=q6Qz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.148e8cfcc.0_1615502679339_0.9089145924046025","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/card","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7f604c61c2d6c975ee280e83458d62e36970ecb","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.73a227194.0.tgz","fileCount":19,"integrity":"sha512-5Bvs1zkKgoKUSSc6uOpzboesRulPMNmac4oamjMxbxJ0Ne0yRTcTCM4CYxMJSqELdQ9QX0qeD3WpbdP40a8+gw==","signatures":[{"sig":"MEUCIC6YacLNCyykiCvX9Wsfvle29NWh6Rfvlxktvf6YTizqAiEAzvVpU5+pZqsu1NwC1AgEIUpuBP8E2/20J4fbGMlBMRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrS+CRA9TVsSAnZWagAAQGQP/0wMPEPX3LY34zx9ML6V\nAgJGyN9VvLnXW5oKnCFvNu6w93Eou7KglGlS+EjBH2Yi2c2HcbG+EFHGUuzC\n6omKUOTmYAcbDy/m61Al4CfA4FrQRp5LUVQtEjYNjLZ9dLh9AmaSPFgnk/3Y\nGZn0G++eGBghiPac+uG+YLsHjGOqIOfJA3pHD6wwvFlstsltZ9F9ZU2kDirq\nydSd8kfyLjMkUvCsZq3IXKvTu3EqfEEWSi4JItYHWQ7I0DcahBLSJ8wBjXQk\nL7few7Nq5QV6VaqdBZfFpgbjQIBcg31Oin3bO8Lf7Kvu51EHNoH7ylUe7iPb\n/yTIvb2rmYTeNaNXzeZdsBdKWoKCmoFS3yyRwg3dibLywCYvW0Oeft5o9mQ6\nHbetsWUDPXK/Amid5tO5a5QEXXElqpc5mrJM1kUaN50kOdfob5jHN1/OTGql\n9gb70clIpYkaaMIUmZ7cxO9EUt27upJZOOpa05JgrXWB/w5Wwe2xOmq5XZoa\njUwo1SXeO8ATsDX1R11cZp2A5ArTA5qIWxzb9+nK8kiLZ+YlST8i1tH1L61t\ngsbczShXuY5Ss94yK80Uv3jliUtUg11N6YWKrCa5sM3GRIuA/vDdB78wxJv1\nJk6fvOy69RrRUTCciiBK20cDsBbY01IX5qSgGsUEaXHxt1gxIWaq2LE5iOJM\nTAE5\r\n=yQus\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/shape":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.73a227194.0_1615508669988_0.8801641178835082","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/card","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e71ef6f9ddb4806f1e4b07ea6389870575c3565","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f8579b7ea.0.tgz","fileCount":19,"integrity":"sha512-rAusxzAicCCNUQ9yX+e6rbX58Zm2mS5NE++MkwdeLh+sNG9epDfpbb7lsIb/dcvtx0LJSCClL5FTJFL6fpjoxg==","signatures":[{"sig":"MEUCIByQbvgXb9Ck3mpL+tINLWZmKeOMYDh9rbvvRMasPNSDAiEA2PA4rgfm7fS4wYMxxQ80pUDiOzrnylMyJi8YW8KyobE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1yCRA9TVsSAnZWagAAREYP/AwSQ+egsqYYTa1SrB69\nfN99bX4nB9cAeWzfyto1FXSe2rj77WIWqad8fjvF1OIa2xjMVlRZLo5vpNDp\nvweU8gE+Dne9XRC20IcCNrAxFvCUZtm0uOfkbsysWIsvescY88xoliTaTmcc\nfeJG1SubdtSFFG/qDW/WvBIeUXFcAZIEBH/8KLgvblf9cagLqmrVBjMc2r+Q\n5pCkAOZi/sOGtfY19s/DPI1SWuo3eXlRoTjMetLXf8Bik/a2aRsUss0vWpGl\neG+A6IKzWuybIl6+pfqw0ySNREQyPU9kkrjmcsqZr46pbTXiJGTlfG7lOjcC\nrcPqV2zqol1SQg0DXdQpcIqpJLRVs1N2JQsmuWyJ3BpPJ5ICpYpIVC4i4t6P\nJbJCFtwvQicchDlglHWOiv4hvF9FlPagBi4YEQDYqNgYl4gLogpjE2+0wNhc\ngSUGG0YEUCVNiV5EcthNiw4gMVPVa+HHy0ynGccJouX2OTtPTaVHt6rq3rra\nblyyYd0/EXM83FzMi3mbgnZX6uzHmKuzsE8sp6GndVa4slTpsdg7nJFtnoUx\nVclsV+XwXVDPv3JUOHvtFmz/V6xxDrRxAx99Oyp7d7srYJo3jSHAzzCSEYML\nkHFIgCUVK/pXyU3IDiouFJ2jVo6Bf/8ezizNR8ZkfgpXissumr9rKwNxvvtZ\nMHpD\r\n=D9b1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f8579b7ea.0_1615601009777_0.5180185124987526","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/card","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a37eaade5af4ac3b89214351ab81aa322cc864d","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.d2a39d300.0.tgz","fileCount":19,"integrity":"sha512-25RIvA8pDer1vyjZ9CKQy3bnNh/9gjaxjKFFxRTe9qDRao2JNkJgaEG3YYQJ88CIe4MQaBOaya60nrxzZArewg==","signatures":[{"sig":"MEUCIQDRDWiqygYoLOI5ONVYAgq4TCAoDBGUNb8j6GY/bnjRCgIgZ2Jvq4XrtIIOLt3V0q9XoStERekZbQUDzXL3RnhFk8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1RCRA9TVsSAnZWagAATUAP/10unQlgYa7bs2N9EqWG\nTlTm5wJo0p5PxIC7Po41A34EqOB9Uqmc9rCi99Hn3WH49ycF/3Px9zxqvNFg\nJEnw0q88RoA3cJaC3ctjxS1Llaifi8dy/OsAsGy+M+SWOzFGGVEz01eeMkuf\nVzl8A8EksQSAF2MSf+Bk3H2B5cZ5eRSNGXEn738RqYKFX9tSKspGoddrhElN\nGRjbSDppl5TlyuuN9qr2ohMqRmpFidpxoDpFRck7wmPhD1qBFk3Gdkagu5Jw\nnmotI2py7JpUmtT5IX8FVfE6pC3PSE/LWGAEudy0+OZqN+RbZqYcyE/W0M3I\no6ANAHnyqddRpygcIDJ2frewO9sUQ9++55UJASVZgthpE04Mg4ie61Uxt6DB\nkxTcZkF0E6CRxtq5uSR1tu6Z56DbFKIZyHaRfrTl/iafx+Nn0NUuwMxM4zpN\nyrEkvKA4uKDnR/0Zqt6I5tLAlCCOJp+b8GT2XOHFa9ANLh3GtyESW4oe0OFA\nul05QTDLom0y0Pea+iUa83niPYyD9Ut1ymrCdaMybka/Rx3jVB1NSTDi6XJu\n8d7qbNEA+PCuLaHNxO9awCEbB6rDbCnyBgcrSSiKEVd6R3kdinCe1jhLyBnG\nisN9QRWXeZXsknWWTLzWQp4jxabTv+9cApsVyEYEnYEJ/IJum2fC3B4svtNF\n0tnZ\r\n=uFHv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.d2a39d300.0_1615854928771_0.10484095113944192","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/card","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cce06480fdef7b7313b2cdaead7f73f98ea83f6","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.7cf67823e.0.tgz","fileCount":19,"integrity":"sha512-bNIWPlwiHOZky3AoEYRImzzZMaUMRu8SJt2TCL0jl32HHvjZmhk22oG3wQxbItW2nmFWocxNilUqjfBNWoevcA==","signatures":[{"sig":"MEYCIQDcZm1nb/BpvvcOwqnelGzF0YkG4ZR2yWKw/7GiBdhIbgIhAPQWp2EygAlgnBe7VErDIEqKX3R4ynOy2vlNTeX5yJxG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPbtCRA9TVsSAnZWagAA1SUQAJwmzbEvvmlc8JUD8XbW\nB7Mw4tQ1W3s1dDCmbmyMpFco7tguyNuZjQ42jle1WhI3cG86IWN5xAbOnsrf\nBfNdq8BmI1RxdT7SU7LagyrL7SY3DAgIbpmHfClcNbN9HF5eCMLfHkqJUcFS\nxkCg7HB+BEk78NlLS8qGdKJ77gnVNyQBL7BktrmF5POLQYG9LtsAAkQZe1YL\n7R01j7A3Vh8cjRB8hr1BGV5ztaM1zgfJAK/4+dj2VW2DgkDJIhcteKKZHJPn\nwCfPRGkONCI9pIpWOzl4+bzxZFHygTZh+cNrg4ZvLbnlVu0P9p7M9RUIGcuv\nMzjupLDHasuwRsJfRncTN2feP2m9eJ2YpfS5LyhdFxu8hrHHf6N9l0ExEGbO\nOwClA2JcYQwhlccvCHrIBHzYRWByELtxVlDL2/L4cqAEQxgOms4aed2Si5Am\nKwezQaQSNBaAJncR0F5Hynx7UqttZF/LjvOEizbPRihxYM73xwV7gQelPrQg\nXKgwaQakr+Xyaaf7duuw1HAoFuNbYI7OsCEKCqX0Vi2C59qplg/12jmEH4O+\nxqZgiwDGz8NxvZ9eFexdyO0bBj90VcXeKjpDbOjKpWOIVHTSMwuSP9CUofoT\nscjSWVyVeoc0uPLSylX5+AvShkzY3hPwTjpTetkCY6HIPJ4O+eTaYZQAjW2G\nRKTx\r\n=4nE7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.7cf67823e.0_1615918828991_0.8173120675898209","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/card","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3df873e90173d4bd7d7aaa4857f9333e0fde58d","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.67d780c79.0.tgz","fileCount":19,"integrity":"sha512-G1jmXIypcBho5HMu9tKG0XwnL3CmphGzyfJy9nUZ5ayJIGyJJcGSin0BiW13Q4UkvpZXl4roMcyhQJ1ABpyyXA==","signatures":[{"sig":"MEUCIGkwvvFUh28pAAyfQaO6u4YAtz4IS/uO8OJgqJCIyeawAiEAntjM4nNBagTyhHvoSRw25toLVDA3afjbkZsbjD7hT40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQt+CRA9TVsSAnZWagAA07YQAJf9angqr4ld2JDpYDPG\n3I3CQEEBq27doBlWQ5cxjrBgyqs8G1Itjiz+L1U9wzzuNMIqMDp0oV/Jxt/i\nXyre857sVMxT4/vsIWj9HA8rq5vzVtmjJWL726s/mvzj3r9wvOQhMg0jd9TD\nz2Itkk3FehL6KaZfmh82ybnxWc4aO76pZflo61cs52tkBXoxHxku1J4NDI2T\nvlp9ZVZaro4Vz9+khAbVL440NJxo02dLFcAzKIrrsw8l/2fRXL5+043SuhH6\n4ea0r+exGrxLzv6Auwf5yB5687NrnpG50eB3HVzAdCXUrtzbRUnt62RUg/3a\n3EDpu6OzlD7D6k4jwnDJpVySCteCmvgfheIbz2VrFw8fJAj4i0wy4DZxmni1\ngI4txF4593uwf6EySJ96rkrtV6SV6sZA1fa7nKEfzIOajpWytOiXS7NZ4TH2\nVYCF3iT/qd6PeZVrvZl00ptx8YfDLFhaxdRO4U/EQL1qhV4ySL2n83WCE//3\n5Ti9bjyMCKTzB926sXi40tHcpDt3+5pRHu7inN8Xdg5voYk1iNZH3ACA60cP\nnRLqKmy/RNVpxTqD0Bk4Kn3XoD4QqvrF+bxdifgvwC3+1XI40XNUZ+sY05Mh\npympYUtQNQRHBB+m0egXRctgvNh2inv5DXOlmChvQVoGK1ECGQmJvtFz+2gL\nEyyT\r\n=vJR3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.67d780c79.0_1615924093562_0.6100522826310879","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/card","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb524baa4240220a3ae273d299626c078db38fc6","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0f358ddae.0.tgz","fileCount":19,"integrity":"sha512-o+h7Xikhixc+jSfOqeKy/0Lk6iCkOerIGw/LqgNnK0kgWRjgCRKOsowT49VCpr1WYdssA2vXLjh0ZhbfORhq+A==","signatures":[{"sig":"MEYCIQDWhskCk+vffjA7woeg2THgKcpzr6oCidvJzWBflDgN7wIhAJFmp+TjHD8DPiZjWQmAnVpgqB0Yy0S6U8tnXZAg67M8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS1gCRA9TVsSAnZWagAA+tQQAIjEytmc3khnbBCrOrCP\nTpgpcQJYMC7JtuyxUb1OaOPihe1frT7P01AJPVZTkUwykuZl/mQhzTvLG1p7\nqzajb9csFnXW6dJrGu7191+DGPzD0atgAvnj6HjJ+Gcu0i5pcFHk3fh7tN7M\nrvsIyQAuXfwBhJLxAaAJnwXWSfMI73vrG/Ih9RjiH8PgoLorIlfNrqdyQLtC\nBgdzV7s5zFaBCGL9dYjuXqwx6BHqrT6h8HzH7r4xShb/DQqtFsVPrEmbFJ7m\nYubR+QAi48qWde1k3doSLZd9ISpu1buNM/YXsbWEFZnHX3s7hXIX+KzX9GZ+\nOPnEehgVikXpsuAlYc2HsWGe6dfaQXHl0TMKyoNcqUBQmui211XGCz2JwSYm\nfMkjrvfDRNdKsAq8eEYG/O8PVk4OnCxa67nbrR/OE2EczZ1fZ52WD0WxkGUX\n+Zr4ox4uZmTIBWEoeiI7IIzykjKSecbDDhAkMW9kgSeCVWmJpa76Eb0rFPGq\nmQZk0GVLGqi5Gwjsd5cJiNfLn2O0pHCWYf2S9/5Ri9yqrAhyoBMeT2ueZlNJ\n6wQf/PsmaSi9OeQbDySm9eaC1hHcypTOWISFG0amHyowjcAzPPXk7XHev2K7\nOhxUVp4g3mByeBZsJRJCmTRzXBFLNdNvazPTnjVZgg7M9WH0YQWTGr/2P7hc\n6pzs\r\n=ided\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0f358ddae.0_1615932767540_0.8384680733127754","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/card","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a9cbf270f693c95114d48299df42afafe8563c8","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.67eb0df80.0.tgz","fileCount":19,"integrity":"sha512-brAT45zkSqepxr/MLD6LBa06hx1d4O7WaEhYG54sUj/bek3yLOO31LSWC9RwLyhdXM5H+vm3u7cNgbZ8ZWakVg==","signatures":[{"sig":"MEUCIE2wn74UInMH+vFOESsP7aK4citUxulkD3p/bxOT+cfrAiEAgy45fV1/62O8ENDxBjGbdKSaLBrAMfZDZpTUIpUlfvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTO9CRA9TVsSAnZWagAA+xwP/Rb4X4PhDGkCDJDEHMhl\n+zVJ9vlb9MBzzi3K1n6GeHNwVzr9dVt3isHTAWEyezjlFw8rbApbQUHmd6In\niimMCkMMV9MypjBPlG8hXRiCx8M5w3EawQhjR26sVSbYb64dMDA0q2ZdisaL\nQ/24YKMpHV0/dot9d68QZw4GOWMthO7Uq+18GYGzlFIQU1GcNhhCuHN+J1gk\n7lpHuNEkbC2mAaxS7xoLMXzHig2yqjPPjw1obtGZ9P6FyDZZ3UrjFQoj9Dir\n0kXxcIsR1HfnoGimPrXncZXlKLvvGJ3cHN1oQvjT36oUTQVtv4kn1ON4zEK4\nW985PlSffnUmVg5ZWkUyGCBlMMZIEm9sGzWv3tOAVPd/1kALZJ3gTYSoVqaZ\nxkUMFNU54zR59CFXEHv+uGfxbbbTnnWNexlLOSYT7+VFPLtQ0FJ2+Zsi2xvA\n7i6wv9/Ge7JCbs8P4rYbC974ah4cyONgFgtsnwNOXVAVWQWh8ne5HWO0JqeM\n9+UxJ9o0IGvl740kT5iPZuiZLW/JB/WX1UNtzg1OzzAguPcr063LIkExL4Fo\nGd+lI8tIyGlisw1cOaf+OjMb3JkoT0VbpORa3npfvtGNvScpYJWkEik7uRH0\n8u66T+a+WpVUoRa9H1+wJyWxGT1AGc3P1gcAUVAa0DluTIoZoVDy5gXt3797\nLR2U\r\n=Zk6X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.67eb0df80.0_1615934397053_0.508610872157836","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/card","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2690b8be9f7a334a0c8079b1909baa9c46bbd676","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.941ca3b3c.0.tgz","fileCount":19,"integrity":"sha512-fnPn8+PJ3UGp8HvverhOSVNAOdlww5NcSV51Q2xtuoMdPyrq7VXkgZwQiR82NESn8S/U1M7TX/Dr3MkojP7/9g==","signatures":[{"sig":"MEYCIQCksu+ThxOUdY3VCqVm9Isn5/V6e20vXonDioDUaFMPJwIhALtJDmQCWrgEC4Of8k5egr2OyCcR9BgbvNb0PnqLwTSb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQqCRA9TVsSAnZWagAAv0wP/jFcDy6B/PYDbYgQSHKd\nRsyq27UMz8AEQm5iv5R6+J3+eK/SkPGuS+rgZI8C01ZL1F5fLHdv4XtLx3LE\ncLLEdvWl3YMRWDILKnFn0xSe6MxhWPRpMmgVhbWR4Y35MIo9R4YtuJQNV0OR\nVG73Ce5Yk3qPd1S5d/g496CoScFA91hr9sqamnNY2kgtsBjGYaasqXv4NKFC\ndfdLlh5aeXkBszshboqEXvPVwNZgDB57Ud+JN/CACQrgRis3+3PhGo6zPH9b\nVNH6TzFkpLRpNU8Vd8CY91Isr7Xtvu73fzCvxNPcVGZPm21y2QKbpGpKz6Lo\np11oAMpQMa5sRXclg0tAtCmH1vCs5j/5B6CYeN6wAseRlz7Ubu+bC5kbSEQi\nE18e3ksHqcqayu/PutuiNeqgmHb67+2xD16M5flxM3LOu0PTJaADzMFgyvfA\n7squipRfY0oHwAwKWfDKiSwmqM/S/4cBKzoZN/gIzDpZf0rok0eLDNKHeoe6\nm3XmVOezatRfHar9gsgiC6izV14hgZ423TNXvyHVkOvg1eDgtnWJ86FC1UXa\nLxoxC6ctx8/oiELwe42NNN7FLfK6iDZqQWc9kcAAnYAIntEyszRW/RYuLewh\n/sGCldrS73PikKnm/3i/dTOI/v9sV4oSXugpALoXXwbwvIr73vylrkhYn0OH\nC8Nw\r\n=NTfj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/shape":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.941ca3b3c.0_1615934506040_0.11488096345296972","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/card","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"467d051b64161883ad7c578985a70ec7f27c32d1","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.3344d12ad.0.tgz","fileCount":19,"integrity":"sha512-Ffg5DXsY2pI+bQHqBMSwFnoJQgiFdmuGJH/ZFIsw2KWy+42AR1m+fTpH6MAd4uWQdtiUWVYVV6pSEjbebAPyrw==","signatures":[{"sig":"MEUCIQCwceWaQaprzAbiiZJPBo3CJdgW8nKg53ViU12HKr9iQwIgCqI4vVK0rjvHcGh/1XGRtsebcFuvdNad1WEdJHnuV+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOeCRA9TVsSAnZWagAA3AEP/R4YBZymPtkgIYxolPPs\n8EwYdMqryCzvAZM9lq5SFxQwTCDJVQ7Q+yfUDOXwef6AgIohmxcyyyiaUPBN\nMVidLfUd0ZdCTevnRITnGNoNUCMU4h1rCLMLuMICJhxkPe1W7X34Owegz61G\nTfVDtX2m4WJJ3g6x9WYWzK48tz8LtZeJFsoIvgTqBkTK4XrTv9DGZIjJ02Au\nOrGeS2oMv01wuUmeLXzNJJyv07q7TLnyxXjrWEmxOScRoVVqc9R5kiOD7Z2t\niw6SQQHaTVGJ2vBVU8XTAEmaD6SKu0yoNphfqeFQmOJdJBHwizO2u2R7CBeG\n7dQQ4Rom2VK1Srwdmh9svoVSBvpPea+c9utvyKdmbrVeXQhTjZxLCFW5Zdfw\nzqMUCZe426bnYXCslzP5HWuST6R6UscKfv4efdRpnaCZOL4xKm/a3dJA1CMf\nDh+QVlmxNsxXqrHN74R0W7hU+3F2TiRexz1ah5X+94eeqPFgXFqQy9CnF5Es\nlXlRURQuFixGIoGwBhbFMWdWo8dy4AjUDgYr+kiLUfGLcnnYP1hqfWtTtyOB\nLrIGy0ITAJ+Wu+aHQBbFQ7Jbejq66xc5jp6KMnzgL1wq0R7xblUNIGyhiDry\nZZulE+ayWDOloj2aZaLWEFoodmnFw4v2SAPho61aiJZEzSI4qIBbYw2Oenvj\nqGF2\r\n=11m4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.3344d12ad.0_1615975326012_0.07676715222832375","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/card","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d001a8035fdf18bdd9be27d3e5473f14fd510a46","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.6072ed604.0.tgz","fileCount":19,"integrity":"sha512-rWhu/M/2m373/Zi+Xc761Sms54UfWQXnxnzTiTzebRZI9cPZvY2E1E3ZTEKuIsPDYPHST7hqwIwxC2EGVXMn9Q==","signatures":[{"sig":"MEYCIQD/+B842YkCiWr/Dx4jv+cAPassysBI3jdpgl70f7MfrAIhAIaYs394l6fTmV/r1USW2HHSLLXzNuzJjE2fGMb71yqg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonpCRA9TVsSAnZWagAAVtQP/0HZNB1QyTGIfjwTrB94\nfLfMyk2lIhVSo4ASvMIfUeRXN/MQ802lN/WK+CljC0QstkdqN0Bpy7LY8zci\nZTCNh+t28XpI/hz/uZhh9qoaLwyf2sxm/kAnKD+fTuCCmuUmnoxtm8OwCz2d\nj9pzu/E+p7sflyO+nqYOExTLhuaBdll2yN5pdkEDhxHPG6BSdlF66lAIxsAw\nwHLn9TY7LZ9KAwy/NAqvGUBH6ui9GcESSOx4ey5Ss/Humb4qywaaz+idU/jG\nE+o63Ae4+SAE5B5dD6mPpD9YLc+tvSxrorDa/e8AOqi1l8NN6U/Yq23f6opS\nXxcUk+GvwI1kg3K6e42tWpbxqGrjck0AGutv/QCwZSh9UW9qnY5XhZpALB+n\nW4mr6ZzAkze9DE3wcf1tgPKob+Cf51E/7NIomdf6Qvz329EMAn14+fQ1BKmA\n9+m+5nRGhp3RgA7MW3paXnAN9TwCOJogY5bHgFUx1Z7mrW1pq4J+2NKWjmMJ\noqmHU+d6DBWhH/1DeoKGSK1LYkkwQSDeVAWrmZq42vddA08zRx9dVixMJxpo\nVWNeiIVnLdlVgHbWMZ6rSaOWhRwUNGH+MzxjEHGadP1YCHARMCceimvoMm5W\nwtWySYaq2QvCnQqa9SL7mP9/2gZ/dr1G7iQ2Wr1B/WnPzJZE6LA9Xg9z6vu4\nlMiF\r\n=LGYm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.6072ed604.0_1616021993391_0.5963677186637755","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/card","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ce722f9feffa53efde9528e3287f13617bd1f55","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.d3a6862af.0.tgz","fileCount":19,"integrity":"sha512-6Y4eErjyOPqXxrebeD4L060ODHG95kvteDiwUYSDRIaVx7bobDzZWPVnsfh+1TQ/mjn1EHO7TYcKC6sf64BNlA==","signatures":[{"sig":"MEUCIQDXUWV+tQXlbNCZpctxYH6vGsxgB3IGPkqpfNK0EQzcNwIgU7ttLCmft71r6tcFudx1Rr/T3XTRoUdBXdeqLQx90qQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU33JCRA9TVsSAnZWagAAIjEP/11r3b527Ik4SAmUMTWZ\nxKnRoE6rnpAB7jJ2fxeWKZCSz0C3a9wgT0cbrv1CUHmIHhuV913iIoovKyxp\n/8sNHWAhWaWe/Pvp9CHH5cYmi4Clop2GNB/y5Ht0/t8O9AyS8wHTcE9M1fVJ\nD39qaYZ2yLDUULjCNrysDBW6heFGcjCK4yak/SFSUNO/1VHojVlhyz5uO2f9\nr0Neop30bRacYQix9DuGHPMfap+gDKb+kRMaFa4XuohcTVxsF6RfXOxSwO0U\nhvalZpBVszjs1JqNZKMS3xLmcEw+jZTwobzrPsk5S/wB7HVgKLiBtbgKhjzB\n6hNT8SSR8DcIqE3KVp4xMm7nvDg6Hy+oflNFYRYmJHUS7P0Jai5qK4/l7XrY\nGoBb08HxiDY5ffxHUQBLTsaRc1X02FaOcem0FbnqUBMhLDwav+MDd6VQUb3A\nFkteTe4S3bviAXDge6btDzkYE0xUtBJanUnPA4of26zGPnR05NFgKuGfxUts\nPuWi8NOBL57tgag0FvvbH140Zkm0RO0Ch3aFUCDFYN7BkQfYmuVuYp/ULNbW\nhvx8kClsVwBDUN52hcoAdnTGGy2QKnnzmJQuyk28ltVLmFUvwE5lByYiMR8z\nglrqCuRs1mbQhKeBeL4HfKpe2M46cFyWdwGsUOxjlYT5Usv4VpiHDyJhX8XV\n32Pg\r\n=83bs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.d3a6862af.0_1616084424896_0.38794779404670154","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/card","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"159c4d27bcfd91075353c7521af4fb172568f190","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.40dd242d5.0.tgz","fileCount":19,"integrity":"sha512-wFSl8o9SWlyKGITJ7ZPfvzuC+jX1zz+Lr7YnEb6NONBr+oNEl8qrQp1hbyKFwdiRLgTNg4wWqgecsFhtvjrfDg==","signatures":[{"sig":"MEUCIQDvDV6duqS5h75PQ71W/peLykdq72RCE39t+ECsEwnECAIgfcwESvnq6wbLGAWWb3w2DW4R3SXCDcTkh5NBklqyQqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NyCRA9TVsSAnZWagAAhEEP/jaZLjdsw0nHm8b2mere\nBwQiFas+cnQSZH/E0Y0nzxhxF8N1zVQ3eI0AsbII229pozg+qcOGJ6OZ5dvK\npuZlUTqtq7YpRFdzdZ9/F68JMw6Y3uCIkzWUX+MUyTKvejrzMph89V/nvMRR\nkpsefRnWlGklm0Fzb97Y84isjMLUavhjkz3sPO91LQ5MepetLkUurVcvfLFV\nChOUlpeN10jnCO6JnsUiMEttm8f4i61kTgDC5CkAmMPy0g1N2+1aDujqFU88\nKE5+wtrqlruSbjJ9uRmVc4aH1CEaeK8wS+3tPsI/15Kf4JS/R6gZEwB3YzFu\nUuJ6LVPi0VOwpM3ulzbUKuNTLmPk+Cv34SRAGRn6zWHtQGLCXHieHkhsa42G\nLngoLsgYz07mDbHi1sZZZZFBt637r3VvzZ3MOv2toaGRfpgmRQflKCp2mDrL\nhqLDbLezINnXVrZNP2lheZR45xCJRnnFwzIHuo3WRlmwKemoZci3Gw773+MT\nt1EtVu9LbYsO9VwGi+v/xCPlbIyMLycmnlAf6U8Gsoj9FWcs+fyrRtVYfvnE\n4EH5nGWHa7pBrXcx3pFj9FTBOA5hpBRNQvA1UecLC1hpmQtPK0Lfygiq5zfg\npt5/jXEAFuKpTWliVAjAwFBjN1jekC0WxL3cH2h46ei5yKQFpn2i+vfIoSyn\nCMBg\r\n=1lEX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.40dd242d5.0_1616102258099_0.20859373046523744","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/card","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"686011b270896114c76925ec9f0618caabcbff76","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.ec8f8465f.0.tgz","fileCount":19,"integrity":"sha512-iM7Bzr839pBGRo6FVMXhwI4XxgdERQij3PBwZCu+JsBc4UFcwgGgD9oN5FF4KChzOWHU0h5/goa5FWnUczATFw==","signatures":[{"sig":"MEYCIQCzqzkbiXOIiYmP8lel4gQpUZN6ec55XFt50FRA14Q66QIhANzhaoM9e36Kb9MKxuoOZHTmhq5RzGWGQ3v2OqlQqUvj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nBCRA9TVsSAnZWagAAqIcP/jyneHc3Tt60MkpYJERf\n25FXc+QN/Cea8M3Rl/toiZCdPRWcm1nPGgrdi5cACiVDhkKlHU4EyHypQjME\nf+WW7TQOknVznPvV77Owo+yOsADQqlhnkRsb9GfXtdlOgD+eeoRsucbftNX+\nxMLAlL/HR7YnZPwH3UY3E4AB2s/rEjNR/C0WOPiAIRwc07yt4/YMXHlZYbHJ\nuXgJA1aSjhpyMUYcZ6fO8XEAmD7LUN9lUXJ+bXTEMYTdygwG1U+Q0Cwdh5GF\nxSTpbs5EoYM74Ck+7PsMAbAtkcnZ06qaqPNyjmT4Khzz6Xt0PgU8VchMa23g\nbiuB5KyTKCsKz61Q/D/lPDjUhgfw2MwRDvFo9sVW90kJXtTwxbsnYK6vBmxF\n/SuoDXlzxwUK6ul9WZLuPHiUrnF7Hw+xyDqjs3FD7sJx1SR/10HoYxV+4PJF\nEVXgzAiNxvaN7E6Bbmh4CvWpg8n7dqW0SK84q0ks8TdHdgTpf4KohR7xunT6\nmU3GCiaI0w431lm+xLSgWKbaW9Sb/4AZsGrhsZj2ZuHPAWMsAl0WZiH7kY/c\neBqviNVs43uzT/6Oh0jj2mNG7gWq3D8YRrSt9uwqZgHXA7QQsWVq38dXSb2r\nV1CPtvmSV02CRlWPwoCQxUPw06vFjAb9fiLT5OpCT5KhpsJ5zZiG9mQowsr5\n12KY\r\n=8C/u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.ec8f8465f.0_1616103872668_0.3013179003638631","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/card","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"859eeefecd3dfe45cb17950e44a811cd76a5d723","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.da38969ec.0.tgz","fileCount":19,"integrity":"sha512-fDEHY5dO1vJz2514MyBgPv4VDs8tdEfhtectb0duDpim0ZDChczN8ElFbAUIGyRrD7yBEfc97tk3LEWV2AVxjA==","signatures":[{"sig":"MEYCIQDnLuV0JtN3L9hSgglVitYmL49Lw7X2EfNs+7CERLQzJAIhAPNUEpHBSZufXARJpcAtMIZUFRE/UHyBXL1muCXL/S0V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9GmCRA9TVsSAnZWagAAQN0P/04lo8xkOug18BZpya4M\nvek9xtTTKk0GU+2eLIftM1oEmr5+QAJZbIdEjkdrskCfAQxyYc12fkLkVn0I\ncmmzj/0IYkG0L5u1xkJxYOtM9VMsBkEsNvpjPZLTr7lLYmDdr0CJqSiHw1Hq\ntbDz5oUmi4eHv08XSjsVYxsVO6e1IiQ7/RKe0P6AvnL+kahDtx9E2ME8uM5V\n5I5Z/sirBW0YA5z4LTtMqr3p4aOt0YuZaFXZ2TMY0pjCwpm0SBvrVK2Y9cOy\nGamizK9vs5x3BlJQ30ew+1JDRuGHrh0Qd88CNU8JNxC+AucZOROJo9y2YdwI\nbQ6DGtGxJwyhY3Fd6JUhVVy7+goERhR+Ny8lVk5tGU5+ZrBMEYpTDwncRGIr\nEnGqbWp9upp4+sce8hY42SVRHyeCd20wGUUdC/Blc+mUaYrWtS5IWHFVRa4p\nWxjyPj1J/eQv1tEPLvmzYpfT1P7ZSi1Nz9YqmubhPMYG7Um6MspjroUq91zo\nSvYHZuHW76tSYe5UNNNW/oKykXzWsGoOsH2ccFRDItn94qE4vnvzwDG7zh/0\ndAhJIT7VefOsVlKF0OT6Ha80Mc2JSiaa01UjEXks+87J8tJPQFsfHcslrBlN\nauFq6OEBLgPwVbMGH0uJ0tJ79b1/5S3NdGAgNFLwT5jF9Jh4awNYGIks+56Q\n3YbT\r\n=H8y+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.da38969ec.0_1616105893794_0.6286266129953224","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/card","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28f13c1b8cc694d43cc2f588554c30bc1570252a","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f5246264d.0.tgz","fileCount":19,"integrity":"sha512-JEmY16SXirbKwD+PIP9+xWAUJeIFqxlAGxW5LM8LCCEY+ibzv00RoWr/99kM4JmCzzn0IGlelMffo5ssjRK0Jw==","signatures":[{"sig":"MEUCIBe9j8ymH0ltPjrVNFQ0dgA+8KK+8MpYAvW+q+92bmuJAiEAlS5gw88nE5A/KzhRneaHw3eJX165fPu6dn5K1A/A+TU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/KECRA9TVsSAnZWagAAsowQAKRY7584WASVIyjk3/Sy\nJZwBtE+9ZzGd6hlWAfSgRu2FNSvSRWn18LI3/NbTFuv42I0FlcC2kYcG2j8O\nFhPWfKXt9CwmsRvOxt2Y3Xct7AifTOKkE2h+Jnxae8a+xJIIzoKFGdrjdqRO\na/mDWP/MMAL1aFVKDJ7DYlJfZUs8QGw/y/H0jpEUtpd53R8QbsaLDx44u4hp\nFESN/51D6JiTCVWIr3aF/202LyzE8crh8bowwx1oq3xIEqEARSqJDtRS7j+w\nY3eUJdgDONrshOb3rz6wq1UKBfvN9dsGjJfUd9IO6ofW3D+KiRlaGWj6o28T\nIH1TPtzo5es1z5eigXtgTtAJ5pdNMVyv//lP9nr7/cv412IqXC453FJHk5DT\n935KyLdPLkEQjcQ/0j9yrPRGkAmfzbiCUo3xgB2+ahXOcQ9o73mL+n4pAYjq\nTQOpdRiEN3PxzD1fFLe0cklTTw/hSpV+VTsJMVpJ4cX0jhJKhkkPM7DsqabD\nZe7ewpeAc1+KX6JV60tULDJSsRZg7xXnYgNYZQAFz2nST1s/J2zgbHxpXL0A\nDCMZ5RRz9ZQ4q8hIHJTUmdW8grbSXhDhfDuPZwWUEwj4bXYof56Lgur9Lwpr\nNyqNiB8tuto1Tju2MrCQHFDGh9nE/Wsf+TEkpW9vrlQZn3A1+YposD62pfD+\nD4qQ\r\n=v5SZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f5246264d.0_1616114308112_0.858238389527233","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/card","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca296dccbe8888a0cb834fa00ff252471f5cd5c2","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.03d34bbad.0.tgz","fileCount":19,"integrity":"sha512-Bmm660cDBnLLgAkTokBvyQ/Hn20JWfmbAWoNQ1cSkrma79bg2vjiJgjvVpQwPR7R08XzpiJNGvbHJTUXDWPEAg==","signatures":[{"sig":"MEUCIQCsYJs5k+p5rkaHhFLLrwoWU+6QcNmgP6NkHzVfcLPhJgIgRQMA3rd9ZdwDzcaUxucg8b1Zrb1LSK5Vvquz3uJcczw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/WdCRA9TVsSAnZWagAAtAQP/iCf7kKT7PJd/IU8/gJW\nXctb2+fJVY/N6AP4Yl4MNl+f8JVwgNOn138AxG5SEGprm7HFHpNTt1xiLXS6\nr6IhIj5+jhu3zEdW9NZeH7hp2AN/lgT4YanSmDna9ip2shkexyoSFmKl1N6y\nQ0v88R1XLrh+0Ao/sNfHX+RuYmKYiWRuvvkNZG7QplYmp2ptt31wLADz/QEh\nlKFAvoj0ejB4dIPpuVBQG5JTciAfmNKNeITmtEuQTpkYMXlvxaO2uoU/Hhf0\nuHQxXqQssgZ3Zl0VnXXS7R/HE2PgvrMGfVXiBYw2Umez7iK2m/tHSt8emXT4\ntw2vsx+R60cn2j+0pkhASGBVrPP1Eezq3xZ0ZJlYMeV9J0jLwo1mV6jH49l5\nX6nQgFhHHy1503Bm8RJj7PfUPuGbe9ML7of3zQxCJbM1RyU1VnjrwHXX/sJZ\nscMXi3P9x63cSLS9wwONb12sHHgnvHExnqm7r9VxNwQqABRZBt4OLuJm02bl\nDP9mEMzCKozoPUp394xYG+fwzAKPdVPFZANXj1Qx0phJPt5+B7jrxjVtKI3O\nw5C8jUab2zN6vVFcHYe8gkKJFNccgx8VnR2M/Yn62e8nZ+FszmyUIzA36ZPZ\n51WxWxs4P6O8kdhyKPwd6eIqWqDfY7g5mn6IvvDaqk+IWpoXmBYd92NZw6hL\nx811\r\n=V4aK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.03d34bbad.0_1616115100550_0.2025648183440003","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/card","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb0493de9323854af8a844796692a48f145a1db9","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.cbc57c600.0.tgz","fileCount":19,"integrity":"sha512-74FL/kBc4hXHVwwkmRdcQX07gp96uBRw+6shghNz6asauxBKsqofT8bdqr2Z2yxzL/aczyrPLU40iCJ2flyKWw==","signatures":[{"sig":"MEYCIQCUUwpCooZNMl0ZPygUGKcP8V144xCc70G2c4KZ9tpP8gIhAJVfBcUnM1n/eTww0/uRSkFaHzg7hsAqkwkaY4wMPwkj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/eUCRA9TVsSAnZWagAATgcP/3E1tdr68RlkFkpTVvlq\nM/7zDxhkZXKlA+Fkz5AJj+kEf1kfDpFcsox8YUyM6MYKJNcYLJ2eEgEIDVtY\nM3SDJwhvymEOb/+Z4rpUnl+I662jE7TAQH2xd6J4ISCkRlpu1g7ng+1GGOKT\nHhXySG/SgmwAhNCyVeosJ6Ix/IDkyFYW5XwZa0fAr2pViaxqvkHnPnN4XEEJ\nXJGSNdFjd8QC/ad1SdR/9gg6aEABOl6XONujj8gZe4rGqvkSIGjpTYj/cn0p\nLIFjaWIFgd0JBXVYvONIZQlXsp8/3Hx1T0BUgCHGLv4gjzJzg8uHAYoKTVWI\nWKiP4bZqdnqW8EnWTXZsnVocYMY+C29dKlDtCwLmNdk1DAPSgZmeJcn0ozrJ\n4c8mnz4mZC+bDV/JzyPV9vX8EBpUwjT3Bi0iGOiJERnl1+XmzN+oLnRi57ob\nOG6NOvYcl7h1sovvSjKfiF7LlwvSHzdbHLAmhI8kJPRyJQ2/W16RSbGcD2ON\n6fhXu/KZpm8a8sfXLCQIeNuJdN3dfpx73FDrM++yaoQ8XWA4dNq9WvI3ZJQ7\nx9MaJ1p6xgHlURKWXQn900MYGCz9li1hRu7Ex7HAJOErrw6e4Aeq/pP3VNci\nywgQ0d9gQaeDApLZzhOs3xXvcoAD67htCfx8eOovMKmVzXRFM5ur+t/6QE9x\nh+v8\r\n=AyOG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.cbc57c600.0_1616115604498_0.5431016272053251","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/card","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee67506617c8f16126c464e0a19a0737d276107","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":19,"integrity":"sha512-Z71neI6C0JM7bq70eiRTI9GJB7LNaZoMO/BUIW+Fu1EPRqSX6rb8pyWSDdgYlfd+SztfnboWYqMCxx1/Oh+IbQ==","signatures":[{"sig":"MEYCIQCO/fNqRFPpgay5JqEXs9usK7A9c4ymuxJdR+UJ1ITmugIhAJWKW6xhk74Xr4IhR/ND9lWl5dwUu4jvrdDCDlnnn4xF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/qTCRA9TVsSAnZWagAA0NAP+wXAQa4oz0y7SpcawKQV\nwU023CwqHGWY9JUNMDJg3q+x9DPj4G3GCxgjXMVkRkCuYrtP0MMYvE3W/zSX\nwL7xZ7WXWt4x5YTTuEoBjxSAuMoQ0XAMi4oLXtpOs2AzxU4h/uXvHTnVbeaT\nY4JkuHPhCJSV0lqNVC7QiEPyTgVpwtERPyU7gM/WOq0ZccRmgwfcvdEkUgiH\nvl1m0mjl0LE54jqH7j91O5tv6tL+Idn1zud4gDiyhAIEsAPAYlcKJFjeQO17\nxOPC4rJtXfUiL7BizUBaTgpKJZf8HsCy4TsYCqK8LFmTf6c8I1hvqAlhhux4\n/QQEvtvNRkTnCZHUOfHPBF1fyWYbPwSspp5mLuOev8Q52wXzRE0h/gKZGtqz\nuTUBNg7ADLSwz3noENCB4HLiQPNlMIJ+ywsIcI1BIzC0roczb/JIww0vy85A\nHRWsd8eNhTfGdBz+w+TBFcMR2N520HgimejojenmVPu8Fswmzhmo5QmtMJx5\n4gAtMsoKbximGnIqp22vtx7xDNsXH6cLxZR5jJBKkSYzzQdIi1Evc8vXilqx\n/XHdoC42EF1+HY1ywAEhDEeBArBE1JB5sWDxLM7VJSh8JYjkmY1csggwmDkj\ncvNJfiwb/+WtSbGI2pGYMbBH+NMKZDPWVMHCAjlRgdj+5FbjnwZAJKhea9A2\nSfJZ\r\n=1ZQe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.d6c5bcf37.0_1616116371341_0.9859538474559384","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/card","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c9497716272c82ee2e3375265771b9cdb97c543","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.fefc668d7.0.tgz","fileCount":19,"integrity":"sha512-i9aHb9lpqInwN5tfeQzPHO3f3+S+iFHrcd5gHA6f8Tw2MHJD0WNtwKTLFQPdDZdYnRCoB4iZO4YARJC4kSU/Tw==","signatures":[{"sig":"MEUCIQDUQ+pVKQMbBZlSFF/pS87frF9XGSSFPueaHth2ofbgLAIgc6VKWZ7CHZPZioRVLj/TdSYyf7zQF2ps5dHK+A0xn3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/+TCRA9TVsSAnZWagAAs60P/RyYKAGRKiy4hI6hYK3L\nqiHToq0O8yxNpS0Lnk4TpXOCL0txwILMj79575HWpGQUjLw88XD5CS30DdC0\noL55ogaiVWTBnmAoSlmCVbIlOYjjxWybaV9huDaF5EQiY9NnlRhCCdT8DGS4\nZIzETN4gU/DQ0PkZvHuV6gWHkcgtIW1rScO5TFmNKvKaXtEMsH+SopE4+CnN\nxNDf2m9j2uFDzCPrOn5K5NbxEu40W3AZG2lRWaOIy2LiOBTT9vWuSlZRWhds\n7SzjEF21d01bh1MbDt6ytHfWUSKmhDq2DoqSTV+u3Hooi7jniPofLj2mqAev\nsoh/arMg9RKCDRmisYtq6cpCGroD0KfRwbkNSPY9PG4qMvPNQcYgq/6baBVS\n+zNzpdz+AgWUIvZplm2V9H5QNTz3LVgyoRMjPxdru7SOqE6RYARCJ96WUflm\nW+xtlK9FFWEfNlV/81d4Ph39w2YV1GVjXY6znwFcZqqSIw5tAp8c3Qy+CUP2\nvwpP5ZZKwBY+3Da1Ybd4xSMqnDaU5zFD2w1fsPmsmKZp1VufxUBNkfvIiNjH\nlJf3ZoErOkSNt/xSlZIVIkLT6JyT8ZojJmi5wrPNf3fGfnAHCzgj/83+f1FF\ndhbbUkSGfgUMNmOixRlsz2SuXhtrZGIpQKTllafuEVZTgXo2pPctJKrbrVzq\nDXeX\r\n=Lndp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.fefc668d7.0_1616117650972_0.45452151191087786","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/card","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e6c2ce06fb9bf8331698ed9357184e56455c1b6","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.faa7d3226.0.tgz","fileCount":19,"integrity":"sha512-44Wl8CoCRxcXE8eZRw1YZeIcOYiXlyEsSHP6ZkouBLaVFl2fZj2/m8viV2CcpibZD3P4h8qC1zH7OBIQER1gNA==","signatures":[{"sig":"MEQCIEGOdjE8tWI3ftHskpJW3IwZBl0EZNcvyBo2FADZtkUmAiBRON28bqKNmhbRddowNf7pv6hTjAyEdnYEAh8RPy5/Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOL/CRA9TVsSAnZWagAAA8cP/33IT2l9TjWAYH4JgRn0\nU64V1erePcfLjmPF/fnTOgRgaCvJhQxYt/fGeFgUtthd7GKaO4gyI4jY+tOr\nXLZJ8HOEdUFFX0Ctoxd2rMekVx4pna/TmcmtSpg4IW4wax9EQ/P4QbRCFKI5\n7TgurqUqdxrfKAseqYfzslQGgp3nFnt4z4hq4eUfa4PF39HvMngDji7mow5R\nbDDXeWcprJwEMOg8I03X/tkf/IoGOc7V1+UF2AZZqV6RAW3fr0ggTs5fiTsy\nw1z8KneCbKQ+sdqqFSAb4OaayuRpDO7GwLhZam1hv0aTZgADhKMziIRlXhhQ\n+SCsUEc7uPTDp2BDLdPbnp1arojOq5kJj9oxKzXqYyJ97hMm6UTtXNQNJ2fK\nBueNfmBiC/XVZH86BUHPfVevbNEdG0u9YlLJoGFr3cORIX0wk6BhGfmA4fVr\n9wLWWdX6R28A1bzTNMDtFoGdmtlYVbPe+UBe+aSV1nr1Kv8yRF9LT+G7/Fxp\n3NBOkX6+iZGXQpOVFlqdB1ga/J0DDBQ5QBYQqGsZKhF91PPX1LFK95r5rtyF\nD1pQK3fPIXnBokswGGTnTkjrsWEd7+hGFb4NlBb5gdhOQltH3/4tz+HObkpD\nygifrzuiFFClOdS2Se27hUZUuFcqGsUEGdL61JWHpwPUkR9+QY2q+AHllluA\nq7P5\r\n=30M4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.faa7d3226.0_1616175870713_0.3930016244466581","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/card","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83f3ef88f987ba296969e292bf8eaa12f9bd155a","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.c60449bc8.0.tgz","fileCount":19,"integrity":"sha512-qrh3MZKT5BUJKl42Onh3GZapD9iuyw8T4FgMFnCmi7YVtzlfX7GztMKAo31e/3udgHPC87kbQUFLNbYhwA8AiA==","signatures":[{"sig":"MEQCIHBUSTonALPxvVEuRj361fKtN60e/cCqdbgzLC5XU4RyAiBZznRYiVHr7TZMU6LSMHxmqXZqpc/pp8bGW0yceowZeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfrCRA9TVsSAnZWagAA6YYQAIe0r1D/ucBEizqtK9sM\nqm412aIU+cq9qKJkwvw5yllCaUM+EGxUS7zNcbJb8itt2LaFlpxqMstxNC40\nspHyrzhWlWD72uZ8E3Yth7unbflRKUlgE+TxoRxHe/LgtKfHwnbGxswN+VNv\n+aSCur8OuOdC9ns0RsinJLKjukjNM4CsQU0tiAdcS2G9BDMV8kJtQ9bkB2w/\nODShTsv40Hvj6aiB04A/d6TyS9zLfmC+DHZ7ddHJlAWLOU6AKUR94owmxoJr\nQk3vAcdJvw5EkiGuRVoh1jazWCuJO7af4TTblxFXvxpVpB3oZGOKC8uIkYhc\nT42DqKVyTXWaJzoSt09Ne1qnNHJhngRDpE4jZvatcVx/FUKpfaGpAB664fQG\nsskjSPjQgRyC2w/twkVSfCX+lwvvYa3O0ntoAKq5M/saft3KH+iRhOhMNcJr\nQbBK8njujYOYw+0AZifRpeUHOwUCKvSFa4pClZy1U+bV6UkgFvfGRk8OJPv+\nvtvh+m8eZvKE0QBWH5h5vr7RMAE8by3isSLJjFRYdK74p+5wAU4mDDyp9vcD\n0VfshuAWvVh0fSdT0lTW0tsPU/Kucgmb9mJRaTlSd6O/LsVc7PZVfLtDnnAD\nKgB8QAymB8AcUE+K84uxi71LGAvzGWKogBoyI1qIPn2Sga8FsXbBkwaSnOdV\nOi8a\r\n=a7d9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.c60449bc8.0_1616177131142_0.4957444678146248","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/card","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d3b48197c45eb710c3964cbd5f39471c16c1f00","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.5f0fc444a.0.tgz","fileCount":19,"integrity":"sha512-g3MIvRf1s1yLMy4+FKVkQTnrizV7HjrO7+jYDW1MuMu2CAcI9FoifK5iyyjx8FHCIAA1cZyRHFwcZlKjtiaZ4A==","signatures":[{"sig":"MEYCIQCiY3LgnQGAD3hm/tbyb183I9B2aMRgXrhZ4uIZ9wTCkQIhALZ5CPOjjHbw07bWAV9l7LZDTe15JP0+L9nhf0G6dZNP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+LCRA9TVsSAnZWagAACRoP+QF9ZJtOOTa90+uMc8ne\nkiD16Ce8P8bbETMixiHAsJM70D07QTl0ZwWlGcrLtsK8uU+i2OoEDwV6LGus\nqGoZrO5R5mDxkq9cmXWJPrQhlpqRkrIEVUJqqnFpVLeElG3nu0B4nyL7OXeb\nHZLiSuze8PDwt5Ee8k4t8zonzD4PQD6WtCLCDITLeErM8ANMxyCZ/iHoDaAt\nj4i5KrI+GEygM6Z5E7hahuIVEhFM2VtAhAuUQov+snn9JamRKa73psWX3rlN\nNgQvOBi3/Q2+w9qZHBCDBdfSGbVqOiEoFeEW4KiEnymEloIKVbNJ2dDtCKr9\n1xtXU9+eZLRIXiY3hNgbiK9ZG75zINrtYbflE88M8/SR6sw6QOBlIfhbkpJR\nLM2soIl2nbMk5zZawXaBD6sm3Mk0pavjkWT6d9ijorGiyPRCitbG3RuYGIMJ\nq2+9FtDqn/2AC2yuRshEcoqMYeDLBAog4uHnbedgICWGlQc0c+44VpG22KXD\nvqt6XU8gjGI8KVNxtp8TfKDCUG6XXPq93Eu4Jq3u11qSGS4aHqE2vOOFQQMZ\nYhr5uvW6+uLwk/41izTUFw27D+F9AutZNDMPHxpdX5xB+vczNspuWGOInuqx\nUriN4pPI0J09byRjZBOwchcsiWsct8q866AbWMt3qt84kWQNANTbeLC/nYWY\ncWva\r\n=xPJ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/shape":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.5f0fc444a.0_1616179083140_0.688690408593051","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/card","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78fc574427c90c5d5ef67c891a965d2b5902726d","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.4567a750d.0.tgz","fileCount":19,"integrity":"sha512-YBsqQXlyqw7M63vWSStscZR5d9jFE12gQDKGjNoFG2XoxrEpHr/Rck6qMtXGN2N1Y6cuyi638rHtoNJYU3RDMQ==","signatures":[{"sig":"MEUCIDcNbHHt1PVxxlchV4zEzFz/NrS3jR5h6nEFk4FW/oTUAiEA1tNll+fHlAjRRZhLz5NR+6Hz18hFbuyWDwhd4Bp99ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVkNCRA9TVsSAnZWagAAZ+oQAIvC2ef9WN8C6kZzJrGt\nJEik3Vh5xvp7YdwejlDiCcAFLA7xYiyHFurn9W/U8iQbAGLZduUvzsoLa7Fv\nYncqwTmH10WqB64iNjg0vQv4aEIRqRdeefrUXAWZmI8dUgKfNPPScTAm9/jO\nfjHDewJDw4NVDXD/5UL4iDYhP4NCRqzqgoG/CWJDgyWoBm7j7+c4aGJM0uMq\no3pJLXMTO6sWN8ifd+ASN01MmaTdNFYtUZuJ9XWt44nXIj+aEGlQpgqjguki\naHmi3ewPOI5kiLozDFB+4AYb8W3qw2T9fc1ikTpHFYkHyFje/uzUMt9LMuxT\nCQb2ZM40xqBtFlm93r7v4YhePWystPkYiOwzJA11C+U3aLc5uOVAjSritsY9\nogNZzelqwK0pAPPeOoidL2F3k2XJpeF7k2Cy3axtYvmMgsksmSfTaWucIVOg\nxqL0hipLI120EvpMpfXOK80hKxlqmGzZfGPRDIF/+NpdZyz4gsxpPTUlJzDr\njm+r5LM52K1sq2W7UBp+Ax9iab/E499Iv5JYhPnJtU5TX3gtAkuy3HWzaMCW\nJL/Dsan7/J7xWqLBD3qbSXS06syaiQ5rkHNNKLunI4WjocY01bfeVzm4fwpY\n+RgP4xBwi00UVNGWM0hhj3HROJyr2AjxSGs6xrF9qB5ZKwY5EKySWEO+pVKl\nGzB2\r\n=NlpV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.4567a750d.0_1616206092821_0.8834644150924131","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/card","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffc63516a8619dffe5379740355fb175c553e716","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0cde52f5a.0.tgz","fileCount":19,"integrity":"sha512-O2EO65IPct2EOVxaxiG6y8rLkPwwf15r9A7J2iQKkhGUJLzIy5CH3Wa/7hG+KFkUHSXKUOuGU4ruuy8G1wcQVg==","signatures":[{"sig":"MEQCIDdSOTNYEpH5y7b+PZElIcDAeA2p7aoHspO7ILQyLj4IAiAiBUAdTWGRZnCT6X9vHbJ206z6k/DpbE5hML0rulGdhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTBECRA9TVsSAnZWagAAiC4P/AgixhtSix5HjnY8zVHY\nyYm1WUnkBiw1lV/iV+2MstlzOILiFQa3TWUn9O6/hwQ4ChqzeHXTn3TlXrgT\nzvn7vYWlTFLJev97/wUtvVfwe3XqQqiFfXOPHsLhExCO8aDTH2k3T203+IDe\nEbB1ufnXmCGYRBJ5bQI8M7ScOOVUYKdckpNXUnN/ECDQ8zucCfg7oeUaN3tk\nkOPSCUYDOy4VLlRTK8zJSn9Abh73jRIrHl/Col2upMOwsEiYrBV9H7YB6clR\n6CIbFJU3L94QSNjSSvdWnGJF4iv63YK87PKungbHjjqKaO+mUPMYZOm9I+5I\nIRKed4VjoPdhMoF5Nwqk59BqaDBm02/1SakJJ8ZZY9CxrP1NwpKa1B7iB3I8\neTDrMKi/Qnr9QnHy5U5oqcWWc1MORAHW9hpjRVx6Gnmg9JsqhkIOuq9iX74O\nPzOClSNRmiTFNc7NLPF27ri6fOKrzaKJ/P2F9StikxLaEr6iG9qabVJlJJZf\nmZwfU4wZoTYA27chIIVDJAFSP5RYfBZ+fAFNbqJpd6T3/tAIqTr133TB8hNa\nDigehVby5o6UGeNy+O9ELt4cJHK8lhH+m+KGiwCSFX1FhHBwmDMHuIfpEXAw\nDCs+Bfbk+dqy5uu//KXCWxI7U7bwZ2Jul99m9+ClRl3CvY5n/BVK2wLrSCNy\nE4/e\r\n=KP6e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0cde52f5a.0_1616457795534_0.876518165903327","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/card","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ce9d0837858f58775a477a5470a58b6f3acda31","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.48f4b67fb.0.tgz","fileCount":19,"integrity":"sha512-3xrzLoW1tFb8SlINJSukc+Rj8YHuCcghX9WQ1pEdPUe9bmw8uay2dNH65P3trdrRXau1PLx9V8PEsFrSGo6VlA==","signatures":[{"sig":"MEUCIG0B7JOMiJ9sSkkLadNe5OJcnctpZnIkeTQ/MoH/knN7AiEAvDSJNG3bAg8Rg76FNL2p5oQoDiWfMgaa4nna1O0Ttyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkd9CRA9TVsSAnZWagAAee8QAJkWcDMD/Mw9VkzYpWL3\nwBVUP86A/bLuKhYsuPFfMmnq0Xg/LLVyclvZHLRGGySeqd1fqyE7h60MYfzF\nG64/58hhogkIOlY39HTdFsM8fwGxOZjIm7Ke1OyBycNSub/IqV6gofTAQo5i\nAX5LwZS9nR33fr0nPxJA50s5595Fe5sfcnZONAKoalI0zQDu6uN6khgRxew4\nPwo7XRwMQWH7SU5spfz4t9mN5sQezpm451TBfkm1oyceVM8NeaEGth8rNmfN\ntVD48UUPu/Q3W7IG8uOQ8ha3lzq5U7Nk5SjyAES2ectZ69UBU84fpyBNH3tb\n5xU3H2Y/30GJIDg1xur5JAIMgG+PwC+LMko9KeXhfNjrc25DbERtWvZ8kQPR\nEQJepJ3GAXPD5vUDqtAyitKG5Wk4VEcOfpJ4rZCnkZSwOySk8vgAtV7i4x/D\n4Tlvb6PU18pVSxBIQm62I5Nn7kbcfACWlhGsgsVjmpUF6w0DSXXV/SLMaqSE\nbFa9CKQ41l7R2Ds7XyGfmb2a48fcglId+8hj9msKF2mZKQ33l9vKNH2b67hq\no54hiDJZHRf0OREO1sJgmwdhJtb4HsqRiS736scmSRRYQmzxc/ieCOpB3dhI\nlXg1ESk9r9VPV3yq67KycLop/l8W6AaPBF7WN3vMGz8CsQM5QxmmKvJKPyCN\nIQ0+\r\n=SU/u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.48f4b67fb.0_1616529276743_0.8206861567880328","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/card","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7980fff37c0cebb847b7e942b55b12f820202d6","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0b8cff734.0.tgz","fileCount":19,"integrity":"sha512-7uR6zW5AYiaNo01yBGIMKTC6IQmfPWSsHOnpJxuZq9Uvfkdyh9Y5K8f/rb2xerlGzWYewhWJSql0JgTuFh0x4Q==","signatures":[{"sig":"MEQCIEK19ZuilHli/9iAiRL+v48Tv7ENVLVr560aQb4ol7cOAiBoEczCHS9mHojYKRKrZGdHf7zPfzadOY2PSiAUYgjKIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknqCRA9TVsSAnZWagAAgs4P/jeWOo0ao3reUS0BRF4b\nnb73CypltoiUfFj4NYa48Mb4ALGNwcheCqOhlNZUnRQGoBmZiT4QPUofIxFK\n/mODSfuYJlx3g6w1pkJq0ZPTP7cSiVAvHJXtI6MO40oYAdmxBffrBRBIfQNA\nnjMmEgmQg13a6/o+VPr3pk0QF/ibPF4kZCWfS8EIehPQegJ6gcZu1ob2ZdN3\nVs/zD0peMWGQhAzcDuWtpnVcF9qKSmtvwpHZBgEZTYRV5ZE8Oi1Jll90LBiY\ni/67Rvk8hZ2tj1SV/Mkg7STzKnDjkS5xn4OAwfTtajr9ho54YZQqIwhHeYuz\n1u8inJWRWq7/xGlMaavzLsRTKXe/yLQarG9RUdDHOe55cbjJoABjTRAJNJ4e\ntneRBMo0RxnN48wAIn9tvfQpA46zcBTEBMNWAuXjM/jqGAZO9cdmjQsIiyZS\nna1+RLJK7JvyAKcaJqb2BeqeYcG/zP3pS0quE4lScDeoOGQg/U2RZ1xg7NoR\na/rGSvVyY1rRSnS53kjvIQxnoAurmzloMslVXzQ1M8VUcfYVENJMhjNd2O/s\nJmi4OrOI8nYbN1LXe6auL/rd6zuFVdUfkJQnKUX2cX1FtlR4sKOBqvzeVTDp\nbyP4wlFvvz7GGAV/zDSCF+aV4yD4LZ+VZwB0cmtp91u57dkYZW0W+jifbDRW\nFbn4\r\n=R/bP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0b8cff734.0_1616529898277_0.15404593236893005","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/card","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e982f654743b3253655768042aa1fa6f3bad148","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.8943b991f.0.tgz","fileCount":19,"integrity":"sha512-7DlUsS9eN0+tatlIhKBk3mh2LAxcUM4LmDDRN4LFEvD0HBoxfqg6imTCqKE1J0ZoIP6U6qqHcBxHE0SnjWCJMw==","signatures":[{"sig":"MEYCIQDPURq4gFFg4zqepq9Lf0RSBsKj8SfdbkLKSnmMaFgJjAIhAJg7ouoTYk4y9sWfkPlFT+Wse1ZmPvfH9q6rmzPQXU8W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/HCRA9TVsSAnZWagAAKWwP/ijTgdmsNLOG1ZRwg19U\niYkIWoqZTuTj4ctVtZGnJ3/EgKGqaXvclQVsctkucZMq2ZYPDhTDEu5Ogzez\nX+QH7eP5vxX/vKT7JOhdjL8cQ5t7lkghgxxLr5wFj4/Pvss82gxRkVhjB/4h\nymVc6ELCou1NTdLXNuDJtYWkLizoKvfOBtWKsRwft069uW3jeyJTSDTrgw59\nCPzVCyfYvnmd8PQ7c/LdG45ywyZPPQw6YYhIN3tWbBuNEd4tooyb3lfCMfWl\n4U0QaNTzrNjHtSjHW49jNW/JX1lpm0U0gPTs9K2yuUIYaP9tV9/8ug4W/Bm+\nE5DZ0XzM2mi9TpoLgH5EkI2D0u73l5jvpbW++NSz/sZF54pGIb6r9+YIAePg\nYMHyqI3FFjQcgsa11LijHjIOCxo7kgMuzkM7McIiMpUduBin6tg0idmhg0uG\nav7EP4wp8ePTtwkInsNp8XedDs6dkGAVoDiBPoF+F0NIETBtlo+HBYxuZjJr\nq6Rtcpm+1jMwQl5/n1yqaesnpsWU7Eaq5r81mXi//wFTSfMq1zAxgsSI512S\nQ07FIf6DYL8+uHwdpNMTcNKdmRjpWEmO7FpgL/rLBNqm5ed70oOHLhUZJOsY\nnF1lQAbdyX96PrUgSBM6kd5PLJOnMdSOJ29DcDHW0g3rYxE+U/kpoBeOsOAQ\nXvv7\r\n=ZHa2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/shape":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.8943b991f.0_1616531398993_0.06556517586158339","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/card","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbe0d769a3adc1b51b1deec45b8463d66f374848","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.3955d8d3d.0.tgz","fileCount":19,"integrity":"sha512-vusKAj3cgG18EZe4wAwMIkm1q33BNS90fjZzyBGW6o34Fe7aUce4hEBfAANZ6MhJe93gA3tdoHDprVw+d5dNZw==","signatures":[{"sig":"MEQCIHJ+zbILqVbpi3efS3jaE9p8Uo1C+fkT2QKT2KC87cplAiAGUqrSVheeefpgqVKWQa/KOgSKR1XhKn0qz9IDHFcEPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5AbCRA9TVsSAnZWagAA7fsP/0NX1xE3gSLWxpj/O9OP\naMNq1nLoGL3E9dpw6VgkzS22Ys3hzJYEN9fz5+AQXenEIIQ/nnyaUj0mzdex\npGT7wJkicPat/X6C9bdNElCjLxZl2uXRCo8B8ipLAaXBD5xqaO9LbNjOYjpr\npo6RMbuxgY83wSJRUNYhSIOZZlS5qoEcZX6TVVZtG3BDXtqmZjLaMYrTAywj\nOOa4A4noKQuhY/vJf4OkLsH5xdbCyc5AeFkj86st52h+I8Aj95CeC8W3XYXW\nHYdXxMaSpgFanZWa4v90oqIfSBSXQynUItYRyLq7wruebYoB1T3/rORx84bP\nCgqzAhfJ6Jmx1j9rW1TmBdWpL81WjM7dx7dtZw7zy7AA9GzN1290fx0Pzd6t\n8GFyyAxAEsImYDOWWTJqutcH4aE0CNWgLxq3UBcfkUvkGlWe6OxxFDtcYxas\n/dWESGJVIe/8ZBE/j1pC2yxa4or54RQw+wbIbiQbbw+PfWWpg3Qva3Fz58nT\nx+x8reyU/Ih/VSAGHbdljS6QxMvWiVM++OMiJ/mBewXHZFcZxrFbhwcJ8Me4\n3UgnxJXg2+oo6sg5BIShyhbEoPkmfgqza857PbmgWWpmsxMDIGRvlLQJkyIQ\nmvYL7+W4AQbtzQ2HflzUDfTgwS7Gubo5MUKAJlu3102OxrkqG2n64LmgBBdc\nwc0p\r\n=OKnf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.3955d8d3d.0_1616613403485_0.9604764178077838","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/card","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad22a2c2ade5e0c37ba8649658a2e378dffd5442","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.23ea2d85e.0.tgz","fileCount":19,"integrity":"sha512-ZjG/tpDmPIdISv0Q7wGOhZ2sJsgLvxsPIq0p4VxL0/QWvwBm+A3POR93B3rZHo2nBnQrhk+3gjh0VvuDJo18xQ==","signatures":[{"sig":"MEYCIQCj7U8hHQWd+1MRS6nVbk5TfDchW/1C6A/odPUO0OhtbQIhAMZ76a1t9E5xnYbrBJB9SL7JeB9vf6Hhv9p+zFTzjRSy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMlRCRA9TVsSAnZWagAAKJIP/2R8EBTfW2jtphQfMEVm\n51iMKg+exOV0SVrDNM0Fphi/QC1DQOHiE6wPxVmbrgxHTYyPhG37XEWyTlD4\ni/CpWRxaD9aDHooIkLTKPobQf6JPxhHqYIA+3v2wTGooObMvixUUqNj1+m2V\nAjooReNu3z9w+E0T533lIgTAMoyTm/1b2JMJENdZL7XBYXvCUgcvzaTrU7Af\nrKnfqtvbhOs2sN3gqJAl4eTizo7JDH4ftcWjpr9IMF4ejrSGpG+vo58M2QR1\ntvIjjsv2lCliI9QyGLNec085KiWPPzJYLZybjqPf+a04VlbGY3m3I33nzWtO\nQ/bctcLMON7ejhUb99niJYJYEip2RHryA+Q6BkX+Bm41xrfMGmK2Gk8DqTcH\njrjYez4ESWyixyoh2vyovwA7nhtY213UwFsxN6eHH0EVTI29GZFEoHJryTLP\nvL3jZXmr4i8rJo6vDB8jzqGVyaRsyZ57iisRugRVd3HViXn+ck01wheLLGKQ\nG849aMrrqFDVrrOAogDhTRgYGjns2xi1ATJOHRGZEk1d1XwDhgiUThQdPmhq\n4WO5oroUXDcTzn6nc8DFzfQJWDLbp34+qxkGJ6WMjb663hft8YBF+GHjhrSv\nvEOY2ih11vHZFV8Dr4i/G6NWYLQB297ex+GDteBbSnJaQobgBa+X5y79Oz7a\nOuc3\r\n=H6W1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.23ea2d85e.0_1616693584586_0.7970465072304096","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/card","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ba97fbc94a12de51748a1a6507ae1ac75f7c9ea","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.e3ec22f45.0.tgz","fileCount":19,"integrity":"sha512-XswPfKbx0Qt10yJ0N7AqQEpMac+ITXjWDdyQyyxhJAh+JTaTYtKelh9905pHQfjM0nSYvbIdoN/Z218i7CXIBQ==","signatures":[{"sig":"MEQCICWgx3QbpNaAv7yVDNthmYgPcrcnqhg9G0g1NYUU2XLyAiBs2SyncX/pmJp1B1rASzKXBanSm3eAUMfTeKBAE0hR3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM8RCRA9TVsSAnZWagAAZBUP/jGtJEBSR0xYZ0yZ8/or\nhp+JD7ImiyrjRJnhFJUE24q1WHtXDmuwQqzn1Y3xRXOVDI59HxI69PlTRX80\n4GiTTIRuOas7FZpdd93bqc9K2uQoLLYwGp3rWJY1+nkXjFdF/RKJrxb6zDqa\nPfQDrjhnHQgWzj6W2T8UyLG+I4mOl0bmqpHt675U2TXZ2yT/8cKQjHa6LPto\nUXWB8aZXaHDYBDSrnQvAN9zBUHxgfStPUJ/7viBi0gduWpePGwc+Xp+YpPaY\nhBECsqkbs9Y9DgKf3npJgObCxFIUIB3vOJi8C04P+zn8L9Jw4v0BvRStkt1C\nSIZ9nDidPt/mS7S18vIE0XWZfMOlg9td+EoMK+qCgbdTDU+3DLm2otDTQYwb\n2eNimVcpHNq7i900pNUtbBH5vxZDoaSzqwWwSbzHIPeL3o+DYmV9zew81S3H\naBM7J0X/+OVF7f+6OTDE964wITNjjUb3iQpwDfHAUN7gg5wx68JQw2vRLBio\n3ciPS4SGiI1owptY68znn/jIOi3O3tHhF48w9JhK3SrvbIWFjDMYXEX+OtZM\nL/uRPglzv8jielOhRqprm2uy9wiO2stVVNdZGRuKMJMHAv40bG/XhVdJxDYx\ncyeRRI028pXqrmW/GpOmqHnEFpMde7ydM/DO7snlBsqdgMgX1QmjTAaopTYs\nvDLP\r\n=XKhn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e3ec22f45.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/shape":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/ripple":"11.0.0-canary.e3ec22f45.0","@material/elevation":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.e3ec22f45.0_1616695056679_0.7225997344364308","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/card","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a34e5b6a1cda4c5ec424e00700e8d94efadeb06c","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.4ceb42220.0.tgz","fileCount":19,"integrity":"sha512-bgNWYaoWyMGOmIYCE8Bp9cCKen01HQrCPWuHPLEWN/cwt9o2YrevzEbCaZi1MUaStP6Ynd5n4EvQ9sc+HDdnPw==","signatures":[{"sig":"MEQCIHEoLakc9ejmLzN1ZpuN86hWIHkD229eKK6KvxXTTDFfAiBb9V1g755j30EtRGQkf1/i8/qaY6gBnImTIVxeq7+MTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZP9CRA9TVsSAnZWagAAtaMP/0CpsmP48KhAcmC7XW6H\nEtm8YK2riFKyHAW6LuG4MY6XBDJdV3+vOkerHdikvRRzb/OPMjP/DAq6t8Xn\nuz91pHWJNOm00yu6Zroznupap40SZyx382flJfLP33EVg+PxuIno3bnijp95\nhRA2S2uh2iHfg81/cPis9HiaMyXVMNlE6yqn33q8HOeo1WMQIGAStKrpRAyN\ng+PGLTZrVCruk9EIh6mk/iQRWYeULM3xToxn4YcKc9FVToyh0SVADSSI6wNS\nzNNK7l49wWDpkP9g3i1XMZEo+/VfsGGGYXGH7KUS4YFUQQqrl9IdOYUadm59\na3T8KLOmw2Pitb4+2y3zIQuUutJVkNkYyn6obyb0ENzg3AYNx1tKs7piS2M/\noHCMo/k0q5ZeL7aWhVNKq8MyxZmwvk//kybyEyij1kNSS6kqtqkjse7DpxiS\nXtAn65KxUlV4g2eMJQXIKzrq2mhhd5dLTeMOKBNmjN55kkDMtIHTiWWF9Nra\nm168cgXICBRficPaBu0UKy2vGknZpGNeGOpFwx02V6U1eul4PjMJT+bx5Ed5\nky9U8V4Q+CbUXCQV8uPsC9nB5xoA08tBMjhozzM1k8giDZxxR4Pka7E7pX7y\ntML1BzM1qkOkMSxsDNGyz13EHihCnwMMWESBC9apjNCh2aTyS/Aps3v0OjA7\nS+nk\r\n=6nzb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.4ceb42220.0_1616745469422_0.6090324735215871","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/card","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f522304e3028d7b3b009da90e551b6151a49272","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.dc9c84023.0.tgz","fileCount":19,"integrity":"sha512-PO4QutlBy6OjzGECcR5yb8AGXCZIbjdrOPRymcIW5nezDD5c1/ATsROFZdEf/M89ZEvYS5LyMqGLxhhvBBb0jQ==","signatures":[{"sig":"MEQCIBCCPj6XtB5xtV3I0oM32iVLtsFhTqZBjfy1Y8TyKuZ4AiACQV8rogVfJoeQEfagLChHbnzY0Q6EIzekJ6itneXCRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2SNCRA9TVsSAnZWagAAl28P/2DsOITCon1RgAa1u6I+\nteJGeQJddiI20aGTO0ZWqWRUNOCZ4TBhYAXvKGfjCwZXsHrU5rcdxAlJ4Utw\nH/GEyZK/dp6OZGeUG5oObSCKAQfbJYlKmCF5ic623H+L/nqs9TlfKZxaNAGo\nYJ+7m6Q0fcYegnmrY3rd4CKaTDJ3c9NwHDhjFUb5lE1J5DaX8+SeY1hCq+TT\nJ/pxK4F1IuGR7mGtYuRTv58M0QgRgDpHBB3Gj5hpe6xAIHHYb7dOhR3b0yZR\n5IqnzhcyiLMu1WwvDJWm147XOx/UTv9xoD1iFcm50YkNTCgd4PwoEEl39Ca+\nNI66KtGTko1Vi6N+kRPh3mJQ1U92HAcSGp5F3k30E+Ol4of2Q70Rb9Y0GWUP\nFf6YE7ho+8wW61ZL5EyEjYiuGEB15xNR6qBfipApUY7bSgkMByGzoiz+4If3\nHjS60RI0xuX9BCUp0SAJHgC/bkX3E5utT/EKiOeoQWs0Bsc9IMhwk1H1yk+G\ncCTuBdim+eJkmvK780UglX/OEXZm1VxtErhC5ZZV/HJSzwDiWJ8YnifYFmb7\nRVaVFtlPjpuLcUk8nLA4DHnB2pEUiPEX/slhsw6wj/8WXGSWPjFSs1ZyujrB\ne3UicTmZAr9alKG9gGKeuOp/Ascv1wGj6K8i6w6zY0POkNgQKsLsdHzhdJcC\nGqPl\r\n=iVvI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/shape":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.dc9c84023.0_1617126540922_0.3456487305038296","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/card","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1889e75d4d8c288462656887c41bc97b4da92af7","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.56fc26962.0.tgz","fileCount":19,"integrity":"sha512-GTjWeKdiLycwS0u83bPy1L9kNGkdJhBt7ZYfPtpU+4dSeoXata6AyyXhylFvWQg7M1OmP/LG3oI6tWt79dfPmA==","signatures":[{"sig":"MEYCIQDWZM7CMN29d2c7C3zy9BTx8H0o9tYLrYpvkmtUKshNmAIhALck2WOUax9zdYJAVyZxV2YyKJi/wr/1lwXRMTn0hCeF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8B3CRA9TVsSAnZWagAAcvoP/j9s0EW/OBJVikuHVjjw\nFUD6lwp9LRNpo8KXLfifE2aU1bATqcraimGKvjlGMChjwKbM/W7qeV0LJKVT\n+T7v261T3D7AMc2/kFH8E9OfBgCVrwGUhlh1tSWMGoo8fmuiZUYaoTCLEndM\nfgExx+PUjX0gIckt8ZTbBUd24G/IUWHhzVHKV0vjuAwaT+Yj0WTxHDLp7MCq\nNV1Z+mmMi42XQTEp8W2V154aZbJIIFH6h5/SW3X6rGA/OsP7ar6/jd6lx0xZ\nSonPc4Dy5ph9sGTQ/y50eo3oRhI9G6sKj4o2uW56Dn5blU+JT54t60zn0Cyu\n0gZwWzkcoBREzlTQerqnEaowe+wMn8QYKtjkiyJt+SiyNEzO4vk21R2I4TKd\nGo6FboE32i83RMqGQqgTtB4/esVXRkZr/e0zjZNdrv7klbyq7ZT6rj4LMiPf\nnX9eOOCg5pqEhOg4zzXK1HdpsHEmFzqsNNfpGZDBcPplg0EsjOyMzoujTmsR\nmoIHNb7zhQHgvHDSm/o5kgDvpVX9n96zAqNxjbQ7PJB8R6d5Dt0W9kUe3WgO\nyyEwq24Hn564zv3rzNLszcHEj0PszXw/KZNTja41Frdju1PLBxdfVzoohUMv\np8if7J4s0kc0S9Z7pOI6sn2I+Kboo7/Hz6FYSMbhjabz3T3yM9zKbTgzpdI4\n6bKW\r\n=39Pg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.56fc26962.0_1617150070734_0.3034520391715707","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/card","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eda9fd2ccfcc94022c041ed6daef92c14106a372","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.bc318250e.0.tgz","fileCount":19,"integrity":"sha512-TKC9iNKKmG8mVyifdu0YyrVxNmLZEvY/bhtAHnLtUiWPznMjCL45ERE1wsk4g/IZJq4hsf9+XDQOhXXnhGkmHQ==","signatures":[{"sig":"MEQCIFFHzSa8ALWaFbRk3oEAqc8H6G5pEajlfhj/5YR/C+xrAiBTOmBdeuwYoWOzzRFfyqf2MyxsyaqDHkuArFudz2+B3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9GMCRA9TVsSAnZWagAA90kP/AgOqsCJItvcNAyJlW87\nr12OjX5xjOniv8ya4vaVpwzjV49pWA/RVzDZC63V8iPFgBF/Ul/Y9fwDDvZw\nAvZSVbJjAB9zq2pk6Q1KPui/z/08AVoHIhktaQgtGYr+W9NBEEJVELRmWWQz\nbQV8+oY0wXbPIOzHmwVO5Mq4J2eTxYUeDYH0tzzMbQ+ZvuVqPyA0brjI/hgI\nMxBpukBcYHXiVuqD5/pqYgu0e4V3/xN7aoS6gpiDU7NwGwaSnLn3PxpxVjpb\nE5v3BrwXSF6XetmGvL7w0Am7V6BR/DyfrxoyOP1HRo9i4VPhYWDunvbpUTSm\nhA/SUDXXsXOeUfI++dfrh1zQSIZpd/W5iDBvjMD//WYqD61ArHEsIHkazw+N\nddDPSQ5l0SuL5i38LXla8bnwe8s1oEaYhXKopc9/8Q0QgNxMyMoGm0mnnXHy\nUwt2YG0pWdw6BrhfkwPXNKwGXxblAIXOoHR9nnEzqNf8UdKtApgcbtf8envf\n17pAMl461H6Sg1QMG2+l/S014m8xC2VT8uE7cWsjRwvib0PKJ24dqZKO/3DA\nd9l+HhbLsMtzCdGF3u3TLm8YRQtVdNAj7KxoksKBm3OIYmcmJGXJSPTpnkxg\nQzgX+OHLWR8pqeZHsiwGIikuy7bQE9zV0exI9KNqIWTmrD2JQ9X8Sc4a3u13\nyp6r\r\n=u/S8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.bc318250e.0_1617154443822_0.630697926273257","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/card","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7de6ac17bc6b6c256df68dba251b429f462ee164","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.edaee19aa.0.tgz","fileCount":19,"integrity":"sha512-FKQ3Qu5y28AH5lersqpZzJvSeS2sHd78gA9zngobR0hpecwev9RGSfhzsnjWAQVUi/UGfl7W2nb8d8conxK3MQ==","signatures":[{"sig":"MEYCIQDZKJP5ul6pVHtOpB0RmAvcT5LFTevrIeKXdpxwVA9tsQIhANdkde/JufqNx4aIrr70AO7h3jP5w4HUJmvyruef4eAw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pxCRA9TVsSAnZWagAApUwP/0uXJ+RZ3junV9JN9I0c\nc3niBSkDjz/P8QT1+IxM0Iw3/hNHyJ0kN3LIImo+sEwBr9PbCVFI3Wksj+7K\nLEDfGjhJZIbTbCWJsFtmDG/Ycj8/GX4SrDDqsxVggeWdjpfhdeAWvwz0GUE4\ndajov6mnD2gz3lHrJCBwSj9d5v9+LtNDNzJoGgJA46iF8MS8Y9cZR804pAnT\n4KPX9T9PkDR2kmlhf+t3cQezUHRvvUZyK1j0ti6/mCVmcKd5clRHvkY1e8Dq\nV/GLKs0iIjsegvPtee6gub9j7k3qABPp9wJRSXCg4nfEszp3XvqMPTgnomQv\ncvMsQeifD07/4cQqLaf4fCwVx5xLcIyMy4jSfnijFqk5YH6TiWPWH1Bj8kfK\n0Ak9Uq+b7Qn8etTrWvdAuyftJOV4g9M3VM7Mloux2YuN7zLf56HMYJeiD6t5\nbQ31mQpiX7mZ2cYM5zUVHZhl106+y0E+8nkEnyk8vaARvKURIQwKmUuszo04\nFui1IiGvVPdprqi8O8jJlr98zVjl070X3svtnqEWtGka/LOMtivy/0plHe8N\nVUr+BoAtPtjHaWWjPNrSyBEm/5DvCDcv3Q0ideTBUooAK79BTbCqPKGeCABY\nA3evo1dWBSrJwxWVd7xtwedCJoKFDxj6PlYBvOb/hMbSH4D9vojr4UyMInWl\nI3pV\r\n=ijLd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.edaee19aa.0_1617156720793_0.8784399305601416","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/card","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5525720dc2d71beee7e23cb2e5f931f2f45e3d4a","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.24609b822.0.tgz","fileCount":19,"integrity":"sha512-Hsf/d+lPhL6xUa6/6CuLSwA2SzLnAstFTE6EbWV36m0AeIFVRe5zjaE885bkteCFW433Co02RqJbBuYgcboUAQ==","signatures":[{"sig":"MEYCIQDjAeBpA5l6+AbjDyJDTCtIuGeCvdFqeXrm5rAcX1j44wIhAI37O5HfU+FAxZlBIbxkLO3LUGgfxxCy/4YJXn34uMHr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOI2CRA9TVsSAnZWagAAGtEP/RjsyPizBKtR/U/noCDQ\nElAf8PT3g6TsGg6d0KJJkVTnU7jek2L5wPiWCThipx4G6oqgnt+wKxBRBMPz\nHY4h3BE8T297DF/YNoCcGQeRNulhRyv26NXFG19CeJp0tkqVF3Jwf29Ruv7P\nde4IpU7odn9Qg870YAxpjuR0qjcuavYNh0ZRbvZC/jXUjZzoY5/O2FSb7DCn\nte9aS5RiMx4sii6UFcUMlQZFFe1/xWOhxTNmr7odjseGzDx0uEYBH9bJfmhg\nUoKBBPEuI7Fl1mtBIaHUD9tdpCW08NW/qpiY9fEaNcXqQGGbm1AwkL6+E+/w\nIUFSc2mtCfcrf4wKekyxzfDeM8fgboxh7bbSHUPGrFJW37Plg4BhNHKLcqXR\nrH3Xxz/r9Z8e+KbVJaz4JgcuLVVbHcQZMGmcD+Mi3dvOhj3N6+8+XEAH7b8i\n0CtXx3w4mTwkE0c1sbynuj3GYD3TmZ8WiiYOiApKaOl/GeLwZPcQ8kmdsoFj\nQLq5+nzNT4HAmUCG42jdmXmn8KNlVJC0RkKVLMZ0EYjudiUP/f29/q33KQW0\n8ttnEMwO3TeyicXMOz1yFijoJTY3287FE8FUDsFMwYbvmvWzwedWIu3kArdm\nPbE06sA2dFbqq2/t4OJR9vPlFQ2caeLqdXyTuZX61u+i5PnpaRhhnjP6/pLk\n3eSs\r\n=d4D8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/shape":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.24609b822.0_1617224246395_0.07554249202383967","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/card","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d34d988ccc27c070d51fe11c5f364f653601207e","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":19,"integrity":"sha512-nOTYEqdvFp6SEhSKT/xt/4mM4I7NbBUKBBT44vqNfguQ0mQe9wamP85rDz3SglTohYewanRaX9kZyt/Ih4OzGA==","signatures":[{"sig":"MEYCIQDvf4j3yxKtBxLvzHzn88f4Krh4Gk0ODZFr1vUYqhS3+wIhAIbgOdflDs5jXqSF0/ZTsGjuQ4n46jXWjBI8wgm//Phh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeFFCRA9TVsSAnZWagAAtqMP/3gkoGXlMPWS2vOZFu0a\nLBLNysQ4rAJuIq7FM3SqOAy0kA6e7fVR/KlsnoJ12+JG1qakgukkCYLCQzt7\nVQt3eGTB0aqjHXLAIyTgBuv5cnn16bSyMnW+CsieEXkWpRnavkTSakvjuviQ\nhpJda1xI1F7MQ+e/9sEfSdiP8rlX7PPNKLMjvQfhTZNvwm72lShHhjM8zMLI\nrn+Jlf0xfrKzE3ENfTf9hF0DbJTCS+vxxxpZhmQ0uzBsjpjykY2NU2xYwQW9\nAfZ8IDQIPkw1k2F6aMsUHOLoaItBhuYfcGtBNeA4gPz+9Qun5sWqLmafPPYK\nOUQCwhYlSw1GHsRw6Nvklvr6SLn0h5yvesxamYCeKkfXLc7H9BpIAOETEjnq\nkPBMQ2aU4k/Kx/lGBTcOwb3DY1evepqCAXKZKzIKNojAHwb834HP9bIB9F8h\nYrG7BW8eIDaYDe2ExSoPU29zMTQXhZh2RFIdmpX3NdnYAY8r68yLcbpCtxAo\nLos4KuRNZpvsfmFemFacGXpPt6Q92tYVNcmuCZnsFu+vW1dm6e6nfM89SyXs\n+/QhvmJNMjpGwuG1fudhBhEU+G3GZfxe58NeWsoIuZDp2Zu+S6350BUj5jr4\nebxlXqQ2nRlJjI/0WPvJ8LFP91x1U9leTeo2nAuVtMAI54xzLnEq6mHvA2zE\ny2JD\r\n=FfHh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.b6cddc2b7.0_1617289541162_0.02051615556509545","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/card","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e3476c30ede28796e917ad83c2967ade6089df","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.94937c78c.0.tgz","fileCount":19,"integrity":"sha512-jT0jTXmLnDitcZ/Lgt6QJubTjBv7LlB/241ws64BhpGCLoBWODY2o4Ccr4sw+Z/ogJxhFUEisPX8kZy+kuY9gA==","signatures":[{"sig":"MEYCIQDu4+d4g5AvMGCCS+OUkcDz/NciyloH69VyQiHkoM3KgwIhAIut4YNNZZeYEdBq92+c++gFNyvgspYJY8aeC0isV2Vy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjSfCRA9TVsSAnZWagAA8vsQAJsAO2ptkZuylZ/A1+a4\nRkqLzJ5YiHnpiP/A3gSdSQ6u2dvaFeBbxU9iJQUVeN0SIft0J0Lccs51pZM+\n9uSdbCvbar/m00tZJHT879Va2ejftjUVblj+SQNciWGuz8RcsUBL75FiL6jp\nnS38PwXhs6RfKrpdhyjbsUzx7r+p5l4KNCsvm+2scwBXXUaL3ypFGChjymcu\nkz0OxjtfZ5JE0UXupJNiJBGAJWY9UwQ3vlzB1Qno25StjJDGsEHuJSBXyhBv\nSC+HCmdA+CFaouUAupP/QIEn2V8evcVEsuq4+C9CO1q9oIE6d8DQcApninjr\namInfPTinzjvjskNtg/Jf0eFtdB/+Hu53tNR2zYQrpi/yGc1cdJp9GYXgtEt\nyg//wudoDb0mrI/ZmF7E4UmuFArL9n8tt4FYplX5VHzpR8zxNCm+KSqe5gD9\nrLc+WykF7rGtwXu9moVRIYG897ze7cKsu25w9gaObea4P2U5jkfbqmItwlmm\nkZtbEjGVQGtCIN1eR+3EPe9YVUHWw9uI5+qQmZrJzoPw69y4mUtC/P0rJC28\ncHTCEer3WxN5j12q9TJ1PF2CUlX4ILdCnS3zJ2nVSn9POD4veZkhaK/ExWFp\nMg69+3pS6YQpsWWvD64d7lQFXbSE/idjJWT+cHqwjkQRWJSUawDVlqeibj5S\n7AgG\r\n=j3O6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.94937c78c.0_1617310878886_0.2935330824906588","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/card","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d9fa243ae0bfa6d0bc04e4fe8dadac8b63d2ac5","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.e7202cb57.0.tgz","fileCount":19,"integrity":"sha512-CojVMFyXi1CYrOJuXXCpjlfs8vZ5Wg9EJ224gCMKyTjVOjWASaTRbRY+j32ynYJZ1J9MhyrjTBIg3fE3iVdKBw==","signatures":[{"sig":"MEUCIGTLIexxSxctnAeD3hXa2Q2T9iRFand6ei9Mne7X8ZTqAiEAl6/l4gpVDCcaJEcidlJSVdeVOY+3BI67RH3hzB1AOA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2MCRA9TVsSAnZWagAAZwEQAJHyyPLIJwYiGO9B/7VF\nXsBLI6yaTtbYDIg3f8Cfevh1ekdk1q0NT0hpDCTmVx4XbYr6nM/0xil5cnqD\nreYq0MZe1/Yqr03qxdhEOr6tOMkI8Ph1xwh7Bu2maYbBaUpXD47wJkOK/GFd\npiYBlhsDkpZZwrt9E5tb5TFzVLtUcjXhAGz7NOUm4o13bmZL08COsC5Oqe0T\nk5/Yc8M9YaMXK5nmHiP7ofzlNrdSjPJbTGOK0WtK3mG920DVER3YD8JUXWf3\npjUfaLErLIW3lpxV5AoHzLUKTGfdwF83FZZF+lTb+QPpGgMs8eXDY8kx9lXe\niIxd6NX94qw1TgiHZ/YBMxgTpMrmvtPUpBWQbMkx43/a7i5ZmXApuvRoE0z4\nNYHUMgjjON1uxChTiixRr93lVUT7fcG0evouK1lx7YLmHl7Om5pct+ipwhXG\n0SHcBfR/N9vCNz6rRWicSJlqqDz+5/Dmop8eMNhq4Qp2OqiRd30VSVbfI3cs\nJuYecAq9lRLA/8jxjer2ioeO/GYhbRrd6E3j4r0JZa87Lb3P/KiO8EmPq+rz\nRJ6BBUhbnx4L3jEqW1SDDzvWM8SxxuyK4vKrF2w9SZTg7b6O/7oXSbIsoCVo\nftS5SihNk66Y5/aYzudV8pX1kF8MBV8Eo7G2/0RDwMamOxSrtca+jQFB+HLn\nB8A2\r\n=x789\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.e7202cb57.0_1617317259751_0.9777854831463575","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/card","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d62a1bb9d9989025af4f76ae382919754bd6a491","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.1f636b205.0.tgz","fileCount":19,"integrity":"sha512-VMmv5qHD1edLryABiAcVkTp4bj0ClIZJA1TiAspQn5aIzspcGDlstSupMflDJP4UoV9uaanJjQAqBN40MEr8qA==","signatures":[{"sig":"MEUCIQCfZW/b679kzQ3Iz1rNI8NspICk4jLqRMniZG8AYJK3/QIgao8Bn/Re5+GcpuZAYmZ+ab1V0LplpnTIGd7Y0KOV3og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5mcCRA9TVsSAnZWagAA+ssP/i2iOZa3VmQSfjXLc1W1\npsLceUs7S+i9op2ltvqwNj6HA49BH/1FsrmX1I3mHJBK42b95cVvJhx7tHs0\nymZBlJKr+4bV+3p3TVBaHtRsNWvryneE051X7rcDpt2wLlDUBpcl8MBDkhtt\nCnhr4N2THoClNhAjHNl4q1xKe4EULSHXBwu03TEXHODpcZkOPthz1RsiEPKa\n2P39JMkwHvpRTo4lU7nY/75yceG3aKgKmf14x2gob1OTsvGKfxIsTszqWRQl\nNZqwEUpQXb4ArY82c9V01+sqSczDfMwzzAPJPJRTV5fvnZTh35kxox3tzYnZ\n2kznMVri2WH9h5Zqxc9ebmdoh3IdkqcDa5oe0s+2GirgDji7T0wgPtvz0ANb\nUrkKi9PMZ4iXY+Hy2vNCmF1xBUjIo6XV3bos9fofF0xe0SK96piMJcGqhC2Y\nk1KBxGWcRCQa/7TKuyQf0mFReH6mtAhm5IkkZ7oYN/7vFvbSljKhfQZUk7FM\nVyfbZIJXIy81P5Q/vpVd2I/14dKi8U1yf8Y7g7KYSML53HobyDWofQ05Xpvs\nsuJr6qb0/gyRAwNT/jwiy+3wLj8ABc99w3bdkIL2qghzSL6ILuf+Tvp6h/ZA\n2eunAx481yxL06SjznKp0SuBWadQaU7Skwi6PQJqCshhCyfHhoeVTc7DoB36\nrOzJ\r\n=V/zC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.1f636b205.0_1617402267800_0.36541260040969425","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/card","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62873e592d4e3e29b557a5c5bce7900573ea8be3","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.94f50b260.0.tgz","fileCount":19,"integrity":"sha512-kin/sZYyPvy1iz4n/QMb1pIyebAqRORAyLHee6cdwJi0eiqXSYSRiQQn6Oa3OuaSGfAyd3mjPdm3N+NBkt5O+A==","signatures":[{"sig":"MEYCIQDUkEskKttkTL4bpn6u3T52VT8fflw8cu0eVEyrdxgHHwIhAM47p0dEacAxit+mrvi9Wmvmye9TiTvDicOuO3PReamW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayc8CRA9TVsSAnZWagAAw+gP/3iCKMWdxuYUO8qoq77B\nQUSBUfK9rTJKqW4QYNQ3lGO0L0hqvdyxF769KHZtN0W5QPyqV7ZAlkPr9vVT\na535ktNsQBWIVBuOkZnshys/sAx2yuhwaFTjg//dJ76DOtWrR2K+6IDlgbQN\nULkdj0xKtjc/S8ffuvPh/s2Nu7yfrArZej4FRXLSAA2GYkzk5GVsWq0zO236\nDqK+Topn0sD/GtZBtoSmp+spUYG6I6GnRC/v/Ey0x2376Ggrvr9sYP9ky/oZ\nbH73nRdqR1nH0GfEoiGGjhzXUL9Lw0LenN/0BTFkE5bztBG3dTD5avg3fcxs\nDVGR7lewiyF1C+fXG8Rka2lcvsopVJMT6dTYn4eL5BZe1tmLxyNufs3lKjw8\nTB+4AoD/mPBO2HJ73W7+WpTl4w5FEmdRvQtudUUBMvgrFe7KbXCnND14O2sG\nH1Az7g/FCKAy8YUVuJ1lMRL2V+UwyYMZCxu+NBMFY5Pm/5DmV6CxuwM4WP6N\nVXJj6s7Z4DIrWoGb9Siyz9y4qhcBPCwhOhoeYp+vmxQlbapcPlrtE1dK74D/\n86/zr+7kGkuXtFAv5m9S4Cvwsfk/N7dwqeh76zbkhdrKPxmUJZiqGvRnU0Et\n91wToELG1bMP9ViaaddyXtZaoeUzOnK7RDiym2zIKUekchFh95udzHVmlgtE\nz5FT\r\n=eqej\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/shape":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.94f50b260.0_1617635132152_0.5873830532766331","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/card","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb20823a9be7feb580f5fea5aa07c246fbeab919","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.a4009b80a.0.tgz","fileCount":19,"integrity":"sha512-RMeqVCmQFJSJ+Qd/PQokmJ6flHNDPsIpSbKLL/np+/CNMPdkRNXKkfOGrQK+arHL3+8srTsm/yZpbTBq+EgrDQ==","signatures":[{"sig":"MEUCIFJlMRuUkSsRqXvpF7fez58+LLFda9LE38YW3qlHXY9yAiEAiymnInqGHuZzzvBONybQPB6iZOp5ArjJw2fE6XPCm6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4ibCRA9TVsSAnZWagAAuy8P/1yg0XSUZlV+qne/VlJd\ng6yQ66XPJQCj0ykuQJlaSlfG8jnVCDkNg+nzK9eTEa1wFktRpdcmWz7d74ug\npPQ1AYiD1oZACFv622DKqenU2zhdzEo1Ptar/0JkFdHmTgCpcQteo3sEF+Ir\nGuHJKVa2U+xAZBxn3OtLqftoJNxsPX8J79e9nLjfF2kEIlBJT85mXJx9MxXj\n1WqvG2j+JvKddf3pJX1v0JIaVnggWVn/RaPtkunWRmZ8GhLab8WXqt8ptfHf\n8QwFfRZm5s5C7KUyKGcDakIY7M+94EpdbtYQ0kyIsokVnou6QYl5oIGH8FE6\ntA/0FGmruv5MPVxwD7jqlS8wN+YC/MhzIZ6xj9GzrXSwEaU3UrEyjmMd3F9s\nkw2hJocUP7YDl3OuUYtI61iR6v+NymsgrxlGh/mxyY4cgU9odWNtYR/4mKXv\nkPHaEEphaulPXYb/pdvn5d17LZA8XIu2V7XaTUm/u3o1UKCADsNadftTWPzx\nKHrgeLE7uWPshPq5CqZw1W4mmLUQDZcrHg5d0DtE3qqLAvZO2aVwxk6x/Xcy\nY9xZjHh7f1JUbjW6mnuKq6KJaW1ZGfDzaQOSUJfyw+GnCMWsqCPF7lyWLm+9\nUtoONTR25tFt6C+pLYDkLYORT0JAzikY1LBTbAch0+rJVNA4JruJB7qw5BqP\nNad1\r\n=s/5t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.a4009b80a.0_1617660058970_0.2593717349432394","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/card","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"845a31094d9a123183f260a555f0bd4f42d3195f","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.15604bd0d.0.tgz","fileCount":19,"integrity":"sha512-EShGgrOA85mUfUGDZdDL6798W/gTZi5ohKemp/gDn5iIiNNlIx4CHwvR6yszwG725eiRYDahH6iKe/DSaB8HMA==","signatures":[{"sig":"MEUCIFROTHSOBHLWU9SKae1KXDMemuSCQX2nHgAnpWlswtBLAiEAjWxJQPlQzc3LnTvIICbWzY9HzBjJxP0alHWgwuSwGlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JfCRA9TVsSAnZWagAAiIAQAI8WVHglX0lQ8s2Bz97v\nmE+dPMq136Luw74ICrmYmtDkcuG7PLZEkwighpv4IRqFMzf4zkIFTQGNxKMF\nYSqM0eSSyvle7Hq6QS1wcwtHbfhAmv2LQY8WzyhNdyliuRhRyob43zXqarpj\nPErcsRCeXpCLe5O0mx7w0U147tCUv5x8Bj3z3EAJECeBTnoqByFVEBbAY04j\noW/gdEbP5FrhQ5U7Gl1oK2ADVmwhYYxt9UVOlpgAeMSY2epVm+vmGsXo2WHS\n9RFDMZ1SeEijMjgdGmJOp1sjGG6fdx4LkxlHQuEzKSFNbOKe4SMW83f09lfR\nOHoOhExdUOILrEvPlSg8MfVXwLT7i2KN4/L6xO3rE2X3x1zoPfymRq436DFo\nL3WOVMPlm8QmDowzqESlhS/SvYH+UWhUO+nKrloofShTTWErlW0Zh+2JBImS\nNFgINo780vLmHFvc3qRdVzJsmItq5JY2afdq2j1qIWEa0FkwttjFU05sk0gJ\nAml8rm58mskShKp/V/VdKWAcmAaGXgIKVrpfL8la3qlwAd8wx4dXpwljw9Jo\nXZUnx1vOG/k/pX/owfGfDplg1S1lzVzuE8AXrD/NkJMX48nFwPclGYS+TjQp\nIC+08198iINYYrcoajkir2S5a9603X8+8CUWH4SoGKjCSS8TLDNwOyhg6jJU\niS5L\r\n=PQTj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/shape":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.15604bd0d.0_1617662559351_0.27341408598857586","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/card","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7334906b55e74f1d225920d68e1e753b72a16861","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.76da7876c.0.tgz","fileCount":19,"integrity":"sha512-XfsVjXgMXyX+AKN9v/rIAKjo7pjUVPfiS/9sgmpXOVImqGyeW3nTIsF/J/sQTDNoz96hLdKSoHns+8hOo9A08Q==","signatures":[{"sig":"MEQCIC1zFQ9I8LW8CwU4aFr2/fVKHkAFvephKboK7aE0CNhtAiBaz6LaekMvhkoRCEvQPO5w1BJoYWlQIgrUlTpPc05Zag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ6kCRA9TVsSAnZWagAAezEP+wdzFw2GcuK82Run7QUg\ncyAhv5+3tgY5a71B3hsi1jomIV4Udt+pCsC0X5/nsm4UdEo4ENwQvfBo1Upy\nkT4ISuecAYl0kyOc8BYQqOq26BGEmDHy4nVcZtElzStYVWcYq7akWwuXNkVt\ni+K9l4Ohck00ZWGDh4fc2Kldq6zfpAX7UmF5AVQu9CsXME+7Nz06UxPxB14y\nl7XUnKZSDOnoMqhBPtybmYLIRkN/w4/FrnGk1cNuZ9Zsyg/T9aijwc5Xsprj\nwka+8l/xlniIo1g1soRzagQVfK79CIPvo1lZQ5HWvSX6iZhFuiYXKaD5Cl14\nOezn8LK1yIyJVHKJ3nKlynHmu99k/OPyYnUfV4uzk18NLDjE2Kg//3DQqQGB\n5nBvDDXblwYgtVjMoqZ0Q/h+Fvb8HXUBrYiRrDInPB6LKaTCzEyOxF/Rs24A\nveDSMjVkCMR2/Fd7aCqoI1KwuGsNiXWLZDsMij8gFTLWZDJV8Vu511uSeJM1\nvbyu4ZkR+v5G7lrgamBSZpTPlZL/UOOgBVsmCEJ/Jtj1POoztqSf65U+6LUI\nGJ81vrlhtS3yzXDKUWekhwWWA7zzDRcbvTTXs/EO9yigH1rPnlYmRxIMArcG\ngf7e9v4GYwp0BXyR7+tS71yb2/IEsqubBjNjxiAycvHCs4iLvw7XG+tWNn1/\n7sDC\r\n=3an+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.76da7876c.0_1617759907804_0.6106327368318258","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/card","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54e2fdedab95f4fa2180d88dcb8dcfc376ef5472","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":19,"integrity":"sha512-1HtpcaO0AkcmtoEdam1/4aFVNUUd+chnKb9YEUJhPq/ftEJ/rEvxvYtPp26J1f7NSQBPgys4KWba0nqV3TNnXg==","signatures":[{"sig":"MEYCIQCSzb5feKAXYXSqQEspyqKbGKJzwAx+mXrCG60DSdFOmgIhAONTaLPVKp/mKc+e8fKddDre6k/mLHKAE9kebSNB/qIf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/UCRA9TVsSAnZWagAAUAMP/1/SW7CnMSz82oKMpDSm\n8M/Elenhps0Ea/ltqhrF4t7evZLRr9j2EtwxLACjm6ml3Z1kwBN9RzbLi+je\nzK5+khwuHUfSQKhHTfGm5RCrxQiCrnDM4gaHuC9WKztq0voA695nj792invw\neQsJyWaEw9WE3bjePUQqFuPdyENFlnMk/+j0zRBEkpuCSOdgR8J54srgk/Rj\nj7vNpp/pwhgaQCKoVFvYCsy3zzRpNJeByU50uynXItgneS8DPd0vXKtkYkFD\ngdKmSoFBGOfnefF3ifC3KvtlDB7yNCs/yV9SawSwL2Hj+4jml88x39bsxWhH\ndKiIzVULgj0HN2oaRTZ8u/vdPrxJmavSTpeZDSau9ViRIZuNniu8RkGqV5oi\nDVL7j3nvL5RFjTZ13QHTK/J2865VLh3RhkBs1ipQS2I2vFi46DseWDEPxi6w\n07unK9ajwpJHCMQu32yOb/U8tUojxwsVopcRlE9zR0KYTVz5wtDmQjDCTBBA\n37uEOxVYVSSJHOny6snN7JDy6cj47Aq3FalZOH3WiqN8N+wkCAk1SOjfacuI\npW24imvBp2p/n1rSo/ZjPajf//atPI2fcZxnh3W5y9vBzQ8XINmU6NVjiih7\nZftm4ArNrAIfJaoN501DS8u0mg7gtGXR+9HjzUzmcNBVcStyPf/FIqhStVep\neDZW\r\n=U/21\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.6bcb6cbd2.0_1617821652317_0.29162668476055287","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/card","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05bc164efaf93adecf6f1fda99907c58837ec14c","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.c91e8d141.0.tgz","fileCount":19,"integrity":"sha512-E87uxvHRBDienXFgS10Rsu2SQ46ObdPMP0rGUQ2V1XU7l9aL03nN//RlYzGDcNyF9vD2Kxw9ZwiRZJO8f+yacg==","signatures":[{"sig":"MEYCIQDrfC8CkHCtb3YgHLPbEw8x/qblAx7pfZmtuxpcTecMfwIhALxhDj2hXe8tDoEwDSVaeTmJVvI5OsLNQE+veS5NeXKw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDICRA9TVsSAnZWagAA7HwQAISdeyyQJjpCkfLN3Zpr\nRrpji4F/9RbTgBX/6fWk1niEBMZmVFxMV3G0vbFuu3wxGA0t/XWvR7Pgp7Q5\nq1r/QQh3h1LEI34ocltArXYQ9TBSZcueUKcnnSIRK9sIT6uPt1Hk0fq+SPfh\nZeaWgXnIawRHv5dQA0v4ovAAn44PYTU30NusGXu+cMFZcWHr4YOm8hMogyKW\n6GRdPLeCcRTJk4CYXuL5MLbqHzWhXwFV0BZY4lbwlAJtRAbcuOeWVk691hKG\nlyydhcr+WFkFgTPMznuqKEfYLuA2qS/PyP+/+P2lfBVVV28inWMTlOYgxhhZ\nF5a0szRQK4QFHZtoGIRvrC6rh50sxcTAlRFAgifqOVujpyuH2w3JRyyNY80y\n9CMix4fqEbkiuVL2vh3OiHiz55kpIsLqqR+cYJyRq+sDrRK9l6RGGiNz5OBa\nXdwnFPryr7ouGkCPomv7Af5GOpWJD7Y4g901jNYnjAUeoJhdALsHagiOawYf\nV7OZrg0dFue7a2LE76a0RTFqeWyx4W3FCxekXYrV2GYjB+QD12U72FvboCip\nGKn8T996h7bsUXeBEA1Xy/fr4CDDxhFqTFjm058saF/Q0c0zlsqLOrPhhyTd\nbgTGLPsEUJEXPH/9xe05PpcApaXzQ1Q62VSsyCbtWOfemoeewWBQv/JGa/RO\nvLFU\r\n=8iU/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/shape":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.c91e8d141.0_1617821895922_0.9337871956078891","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/card","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2962f68a9883aad3ddc0cecfd87f1342e8dff2f8","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f77c50860.0.tgz","fileCount":19,"integrity":"sha512-RqQiPqbtD+HH6QtFEasYiOTwgtlpfDfyu5QQ14l7H6VGkJth7VC/+xXR30994NKHf7yzLjwRUuIgSPagn5nAcQ==","signatures":[{"sig":"MEUCIQDq+kNrawjvErtl4TZRAfidn8PgHWyn/czCto3W83DEvAIgX+dk7NAP0+pNdPy9u23NUlVEtMc/P01Z0JS984EhUFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyL1CRA9TVsSAnZWagAA5fsQAI0hwcWLbMCZJHyOtS1p\nD+hfbO/4B0D2iK/Om66wqZp31Rdsx2Zt0ZcUiAB4CaLt7DCOmlhJ8KEq4FeN\nsfGuoH/G7c15T8bjgcJ02Zg+KjATSSBHchv8CT12AxziaKl/IWoexJC41p9R\nMVftpHMupzIN4U2QOSkDOH+/p62hekHGJN6MmiNdHTLOC1iK0k/kOJsVPxnZ\nJg5kLcwgFJ3rInrXdZc+9y3HWwwgcQt+fRk5hMT+4wMk5DA9cVHCGyXgWYzG\nC4q2Oh2JkxrSzhGa9w93IihfTteD/MA2t/6ZpWfr/rH7QogpAZEIxFrQH/5D\nZ7Z68BtbtVO3+YFkXi+0PeHC9wS3QC4ATAVftNjnh9yGWQXW/uIZCASPqxiG\nyB+JlZax9kcaZX/0U89oH/JLIra+flweGnKYzvMzrvO1HGx1bJGgdgKjYX/K\nvsR8CTSP4+rnrPqkdKJwW+Wqke6yq+Qt5O3j6X//l0QRIQNtJP1Fh29g1AgV\nPDOLq7mq0ecj5YE+osOEHls97dl/5VcKJlpka9h+r/spF0VVvciSU2tGRNhD\ndC3G5MKLcphCvsOvMc3hgP+NoYWhW2xTOTIFvtl4BSzfIa7kkEaroM/XP82w\nBRDs90NufsKePbmLz70LLxZ6BoMKwYXQb5WsYLb/yzC+zNi3TxHNE45E1kW/\nrQ7l\r\n=ZGV3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f77c50860.0_1617896181199_0.47606877331488606","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/card","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b54d78579fc76b8d232499bf2d463aad6aed70c","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.367d88bdb.0.tgz","fileCount":19,"integrity":"sha512-jynUnyLSx9GCtf9Oyd069/3Cf4dTD0y40/STpZfldkupE89BrtRMMm9g1FlLnSk+Si7zg6Zy2vXBAO9U3gjXpw==","signatures":[{"sig":"MEYCIQDPVBkXqFYM/kTZM9OYlcvYklbrN+CdkkHwSSZiOIxcwQIhAKWwrPPWAacAXVT4ErqWgE9TneeC5uEyWb6lg6tVzp8Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGoCRA9TVsSAnZWagAAJn8P/3Jq9CkB9BRYs0hXV70b\n+yIgmhXdEjbVh+qYYRIhrioA6bbgDyr6tRQL4gg9/2FBzavL+tcmmSq3frRi\nGNFw9hMDIAfy30E7PGIiTnaYhm4o0PXgL6t6JH/YKhDvk7GDJkoP0bFdbe6c\ndbKTQz3EAB4tFdV7xYqGga029U7P2GcLZPvftYqMkWG/i2zbpJm20vXmPaTJ\nN3Gc9FPKLFPLQDtUGej/zk2csPiduMQcXHjFXKPtJe0ByZ29EmRSXT5xfSA8\ncSq4HFw89hRVYG/yhHXe/9UxcKPrThoehI2J7iYVOKgnq4K+hAchV9l4hEtF\nSGHKbWzXcrRcVgEFHpJ0wL189ZRESrS2RXEEMofh9M5A52EMf/JzRJXbg/Ex\nUMZVFM10UZ3QM0uIOIA2Nf/EWQC6jCO2oN7Nw2LnntsXXX+rUWDMwjFRefFL\nt8OnAeSPk0NWM3rw1K6ycxqduKofhYx5wSbdH9MBIKKZJ/lbucxihoF3IiS5\nHceWG2j3Qoq1sNx6ndUm2EZWKcfhnNju41lAUb2M+zGJ4LfaxXvNTJf7E7PB\nFVC78fSfffgsdmnt9S+PDzorNp+GP01DKWurFMskWoX2hacBTxHH+8jyLpbT\nmqdiWCxExGa+Z3Vwf1P5A8TmEcrDaTUpB81wKnrz/clfhiDxT8iai0jvB8kZ\nA07a\r\n=oSBl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.367d88bdb.0_1617899944092_0.3344093261154397","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/card","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6706a12af7421e1bf3790e989f4cf11d570d8b5e","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.0ec437d3b.0.tgz","fileCount":19,"integrity":"sha512-YQYpnhXmsoVJOhgpXA7DfyC/mV7XyOGY/IXLdy8sFdraGjS3RTDAlO4Btqi8E7VzRuEJ1Bkbcw6du5MqgeH/HA==","signatures":[{"sig":"MEUCIQCrqAz448+oNXvXX+hlVYRFzjDOL+yymjAbe4Y58Wn1zQIgebiEoFezLirq4YPnqxJa1RnaEckWUf5L0G25bNqGl9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1sOCRA9TVsSAnZWagAAISwP/2OE5QwTEDdyTP2F4Hz4\nJ9MapL827lf8v2+PmiRgxqrq4g3rwT+Tw9ta5StFeDsc6j4g1IcQbuxdQnmN\n6GN878ZUTj7hyhLvtch4R5kw6pbZV7Qilfg2T+coCWT/XE7Iu+p6WigZgStu\nyRGpW9bPk4qOmaZZZdCGMi6/g2ic8WSM3dYlvh2PMzr9H+Ic3s5KJrUUIwPo\nUem4pTo9a1taDM6BghGJopOUW0i5+cfQVNB9/V0RxuVzMjRs3wvBJd65pSHe\njXap7bdcT4zObe042+zSVDEQDWVWxOCqUMOWWU5daSyl+sTskTBi9B8SUcSU\n3Ns7K5iLaT+rejLy5Aaf+BmJ/OlDDD/bXvmffm188O/9c9GhGA0XPfm6o1ex\nPpKuF9VJWJVo5cTshUIDfuPn2WZi/D0OQI4gKi/ad4MMm9WNzjhisRBXT523\n0cer8jMhd2sWRheAt/jy2ijORlYIoBLHO2lWpRPaIffSXAaQm9aFdiYLEnG9\nxGUCkdnZqQWqDg1IO1lTuWkDCaerQlGv5gjSo0dTTDW4/u15rrVaU61gBLv1\nn9Ef2jJ3v9nalm4WV80hnjrdQ81G7384ktlng/ZWH9DR/ir/juK2cwsdl/gV\npD8GQMeo0SV2Rf9VriWusEYooljIFsjKfbnWpUEs6OwvKbReazDzsfSexDvE\nI2yB\r\n=p5Wh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.0ec437d3b.0_1617910542600_0.48064066143893336","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/card","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ca5ea9ecd924ec2bcae9ebef17829609522234b","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.b2fa996a1.0.tgz","fileCount":19,"integrity":"sha512-DySzR9xBfB0v3rtzCDb8DCn4aGh1qqAsebqkdNKBJWsBa6PNQNxxERw2UDgUKt+36kmvBsYz+Pc/urRO/+hWyQ==","signatures":[{"sig":"MEUCICvqvsA/sRcbpY0smDPdij8jzGRZJzeHqd1oC58E5ngHAiEAhGWlaA1oh1y0dPhKm+pHS4bsPHBoezzRgYL6upesOkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG6hCRA9TVsSAnZWagAAN+AP/j8URFY60wVy4G/byZsR\n3jPm5V6Fk9sDdJZbLsp59UjM62Mxp7cA9ZhW+2MQ5HFIf95dLBrzgXRIr26m\nGtOoL/dAVS1dQolpjViCectV6LdUNTUujwI1NthsA7bcNDurIY5Ae7AMp9cw\nDS8z1GylNp79eB5rpWtR+ZyXiZeSqlPewhDuc3dX4huZ9AAzr7xfcdTv+8jx\nLzrLkCl4s4qGaE/QfWvK6RDpSMO1ML21+Jhkvax+67Tbvi8N/mmfwJEHVC1W\neyC6arkWWJZuFLwU8xKZaVIA6yFAEardEimXqCpNVtbtfsHmQY7xmRN094OL\neASa5hRSILrILyitj07MmMvLdW48F69Wg1Q+H0XMCXvg5PSps6sDKJH7pDnv\nVb1C+ymzE2dM1IShLZO+Shg9tt/boyQRFcqCjX4qna3ccjMzlxsnTfsgB1kY\njWx/MCtQA2FJhGN42zXLLVmkJnfljaLilskTQ1yse45DpTXsIJOjSFdc3iQj\naGVMyfuvTJOttdnG5XLi2A7+k1TCKTaGBS+z+znuO9ujgksW6uoYbZ9uqo+O\nSqbdiQldbeWhgz6GiiomK32EunxsS/54TKyKCffOuFH+LkiaKCyF5emnObQi\n+9jFc9Oi7RKGeH19J6Jno2X7uOIZeaYEbtr0WX3luCV/69pYizf7oHH2etya\nCCVo\r\n=jg+8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/shape":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.b2fa996a1.0_1617981088931_0.07277778626515286","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/card","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0d37a0f2e30cc66b05e7b5f5332fe6f6eca79d2","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.24255c408.0.tgz","fileCount":19,"integrity":"sha512-rwEogKous64Vza5FtJVElX+6SLPzAkQ7yXFUTpcWvLHb9PhhLYRqqisoWGAli6xNDSayO+LxLCM8JfKGtO300g==","signatures":[{"sig":"MEUCIBnc536+DVpqzR1RBagrE1t4k4/6513YIwsMbyHVgmIkAiEA4WsFW6PYEMwj4o+0J5oAQbb644ABaXos3E+O4SxQ7DM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLVFCRA9TVsSAnZWagAAcE8P/1SL2jASfOkQZ9krWu5A\nEojqm/OrCxikFotpmtb9xmnPlfvKqSpHOxfxIjcLTFJNIQOUBlmkRt7wHzUk\nUrl39v174WXssD7I0Ktxn92FIEoC7wsLfzcwC+e0t9cLMVjfR/xU/bDVxDEK\nbR5svqjDAZ2Hp+u+FNqs+BY77BiWxjs6SJrO3JxiPLtEEdGMxjEhF0LdBi2C\n1X+jnB5XYf4FDeDaPWfZKZ9wBZ9hwjXqtcZ0MDZAJryH0y6JEgxbZz1AgpBb\nduoPGZcWUqQYiTDIr/NCKAU1n28RNFGp878M0C03CHlyzJ98XZXdHP8ia1DA\noN8beUBoCVmMKfAXORkX3NjnVS8P42QcJdATrK0tJpj5u3Xd6LOHLhbNwLMh\nXMi9Lw26Qlxg9MapXEnCu7Nl6UVSsVEX8A5V062foBMAgH3vUoWTBP8e2fv/\n1oLzpEGbgkLcgztVNcFR2fiUjndw/Sptm5v6JKkZYUvQ5p+xscd+s5BJA42E\npObdRIb7krl+dFtTserFihRjKQKhf/FjONobM7Dls8c5Se/V1LLIqVu/mRCb\nEEvTL+Qf2BXOCB8HEZP+6b6Y7G276mmf+f81tbyS19vyRJsS7x4Rliw6iJlx\nG0sh5DUKG9D+EziBvVojvKhTDtMXOVTNwHUSq4VlMs4xuLXIMUw/XkIf0Wv0\nxll6\r\n=eQgA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.24255c408.0_1617999172965_0.13349468996863023","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/card","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baeac2f792ec7b1ea2e331ba65c2d00dab5185b8","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":19,"integrity":"sha512-HvQ6aFDOiXlOYOUEWNktLmQUyGnKMT51FETrxCQ8D0259dBAqtce1VxBjgj+PEqkQVrM6wROICoyvWX36zaiDw==","signatures":[{"sig":"MEQCIFtR/eOGaJsrunCBxxmwluXi4SN7ugDN4u5lhe1UHymOAiAI7XE1Q3iEWcYlBE6gAXkFfUm8dCmUMBsANpJnk58RnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNsFCRA9TVsSAnZWagAAJd8P/34ye0yDDAU5ySliybq+\nBYB2KW7xsDOC33kRoDKGu2oYrEWGq9WU5WftLbN6qigOY/qqxD3xloEl6fql\nMkKQn24ei7VS958B5a3SCyPSPZOGNZbo0GAYLlChnnl7v9LkDQYll9lY6O5u\n0AqRLc7PnsbsOhuZa30dKZ12yhG+IL6blPJxUc928wM4F0LIlxYicrGi1i6z\nNx/nzErkBz2dPGM+HfEv1i6CZjQmIpHVli/TT66+DtXISMPrytoPh2Ru0qTO\nZ6GP0DGiRAFgO5tmc/5xDzSLCI17NzZfQcQg7aNZodIciFuVonvFAx9aT4ce\n9ttn8ePRkShE+ojLXb1+lAne4EdiEM9cKtF+V3G7cslttIy3GnOCDfRCc2l3\nsEsWB4p2zmy5KgJ5VXzD3aWqNzHHpMlAsrulr/G4DHAxcwlG1DbnG1V4xlu8\n0ZHhxNc+QbKUTDbUXLHaPl9yDRgq+k9EvF8JYjixqYnTW3GzOb/25G1GIiTO\nYhpbIIFW6P3TZyWkBbigbxwYebh8V+KTKanCRkNYPdcffgcOyTju1IrmgsQA\nn29P4tkYNeKOS0e9vx5Pa3aCoiiF354hXWhITE5SOmwRPsP95EMw+G/VUXaR\nprId1wbTl9Xs03rSh1JHSQ4WqIiS4TqJOunMnqmZPxEzNDjgvyyEs5jm2R/a\n2rlH\r\n=6Yp8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.7d6a4bb72.0_1618008837101_0.12515820101274855","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/card","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfe2368ade59e407f41a5006f91f0ef295dfaed0","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.352b295c1.0.tgz","fileCount":19,"integrity":"sha512-JTR0ZYyv+X5URrKvo/edu4boWqqqaKxPUNtdUvf9wjefbgP/+RRWIVTSUhaLZBdeE8WS3vo6NNH750H01S3GCA==","signatures":[{"sig":"MEUCIQCV0vUzCO1bhVumF6GzZRx6PdwmGdS7amaLFpO7H9Am7QIgRfPWruRpdT7N4oWQg02Jm6cp+cbFvWnPEypCdzh3mKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5gCRA9TVsSAnZWagAAhTkP/jNijPzRVO1rkJ78nzl1\n0w2V9ib7euzE37pxwfSIZt3WLyGYpaU670htUpllv8TOqF8YTEIkYjaR0+kT\nnInh4TghYRf5vhVZ2wexGV3hhJBjVqN+O4PlsP7rFec9OXvpGStjPzMNEmf9\nl1RA2YOeqsoyBbvbyIEct/KOphDz2jxOfDwCBckfLh8+uHrG5cnowQwrmiwp\nDmPoSsnNbtbtWHzksrKOxg3qqYfWqVJ3Y/KsQeGTOVkDoQ7B1liJ+N2S0/8E\nvXBb7hIAwoKESteS3FhqXGsIy/4muhayvBlzC2Wr1p2zKyTSop5a4b5gzm8T\nhC4jiqLRzB+JxO4ytmennrWMI11hpVGoFBs2gynJ3iqTrc+NCQrBQ2K1aEaG\nnGBtCftgV70hZeU2TUHg3nkeRux7nH1sfzu9ydpRqp/3ikPICZsJhuDzH/AU\n8ZGgnctVYfgzkd6O2HAsLsnXPS5veDfeWm+0uTrzUBlMMmJe893DE6q4lVMC\n9Zf8DDMgGr5SyyCwkh7f00u4zSPvx9yhrxAm4aSkyZBcLagXsk8hdbBLUU4E\nF2D7BXpJhfsVWpycRumtQqPO7v0KS7C7SbHiIOzH/NmC3BfanaxoHujHQ81A\ntszDEMTBSR1R/CnI3ZA7ohfJB0dqO4HW/x/mNCjjtx3TfWokAKxX8Hhborap\nuW52\r\n=Er0I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/shape":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.352b295c1.0_1618251359626_0.9298770782230095","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/card","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44be979e1f9a4c0594f10e4b0941d7ff663d1cb8","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.ab99b8064.0.tgz","fileCount":19,"integrity":"sha512-l93aUHAu1sio3oJRmm1J8TlSS1WuriH57R89Zz7qYo/i/htHSMrd37WOqrxH4fzUMGqq4XNKLoDzA/gZOPMdtw==","signatures":[{"sig":"MEUCIG/nHf4PuY00I3s74oZKAhhr59JW6aFf+KDPkPC6sTmxAiEAmQy8b9i5ZtYRqEoEugqw2oOIrIkUVXbqfmLoO2+tka8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4nCRA9TVsSAnZWagAAMYgP/2AodSSQ1TXJPVPfKug4\nc7hE9HmPIfFkvlBhBo0WUmOS0Vnayh0aNHlpQyjgVvBv3RIFOukUmJ8bQK+4\nOynMsogk9eYydiawP91sY4oEaruNyg94m+fabwk+e3w9wusTCyHOO0GNjpMd\nUFXp1v/fCxgKZrh0Dg0YwpLpQMMUULaAg0CibMph6GtX25JpyXmAZyXBZOVg\nnwUMGfB7u5c5fgsf/SoTdfr2108hBXmYNbs563IZXPnurdSqhgd82gdfZSNz\nB6vDPkT9VxH6HwVDjs/9hA4JGaqj1/oYNyFhZ6lZqDJI9LtwKaZ1MLRz8nQr\n6gvTCM1aYxduAZuY8Jz0kIQMdTsWTfec4R4rVNutLcFjHbHIy7aG5YaxoZPZ\nIc/gQSwljNqw8bXwO1OrqoGRBzUrJ1n+BEj7XIr6tDu0MimYE5CIdwlHlI3s\nXZd2LIuxyOWUA4OkzQGoNbp+X+hzgK/gw6Y0nFwxQKlySSGNLnT5FxHUcvgE\nYGBfLcsmh69AZ9IhDrchCE4gNiZuO3sbTPXOctAHD3lALYaEdVyEoXHoJ/Q5\nWu/+1DHhfauqSNXCPLsnARBpb6veCpy6H1U9DBYMkhQk+Nvjn5Hz6bpEqJe8\nJw/U2GoVisJjM+lY0toSR4lkkEGs1QOeu9+RzVIEhOeN/ECoVXYjWQVYZ8qq\nwqvB\r\n=M5xi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.ab99b8064.0_1618325030668_0.5787359401282457","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/card","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce7d8e27d30ad5252ec1b127d9f786f9449f30b","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.8f0a11e32.0.tgz","fileCount":19,"integrity":"sha512-YbVRpjYoKJ+4PlXHbWSMv7dT8TMW1a+jhV1EPVLBZgjhGbiZL3CJOhGvY9NCX47MJkeVtmn8cGjCO4COf9kbIg==","signatures":[{"sig":"MEUCIQCy6tO721yMG5jlmIkOQwXClj/hxZiCcRwG+FTSr1WydgIgLzkJPQL6W0IlnJPnUh7jPEIPi5ZdTC3zme5LofNNR3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0qNCRA9TVsSAnZWagAAdjgP/RUuVWipxfaQUHQ5Xa56\nIEFdagv7lJD9Qwjqm16ywC70LWVzff4lDqTHw541ZuxEEaziyrR/NkdN6ous\nyyTDAjPKT/OK72vrby9+uOuwZvRwS8yXJid00sH6VOOGwh6AvdvswQc5sVFp\nLtVCkCs1tI/QxJVW6HYTkLyayb2BGLom57/yOPOD/3/MF2S0lWXsu9fRil3a\nM4nMv7Kls938mxAC2NI/ti8JWB6/r22i1XcpT1xbSYhY3nytY2G8zTu1Tf6y\nXnrDgQ7MaoOtnLVdtAs+VXhsh9OPJ3/oKjXGAmMtxyZV5ob59SYsUMFLN4/7\nPTBDm6H8sObVCN5isihbbphcOFoB/Xo5IT+ocL+/wCuM+9AefbCUybm3L6sG\n5Z+PgOqSjsJitVNzjluj4qMAyRFh8nrxCHhG9wGg3hqnwVpsBxm2gdEfHbfF\ny4kzAEduYyAFvq/HEocgpZbgu3b7hwBxvNIX53upDi37F+HnedIy+XUOFs+D\nbw5T8ykPrMFwVEd9JyiEaEXXa+iQjfftIF6q/g7YV8lhZA12q9KF9MY2ZoJZ\nGwyWmeMDLnS6WQ2UIxAmJWOPT0VO0XXihfDNZ6f5fcZCM2jzfce6H/Jsw8Lo\npdwjl61CTF4VWEsEBpHWmZ7ncKPPrLYiFpErHCvZzIHeDoMsHtBQnn+76zEj\n1nf3\r\n=ZlKp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.8f0a11e32.0_1618430604957_0.6617122866699974","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/card","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ff1317866782d5c044cdeafc44422fb76b3d5da","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":19,"integrity":"sha512-y5Sv7rrSWckW3wxJ7dY9Cr8VlPJSkt2Bg9CbacVKw2uL59HnF6UDXf37zzGL3CTfu7Iagfj0Ml/GGcp0Q3F8lQ==","signatures":[{"sig":"MEQCIDN/PFOja/p/xmlXvhzXS6NJO3yuIW8j94j10TFCtgX9AiBROqF1hj4hdH20myZPgh1eD2kUmdmDFt1/o31k5zK04g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAvCRA9TVsSAnZWagAArZwP/jyQdNp07GMDRx7LS21s\ngbnkykTOCQP5tpwExfCkQyXgdsBpBrxhnC6wd0hfXxlNxijKaQ6YsrSK48G+\noQpq/0PxanclA8KnRWTYOJZ9KsejGXAKce9jGxuCkFkzhk8cH5zpRKuMvqDj\npshWdBKq6jymIuyiao2ulqTz7/jbMlcMKWC0DxwOAWu8FJUr5qgilGHr9ND+\nOLKQl3/fW7+pQb4+VP0afAXDbpwAorV0sLaEJWqqHgRBvuWsCbQv7bOq32Zy\njKx5zkyjU3+A/Wda/Yd5yBUIgo62JmYBPOOa94me5mO+FUOUY6D3YCiJXyw+\nrLTsN1q2UjVNSteKkS20uBwkugSCHjsVwAfeMqJxNUgc0acgNxPN8hSWIv3l\nJAfPx6HcTwgDv7gAUaQIpvTmDXu+d7zskvmdaW7z5DsjV2gmpsUYDBI1Y/JQ\nNUbgf3rONDp2FK0G6CQXDhlw+CT3S82c2mSCS9HXDkf3flkDoO67mtIurDbD\ntvKuB/qJwCiSaM4H8rmdiQAX+aSXAnDmATd9e7Ex0/9w1IT1s63lDjX2Phef\nTdKQDPS9cU51mkN8hbLbrFOhTzYCSswjbu/lRhh756o6ZB/Z2tN1wsH9eF7q\nUsr5sL5rZf1Zdnkw1Ek57GM/foeCOnX69eVQCI1fbhnn0HgoiPSTkK2rih1z\n+7HR\r\n=79+5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.f5c6db8fc.0_1618509871339_0.996461025642672","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/card","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a1e7f1542a8f0c99f69525420701a717b483f0f","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.3793a3143.0.tgz","fileCount":19,"integrity":"sha512-5DIum2BnVr6sTfHcxGLXfPdgmm+8Yu5OKTGmI3ZQrgV9e5boc0u8rrTwMYHmEoQfaXM28rrjeMqqOEBBrAlD3Q==","signatures":[{"sig":"MEUCIESBm5wh67y1nC1SmFrE12adgiPLB7jCVbo6RCBEGG7vAiEAiSyg8Zll0W8h+++VmFph9GoQpIhX0pezX/PdPcttNs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIaWCRA9TVsSAnZWagAAMUYP/0RcRpkEPOUXH2CQH5P9\naz2EUs43b1jyZ5If9YK0MNVL+y8alqTJT2tQb3UB7YJX/GkVojAUbFML07Cq\nkDVKqvoGdtqZo7Wm019AzBmUtAVnkgAWVSc8u46TLbRR1ezj/TRzSMZwd4T0\n6F4SbAx9ozXmEDlCCwU7PnraVNgX9nb/f7PtIJ8AQ0C6MpgmYDOZAf7jCpl/\nrqX6o6C5YDwKveEBqHSqYi9VbRjrTVNKtcVwa1AsjTlPgQSvdj4KyQV3fPFg\njgLP/2zcKnEXlGfSuj6ILJfFG5HmmTXXFUtIDIGvSE2aZoK8avqxZtMbN20s\nVQAJ43aVty9icu5M8UAhM3pUQmCkSP+BO0KR0k4okUrL/isJJ3bMkbMAmVMJ\n6Qg4WgLRRgrKmPAYM7TL6rOdqEhS6eWRkNwNC03eF2V4Q63fYK79T+U/BZTB\nrh2+1aSn6v+Z4wId6LyBOWYKjWyq8id19v+z25ttm8BRgB2/dru2NtL379q0\nIWRhhpmLF0khlpCBc2ZlCBknUabdauxW8nz/8BfjjtEk/ugZ4I0WWNtHVdzU\ne1gkQKcp4ey82TRaD3tnbarGxrErdlzOFGmuab01c7mLFii5WRdo8zMgp3Dg\nab8RC6HGZsg9VQor1VuTzJXot79ZlrqmFJXK7HPsbe0ZTLgVuw7wGWOPp3+k\nqm8P\r\n=zr6T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/shape":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.3793a3143.0_1618511510034_0.7653522270779747","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/card","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54409053e17e96748b51e16155cd9bdc166ac4a8","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0-canary.bc104bae7.0.tgz","fileCount":19,"integrity":"sha512-0Mq5JHJNvOiRGCi/2xBFffZ5eL+SgQoBNx18rjP5a+QJ7M082J1MPdHzWsWJEXJT+JpJVybW803bt08NskXisg==","signatures":[{"sig":"MEUCIE2pK2UH3FHo//LBjewU++XDccm11ij0bjzc84FcTFvLAiEAmeuRNQaA5CFyKkJa/f/OCg7TUihGnXqmf8P6kiZ67pw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJgdCRA9TVsSAnZWagAAubwP/0z/8QdDqvexXFFHoE9u\nXZhi1vjBmBxg1KjsnuaWSowzW3XdDANpiiKfIfuTXFGtG1mpHEAka7Qzo34W\n0o7M5E934AeDll6ygJbB0+j86i7KNAiDwfiz0kYkJphwI0twtvLSo4cUfXi9\nSjXmbGQ1iHqXC9Iwv8RLdrl7xmqyf0sZ0soU8qr6kTwWVKk3nVFVhWEWxyfy\nUlj1r0CtIO7bbHq6lt0S4sN1/7geOCO+LCzB4sVJ83QWTr0JwpPXP1HpX/q3\n139/cudnuE1poBndPlneLsicrySm1tKJUvGZJMa481kChYjrErtWNxEWBcKG\nx4O0JsfE+Z+WFJPnhIBTxZ/2CRKestG0IjK0T0HL16M8QwRcOFyhy6RPgpI9\nFAPrdwTIwjlmMBJvKe9vtAny6WlVMSWm6GgNLatJzvEA4+xvNwCzVn61ff2U\nVwrudfhQ3KYtybkYaXt+oeC9NrooCA6iALj4EpUTr56DdvSOj5n7842wkNVK\n/Ndgcpwy7T7+I6gu8bvrhGt55ozaIKsqRl6fJ1DC/dF18Blt5Y34OdQYMECe\njbxqulRTzCHggIDFiIxR3dwJowxu2gLRhUQ9Arg7cG/GNrhaVJb9KRr1MzWv\nUpak8vrxRWQb1DA4N6EkLBlCNGhQmUGI+CW0k4Nqfo0XeRw3mvtKsgE2iu+6\n/gHi\r\n=h799\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_11.0.0-canary.bc104bae7.0_1618515996864_0.6364490702702952","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/card","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce251f1fef1a1c9557b985a19b1ec1fb6751508","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.3f342c3f4.0.tgz","fileCount":19,"integrity":"sha512-mteRS55Xbep/vI5VGUoxDkRgKIx+soYvdxoZ38+bIkT6n5WjZcXnnSdi13ndfE6fe7tXNnInMJ0/hgf5TxYJDw==","signatures":[{"sig":"MEUCIQC+QPPy1D7jrviz6ttoyDs6goIc/mbS13FVm2Lhuht9pgIgTa0qb4WFLCjv6OTH+qZXULm81mcqVkw5ZU5z4JzgFXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQyCRA9TVsSAnZWagAAlaMQAIkddHJJM0olu4Rjah/F\nI160zeusbXCrj5+gGpUk5p8hOTt23HI0NDdS2Y0zKDCv2QcSQNd4iatoq8ez\n4mwqKLMuXfWgpVpHz8MI8ABqfb4ijqVi1xAoAk9rH+UzswccswftGD8wXXhu\n3LSObn03/vZGQb4PfT4onool0/daFCmLGgoaEUPrSGm/kzozAmw/3g69xrV3\n2fwANesFDyug3j++UEnZpj8DMgzDp2SmetY7rC8hVVZbkOdtNBK5FzTjbEXQ\nk2Df/+M0tgMUCi9J/EHLuUbe7GIvN7qpPj0JWqREXw/xuPLr050lk+NQ6DVt\nhsZ1Mfen0AvHEdhsTIwrcac/leN2sHg9PSDHAkmTsbZnuL2gRze4lIlqNfyJ\n88yd7vfhZlrVeDGfa5wTuXcL9lgEnAny8ZOWzOoSY823xRiKridC9mejF+LY\n/AXNkSiOWHw8Nbps2QTIj/k/eZm7PiD/sxBNF9w2cpkGEyvP46eKiGlsl3jo\ntnmPWmlVJigRm2i/oEXZ/Ye+m+jrFgFGpdtnmDdoxHMeMvBzRKCb/0YcqAah\nvvDD3lmC7ZmsWENTxMZ/SS2Es/P2FuwWguyek80UpxIevGxdhDimOpz/K8ye\nGKPEGdR7T7Iu/DLSDPwRG+rx5hIF2thvkOTYS6aQUoieWZWzijAWGzcIqXsJ\ntCYG\r\n=IvN1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/shape":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.3f342c3f4.0_1618527281132_0.2630349534167875","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/card","version":"11.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5abe915177dd59b201c5ac2181005acade2544e","tarball":"https://registry.npmjs.org/@material/card/-/card-11.0.0.tgz","fileCount":18,"integrity":"sha512-dIDaOR1QPglmONalBvaHn3CXNRK7v8No8i4XNktN783uuPmFnAM3Sd/hVHnxLm1pCtoiXYbFCq2yNu1ve+TVRw==","signatures":[{"sig":"MEYCIQDb+8K7ZMOosAGq36vRugA++IbxVJuiQF/RnWb+VQ2AwgIhAIK3tFGR2EVPrwZYyzGp71n2Tm8Cz/fuN7eiWm5WArne","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUmCRA9TVsSAnZWagAAKgkQAIqW1J9WiHP/1D44aHvd\n4wA/5ywD25nfaVPSp6V7CNbwp06J2N0aeBV8Zpj8jzU4imlEIrpBOq0FB2jc\n8d/V2HT2UGizrwY+LsquRcn55vVmb9qCO2EcwrTuTS9GzpYHvSFPtx0y33n6\nyncsaQzWUiieSHXbRUmyaJRi0/d8lqOURvhbul1J5NWlkjqpbS972PAAuCTU\nt1bgpcXb4ANfcfKvGLSV4Jp+ZrOjOOxgZxEYU+8WQF+rN8sGznAvoZRhkXYp\nrHP0fDaHXXyVwskEqN0Oz4zrjhRBCUWd9Z0yb6GCkkI+9rUogaB7mY90OXDO\n1btEMI9uyvep7+/+M66giP0lfBe7hzYQSDE88J6/uBJJe+CrmgS+fJo+OyCE\nQVqXIt6SQnCbImxZOFrRuiiIug3ceUQdWGlHoG/Vb2I1wyVDhhPYNuCdd6nQ\nYATZMTQ2EYVB2OE2RwPBPHDtBBX6+k0j8Nwn9vDz5C+SAZWsqNkYa46ixWxE\nb4zUGWxWyv6ugZAdvDyJ/uNekogeRykZz4Jau51LnMJJlGsicFxgK4+yIVvJ\n7Oe2RDRf0n/T/hJ13bQnujtjD6pUH6ry+QlGJRzfAWaQlsoiu/ujzZvygLCF\nM2Dr1j71Izvs5USG7EcnMUWFC+rOvNmLQ+gOPkbfFS14XmZ7fkdB0jMmnsy0\nbwP3\r\n=CjvT\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/elevation":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_11.0.0_1618527525589_0.9257554921606193","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/card","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d44ac93cf91ec0584898d10f5b4d7d8a00f3ab13","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.2ebfc5374.0.tgz","fileCount":19,"integrity":"sha512-upzg/cfT31YB73pBVHavr5BCXYzXCFYlg4rYsc32Hb6LidPO6T96o6eCg4oTpUQdvpjpOQBLgw2vIAZYKE7njA==","signatures":[{"sig":"MEYCIQDpItWQ+RmtTBwewpUbPo3RaqAFharTYjSoPl8BIz86dgIhAOfw4rvNC2/Y4OzroBWxNMsWqntEtWtgzIBa36E59E1j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdnCRA9TVsSAnZWagAAIGEP/AsD/iNBBeb1JbHH26sI\nFjav4MEEf+93fWv/YDYgqpxt1q+0Vo1Yp2YNNDYCvIombG6WmJofr3RmnHes\n08dKn2A7/CIa8P8zUvuEykvoZosy2MkMqxkU75AOoEX9zLI4fKg5QgJBWDCI\nK/Ff1gJaB9TcK0IpVmlbL3HkLG4sx/+zGjtnwoj+Sc8c5vaO/iSVVMSQIRFc\nZfE3T5Vf4yGfrCOkiXOKBQQ8WZjVdWE5+C7VGiDHaxSRZ/a6maYuV4fEdJZf\n1CTVkepEJwQkFsUuUX5qb3/oQs6OZbtVj0v4WK01pNRDLzQrbBygbFIKIp4W\nXRNMNZZRazK13uUvwdwlS2eaZOHRFAbX8gIwcKDYLCLK4op3dktzRqJuabNp\neNmK0YC2xRlY6+5YJ70hXXcll7OKg12KKCF0s9smc+hlJHnOtsfz3Nl6ebnQ\nMsOwfRHML3+d0IrsatrUaIDH9523F7pnURdI+fwFyhoBySFKbXlVjWGEb+1p\nGR/UdcjxMz/IVZWMjNWVlGK0XTAVIkj+vjwzIE9kQqhANeo0rYhaYmELYFyZ\nQhg+vfvfbYO/Lzg5L/x13LSb99H2bBIcfqAjTX4/9A/S+kLySvVihgPnmrzX\nuA9Y/zMMWybomhCrx8Y28NJ/7ZxqE4feSn8JGTVscUKjurRTUPette1Dn4x4\ngW5k\r\n=bfLi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.2ebfc5374.0_1618605927295_0.22880238588925939","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/card","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a4fb1f1cfab25e2887721218354809446f28d46","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.5631828e1.0.tgz","fileCount":19,"integrity":"sha512-vUOPBG9g9TtBKYqQ9SwHhIGg8Kdp60rBM0hHzqWFjnkc6rtCbG/X82F10ua5e+cls9R1GMq3MD8BoAUb4FIkYQ==","signatures":[{"sig":"MEUCIQDR63TuzelBItsX+WwETdiCoKMBNhdhnwFivw4R2+gxAwIgUyXu7HFXjKTqVJx6FGFk09c1XlAJuJAwpSVUBBv3iaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepKACRA9TVsSAnZWagAADNMQAKKX9hTlKR+mLYGT7V1L\ng0uQfco+5uxzasc0oQ1ipWQjFQyONJSsEMT8nyKOWqCZflxPnxaNXje5gVAu\nJfDdNVPK9VPxlycKEB1efitDy2wQfBGzD4AhFveu9mGfnYTPC6JHAGDQnFfl\nU1NxfFpEz3U01ipNUcZTM7R4nzGNZI5Ad6b1rhQdhWKtLQ8M0vn2mbmpW81x\nb4Q2cWBUEnB181/U1FaK8eI7ZANsBsFboxZlDUUjQe28KTHobu7WYIy+MF5/\nGt6+92K6bsY6oKRlqkUk4ZTGWacsm4sLQeQEoBBzp8H4ed/bn2QOX+EPoh2b\nK1sM5PKwuQYL8kgtSG0KNX8gdu+aXjQfxYXyEGN5sb11Vtlp1wsX636rvs7N\n+bLA4WovfUiNxLOVprNl18UQcnQ8poiNy9d194ByuKRiuEfF/8Ha/SXX2L56\nHeqMkVdTnUYO5qIOX/onNy/mZpj+n2+PYep339gY/zAjdGPvjyAPTXDqCTx1\nONzZncwshugLqDj1QAeUVrnNtOEWz2Zm1/fAOqhK7y5y+ztDSXqFau7xWJDS\n0SqvR5K8BrWi45KyaznL2yAGHyU8+wAeRLS2SJsaJs6Vb3ubRlayPAlEGJu4\noK8aGNQVm6cegjBqwIvCO1yahdEjjjNA1kvlBXddKFjii+bsVGawKU/a1Hm3\nah0E\r\n=9J6j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.5631828e1.0_1618645632338_0.07800790792263035","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/card","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13808240a02c310408d9329ca9ea90f786f7322c","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.bd685395b.0.tgz","fileCount":19,"integrity":"sha512-XfO5yKDUtDz9rGuTGJAbnkz7imZk0mz/g4HHzeI9KwhjSYxX9kZVAFVverXxt+PcFRwr+OEY3xhV2eDmMHhgCQ==","signatures":[{"sig":"MEUCICpk+pCWKb1zf/hgcWHNZWe5ZwQ4BqBaTNdiIrNj45V/AiEAmFBfJWpgUdkaNDABqSd9Qk5d+ejYG3yWq10dv/3GEfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7lCRA9TVsSAnZWagAA4WAQAJoevQIksk0tRojVEOTG\nSW4Aw6eaGESYjzdopqA1bj1913B8sEX2XQfnDTMPNDLxcq438GYAk50J0id2\n3kZYrxjClwRby/r8cROeGJHNseipXjgLMnXxc/J7903xo3iHIKX71DZNkdJO\n0h9I3ae0kaQofGomAK8Uar5JZQhOrvKIJhDYBI+iMiqu3MLXkiyXfEK9KjMZ\nrDV6SGbdvhWLadsDS14asG8vAIUQ2YuREk2BBODkYC4bREspqFF/8BI1zceQ\nzYLthWfRX7wXo2CzfeqVPbmW/hv/M1URHOlZ0nrtBpf87cqOjWL1MMTlVBHm\nIh4sBAA9rAxnHcX883WGXiRUa3vArcH0wUK7QnCEKjutQODDYeY97j3d2xBN\nYR9m/676cOrlTO7zgtxUOczNzK0YgLy+mAqfWLY3iRT0FVYwUjV7Tht+1k5h\nnFY9HVPzvT9BkLpqzFL89AmL4lKVOUPgpChC5k72vpiz6uFsxEpu1kKjRk1w\nkvzn7JSCcnaxJhOwQ+iBPHw9FBDmn8WcWBMkVImG37k/FZVj89utU3OEJNLv\nsYLZay+J0LqYr+J+SnTjnkItLPcyL7hc/opn2xfkKlVMLT5CpnH6j7Lo14hw\n+Kwos1Ab6tyJMNRN2S6lJXzp0qaE0cGPi7YNpVggGwKBn8PfZZa5YfWWW4jk\nLDOe\r\n=+4xk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.bd685395b.0_1618857701537_0.11603788848238117","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/card","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58a03cb6f62d5b1d93595f90e15f3b5d5549290f","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.b52196498.0.tgz","fileCount":19,"integrity":"sha512-i1RpWL5wUaBJpB+1JooBV9/OmSJPyRwHhiss4NtBF3hMUsYHbLC1f6G5PqKxnA+2ACYGRQ9kUmrF22Kf1Kkrcg==","signatures":[{"sig":"MEYCIQC6nPscrLQj8Bf7//Q8HtwRf5IbwRvJMo+jy0ScrG4JwAIhAP10pJw39oKNigixhlTElY+4d71ZhmTPp3J5I97Mj9w6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeDXCRA9TVsSAnZWagAAUOEP/2QF4SunfkPKe8/2e8u7\n0sTm9FwHAPhPx0D+93BPrswjIu97HHHHlzRnkQAczKrjktpXI6tr3T9hzPpp\nxD1y/RlxWiCrybvvp/KpNzbvgxAYZ0Hjdzu0A4aTaXCRrbgtl41GFIJ6bRth\nuDyxcQQbzqQal+XwoI1yKCbDbNluJPfegDNl93B38oyD1Q1L4OeS1M2gLenq\nGjBOZhgiNA+X9fLzgl95h/l72h++9Gx5Gyc92AGbhFOuDb0uIwQmWIe8Mpc8\nMghaBxLbMyeHVU+9Xg4XwcOnV5HBpfjv0fPbECuO8bmUiZOVkY7W7NKtTTii\n/vZTph3/zrlZ/LOUYsaMbgmQPP82vhlamwjYP9DNphrIRWoInK5CfoSOLIMV\nv5+ApTnXNw5U3zSkDMowxmYXrLICPVDMMpF1EFXquDH+NLHlshvo9+ogO1vD\nPuitYFhcHD0Ev+VBzWDL2EXQVxwALOlZTlyS4OUiTEPBXxsTU23aoJOHSGKf\nDJVWAavf1IWto3GhBCEOBNUnhcVc6Nm4RzubCS+HaC/kSILvU2Y+BgZXy14u\ncF6kJ6X4Z94ZgfHaUyJuOt5qgDDNdC8Hdx8uWPEub3N4n4hDjhP9zOfA91LN\ncrgZZ288vaGT6V3VKIflEOcARmb+9eIx1tS+JVTwtsoPe0bmblyO/kAHIOOG\nsms6\r\n=3CfE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.b52196498.0_1618862295459_0.2590446488424871","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/card","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a026db2c404b3f6a91cf32190f7ed9d81bf5280","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8ba3e298c.0.tgz","fileCount":19,"integrity":"sha512-gJ0vf/MGABG6PqfmaRukZByvprFsdJFdFJZn6q/q7A0QDd73I6WdflGmnUzXCqv1OZS7sH/pRLweID6t9Qgztw==","signatures":[{"sig":"MEQCIERc9stvyjtIR/Zbu6oVYD5bTSQXIdVfRkOHvecl29VAAiAIvEhe0G8LzyQRIEqR+gTBUaCyiIafezm8KXhDUR5Tvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDH8CRA9TVsSAnZWagAACj8P+weysrOeHTCkSvAuh1DZ\nhhd5G3WE/sQVU+A8wOamAsUAqTKJSnbvaz5f8F5w9Ai4Lwf2OxS/2GXU9AoR\nc+ly2KTLRKEeXzkNJ8K7MA9W+jBE2RYCK5CD+LCOEnZ3Krl6xmP10o8i6Bul\nZ4KxNTXTzOPihVgDbGVlnarF2kuYm74+9E6B/NFP2uKcQg1+TMn2kpfUQDQw\nzd0pAAZdzI208Wag1lpnCB2VlmdHCrg6Cab4W2jyxdp1NoekxZHQN6oZ21ru\n252zMERrexVhFm2U06yXanYdUEKdSLe8d+xWAmTouZoyt1qcGeJdrfFyL1AT\ns5WNik0R1MctBdoU4P0sKnMDtUESTX3vjsBuYFD/nYGCJLuoFm4owU8HrI6y\nWQxpbOX8DR2gFbd0dA/vBGxenF1w3GYoCm/zQE+reAwRSLnrUScrVC08Ch1h\ndQ71kx4dh+FAgEqg1c1AOsIAAy9Ipo7uImNV7lpUtGmRpxjVAN6vy3dvly0K\nPwIhjHGc6R70todUTbQpXarKRAuovpPjfKMeGZ5etDOc3qsgRqRqE7DUvKtj\nGZMGURPJv8cpIWn1881ArkvKfkhaM9rV86FRmD0Veo7/M9Fp02MiVGZAjoRp\nGEJXOBvoMC7C3//TPERcabAjmkQCj9L54O4B2RWRZSsxQbzKZpbCmS+tGG2M\nh+UN\r\n=Fb1R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8ba3e298c.0_1619014139966_0.3953827227823432","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/card","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bfce8a078ee8e8e0f17db49c7072281dfca1516","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.c629eab71.0.tgz","fileCount":19,"integrity":"sha512-xkABLave9F+bc8Zm/bdHLIPpwKjO5nvXpgTcnFteRvOqmg+AmKet9Lnll0HJgVdk4InEctkO7aDSOG83bpI/bg==","signatures":[{"sig":"MEYCIQDrZUwrkFNNOzMiBvCrHyVMKPpy3gAcizrp6z8xQ4dsegIhAMlDgkwsdWdX5Hjr8rgRS0gtn09fAdF1PoqHCDcHYygp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOxCRA9TVsSAnZWagAA1gAP/jeMq8luN3YwC7gtcJ4q\nIVkQg+WPBnOnd1NudMmZL3td6/SZ0oBY4jWn3brio/dzmP/MLSQMy6KhgoBu\nsL9CV9URJsadvzC8j0ZM2Z2ta8V1KEuf5zfkQHupUD3nde2y5hXXrjeJhduM\nshEzWiFJYIQqhjAywPfUBRKBVpn4pGJ6uTDsVNUmO4CHa7k7a8YFZUvUQTlj\nVzkX8bSd/ZOFLdwazsxt6Izufh89//6o2vVYIPIFzVF4Gg6Yfpz1yak3NFFy\nDc9sJq7zSecs/sOqHDAel2MNIqeOv6Of9ai7T8Wm8bu/I4GLdXNpzPfQ3pNS\nusE0jLzum8YGBmClBVCdIs09aNmB+/h95KvBlnvBYyuzOPrhg0hl6Yij/7FV\n4EXZ3j+0ncMYzl5uRPKWi0ifkQvXyT88i8ipV86OPz5FAu+SDrQaLUulsliB\ndQTyZDZXiGwgwqC2pin3J0rYrlJ/lGv+Gy9srTClSwBDUzqD7C+yv490lDoY\noH6+6nd7yL44xZ0Ig+Be9O5Wvw6jyH53JYeR1hmi4ET+e0DpkLuc0zGUFiXO\nztINHb3RHB2j173AGCgJSKtN2nZ8WqxEhabvRPYG6jyfjOW+mMumquP0Yv/Y\nKKupbxkSZvn3kbrPQ05tafcBfGV3J9t4IcluLgx7K7f330qmNsgfGSZPcyAb\nV7B7\r\n=69qQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.c629eab71.0_1619035057123_0.6375996080307722","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/card","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"321bc4c49e55a62aec4b286cd370a5a5bc8c6977","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8ace3b810.0.tgz","fileCount":19,"integrity":"sha512-g71/DAHzLuqHEKb1A8K0ytvMQGpZuPxaoJDLIBvEGyyt19/CYjhWKWTP60L4zn2gOOR2kPdS1rWPL/UFLxAPzQ==","signatures":[{"sig":"MEUCIQCoe4P5SkGcpg7CcWINXEjtpWBf4gfp19z7f3Z7gQ6RgAIgM8SXh1O0+BuMYblkumtKRS4LJt+OnzyW0oZ1HmZAII4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI04CRA9TVsSAnZWagAAFHEQAIMLxwUkyIDPfqp22hUm\ng7SRzAOS/B2E4iPMQVbuCBgHs2AmpicNF4jSxQL1YAE2aWLKAJglmsibdTQz\nBrImpdelguQOPnfqAw7idJQkxor5E5LZk46ncPXoPmSfKFCrKY7xcKrIYfod\nt3dxJEKOPQJAidHBtUgJ366YzUm+sKaS+DO3hdAfLpq5tzA3LcJdkP4XwvvD\nz8AjxLmdOg+g3JaM0mY6+OqREZF+oMbhh6sXvVOg4JxWpdlZtuxZC3GGmU14\nXfrJMLhrOEbmfaxgMtCTOEcbQ4IEIEp2xDmP8rifomSVFDuWEzqSoQGVuaoC\n31dl5faOr30Zp62R9cvDfIALR7m5/mcgf1nDwMc0EaaWYn7WdDovEJqkBY/H\nsHesPBR0kMBkwXDrtGm7bOII4ztW/JTzQyu5hjJeXUI2NucJOwHhwB9LRyGA\nmI+yCcGnLqAT1CmU5g5btO+F358FSqY0vn1+qZasN124YyNIogUpv175r0tz\ne9oIqSa3k51uO+DEeH94Pdu3ZkFg2PDuAPp31P6nfx/MOMvA/N7xyzqw4lsr\nyQ2+Ae98w4goxjmKHk5V49BYl8/4PAqVFUqTvKwMaQl6otWL2BkTrJqWsbVX\nMnKmnjC9amMUxqW3ZwXQYPBd0uQkymEd1bbzvUjLsJrX1hmIy+lDEMCJyjzE\nilJT\r\n=rA3Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8ace3b810.0_1619037495817_0.10664260538740211","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/card","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8e6a0d6c4fbe9a872a840311695cea49362c550","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.70beaf42d.0.tgz","fileCount":19,"integrity":"sha512-iPiXAfVhcHwLZDPw8vfRqRAfQcs1Fr1bE+cIgkXeKE3MDhOwPgS89PJ1s7T7f/Sg9nbC6jXFPbvfTbTBM/Zu2A==","signatures":[{"sig":"MEUCIDALdMiDIlckVaD5uB6LYUVgKRhFa2sSWqwFlaEc7FNJAiEA1t87h0JDuLnXxMh0/I0VdLWVQAIEoXZllPEQJ0bb0OM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/sCRA9TVsSAnZWagAA4iwP/2qY8HBRZk5hdAkFgcxt\nKBanLNqVYVkLML2EsJ45zWwDZrwLYdXzWGWWK2T3fUUfqCReW6uEYtto+ALi\nCVi8SoL3yHgtBx/hxTuYq7QxTdyjtfgJEcN4WLklq/vn7L78mJim9aV73NPq\nyneT07Gljys8ln5oFUTXe8h75KplWmB8I4e3rW4kGGZLHlWoqgulAktn/CxS\nGxqw9YD0bAUse7HO+WsAk575aIiODhGIRvtzG35V3auNcz8QTHaFb4OWkKNw\nk0WScVgbRYEiehYfpDHs0H5+iVWqoxtKKbyk1QcjFr3X1PewkhimPP1tYq6E\n8zf/w1PK7BXUdxYERYIBdncxv85vcF3nRM+az6KvwUz3iaNxkvGAvmSqQeDN\nXgICqMGx8Lc7DA0gaSdGCL8RnJUuapbfymvW0yr4L3ilRjym3La58aSwITJz\nSe3t82cld1l0sw5j6HA/EhekouBNQ73c0aVPo3Q5ECk/+UVksDaYsPUP9mST\nAmoojR/RiYiND97LZBdVkwYfX8qr4DR2u2mkVs9fm4cZvJsmAvrFgze16Wl2\n+fh2RTjDnfcD2puwHIfnsKSkZUYUvyEJla6CcXfiy4NCbmsc8gt6O7fVLxFk\n9VeVbJ+AbIMLktw4ne87iUdnYL/BkWU+PGtwGoty6K6TKZadY2vyBdputAIT\nMwp+\r\n=48/A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.70beaf42d.0_1619038188429_0.9240111749347879","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/card","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cac20355c17ab5ef58ef0b0dcbca044d4f89f107","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.cad489689.0.tgz","fileCount":19,"integrity":"sha512-11ju6QuHNywBYrxFsLczpnQofPbERRVlwNXbBDf7nB2/hAJHuGjGOEq9Ibv3vi8uKem45/YwteqgiFLLLAGiiw==","signatures":[{"sig":"MEQCIH1R50v0l7EBhuCtP3FJNiVGxZcjqRWAvVo/KUFc4TWJAiBCeKwDWo3vmbWXXql/b20qv2x1xdwX5qWc5os+v+IUxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggak3CRA9TVsSAnZWagAAWC4P/ikFjWTrmKH3Bv/+Enif\nY7FmVbE/hi+NlgQ1fBoSMd+YLLlXeXw0+HEq4GZsrHBy/anEIg92Bmr+qjRe\nciOrqT1KTvpdAWx1EYwmpU1ENrUjqCIOFzBKjZ0Oxd6Wmjd6B3m2orN4hGBg\ncprvdg3LUpjOcRcVk9TFiURihgKJYTixf98CqPPNruDOqQRiw7UPRII4hnqt\nN+Hxri0srkZm2suK8SgbIgmfD1RNJ8thuCpSDDIIBeZyoIoVmpD/HgohoeUN\nH3xqDLSGJ1KXnKLiT8/Eu7MUYtjABgZZp2R3mBbEbORWK/eKeLMHnlPBzCJR\njs7oWpuuogyTTDg3YKxWaiONKoYO91fOTScPwgrQxTmA/ob0ryqxSTcUlj2B\nffCGsPZD0MmFfdZ01lMrhAXDoY0gn9sp8r7/Pm4yj8wTPo3YIGys313oLfyP\nzJG9UOflAueiceXOsIwMQinJLtGe3ZZSbdfkUff5svbJeLD8+/0ure1Fju9C\np1NgTr9qH846BgV+IwQA5zR5MTun9nwOiCHPzpxPaldTuDV6N2hAtshmO2P3\nTpCoFb2KPZQnyn1atSPyYidLvhlQk3gwEY4ch2SY0fvkc/TfCo7TfzraQK/v\nsU+6ui/ankYECOHhQ+sAfvIMoN7wwHqm1AbIiQZdtTtzCLZ827q0OuvpVb9/\nxUKO\r\n=DYUt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/shape":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.cad489689.0_1619110198881_0.6653848325677305","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/card","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"559c4d73fb483aaddbf053242ed758c17d85eee4","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d928692b5.0.tgz","fileCount":19,"integrity":"sha512-bELM0FtvOY3OM6wJ/p9dnQYba+CemGdxbwBtkgCU7Fhe6GBmgC12XyRSMD/QMk9leTh6IEfY0nVVPbSINoT/pQ==","signatures":[{"sig":"MEYCIQC7zjZZ2zgox1DjkSFX2vMP7dxUEQwOC2quTMHX4Y41CwIhAIiwzAaW1CwqjiZuq9bW/NeWKDX+Co1VgdtNxLo9fExr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwU7CRA9TVsSAnZWagAAspEP/3M73YJCeISVBAOmt4Y8\nR8P/r1tuEPVMml14ceUkH49t/NrbdnIacjNpzN6eD7JmMRr4qYLqFjrV9IJs\nI2jj0V+S91Wtf7iqpW34wmzSVFhCB0zCkqPlC1nmx5FsCuKdCGEO81jK9q2M\nJnSMM4FLRH90RXCu6VL1Icw8TxD9UYjBCWlpRXuMhh0kDfF7ukT2wmYe97AU\nX/Yt6JLpsyL9FW5rcqsZxWej8OFgNIHVKj++/ZNywTpSX0A7YCiXyW97ZEO+\nmlw8KDMkur828pp1aCU85GqpoMjvtLCBsHzmiZGVyDhzi/AdcH7HYh2V5yzZ\n96QJIliCnoLFkBa7GGR6COHVheebZDW/lP3W/NLJS4kU2hUeeU8wHZf7ft11\n0I8cNELmbCEHU9NJyxNlnN7tkN1XQMKaB3fIqpZMbX4hd3YewG481mS7I6uN\njFtFsDq/DJ8WY4HuXmFTSzrl39braltFBvRklwjQEqj+BThVEYKUkxsHXqqJ\nTdtAlHMmvvzSQsTp+f+b6OHA9YxuKgNCske4I4btTbVl0+eo9YLj2WjheHDT\ntJmS77DUhlbzYDMcinHnmvwOUqojP164RFgpV2QWXZflc/StbWlKov+FqnlS\nItpcPs3H8ElInqZYOd63M6ZVLQg6ec4P+Ww4k3dTjQWvdCj2qnTiMLrUYURt\nl8WQ\r\n=vj9Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d928692b5.0_1619199290775_0.7487196746077447","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/card","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1adfd54d2f1e8eb0194fcefb4497aeb554ceea54","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8f68de8f3.0.tgz","fileCount":19,"integrity":"sha512-cUejEuOnSXdZqSfCYEH7QIeq9xiGjbj2toB7FVUfHM8SF7HeMWuLdv6bIfIeAY/CJM+WEeLKuMMuZ0a8LnnM/g==","signatures":[{"sig":"MEYCIQD0gKmxoks+6kE++tKIIuIDjgLX8VVySzE29HBNtY0vNAIhALV5HAgY5VN+ZhwPn4b4IWxcq8k8UtVLgE6vNjBxT1qg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw5SCRA9TVsSAnZWagAAR0MQAJMKYnHEfF7iQr3sa/MW\nOMPxwsa4k2tAfkQST4zgTjRkYbvlGn7gJizJSxqiVaWc0iZOXu+W9/8k0rp4\nf696YQKss5taYplcZZC3iJlvI1TkTJkgj2UKjjDxbSA7evETotexkKJGr29h\nbB5WKSrRPPmQ2AK8NSEMyNjX6aHF6uVa+sfZD1F+5WAkVzDxKDBo3w9hAbHk\n2lVnYfU9L+qnBA0A01tW0CUb7ZHFwVlI/f4sJ5qZkaI8nAivwLT5iGvw5F2/\nkWra9jdEKrRC/SqvWX50zwoNu/3ew38/cjMfVTtkWBgfp92z6wNkFZeWrk+e\nD/xxKNgxAYqFJzk9IByuPEQ+AxR415AMnraouL1IvZt6sEdODNDwHVGfttdK\n3YtxYYM9vl1sAGc0gAudRTel3N+58lVT9aRVM+b++4cokD71Ec3AGTaiDEK5\nLEhBQbuxHTOdlSEyEe+kavOMftxsLt4sT1lfpmWWUsySAqjBAq8GLa2ZUkim\n7zPPrWsjusFbC+IHHOfdQCEjo4jxo47IHgQ7wHoABd1RrQUR89pzidxbvhPv\nNHwDP6OKL4/stz1wvEIIOdyuoebkACkqz21MulFgCZ3BHcykc95rrLjQoI70\nMECIYBXHcA2QRgubI6q6rkXGo3lkumikctxxbOrmsKwrBvclVVqHfdOxJXkh\naQ3y\r\n=qXZN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8f68de8f3.0_1619201618163_0.9331493550468708","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/card","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ea84a013e4f2347dbec7dd93b7d8e59711345ff","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.05753cf77.0.tgz","fileCount":19,"integrity":"sha512-uJ3Vq3IV8glr0/26hKR/BiGKpQwvYZxiPI71jhIcaylHT1DtiaYwQw5YNWnbw3bos2NrlQidTWJ0KHHlgQ0spg==","signatures":[{"sig":"MEUCIQDG2oaEOO3pLjEghR6A8o7hoUrEK5Mvn8UsSjlx5gS85QIgGI6coUnQ9PM1wSo0k604FqdE0ZNyXE9XDvfr4wVnlVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1ukCRA9TVsSAnZWagAAYhUP/A+7krL/B5dyqtQSiwAK\nOo9r79A746pTuZVItB1s5gjL63ToDFusHCTTBI0banh1gQxEASVbiAVFRHrN\nqjhbEjQbyz0WMcbvLkn5zIxJc7kFWSeBLplsqMjf5P7bcSn6g/qVmigF8sQk\nM+JOimFcR0jMUCEfAt1gv24G2si3cEwvE0Gd8k7KSwJI5gpgquHfvS27PKfE\nWsdmUlFtGi/UALUFK0Ty/RmiIP6o64Cx8b7HYWOCiDn0fxhc3gKvoF4ANPAq\nYlN1ZHXlvXii6SZ/A1bPPfZuijgLQ9RwIqMNEhlWt7SZlHPw5G6flkz/UQUV\nLNS/1eU5dkpeiXzwAmxkkurFWErWmiNocqSemhdW1N2XCQzioY4QDUNWk5Eo\niwxN6CkcSjCUx+AeTUh40q1bdoRznRiLAsHYT0k8sz+IQ2Mq2hBLX+2ZHP8P\nBokC47WvCfieCh8IXGFbZSsHZpog55nk7RL3NCq0pC6fG+U2U30GMIaz2xuE\n5BmiY9bFhKl9MtrvPRpAJRryIel1j/b++VUl/jkAU8ySq5EhPnQo/UMPts+S\n6sg6UIfW8y+7ixGjFlxofLe5AsnUnMnGbS3yzHs2MAi0oByTmEGgv/NgNsjb\nWieObO3O8MpSWj9OTMe9RW1b3jw9/VbsHFz/68I9DHIt4lAhAtMWGGMBZGNd\nf8Z+\r\n=ddRn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.05753cf77.0_1619221412431_0.943190955558455","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/card","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a30e3fe8fc4f45834f8b44a23776b0274a082ea","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ef43e6d96.0.tgz","fileCount":19,"integrity":"sha512-EsquTto48dkYFASCrXkaRVUo9ns2RI4mcOauEwL0EhER0UZNgvCkY3TFN8OHVQCYV/36LLYasTKwxDRAE0QBFg==","signatures":[{"sig":"MEQCICdSfLo1kIwCYuv7alvb3vHdTeY1Qgf+HNQXqagY/0tXAiBgKjhCVK1qTZeONrwcFYmC4eBNA5JEBVjI2xtSA+C8iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10hCRA9TVsSAnZWagAABQAP/20/FezcGn4dYKAbyhat\nveiTvLIA5wnuGgIUWaaV5FSInQZ51+kyCz/LrcsHwMJgkwnaC59hXi77gzFR\nURkkoOqrVgHzSuC+mZmp/brUctYGdtwLB5UZhwxZCINFDDncJRaY5/WnRWEd\netpnwUXXMG+PaXf7QiQG655rFgoYzrS3K7L79BG4RY1BADhgXQTR6N4/xwmh\nOCBPHBxHgDWTEpXNCFe5hIz6Ta1GaNLj3Ex9I6I51M0sxFNHOxsdjgTDa+Ni\njdqG6brSMs4S1qbqiU3qlFula38imNoWPfFFM4WonUvWJ/UcCdoHd2y6ixaG\nnMglH0YbuveLkRJRqyf4APSi6kC+ukJFe2+cqnUW2Jj9tKHadu2+lmlwIR+h\nEDlIJUoyJFLfh4uDmwvKuoQPgZ0fftoYWdpqi03d4IdnEGUVqUuA5UeX76b+\nZjH6O2UXTfgZYLOhAM4zWjrJBRsYSIhPWbY64kafvnrE7K1DTQkxAMo4ZisU\n2BxBXWwCni6nc131YrUL3YtRwd6xK/681cdAmqjz/A4vAlWzYbqdD9Yuazzf\nyKbWbm8ygw+a9Cg6sQ6J8/FWDjI9LPawhjOzWtx0Jtk1hKZ+Pu5Pb/A2laNJ\ngsHWYbuBL6jKq6GUKKVi9nisQTCjwShWwbnT/7mbgUO7/cviZ/kVhpA0Mv0R\nvmpA\r\n=FqW5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ef43e6d96.0_1619221793076_0.8175724443743981","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/card","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d781cf675e2111ada6e9f45ec119b05052f52467","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.197f64fa2.0.tgz","fileCount":19,"integrity":"sha512-Y24soTITovekILRlW4+u6kw38TNUwhlPQIXfR7NMumPQhK1GEYrPlWHNHzHWCP32oY2xYpHYgPnqL8kVsi+mdw==","signatures":[{"sig":"MEYCIQCBoxFDU+9UerjZIdi1KqD7y/UOQtPeBpuk7IS/x66ODwIhAI9J9j+3nDW+SclhUDVaMhF191TX1Zk37L8z8pfUdVvo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvP7CRA9TVsSAnZWagAAuRAP/2yU9eNw/r7VzuibRwIV\nFEaLW5KHPv1KeanM93NfnP2sdjtFTCJBMdwARz9CxuNAejbRZ6D3zfsRlkrG\nLqD6+5375OMSjoTH9IH2ynZimWDdwrfwvWaiUMvt8ub+wtKdMOFzVd7IFdw8\ntvNmfH/r0dX2fQXruUhjuNdVKkA9zGWz4Tx/lQo6uQfvBQTAJOMtTnLc9vaK\nQygTHWFPznQq1tP0AMf/FalvBVUfj7Qdgn8fQxBsFbl8o7gzanP+Ao/ac5E9\ngJ80z4gyX+nFQSVv34xfmmSi889y9pTrT8z0riVwFD4m7YRSzyhdtPBMPm0U\njJTwA9PlWGoOri/o2FrFi4mKmrI3f12EVWMu+mBAeZdCrkHrp1mcRukrthjw\nVIHyhQsv29zPV/SLak52vyvcHHRuVzNh6aoOmWJ8qrQwl/yfkz+BRJQwLaGi\n0d4/pdfQRz+ChbJ/iT1tOLabmLaPRpXG4C0rVEudrO9vp7nGFOD9+bPxX2e8\nGLKOQ/Qil9VpVyDCXX+lAS2aBzF4lOBpb76Qgp8gQOfWc9IxD5CzEEp0hEYZ\nkPDifEqwMAHLeDGESrg9LTtU4svqrT31UL3fY7RlWOh1m1acq2JT4KO5G5Rj\nUHNgL69+0PtdjjTTxGXXPEoUr2H92LcUS0oE2rjqCTM9HEEm60hHxnx/2S4o\n7pkH\r\n=rE1U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/shape":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.197f64fa2.0_1619457019404_0.25287560957239297","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/card","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e75bc537a78b22572dddd636e1a0ba0c4bfe1aa","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":19,"integrity":"sha512-IFHyThVO9Uy6CMF1GLVUQJ8CUB2aBwpT6PUwdP4v1eqq96p7HjplWC0RPu23JHcGx1EDpo9A/GrrqIBZXh5jMA==","signatures":[{"sig":"MEUCIGPxj7WhxF6GRJ5aFK8Wxa5AaSW6fhHdcR4TolWNjBHcAiEA2khxI2LyqRhIYLYAVxVcLt/H74N4EFIF8F1X7CyQddY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2bRCRA9TVsSAnZWagAAnGcP/j/jlerjfBYPrccOiocU\nzfSUE4tARGTJ+oein98j1JeDSgDCZJS4m9w8Nror/Sb9+ELB3SbhZ9yc0vK8\n5iCWR+7DJvE/12SQUcmL0xuCa3L6D2honCPrKLR7+uK7cQvXjDQAs5kQ4+4r\n2bdP7NwitdoZ8ZPQOf0tWx20UFQG9igFNy/cObp1l62sAww65aF0U5LQZLiE\n0yEOGc41DcV7vXRslP4ZNFlNMs+YriC6EgRJ25i1p3tv7ofUrKvGnYwIhkGp\n9+YfrpdvH5AvnzSc0ETHl1wB8qrXEhfw73oZ0qyqyd81GJiGAlIlqYND9eiB\nWU/aCTsern4pTBZcVuTmwKJyCKBMPyvpDNKxZ5B4yuir4lSNteuaAdYdBYC5\nO52IkP8w8iekvoKTDUF6Pi/f9GRFkZlOd/9Gie6wAP2Gew65YUHCw943nm3M\nzGDi/TrBHQBhkiA2eh3g5ucZZxJMes1FBTxna5U+jimDucbA2il1CFO1zuiB\nClGPATVSGoa/pGfB3CQ3Hlcw+J2sxrQRasdfnmH7F3nn7Ht/chYWFKxpmtea\nJZCiirEhrdXoChpf+h+8tRGUnR36dHlt4MFSirUrDWtU3Zg8WtK0JQEhbxAc\nciwcdwsjmqZ6KMn9Dsz3z8HL72xfXB8C0knoii4nVIrm8pQ5phuI6eD6drt7\nxY74\r\n=kML4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.55ad2d7d8.0_1619486416831_0.748219184160001","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/card","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b52f2bd21704a35798465f641c46090678c37342","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ec4ac5234.0.tgz","fileCount":19,"integrity":"sha512-EKN2T7v+ov6+o+AErM38pxvmQKvtlmi/6NDNlIeYkD/3S3VC49eg48zNnSn8Kl0u0MO2o/9M09eCn4uOAkVOlQ==","signatures":[{"sig":"MEUCIAh4zTLz/Fi490oZIQOo6Wk6Tj84ajIPD6J30Ft9UJu8AiEA5BS5zP/wiz2LR/bmjRTkZKeVHGyFX4CpQYU5Z6HRE6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RFCRA9TVsSAnZWagAAe30P+wQh1pchywZccC8MQvY6\nmpcaWTL4RC4oIsFa3lmYvmYJDtDbIUPa0B9Q/qlP+ZG98l8r26nYzDdv7s+b\nNdj07jFwQqnOpl0+qbf232A8E7kKdNTzQkXAOj3eqtUWJ1u0TdyMTgb9o4xS\ntXZ9x6me6RLNk6w+wR7t+ZFgUcxSIMVCzxlPQMlaaYQBZLSTl63tOH4bLfYh\naOQAptytShG6PemzKqVorpm592SwXlteOcxBmX7tEvmDP0lHFzB+JAB5lF/T\nSZDHYvR7ux98TXTmc8D9tpiAP9cXylxnkA98JQBS9c7nYjyFGhAdTFGkgvwd\nyV9mdiciDoJFVubLxxkSjMSyjVFt/LNIu2v6Csp27FWxnZh83LYP2vfUxLO2\nT+0MwE+b4geMiht9rfzztioxxscuBkOVigQEfNy/M5WagEFKwL7Frgk3R6Qu\n5j5tmdikMM7+9UczdYm8yCjx0f0Yo3iucoKp97QYXrgEAigkNVlWqwF0/l6f\neru5N0jaNfrHAt640Et1I9ZNvO+tkIjlsg+Mc1MPPVe88dZl0mtuA0q/u/H/\nR8D73AaTDSDyaRzP96R6VAKy6dW1iZGxB6AQEco6rPwF82eKi/jIcizx6oVq\njpWvwiNX8TAiPkNCE7P/AS7JY2yz28n6nse3qfNS29XrCViqnNDzZ7bXal2C\n/tvl\r\n=3Gb+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ec4ac5234.0_1619510340814_0.3411983961987999","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/card","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32e98025a174982f6216c41c7aeda51fc79a7eb","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.b0579acdb.0.tgz","fileCount":19,"integrity":"sha512-vi06fx3m9kJnCPraHbPou+PxwG0Q7S+M783y2xVVDSf2BYjRjzB6Uc98Jw107a7OXX7TUe9LFnESQ0uN4AJL0g==","signatures":[{"sig":"MEQCIBhEl2JrFP7GBjO8AMMZxdzwM+ExCpPRveRyKVlYAeEDAiBw+YIFDnFcQ5mqEcW66NWkzrNoT84LQrILVndgXRZebw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80kCRA9TVsSAnZWagAAeeIP/jGIQvmRa9Ynls2Lksoi\n/nHz9Eg2NDE+rKVBd3k+HR9ItVS+ABd7biirjCd0bDF7Y6rm6PIywtEdwoZC\nX6aT7UwhzqFuVxYAz9U6xkDUyIBtrJCUok+uTPECSCq9WZO2QoJ5zLuatec4\n0dj76Tf7XJL6LLu0M5/8ZyKkX47N2ceDmIvQbsd+5xCagI6dCee7BIChHzCA\npPKYH7tZuSUprriRKG0urydYV8pfO1IlscbXPHg2Uhy16y464VIbCgTDq4WJ\n6FCsy3P9E/1Jm6nAYjOdmyvfDy3WYa/np2TdcY8OIx+5N8nrZ/h+l+cxPtMl\nkkWSxH4WLL8W7MfQsvIiq2/gN+BeoRompIi2dpJaTQn1p0CxFz22xx7gn6LN\n8CF1LJ8i0V8uiU7+Rn0knWJtgVQFjK2QnF7ZjNHBaCt1oIV6RTq2ep6f+0PY\n6+NZ9QukqoJttMl6/nb/MpkyoMR4a/7951L0gCBkjxxZaAEQJU68r3kFBOoF\nFfzialdDcK6nfe57iwRUYrwPNcLSF7VlQ4Fgk1yqwoip8COt3tffoEhEvNk7\nce0MYskfypb6rv7LfuimCQD16aKUwHoVQr4hBh+mEw09ucGLjcQa51s1w7I7\nUGYHkclXMR9H3G1d+Z+kbsFM7oelLgi4cpox1QXtcBtAwfwGcIv/UOgidSYh\nBOdv\r\n=CZ1L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.b0579acdb.0_1619512612509_0.6632598798160396","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/card","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"656fd267f6cc779d2d385341daf9bfa27d212e4d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":19,"integrity":"sha512-J+Z9yQVETTiWjln4qumia95eg4WmuUy6UPzyenCII9SKYZxnhMrKjFB4KQTjuH92RnoqvcnUUTGDehflLJz5OQ==","signatures":[{"sig":"MEUCIE28XmIsd/ZeGsnS3luGPoxG2/36tURKoaBHinpyhW0IAiEAwkS2gyj/p4IktGDhwfRuU0GvhdHRVeaI8mNpCuWlpUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHrgCRA9TVsSAnZWagAALscP/iKkINcWXLNMUSKVtkFz\n1YddOtZ9IqQWqt29ydBhS9wUbOTBKh/5bIoVbfc/bVZADhikNXXdHrSRZnNA\n38bnYdA31aUHuZooqfFmzl4Uu3ZlqwWI7l9kEegBrDqWcBC531xT0Gn7vMe9\nb3NBeuDzxvyJEg0Ne6eNv8ww/XZgjHEeRgj5bWnV8JXt3O9hCy6usNKwSnO4\nwyGSL6NgDvzFrAh2MbDHh3dohwB03t+RoVpAuijB2QrKRlmSJPPj2ChQPclX\nVrr67EYEvQwuwq3ZViKSHaHd5p6dZUVq6uIozmdwxay2Tvq4WDrvasel4AjP\nS+JS8lcD3FgXCgjhj6QUfRe/2VnDKf2I8Gl23R4jZW7b89GVtqIyjuk8qond\n3HF+WLlaUfTAluT1RW738xY6MqjXm8HfJmuvMx0CDCKDQnBOPNwU36RSG+a1\nikN6wtdX8VVpfNz77IOunrvWVlUTCPUgJJvOHLpQhoVxHlXYAaQde5sl+fB0\nVmFwiyuMHar1Ys1jhhOtPfpFKJg28GFdcHSY5o7nGlaaeJodLBt3sklYjmH6\n1U+hLUlpeTeJ6YYGiZ5+HEsfpcWKR3Gvpa/ev/HxNAHhoVKJosEN6w7Vry8i\niRDiDo1t2qyenmayOCdoNLhCJPzwu7gADaoPXT5+mHwspSwpVrcrrjNSa9UO\n45CX\r\n=I45e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.81e2d4ff3.0_1619557087918_0.2703250818571723","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/card","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ba1819f32bfeb4acc9c3b45b8bbc653805e652e","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.c8edee52c.0.tgz","fileCount":19,"integrity":"sha512-T8lbYEmF3xiEk36wsGRYjKxFgwY3iU6puWk1WKn1bWZJuYcJkvnAn2rdT+kjZQXxqpirpbbcSpWbIkXWKCKxPg==","signatures":[{"sig":"MEYCIQDsYpceELI966NDN+6N9Fa8DaTF3hh6X1Ty4Aeh52SUbQIhALLdvYZWSu8uwQNkweomHe1uaP7GcjXAqE4tEfJv8HnY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIY+CRA9TVsSAnZWagAAcJcP+gLfBRxWBGofG74BubG8\nAjQ7ZIXGshFSFjaQI/DdrMVmh8YDJFbqAKwPx1nnEroLR0J2y18M9kMoOVkS\nDGGxSH573PAcRHhz56yAbLxvgnqgACe7HkoWmKLPa4RRtuLmyzHTBzV6smjb\nhMqrxALQFxrN3kKqHJSGMZeaktIgMQt+AyhAgm7TGF8sO3ZGrNp3XFWvXDc1\n9wGNGTUq29zQZ+d0WyQMp0e6JyufXNRIzxBII2FlDzp5vJp4aHicS8zkaZoO\ngJcSaDvs8O1ma2Bu/Z4A8mymOASTsrLXv2f6U6ZsG2R09BXCUD+OkOvbXjz+\nc4WoTt610zcLKitH9FT8/ghr0bu89ILCqVj3XMeC46jeLUgip1PVZ4+dNyyt\nUTO218s9YYifyJwQrt1LdwLpIJUWJfIOsSMxpNNtMIEjVb3ut3AtRYC7cp1I\nHEYZTOrcY+5qCu6roDGqWimVIzvXpdI7iBlKyLNL2vfATgOTzofW+uEmnlwB\nGxUSGtzWHaNOiwlFL3w32c3hOjQpcBi7Iv/YyBN//eEh9Zpmxz6c3GkyVDjv\nARy+62TKvtCOEvtZ8RxmqQm8mQMjNWUeoTQYSN8+TkfR95DFb+GyROnS31DL\nhFDWKWaspkzzLm47JEX26pWqCCc4/5uoa2Ks0y2wSOkH1JMpJEQ/OcNDsC8Q\ndTk+\r\n=L3GU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.c8edee52c.0_1619559997518_0.4017175184025872","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/card","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"079314cf54707f5aeb6ef7850c30261ce0ea6dbb","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.f5b6110d6.0.tgz","fileCount":19,"integrity":"sha512-cCyZd1jAzuwwwlo7FKUNIhPTKIUljwNL10p97yusaMEINs7NsfwNda2hJEH4frKH//rOZzuzFabNEEHhBafwmA==","signatures":[{"sig":"MEUCIDcgOFSf2As+dMQe5XC2+7IIOY4JYsrDcnf56xOg/PklAiEAvLo3eedYJIhk6z1vYpZ8ptPMkRfR1L2BD6aJ358oOV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIs8CRA9TVsSAnZWagAAjdsP/3t86FZTxb2vsPO9uOXa\n48Rv/BI+ZqrCzlXrQPj/4T8NKJtm3PlbpnOloqYbVgUArxqsfn+AXFiN9FWP\nb26Sjm7ggJffmqxuFVrjTF5q2I/+AQny8MfE+cOd5goMPmP83gGmsbk7y/Jw\nF1oHX7x1Pxvk74KFQFUhv7eFHV//apIRfVjndk15EHndVldLxz4ZUmNkStPa\nNr5FApWlbRkv92upW4cc6p87Jf5IzCRKAk/Urnch3ZPJddSPuRl8wopHETNj\nkEKaFKOcF49evFzTFhHMtsHKArse6BP37igN0Xv6Eb6YLmxoExpRYE7r+R6e\nTE6rwrrVJ1reJj//Qlb+8RkkdR61YA43hO353+wOu0+AHTuCssPb1y7FNlZl\nGLHKGHCOsu0nconti7ylAa6yyGup+uRtmlOSMIz6u1BuFUtvD64krz5juwwt\n646p5kjQ0KW87Jse9udS2IXRNk5XlID7w6myrofGkOVg5MLCS5MHV4HyxURn\n2QnFarKjKAH7PY82eO+snVYmoFx2OfMub0Gwf95oavArnZCiB6z8nMZuy1In\niTWXJmIHvLIVzOPvuNucJULRQemRDd88gAcSXD8GoCLJbD+WBbeEKzgwDQm3\ncjhLDJjnDv2YzEJR+pf7rO2yJb93O2hOeSfH7R3xFr1lCJcbxCPHJI4gEon6\nqBAk\r\n=++tC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.f5b6110d6.0_1619561276451_0.7355054273702055","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/card","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3eb0065936b954a427919747a670340c45e945c8","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.cee9b9e22.0.tgz","fileCount":19,"integrity":"sha512-Zb8rMIzLj+LdFNa3gVaS/Cvthnb6iTqv1cRty4iuoXDH5Qpr09oW+U7wL5J3Bx/4m97Z116TGzWaEaDB1W7aVg==","signatures":[{"sig":"MEUCIQD3S+3gBbiCIrEH6je4zTi3baP4nyIXqpYVc8MjdngIQQIgKwL4WBBNASr5F+rA4GqyxVkFIbdj3HeEgacGXaTk3KA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKiiCRA9TVsSAnZWagAAauAQAJRxXE15PCgR5B7if5KO\nZz5YnHd3ihfNFbsReWkZxsJdfqLMU8YrHnvBspOyZNEUl8TBTvb3uu4uba1o\nsUOTqoZ1vzy5+rhBRxK+9DgvYNnSnDwxR1tb9bdD+30xapv0NSbe8wlwNWJZ\n8LKMLySL/AiWXeb+jlc6nEO434TQqI/k3dEXWFzZ9SekQOgt8cNfEkNURE6m\nAqQFMVf6SjT0CIHcbMRcOYq4nrtkb7ql3wkc2+BSBo0Xk1lqhtj24BLWVbad\nXReTMArm0PVCGGNSoZydcaq5wc4+oHyZOpbBMOhWAB7xiWoxDTfY82aCm/CH\nErGltbSrYXQNr6yHxmzzXFX46rd5pQ8hZxgpeREsPH24xNqzTvZFcboy4cnt\nIvXVft5JAMjNi5K5pMaE/8GhZ693ikwT5Zh58xf23daiwlQGCWwH78xcovTi\n3yBpKWcPRhV2Qx7/9tnV9zxZsNVzL4gRTFTwIUg3+tvW5opamGI9NwKTI7FO\nJXx8DWXyZ/+7pnNOivjwLzSHriwLq1aKJ/OqORnXslZQHLlrwzcYr7fJozpR\nc5Z+03seoucbsRg2pO9sXgJhCCFYUEQmYqOTKjeglDAGfL7D5VS2B0pjqX6J\nxlEhNb+6QIFArhAi5BNa6nbsZKle7cYs0/KLqM6vIu3r33Qy6alt0hDZvmuh\n9bRb\r\n=qwv4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.cee9b9e22.0_1619568801920_0.4657354103339879","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/card","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4191dc7354d05d1288091099de2f548bd69d7961","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.96e83fca7.0.tgz","fileCount":19,"integrity":"sha512-P1Xv39AR+GbS+0MhHTqaXcaPqJzQdlGy7W2iBjQXYhyP0CUVdvpq3ZTsPLS2xBnBhPXFH2yvVNX8h/tOzg7IrQ==","signatures":[{"sig":"MEYCIQDUDFCdAIbEzCwR2uERyd4d5M6jZOTaoP6Dp9jWC/AA0QIhAKThWYf8uWF5jcmYAZcEuFxVx1deF2Sc/pn2yxbR3hKa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMz0CRA9TVsSAnZWagAAyvUQAIqMCrIloumxHow0+y6L\nl1tzy28ItfFx+aX1qTyrvbNF3tmHAxlNpcqtX0pLP/oQyyg2UaGJuLpwurTo\n7Mxhf12X9BpGiCwp9FOvJ3voaa/FHaedodN4YhCqCTmg/oiJv/t9od0auoW7\n9zYH+jF9gjd1qABYHnBnjNzb0NZUe25vO0MllQAFl3N4au/b1mRjkkxsAWgO\nNf7TxFV42uJNrkHI5CtIWC9xVEaj6mpecZLi+vy/OorqOrCd+w+RI0Av3Z6/\no7l0oOYUO6CW0iOHlCj20ATodd280mywh0hGCj1OVanhw9VJjXwdXBShp/8Z\nJtEKribWQicT1nKdNJyFWDMF7/cW0f96cFC5du/BeQseO0QLbxuR6/Pcoyvh\nykuSK9JMt+LRODuDnQUGhLFTEWGydyWXOXrgq9x3LbuJBC8CBiiR9pDOHgbp\nGT0qBwsaGnYHw2kriErKKekDKe/+QE0YzSgZUHs8Fy9NjHLLuyWbzE74Gaq/\nWPl3WEt/Ry47UMT6yWyzwoc6yRWvqLVO+WbUdtKigRUO4mNK1Kod5WYa2zbL\nQ8p+4Lk0ySIRFjbJtqWojVhye3zn4mkK7DHc7UVZxallT/ylpNBn3jVKFISl\n1pL7OkzFGDuwXht7deMUv1lwDtVZNV4D6UHFAYg2TpFYqxnE+dZEg7FAi2gc\nCjH+\r\n=1pdf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.96e83fca7.0_1619578100075_0.026281086490269834","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/card","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09b5af67cbca11e9bd66b2d3e494ffd709b9ec0d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.4c497bd19.0.tgz","fileCount":19,"integrity":"sha512-+9bm+108dS81Bqx1Jx8aBMoqpXOverY64OX7VCxox7snhn/Q8KzPLL1R0EjECVxUGYJ2ioM3+ueLoBis4+G31w==","signatures":[{"sig":"MEUCIBNPKhKRZMXJO7v4EYsyw/E7MqDHa/XlO8v3vpWCLaEuAiEAsZtj/dNKh0BTn68gzwLX1QRCjNGu9BHrRgx8I6Hoq0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFCCRA9TVsSAnZWagAAcXUP/RfbptIfjaQrrxgDSU7g\nHEk9rTowsie0Ev4E2y9JwtOZ9kpMKWSF7ZIsMk9pxYW9PlhNs6ztEwXpLb74\nC35myNdFhfupOEyIaBv19ceJ5P4DDNjZQFIXGPkuW51Bwmvpuj7vpHP/4IRc\nF7KxSbazyB8E2Zh+p2Yeb4+oCD3QGDir0Dj1fi2DN/4/KxSHeNKSSNh+Xaz0\n4SCgmA5k4HExWoEbOJKs2dYFE7VoRehbQd5trIxf9inxzCcCnxAlPROrHGxk\nWAOqoaW7t0py+psT820/pzTnEjJwYjsNCkhqF9k1twXtaq4axTolM23Uuk2F\ng/ppWXtNC4VcV55t8jTyXugUYDmd0DsrdtgKafEhbHDAeZ4D4mPwOgAueFxl\nkBlJUMj+3NkJSVkQl/oStjEb6yg0+vZwbSnJj1tUEN5QxqKRCzWD3EcV6q5l\nL/R1yaw4FAaxCMCz0wcRCQRWJFwIJXQZXZU/V7gz+HKREQnwworUhlGJTaty\nFaNveDBX28piQuegmxyGejE70ARTgTDl33yBVIKYGpAbHM93n8V9B5I4TZPS\nj+Ppw/LH5hiSPpM4LyrK3lIY/lZ74jt8tjsTd0LS7JQxfiWcjt8J4DAaLSW9\nfR9hF/aTgef78/jblqwE65ThM7TnTc4lq6JBUr3xQ55q7CYbrJxln8QokLLx\nNMYh\r\n=PuoG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.4c497bd19.0_1619632449939_0.5529017145471098","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/card","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75a1793b0265081f804290fafd45305163e6114e","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.105b15b96.0.tgz","fileCount":19,"integrity":"sha512-wx1eTGZaqV+CWbShAoo50W/nnb5p8opToq0+8QtvS7WyC3vMn0+vR7jx5jrZ484+PWa/lNP2k/j6arp7g+kJ3Q==","signatures":[{"sig":"MEYCIQCnoUp6934JOL7+ahc7U1x3asE2wngdm61VT/hxBey6jQIhAJ7lQ3eEWdKeqkVZe5bci0CAe3/juRCMSQxjnCdNqbSo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiddsCRA9TVsSAnZWagAASRsP/AyHsKVZh/n+zY4WUjT6\nZRXboa5T3OZXwmJ3ArBgDo7TxiGUwQEu/w0uBNXJLTorinnqwYKjAbZKdd8j\nkYYPyqjBGIlu5SfQnWdouqih4/0vzo6rzaTDvSuw+9ke8xc8iXOBxtmTsqnK\nrGgoR0X4/BRK1tEACk2sMFnLslgDsas1g5xYX95Ykh3CGUcHNWTcpbwoVMN/\nODtiEaT/HDx19TSskk5TBVXN+G+j10GYobLJvFf5JgrGbhbvJLHtEWq+bHYS\naaLJInQyYzvPY8XEW0kK45WUhzhT8UYCS8KxZvJYLvmFnMEEkQbFOBKw0JUX\n4JbNkv/9rBviVEQL8/g1IZIRyTIXEByIy8st/KEQDytmcvOpA6Ew/D3qoFZr\n4DB4qKltHit6nq9OnoihsG12jR51KQFm0Log91swp70+KFOIi8/CEG9122Xr\n47uT7cybxnzPaMir4wMaTxim6PUEHpvS3FWKWDTFPHXKi8KvrT3dIUkYx3v7\n6dXIqQiSO2ccmN9w2tlMO/LcVLIeUy5zrLTYxS3x6WgVkEVxrzwBG8DA+u6l\nEcbY9FIwrk5QmVYO3HH7j+JIgs44z/IdsqaK6xZzR2tM4gC+ToebTF9zPFld\njd0B0XsQCx10puxai8Fb6g5T2loQS6ki9v5X0AeqIb3L+4xVeKi505ddLQQG\nR2Ef\r\n=aF31\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.105b15b96.0_1619646315820_0.2439943184845086","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/card","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7852f19eb9d9bcc2c9ecf00422122f08d28c14fc","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.6e20259e3.0.tgz","fileCount":19,"integrity":"sha512-Rz2Wv6wxwv3vPjIeQPk7Lgxnzar39hagZgUcjPzF0d6PzAteaZoSVZEBZsquS5J1jzvKkCkZrH8M2G88lxS/cQ==","signatures":[{"sig":"MEYCIQCbbqzh+NRKefmOw5ZaWnZ66DdR+IixIetSL+V6BP5VmQIhAMxvA1G1wdVKDz/YEGPbMKlyrNnsoxzBIDc9DNgTu+fS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidh1CRA9TVsSAnZWagAAdcUP/0lF3DhMaZqHBUTXqP1O\nv7FInjEf1ylRA9LD031R3m0q+tpSjg3F3LAOPmSL+qDl4n7JRCX/anqvXpIa\noFSpNFrIbfWstqE1s+eE01LnLZIXhvBoBofYR3Frs7LKY5+2q6bqhp7273T+\nXefk3xvwP458Yk48cWgjVhjpFzUJdc9wEsflsfHOxJrkhXyu8WYtTifB757M\nozs0NUTofyKqOdo9qrPXbrClqJr/IadlFEMgQjo10FDu8rtvM8x4vukX4sXV\nH6V3dkUnhkaypECexdm79oyiw2lx51O1s4pQKtGjxK5rMXbbHeY2SIr6P93j\ny3oxAYZ8aLw/pD0Y4K4u8ECQAseC2uK1Wvw1EsiGjEeTaJ3nfr26vcrwevdc\ngBuY7fiOeloNrdtdX5QY1TjVYSPyHh+nwQf1hx+kkLPqwCYiVNCjfhcNK+8O\nfiI7vYVnRfRnXDH41Mb/YRiCjEkRw9zRir4/NA7EQwsAjfi2i+fLJW5+Vsv2\nfgtsoWCHR8NJjvGg8iRs9d5IHmBbbx8h2aVmQ1FmRJ6abRt7c22alv+6pCev\nY+mVFOqc+9aIgrxTyfwEW7+RkMzMQKBJ/mJLroxQ+2iaqQCJ+ExqvE8mVDFB\nAGJZct6vnI7+cmRgQX7Bu2bpQpBrhG28CCEKk0qXdPcv2180vxRMv00tu7X8\noo3n\r\n=IHjK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.6e20259e3.0_1619646581484_0.5750373722650857","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/card","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a648e07b2dab98b0a05061a12212c9475e6136d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.0f79a5d74.0.tgz","fileCount":19,"integrity":"sha512-/91QDCXU6lQq/0YCPBO5jz8PCxP/pqbY+bEICmBEugtWmZFQF0jD8WfbeDBlF2XM6x7udCXGEQ4dUjCSY5Qnjg==","signatures":[{"sig":"MEUCIQCiqKtuwT/SuN7/u2PIrQQ8Oa0U9OsP2YyVMTz4jpAQ1AIgVea338s1uSZtLBJKsMceO9ieZElGfv1EKXfMiF4rHuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieUPCRA9TVsSAnZWagAA9XsQAKGNcsksLygPoVDm94ES\nZSEnbtWJkYQZmMy4TRifLhMy8lVVxngqTdygNpZZxvD+0+WX3mZL2HzhT6Xc\nCJvE2GOK7DMfNOgY7sA7rW0+CfozOUP5865Z0bSIeREWMPWJUGrB+BVQnjDt\n1pS7CU6+W/juz/CjuM2a62CJl8Suzu0zIcTG5BkvWHOmCt/nJe4qpODfwvIJ\njBG/lrs9VUdwiLbXh2sL16TkJzo6/5pTLoR2VCrf8SVB+bYuGTHpzC4NrO8G\n1+l311W1awhaCB9bjYrB+ZALUIjmc5LpDcdNtrVlYbtKVVikfzz5PRznuxvB\nE9yqNiYMM4n9uR0Q6+z9jAPh5ooZm3018MBTJsJy8jXl6hOyNXb++nRONGeJ\n23WzJ41B7V5WFiJW5OmNV8Jt07CFcymwXcKqS2VQBOr2BunEpABmwCupej4U\nzj2MMSNYwcI7l+Ejby8gw5O04D2uxAT2AtxywP9QCeNuACLG2xo/l6Dox5ua\nqQUbs4SAW4diZcDt396qvUjUyyRymWhm+/mii+AyxR76gi7R7ENJHnM+B6h7\nVQAcI2f0v4eXWkUjW7uBcpDEtMFayhiMk8EbhPDXMg+uhaoJ1VmRiw63S/bo\nWN5UjbEMqMKvjqF0ABNG9/68wcMYQTxxNjWAw5dY/LJzhoAsRXP59oYiZ3ma\ni/sN\r\n=xbo1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.0f79a5d74.0_1619649807486_0.020950227435511337","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/card","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4321669fcbaebaa4ef2c10bcbe97e475d126bdd","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.84f3db9ed.0.tgz","fileCount":19,"integrity":"sha512-7b2NJR3eAi9GcuQ2LhM//O5tXTALHhhQzzwKKThlzwvvJ6uO9CI1D5ED3jj4xHscdCBBI5GGCw77xN6Gz4Ah4g==","signatures":[{"sig":"MEUCIQDCV4jjX3h8fKr7GuR9k+NYphDEgCLYyyhoaCww9kxSGAIgfkycnxKXCo/LJsf6zShKYcZ/hSLZw4DQ50bbdAnHuuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisA1CRA9TVsSAnZWagAAue0QAJAwrRRUwYQIf28ZVepa\njpkjX84p/0zf1CWiDMtOTXyNc6jk6/hVkbtRK/MEVQ3W1aqLop6WdpwtfKYV\nf76FBfYb0QoUAUVABHrXilPwoT3eBL7TmrPS0HYtvwkgaVaBXMJbJkLJ01vw\nZ/TMgwu8Bf9qanY4aa+NEn0GJ9GNPghf+XsbzfdK6X77MQqWtDvw1oiG3xG1\ndaAbYQi7J5PynpDnHxQaAHMlDSsWIXaJfdmaGLXlsbPvcLa1s1XghTBIUpDa\nbv9qAS60ZiWqLYdnivOix3lK+quL7PlPmulnYTvoaNeCbGAOVLhLuCJKRJci\nWOKaNiB+xHJbEdOyJwoOnVnmBvPrkOaPIV6LPAuPjluun+kw4lcrw8r8+v/a\n8D+FI9QDy5ubDUMoGg6IVE8Vbi/4D+fi1NwdkYvZZfk0UFkaiV4haKD9Vv0j\nvGvaIXOjVfD7/BDNKOl+sDDv1zUUldGqJWYeVru1glDo7DxZ1PqidXSStR8v\nKfcTfUqU5Q6LPO9HxeyuXVzeKyMycHzF6FB/6DGeiWaKBbDzZykT3/eld1xy\na4JEwGat22P8nhB2rl/Rvf9fdswVfaFVPC6dB/ZMbIZJRWyUr3nS7beEPDhS\nTD4OH7IWvC93kCQXw0o4JHokypmIeG2L4SmoTarRHfpAHnXy9WbDWYJjJgYq\n0ADu\r\n=HhVt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.84f3db9ed.0_1619705908665_0.6691406751514608","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/card","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"321bed326fb46ab5e222ceb22281a2352ba34e1a","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8fc29273c.0.tgz","fileCount":19,"integrity":"sha512-fzrTbwZUytRU36cjNWOPwHuLepI7p7MTLOMsiF2UlbDslA+6qO53xMHBoCLhE5n8FUpTObhSUyKIa3st48z4Yg==","signatures":[{"sig":"MEUCIAy5SBT3cv8+FtObnm7MS9IbKoOgTC3eJ+RF+fKvQ7czAiEA8lW4gABibLheavRuWsTFkEvX7ie+P65RxzI1SxTLqQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyP+CRA9TVsSAnZWagAAYXEP/3wf4wu5Ic6tRfKFnB8o\nc72pRvZ5fqETOffZZ/bSSwh+5CUfk8rMGOg7xsupKY755PCvgJo9LHM/bzRG\nuAGDfb/lqIxVuljxt+yr+KDeR+//QF+AINenJaYU9pMHfHGRyljp9BrtJao1\n1qVc7qPHDnVJHdh1M2zawOykqizgzMijp34G/YwWyk7TY3d0tB0L+p3P0TYI\nbP64f3XzFzsnQizM0RM8/Pwpy1EEWTsgXj/L6guS0/nsn/APX5fjwNKbg3ZV\ngDvFhN/nsL2EHkQCFZAiND0YilDextbtExtF1WnjymHNlI0BGftJ8JbGyuCR\nl6Xfh5/V5sCwhcZiR1mUJC/d4e9PGXU/jPPp9C725s/XT4iNnKKEIMTH41dJ\nuOR3/LWvBZYuEjMVTSHkynmbfMAYA8I0Jad0YlooUOjZ51hNUso9kdGunvq7\n3nlBk5klBo65amylK4X6wt3RKOS6G44ZJyHJ7eysCIqWVrCBc6D+laGj1aaC\nNDBly72zXdRFR23l0BTTQk/mNGLicCD1oTp+QDVgTOvsLTWGNOcuwlC3j+RU\npFz7WHy5pjjTM3Z4ozEovo445Mw2GCWVI7+g0Kfb+Nez5yzHIaoCyjrVc09m\nDEoZGsBSeMq/QR7mNkyJA8WOQH1m5SbVO8kD6fHweY8aEamE8EeGu5IHt4JD\nn1Io\r\n=/TeK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8fc29273c.0_1619731453673_0.7611824696780058","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/card","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c86fbffdc22c58ca4881b94e6b94e302cacb67a4","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.c50d20bab.0.tgz","fileCount":19,"integrity":"sha512-JxeUu6Ynp0VMbNDbmPfkaDdVpTbjx4XrOpnOrmpEu6gaQbrdSisL5I6eF/ac35rFNnQvGMKZ1vjhwLQRzmv2/Q==","signatures":[{"sig":"MEUCIBxfRD59U2JH+Y7fGEkghlCxZOycDKs92O4lk08PIw7nAiEA65mC/CxkfuhweNwunFouZ39zUM/SZG5REuoOD5MKSro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizsGCRA9TVsSAnZWagAAB3kP/jJJPlzr4gUIO1DqvrB3\nu/DWtFIed7AshrSFn2/GkW+vvKUZP/FhPC7iXi3cfcpmYJBbult0iXsNywTn\nntiJ7lqlZfUpYtF7qt1EhNpuoU6Gd000rcPdVymjvgmDc5wroeoXKdwqliKX\nlT/M0b4/8qEjHsS3NNUx3TD+zmUq9fCD14RIW3mAWOeJfnENADuZIWqhdy46\nYrQWeVdLfEAoATUIYzCSKwbCbklRacbam8HP4n698MycenUONrBspMrgH1hE\nH/TJOrJAYBayNQ8h1KxnsL6wUnKujtluQpVozk6D2bjt6NIjLdXFdqwSMnGi\nX5XzMQ1OqLV279NRTx5x0qNzHFb4MlLT184uBbcdoURo1qu07qYG4WvIUbS6\n02dgmFc0lCEgqJ8eqvgit947kwsIgGhNE9Clt+QZJ2FVAJEQEYmBwAFz5535\nYEnjl1mbhpotQ9CbXVgzQD2TaaNOIGl4s1lEUMSy2SOLnsf5WIS1VcPeWGWF\nUnMoj4Y9/BMSPHL5FExFK2+4a6oIHcNYpDKU2ay6HjRL1HnaY7dyQIGbG6Ut\n0i18dLBPhx77JR2KR9+le6c2YYNtjlUT/QorEt6J0v06jqPiZHc57z7WoG+G\nLcIXXQrDzyA0NLbJbg25ZX7l6WD0YwBaEAkyFlisrbSNUn38Xr9R/LqLeLUQ\n2ZKe\r\n=xT+p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.c50d20bab.0_1619737350119_0.19978276196449118","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/card","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46a2b0e9b6162962a249bd759f22b3de7b76d502","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.474836ad0.0.tgz","fileCount":19,"integrity":"sha512-g9MV32E2Df10z0lWy3HjhXDtQ9c1egsGknLr2/+j7FtTLDf2jF0Md3JxtFUxwkuoe49bebrY3L00VKFTtpsp4g==","signatures":[{"sig":"MEYCIQDTHmfP3spiomThU4B8YZ5iqwtljlGi1WBzCqJKuAOO6QIhALLDa2qR8GXcsaPZxZvoiVANmw+JjyiLvG1LEm5gw/+j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0jCRA9TVsSAnZWagAAIukP/j2vujic8o2HQZiCfHEM\nKnWVsCXITj40H1WiVLjp7ilgSLwVlhYoNoqEolxB2qQNR3QNdZV3mgqSKSG2\nDdN8bzCDzpX5y+PxG4uU6TMgAKXKkXhWQztWWVRv/afFk1sNhE4owX5h1MqS\nWmzzIYQHv2vZuExTPfM0yjwFBhylb0LrLyKFqoBrsVyJoPG38CCT1E3OcBLj\nv6n91KYAGRGILGvMz2WVJ3ani4RMKaop2OA3eT2pdDTEABZXmzEgtZiOKrCB\nqXdqXBYIPFz4gt9Ov116n6RkDRqAy79uqpFvaEyHwaNS36mECrX2XDGlEXUZ\ntXeXdKJKgabr6YvjwtPFxsDGTzIH4Ti1HMpx01r7ZybiolhYu/I4DtqodUvq\nHLUONn0n0RSyknzU+mNWfHg/0YEnA34q9o+CngYelAi0nyxGTZVjsC0lWGC6\nsFHbV1FH/4qWC88kg5TRJBddxN+AwhGavClryKrttE+IEQniwzdvyoA8UI3f\nkoWnHQ3gWyH37/443j0aqoG01WDIMLw1A5LSunaQgxiG8aLasKgwU5jtPjXS\npYbkfOHwfPCNmMeeqFat2R7xXXftGwndexmWZbLRlkx9bE5SPJbKoXtfE0E0\nY/m/Hmba9CuNR/fCRKuIWyjyIMtNardjLFbJxqIGJSlaiMG3Y5l4VTpL6Yq0\nqBSY\r\n=Sahq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/shape":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.474836ad0.0_1619840291020_0.4203918681951426","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/card","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f19574c4f30ab007e300ec8b8232a60ecbf608ad","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.f5ad92287.0.tgz","fileCount":19,"integrity":"sha512-o54xlAsQRarmHF3/3EKz0s2MWsdpaOqgWEgoG+EARD6z5iBvoVP2Vo7hONhWwz6jHjiLWoSHuL+4EdBjX0GQjg==","signatures":[{"sig":"MEUCIGOPlz5jjFDhHQhBWpPDVOjSrgtxAi2PE8thpm+KyqAYAiEAgBB2CseidpMdWw/kfHJ4LVPXpuw28S1tZCub6M59DGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD91CRA9TVsSAnZWagAAIigQAIF7FTWcGwKa5zcZBk8D\nftIsqplRkBIOw/r65AXYDz77qMK/HQ4TD/cPAJLfbb8oYfQbBssv2PfaNmQb\nJmW4yhJ4DIVMCmy40NrC9sehByBHxHFIp+kQtxF+Cez/o7OfhNQCtmkAsJVy\nbfcNEFGyreqDkErypDfWB8EDpFYM81JIlE19q6Ctap0bqvDNM+9J9b1HVGbK\n6sWbB1b9pjicq7KQ6a1iE/ndUCCfteH7XnpPn0Mf54cg6ZvwIdqaduLZ0I2G\nhUXRCvagIcLt1VPG6GtlrOD/jmqAwK2DAr19qBK63M6FahzOoYumM81/VID1\nAJXdyime5OAvh2msMn8rflx3PuuCTfRVqFXH/43zJQRgN90Wi12oKOXhjUm3\nijBKQCbC49WCo+mZSB8ZpSanatLc6VMLzdyaAIeO0ZEyYdiSoFRHiCN0Qzdt\n/Yt48KmkkXHm52s39uSMmuJuu2RQ5GlAeze2gbYw4GVH/Mom7ttF3+Rv6uXq\nzgQKKPjvDvRf0p0wjF5gLZOF7j8zih5TxZ7AxDxfJSPNbnZCcyJfTt8z7cgv\np9W5v1ESxQ84pKuQ2ZgxjLSrRK0RlDmdxrVMtxu56c3+xhFztPhRv4dgGxxC\nLzWN4MLmqdZOV/1cszbwS5ESulFNvBkbIztix631u0O92zGs1iqRHSbRbx5c\nW3S0\r\n=0gy4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.f5ad92287.0_1620066164848_0.23691771312448084","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/card","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f5cebfe1df6fc127d1a3ca793fcc1483dcb108f","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.af453daf8.0.tgz","fileCount":19,"integrity":"sha512-fq51SGfX1PR+o195UnDFsQ4j1Ti3VHSnVskLV/kmFVN6yIGreCkoqABGVE9uAOUdjzclQftAf4AIG9G4014JKA==","signatures":[{"sig":"MEUCIHdPM5c8inOPcHpJZerz6V/WWCAAm75tp4KlwO2ScThuAiEAn180WR8aFT8d5X3wIfSI+PgFFBbCkSwDoVhPXucwyFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEbKCRA9TVsSAnZWagAAPkMP/0JAZf/Ea3tTEZ1Less1\nt+q5oOWkjdscsI/A34dPAw44njPeupaYYAgtM+nElN4pxKb/r0n+D6Zq5OjZ\ngppLfUueULtjcg2rwxXU6dE0YUljv0ldQPLlLGIZko1+9A1/AtuEJwN1VfWD\nGdVbhlUYdNa77RNt1XZiJ+hBh8s1Tf3NXSY38PHLWvhHojx0bKnIJXwZybJ/\nwr2pecO7FibYt7Ik2iie+iBzfYMrhmV8ys5WD6FNVUyt5KmlKeBZMM4eKlEU\nneHW3fbpuPn7LvmU1Fr3f8JlKO1S92CMoG06TB6bAA4yVvNz3XUyb92R9AxR\nLYzcD9xjFBYHfLWFPM1acrzulBj5s8tTxxrdBMMYa2Uq1stJxJEzvgX80YF9\nqdbXkRzVgSbBnN/mPzUwF/PUKQUMUhI7K8LAALp6GyEJFvDV0+/IrNFBsvr2\nd9hc8QVspO3N5Y6eXW0mEcT3tSWJmLIBm5hwXYMOCY9rU5FaOcvb579HftG3\nULlmyzIkqYvdtGuWiMbe9qj/RkJcTniOMS/y5dV3NUx1PcGtI+5PhfYzvN8Y\nqc8SwNQLgOMXBjo2UDpmKuQ3iXAtUacD1oaqx/e7NxQpRRrx0/G4JW42wtmH\nQ9/NNqKl1OIyxK7W5E/ehwFJGap8hXnC2W3EQ6LvFr+br+0K1ypbBrEjF43J\nw/WP\r\n=sUFQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.af453daf8.0_1620068042309_0.3864930917346505","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/card","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ddf50b75752622676ebbeadeb84aac954e2edbd","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.1f1918c24.0.tgz","fileCount":19,"integrity":"sha512-gZ1DDqn40lkhA30lW+UTCExRl7A2w/m7nxHlYW8sR0Nq/cF/vOsB78hH8vVCkIUXnKqwSej2cihasXwBnTdStg==","signatures":[{"sig":"MEQCIDp6wxWCKG1MKPDsJUt9ESbMPKZ9eP2uN9Eu+m3lEr5HAiBQOzNOL+X4YoOwSpcXi7M9N8JMc3JGA6YLXMW1vVAmIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE2WCRA9TVsSAnZWagAAktQP/2jrFX00go4NlYJ56oTF\nWTss+ebzF0RoMEgmLUHdj70E5KPbY9DP9IGnOdkyojsx2WMZ66hPIFWAnFBU\n7WBqkpRtAtfKkwQhg7sSeIrnGug/IALa7D7gVVbLpWWqMR9uPyYX8bg3J4bo\nehKO/qgmZ36tL4wWossJYW8qRIry0iheV8JQ2WPVNM2SPgVYC+N1VSCYvVX8\ndfWxR4voULXRZXvd8O422MeeHh/D9LOfhFU/O/AunnWKhoUsK92eC0Y2jooK\nabFeAUwI/5KvmYTG8fk4W7WwK632KCHiKOXjxdFMhWl3irNz3X8XQP+diqhk\nQDe6jWdckPWRPp5H88d6pjZxsRADDyVxnJFoZTBVwOdO1VrR82pJlMuzTnT7\nV7brBZXgM3Z9afhGnaTcxkRhwkvoVeBn/O7v78HjBnuuCGzMlKpFSqQXrboV\nQtjNwoUgegRgG1kyHuzpedZM6AsEYM9jjEb+xV/lfgToJEQkBzyiMhoAl85f\ndkMmCRv1NTqfN9J1QD/BjcEvchln3/5OEe5VbwW+CiYigKkD/E4r7qJhcOAG\nhJLu9WvqFns4RTNgJ8KzorgVhukVhRcD5gzBxz6Y5g+JX8DMUGd2ZAkOZn9l\neC8n4CAF3tlANWx9eAKiY3sx+6mbvL/lW8Lx+x0lHw6WdpJfcjiFP3AXNkEn\nQ8iY\r\n=AWGU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.1f1918c24.0_1620069782011_0.628491616223138","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/card","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43a28f5a39c30973ede2abc7f22a7ca4b1c489a9","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.33148231f.0.tgz","fileCount":19,"integrity":"sha512-+BwoAclfRqQa/bUIziE6LRsLRUPcF4iCI3fKspXp5t+5R6GhOzPq0EU/LCOXMV/egUHKYgJPIdNjtSdaVm3PQg==","signatures":[{"sig":"MEUCIQCpb1BLIObKN8okLKj2N3DsKTZLKjH0FRULu6vSK+63rAIgVJp8XzCg+gUyigUb9Jng9t4HPUlNXyMF4MUCHE4Upcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFkCRA9TVsSAnZWagAApaUP/iXYJSZ5pg7cfaI6zAt1\nKTDRtsMppB27WgZR2010H7TgQAmcLcqH4Xr598ZRC5/ha6YVUYtir560RC8K\nvKKWc7O9MSpQaKRVGUlqSaqvQCTKCEIksIYAPvPChfWaWIkI/XG1tSV7YVZ5\nk6t8MKSS93C4+ySBoZYk8+5ctxethVad2z2O00Moh7wMLahU4hPiliINzh6b\nr2qZf+L8uNceTjyGcr5s14q/gydldhX2Lcy+S4IEtx6RloD7sjIAaEGB/fLK\nn+R8M+FVP2e9iPr4kH1hjFZolCaWSxcVBETSNpbvYvgA7sE4UosKIBijuQFd\nI+S1rug/Jsk+YlQfqVxsPQAg1Ik23YDtXsZ28kUSL7lpxwe/+yHgGGa10O4i\n84rQJ41LnAlDuL4IjTHniKJcMCdaLR3umi/4lHvzmY0r5hCV4WZKsHVGABqY\n5hXIIxOBkOLP0oFxSMmLhhLH//mXwsJBcyMcpDQAEOjtUq7mfcNwBKzAiTOW\nkLMX3SH8rCVngZwpIwG96Z+7RryVbFt8BGqq1X6u4Bs189tKyEAFwsZHqPuf\nHeW7wiE5EHEDyZ4wCZ/l9WGdke4cgQHE2n8IxRDKiaQL4+vYpOh5GMWHeWAb\nKuJiaZyS6VL/qUZ6ssBi8Owz/IdZbcWfqNtYIIjoSAHgfA5Ycslpn3ShLScE\n+vkc\r\n=JLI1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.33148231f.0_1620070755777_0.19164159391689473","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/card","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"946a1f80455060c3d907b34a9d3f9b116677de76","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.06b76fa74.0.tgz","fileCount":19,"integrity":"sha512-3zZeJiDgIiOJf9Z+ARvOcu3FDoYLOu6BZqgasTL0Qb877x1bwUlhAL8jZRteHeC2a+yBY/s9mzxQjGO7jVd8SQ==","signatures":[{"sig":"MEYCIQCJz6ugnmPa9IXo/DAAlXfObySawnXY74PfXDShD01XpQIhANJRxBoDMEIGafH7osisS+HGLfUxe9P5t22F8VH7B1WX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMRCRA9TVsSAnZWagAAq2UP/RPNmbsfcXLoqoYCfUf0\nf7LLTQ9KmOJh95W/MJ7IZcZZW2z93+soyHwQAX77D+MqclvcwyP8IK2BbTIk\ntklbe191lRJi+gaQy43Q5/2MA72esHTyD9ymszXWIZPnYtciQAOPPXE+wcZX\niYRArSeC1qMbA/J6sAawxrqwlsDclvDwRob6SEX7dmqfh9bMAWrM6fRK6iYs\nz/gxzdHcmNnn2Y9uaVrdBY8Tza6JrOPypXQUqoiVGyGZwraLiaEeoppnKgJ5\nRiSZmIwoqpbnUeTy0ZEg5pLhLnF+Ubb4tV7991jr2Mk8pozKWkhgPvFs69KV\n/IcDpARLkKhX/wA1m8x7jYXbeIRBbGccWOa6u9+sOODKzWwgFwM+NsiZIXp+\n0sTKbLEp8989k0IgluqiDBsy2hzK9J+ec8ev7dy253PXiXgKNJE2A2IMmw45\nHL/CnOiycPT59OQsgvcM+wCcCJLm5u4K2t1+uKdgUgL9SFisFe3OGH2mLoLa\n4xnUPrXz3UsUtNjCN0vdzJgEzwJV4sdsb0k0FNXUmjVKmPnw5SUIqmuRnfy8\nZMyzDDtkGcXs+gGYFWTNzCgHCUM5ZjtXvNzdx974p67WZNB0XtxHCGXv1OlU\npFF0W7aLJ3rXQhsZ4UqJPWtXjbXfPv2HYC1PAYNnZLulgG6BH3dGtCUAut/W\nTY0A\r\n=yegw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.06b76fa74.0_1620071184566_0.17318313853159184","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/card","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e88109e1dcb71549a70fece828b010764be16a68","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.7c5000473.0.tgz","fileCount":19,"integrity":"sha512-jZPty51fU9alJSaZkiaQWaNTpgzrJ7MVAkOf9qW2KWK/9Zi6Nn1DtegacPb82/BN8aeG8dE48Hx4Q9Hfzv1Nyg==","signatures":[{"sig":"MEUCIQDbEfG9uqi914r4CW0lmuh0ZbnVHFLxzDHh8T1ivBVMqgIgA336A6A69+9ZdgH+BszY/f3d9P2sB9rjNUH/Oj8TyJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxFCRA9TVsSAnZWagAA6I0P/R4wwWB2dlE7K1Bflb4p\nYcWaqGHDeJdnt2ZOvU1EoJ9ljR4YbySOwM0AFVId3qE4aXmCZ3kjdYuQ88rK\nHKA1c9taaX0fY3QkQxLBGEwKVSwk4B1yldlAGpzPaUE9TI9FrkLchLD/Hy0I\ng7lgwGxzhIVbvPP64BH6ftmLh08k3KhirPQbf5/CCUUNUOvs2FdxBX+A1w7f\n7sRnt1uttary1TwXC9nkteSX8ln2d+qIizoq7izVIeYqXzCB/gyCGI4LZcZA\nptvyVAXP06swBwpiFAWp+Q6n8u6h/vTcpV64zR/IYwuH9xJNzp6v58ZiTfXF\nnZLuwkqtuZMtx3BRc5yMTYL/HoFNmgN2dd6n4NLLln3W3MfEkl/l/jhakco6\nC3VRA/Z2iQ3UG1q89qkKLI7KHJnYVuUGhrrHkhchlLLDV8gfD6a0wUITGx1w\nJwvChKsQc7yhozw9SxOX3kMW3ZLgSZ+IUNT27uBR0LRl6nOnE3Wbw7YNurbw\nab52VqmwqUZVx4A5CKttrpeaGkrAVCnm9fW97kxnGEnZZBc9zYo1KqxTglBN\nRgf51JNQhDbybgX8Dof6ILWlagI27DjVTTb00/jAeukaJ2p/0nXAkHx4nOBS\nYzJFKKMGv44JlMVAHtlnsyhsfghBMqwfExYYJCkCkU+puRDSIMbNpGGpchpD\n6H5C\r\n=uUjZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.7c5000473.0_1620081732601_0.2913965666503697","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/card","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0c2d6df1fe564b587b732c9df8bfaf9f2ee3ae9","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.de997644b.0.tgz","fileCount":19,"integrity":"sha512-VlY+rEybUblzr6F5e5nkK+HYjOJl0DnrXtxnDkZ7eac/0BGsgGJ5dU2GOTio419ic0LuQDkGCyC0U4l5O41cnw==","signatures":[{"sig":"MEUCIChRjfLxpcqOk5/I9GjiWBF48Q8iIQc6Z1UD6cQADIG7AiEAn/XPQ9rXiFJ2C/PU2klIgLrIbBkHUCuJDAO8AJChvpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYRNCRA9TVsSAnZWagAAqyIP/jvgHP84OhucNHePfbZN\noWvnRU3c4mRGsMhoTV4CExIugbCSfRKpqSzyd9jTTIEOHZDDE4h/tL2s5/q1\n34yJYFVKFtImKJ5j53p5y/GsMHNa6bJQa7vkF2+dzWK9S28sdsOV33IJy6vj\n882sBKTlHn9wqVy7EbQKshDgKHyFmE9wQy+er3xCf6exEQQEND95xMej3DLY\nKcyuotDJvS5jIC3HyuYQ4N4LaRm6J04nntM2j8H9uKG19QE5lC4OxocMHIFr\nbwmrBb+iaqZdcr15e1ykdr3Xv0d/SwucVYgj7aweEGcY1qpz+u2UJcgpW3RG\n0tsllc/w/oIzMklCuTZPZaujQY1IWCzx2sPsknEiOM/ijEeNnv05ccJmPGqC\n6c3RPbPdo94/6KiB1Y9w4mVZy1fTKgeviNLobe8RKGq01UVY31WQNXLZ2jpt\n0D0tBfiAziUCTc+6rgtA6hRRW+iNMcTUiHyY+FPVoRG26SZrgVYd0TeTlxPi\nDR5Nj4/85wdYF6yodMd6sfqMrXUOYJVA8IJWTDvn6VyMU5f/314jAwzSHW0F\ncEOjbd2rqSw2isZ9s9XTXQ6pk0VBjDtCbyMdpWrYZTPRFAu0exw18OEYszUf\neEYbGQwdN0klNo1pejqUqjqL3b+B/Om7bCXmSjlYcV67OwJSC6vLfT/S3llW\nvqDV\r\n=zJbn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.de997644b.0_1620149325345_0.6272703688292489","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/card","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55335c12289332212f85e825f1cf0f3130f5658f","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":19,"integrity":"sha512-hqLWbWRIpkrOhfWJEmcVszB8rM/ZQoB8LB0SnDydrAzG8FgSfYOSo6O/7A3+DrpYNCimNsm4OJyX/wmpLdPvDw==","signatures":[{"sig":"MEYCIQCCr6GncGOHpSFc+gL5qtsmVsv5o9XxIQ7jFkI0VrIQswIhANKTW9Qow3tV8ZD8C1WZK7a8k9dZlxn6T5/JerNKA4vS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYqYCRA9TVsSAnZWagAAv1AQAJL3T9Qmh4r8IyGr3Ci2\nOe2BGNMUBA1Z5Hcu3w1nWG2O8qsHo7HxcpON0IHejK0MGsebjads9dD6V2PB\nNIIWQSZAKka0o/buW3sJ32RN4gT7H8DmxrARvMgOevILjmFiq2b3Es2w9tuN\nz5+7j/xbO9Eyqd3BtypJ3YV8cO/Y2QmhnW8WlRuDmGVCy4AMs8W6hXEIO9Aj\nE0NHwrz9busmb8hkiiIt6ePmjm5Ulb6RNsPTw7LvKHAwQioDYUsL2uuHfQlw\na0w5a2V4Lqc1BPA2WAewFUEPt0pLRsxYFLMijpyBMyxqIFG/kLLboIWabbgL\nApihas9L7s0Nij1CAIC5T/+uT1648m+M1ioKMzroKA/swEYbvc9AAKRp6Mvu\nnmpD1Xgr6osL3rM6m74rPwyzQGqQAdJhPZNiCXu1XRoYNX2IvUhCOR2ccs26\nx5PaViK/QzeMWWYpExtb/rQM0E2ANSwUiQY4uCQYlp38fXCrNUr4gxyrFRCe\npvVcW95Awriek1T1PBDI5QQycNwKdvPV6LysHKuP2rzcRpkh9dyVaXxB5hQK\nV8LsFAiFkm6GjR6zr+YMudd8CiSqTRtxY8Lunzld4CQQdV53HA5IO3Df2N3A\n2u57tO7Ofj8Bu3bguPueJvfmdDKfnbiOE9T29glPehuV7zsr8J4AmzWlvVsk\nv0m9\r\n=t/Eh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d4d7f1cc2.0_1620150936114_0.1778987364153417","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/card","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92d826060f6225bab155b26b9a1eab3a51119f05","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.be999eb08.0.tgz","fileCount":19,"integrity":"sha512-Sooftp+4dsUMy8ugbwZmLcBFY3jGqxX0Y3t6JUjG/9l2W/kFAcLosI/DPVkQ5jDmQvHvfWDNi2UVZHTRLqAJyA==","signatures":[{"sig":"MEYCIQCNLPAMZ59WNlwWEtnqHgSVxXQtFmXIy4zSOFuZUIvOcQIhAOzYndDvivol1I1InIT2rkiwNRWRa5iLR4rFBTFuxyUh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYvSCRA9TVsSAnZWagAAtHYQAIpYPhaMJ1+LaqRgpZeE\nBNeFavDC/EjpghxiTQU+9PjWWHSupc+emPqFG1iF+VEW8lqHlhFj1r4j57s8\nE6mSq15T/+gPXyhF1sF56R6ag3wDa6NCnswfG/RM0LcdUfnQ6iehqB6KPrmE\nnYc5kEHvT9aNGcEXatz8A93Yqrmi0EQ6FzFVulcgxwkPVqf+Lj50BPOquYkM\ngHcKS/0r32whKPNu6lvClMgZbKjqa1fsTAyNBb2JAIjDx0gp/0b6g19lIFZw\nASNz/tdrzJrGO9SNPpUHHQ0IOLyQYJp1VbroacNf666lMXwGXX8n1jztcoMJ\np6M6HNoylCkZMJcsnX+CD6X3w+9H34g8zjySmwhKF6jvHGZByS7hgmVlsr0t\ns9ftxRAHhdTqLbiWdXk1NxAlH7TANNMZe8gNJPJJ5LkHrraLAeCQWgvpWjyn\nDHvyNyXmhdKJX/NuCTMvJcggBqGj7WiesIZar/kDTQYK89skLM1Jmc4KIB5c\nhSCz+bZ1JgcPTC1dFX3iVYnp/H18oe1Su3kRWImiNdg7ise9AIG9DNW2qXCC\n15C6vpeqB1bD1fYHf1kzpLMhKHGc+pd9+w0EfQbxRnfTtsRGjy9ha5zEPMpi\ngNClpZkTHZjovO1PTEr0/5MmntefJSUr4tZ8hMhDISveWTnPp714P8rfoNGc\nrxKl\r\n=REY8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/shape":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.be999eb08.0_1620151249543_0.8895593074802268","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/card","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb91b56ead53575120a3732c6a677388eb42c1f3","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.eda1705fc.0.tgz","fileCount":19,"integrity":"sha512-Bkefae2iXINHd65gVNZDCr582fAhF7UCwo8Hff7lviXXJiBG6Fd5O3z2kaBShSpVqy7R8HSU5RBea32sehAzkg==","signatures":[{"sig":"MEUCIBdZeajzuQ2ZuWULdGImGBmdvv5MsIvrQonbJDF6206fAiEAwxD5vwLNKNRF3tkcckYJ/WP9vwA2Mh955j2g7PZAJnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxDCRA9TVsSAnZWagAAf7oP/1fXC0RvBCjrA0CcyIdt\noe2oLLzLYHMETsOjbsvG3TtJGbacYX99lIjrjHsR7hyscePCvAr5OP0XjH08\nYJeuoM/B3H+cpW1isdHGBi6TItCDRoAJCHVifSbZWgZk6PiTspnTazFQAp55\nCHZ6DJOsz2MHg/XIdIacNodLbk1/3tUn1Q/TBFh/6lm3FdjXHM0p+Vr9O11i\nvVGig+QpqN4+KsvCC1+IgZDsiTCS1gaJMbqCto8FfRzx6Ot7KhZETXOFkSPb\nAO/U3LSOC+56MMQg0Burt2sN2uAX7NjtX6SiPWIdavt11KrONYdyXL+KP1xY\nfYnXUV5laIRUh7CCR/Iwjzmui+CeVGDD2ZXdBTTb57HI6MZ8nhe5y9azHcs1\nQWy38NSwMIrWdwvGcJyYtUkFFgbxa/AcCMLYxaePmcWE5HEWBOaXs7uJW26m\njMv5VY0mvRYUhx7YZDZFYJqlFGQlB1pVi+aDND3qcpCNVpoAGAtbzGfRvOns\n0PuOs3ZdnG3Fps3tqfaMRXFuclsUT7A50ODaXk5Je1mkOjBHyo7f6IFgj5jP\n7ushfHhi8/+693lfO4zkzGu44llCknpeyCJCXRBldiEPrmXikZIctbLij0N3\nHYReItUCXcAYAlygDoZfVcbFWYaAYP6Je/zF63q7gDnPeLgf+rWC8erFgyVY\naVrn\r\n=DSeI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.eda1705fc.0_1620155459245_0.8289159782565665","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/card","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0be9b138dd6929a46d662720de2eb793f1624bda","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.718c90178.0.tgz","fileCount":19,"integrity":"sha512-uyz6JR10X/nBaHWBc+w0NENa25+ShPppUvUBr1TxfK4hWqUgg5VGQGKlyBHUsN3alVLsMswKmq+KYw1a9ta8zg==","signatures":[{"sig":"MEYCIQCRKJCjVV0s8fNTwoSP6PaHLxrbkK0f+JHt0W9n8VlwUQIhANfuWzjRiYxYtGQsGXwBk0JyEyqG5t7av1/bO3pP7WtQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaBPCRA9TVsSAnZWagAAZ5IP/RdQU5QEtsCqsIwX6D/B\nZzHd5OP1SKTcOmV3n5HUnuAvJYQdU8CXMSJ7RB4SAOyjO8JzzZkOdyYLgw7b\nBvCOF6B5Hmz0VTcENvbpyfLhW09l1o1cA4zf6tnFW2HXGiubOGIw/XfuqwH/\ngRDe6qGOfanpeiqLbSoFkR5oqkxcKOO14XoUoCyjLlq+cD5RR9qYjJbxdavx\nIsOc3Do9nGwu93qBgCUbRmeIN85Rtf3dUEXXSri85V/Y596ZJ0IVdz+ESjik\n8Alo1NLlQvODkVFH7V8ixNKQhKzdry3TWUdAuctaVYUWuzknvz1KUOKmIkhy\niTivNC30PZH+uIPTFsWvqaPL1FKvYjpKyQi/WUwrUy+C1IBG4RTYoluq9A3V\nd5PgG7RXHFosze2pavrSOSpUm4vt4lBk03ndC5yfC3wHXhxw58cNfzZ+29ZL\nLogrVYbEGYsLMqbHHJsd0gYSNdlO/hHrFvuWt0TQ0Ij+v99PLfLU3eYFIbp4\ntlWZ52cyMaLj9+oRSckeHbmxLJqSWCMLSiQTVCQP6zskI/Yst44eHoOm0QFl\n0tgLt9vhjJwX/tIYKSoGD0pZjKUWospku3Xvj2P3FfC5seTvMfHZYRju7vBb\nMMHtXjPN7/SZHbeLLqFT7hbbKz3DZRB94xkPWQNugMM+tgONxzQixyntTtfd\nVbFW\r\n=rP/N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.718c90178.0_1620156495475_0.3574692378149087","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/card","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf51e3d8809c52887d5c4002764fb0f6f0f8a663","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.0e3917299.0.tgz","fileCount":19,"integrity":"sha512-lkANKeIYCDlVKmXwD4uyR/2nqKcleJzopfePm5w6GAsWQexxoPYG6iRfUsXmEsLnYR3zopxynJ4lLJMDipm8nA==","signatures":[{"sig":"MEUCICFdbf9A3zBD7prEm/hYkQ8ZGNoxib1CbMI8sRfbMxOoAiEAz9hoycIxMGVkHVuJ6vtSaVRs1bBPsHyADDaEhsxPsAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDvCRA9TVsSAnZWagAAE2AP/ibRLzA44YQuSGtZx2iE\nopXMIPeoRU2Mq/EdYqHf9gQ8zFRcdIDVQtm31VIf1Kaaz2l0rIsoPGF3/yE3\nkP6LWY5h8IbUPmmLwwLZJKZ4TaJ/bNWlIsXA4wdbkoWyjtabqXv7ovp4w0PP\nNhC+ggz5NO7UBnVNPRpaHwLy+h88uLWChk0VulsHczf1mU/JZjA6IXbqtt6k\nLPa8+04EJ6a4s8qXyvyO+hOVE2PkfOKAutEE+MAh6SNJYRK95y/0v8ALzA8B\nWEvZnC2oV2Agouwu1IZVUm35g5RCukucQvcLTSjmPoZwmiaHRx/Rp9MQjjGv\nLheiENTJcYZC3+R9C9EHH59tkqoBaXuilOm50TLK42DIeYlleAJ1tWAgm0VZ\nFzWQR3guy1Hio4ntLfUpMrgOZ151ZHzNew1HsdtCsKQNUZdgdwFqeOPrxoDR\nqD9SpwRPlw7rTPx4Bqj/Y4PkxaVvCAbXEGajfeeSDH+5Sueom7JpLWfn9eut\nlpbhg2VM4Ch+6w8NDEQ310Q9ln0wVRalGoWaSUb1QDxXUiw5wNJQjm4iGbzt\n038VNEJbePfJdkrGjUy/ACgJfEiZK7KiQ3Ua9PfaHrtKrq4qwBQtgyZ++edU\nqswSVjiTkb/uB2lE+H8z+90YbjcUg7U2yPMiDD/BcNVFU2Hj/ZXgNDDS1oUM\ndRfd\r\n=/6GN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.0e3917299.0_1620156654760_0.016376291572787416","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/card","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15946bde422061c93af2caf1d7f263fa350e7906","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.836b3c7db.0.tgz","fileCount":19,"integrity":"sha512-bTmycyZetO/ajBlIx4PvirFgXR6Rp1eT9Nhu1IJ+mMjgroj0Oa5YCY9Q+UFUdo/EllfQEzJwCSibrGnaODXRvw==","signatures":[{"sig":"MEUCIQDr3bPCSaNIouYtShLlm6/h3Q1swIr3v8NOTD57atXwFQIgUqu3VM44Z6iTLXTeQa+S9MFecYCbE6QQHzcl2zvpnlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/RCRA9TVsSAnZWagAABsEP/j+g8xKEmtl1T0kUAiwm\nQioqIFnwUR46XWbNhd/lsP/7glpIb7tjJE66VtRbzTiYebF/6sjM/vwv4zkM\nuwzofvoTH8HHtp/UrlftgyMA4nTTz6so+xegj2Z9qbLsI1hH2RqnL+agMb17\n0FSXzuC+ula4XPKsbJOe6L+sm0xlxG88QBxuR4CGLfQ6fwakImd9NdhUVjqf\ngAfpvzL0/LbzkStrgGXaYJkyppJwknNG4kpbzlI7D+0t3XvMXrwsN5sSqDRT\n4h/Im+0vjVs9mHQ31vpHClnaSzSUUst9r/DfObOx5G+hU55dLk6xtkbnNEQK\nK8Sfe8WYQy68/A5xjB2mTw5gW5jtDHF2UnIbZdegdRHmDtQm+ojmuqAWjgO1\nZ/kTcf5peLC8/JdT0lRn7VukNS9LafY7tbJkXO9eL2YdNlgbdhDahR7fWclS\neDudQwNlOR2WsyIJuER5Ok5wJmWkPJ7YE/GMzOVJItHjtEO3SRHkdKiBhY2V\nuytagmexBQvQCRKz72wbZB4tMHdxjOPKqdXrnYckZGVcweSV9wtdKsrfx0Fv\nsNrSCpVDPz03g17v15T6ECFSkQflJzGD/2zNy601w2Tqy3spWWzJTxmm0ktC\nuOu4pXb0VgA3cCG22c9V5nKu6P5p12VzDjs4vu4LBbVDbnRgrhW3TiaFZF2X\ngui8\r\n=QVcs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.836b3c7db.0_1620160464959_0.4542201555162748","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/card","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6099acfea27d087ae0e90b82868d821865dd7512","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.53d4e6d59.0.tgz","fileCount":19,"integrity":"sha512-mufmwrOqxuAqdZt7xO9Hz2mRnP/2QcGpI4vhySQ4+KBAssIe/reOLAhD1043+lSxLdooZg/A4A03FPBR9HVAvQ==","signatures":[{"sig":"MEUCIHjpm2WkaLdM1m02zcm45MI+Zoj6znUGgO4p1WWIm5muAiEAussk6V0pDFf1o/GwftH3JTqHGL/kdUlRSRS6p08XM8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbN/CRA9TVsSAnZWagAAHUQP/RZyQYgtqd/EkHymN5GF\n/ld376UbMV+/iRsTcbYGGyHergkFlbR3JGcwLPa9iFKGZNJlPhonf3icIzTE\nxEUwiyQEAvUFgymR88u26x9CH2Lu5vLu8l9lbKBek2T0xC3goTbcoagptEFT\n3AE24OALQcnIJ2fPqDQA2gkXOT0OxdIGt6+bj8JGOoywz/AbxAHFXl7+ccei\na9cWiKD+UP2f/czVtvhMG22qi+H2Jj0VYQR1a0qa6TrYInHcljwtbKY2rQfZ\nzz1O8/ZSzb5Ri9lv5ULFDUpDHSonsf7jyzTN2VPgVT6iVgn/ln9J78PHvEOP\njSvv7tQOp7CCBsmeRkmlT/roNDoqy5E6GoDFsuZrbkoIvP4TmnG0JpQ1xUXd\nMYAl2HRug7ebhcNQVb7L9L6ywS/3qe6ORJ/pm6v/9Gv8iECIgCeDXKmNMH+g\nhwxzgMpyJJE1Ps4j453Er+rVpyYBG7ncG4UGBMT/rmnjz9NF6KJL6P7xZfYJ\nUvesBPy4v4os+aO2TzJWhwzhce/a0wIHkPv/xNDSf8aF0vOIoSs5pxa6CG5w\nlVXxlqSuPfbZckLSJ+mNQbCO3UcPU3Fjt4uZ48/Us04TrR7Zoucq5nEpkri8\n5Kcgg3xy2EEyN6d5j08RFrCjHJI3gyUk5nL2BOyCEhPORjJ93wm2OxBc1WLj\nkLNy\r\n=MMQS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.53d4e6d59.0_1620161406673_0.1300855222853221","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/card","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c67579c2aa5de786c6c748eb11d4d7e370524bc","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.18d147e27.0.tgz","fileCount":19,"integrity":"sha512-uZ1lsUPYxP+WjGjBob0OyAGLao3hEkn+wkVc6Mf4EKK0eDB+Yi9eonBO+UR/r9Z1xSW+zFeh6L8/m/Rs6CM02g==","signatures":[{"sig":"MEQCIGumef6pYZwsKz1Hewy1u/HzirlDXQh97qbYB7OiC7EYAiB3f291asERAhMD8jmufRH+LCq+kJ0gyHdZ8A1TOhhhWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbV7CRA9TVsSAnZWagAAoh8P/20LN3HrvC0X/aYrAs0d\nDMIhm9nTvmSi4Lf0fjBNjmH6yRRYAx8A31a2+vibvhKd5lVGqdzdTmeMQrbv\n/SgXCcY/dEZP6idnzAaTGQAD5GyCg1QUBwqaMc2QLIxwG86b3OfJE7QmLZhz\nDBY/0ckz+7nYfPGWk2g4L1d+0fKVHxCm5F3nNkOI3wMqsXJHoGBLg3XjLa1X\niXWSzfZu5KWxp20ptyS/WVPOzw9vF1EiJQM/cdHD16yeTyIm9wW5v+k5nolC\nBGhjFiqVgctopn5A15fIHCmV5u0ld2Zv+3B2vhsU1aWEA2Ry+/WV16ntIbgG\niYiVoClDC30yfGIBaobFZ8Zh3EhGzaYxif6DmeghzeKgr2n6lNncLLX6AEIT\nmgqSGyTW4THG8izn1YZiO3XyvjXlXgP6MN+4fDpMTjznOZxtPJ3I6r9gr5er\n6Y1liNVAtIopZ8GEJnZC5ByzhjkTo1/xuPIoj1AzgK/IpFn80Y9mMpihqYwR\n3gWXUmawcuCMFvQgGNLeoqgcNICM2HCDV6duQNRxQrjEPyU/w9HQm1uUP8Wb\nFD0sQT71G+bG+4sAFwJYdmWLNP7cpMuv/eOu7c4XaFmoWlChEEwW91tHf7b+\nQZmn4QxYR2W9SqM6Gq0P0VxQD0jBh3IrjDnF/1HkpiXyhf+KvSsyXdYcmCFo\nUZ8H\r\n=LmIf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.18d147e27.0_1620161914974_0.32958403806245373","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/card","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0eda2eeca202ed2d314a79ebca0496b35d2909f","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.b9984794e.0.tgz","fileCount":19,"integrity":"sha512-hqqLlR5b283MZ8R7NCEd7yHRwq/OBmvGGLNFb/1XBnhwXwyiAzW/IdMno+b53VXuSvjoib3XVY/HE9YJxXlHog==","signatures":[{"sig":"MEYCIQCw4nyYxIbjSjitK4D6TgEMr/dHqJzoYQI6Ze36WOypOAIhAN+7FMFrwlC0dmz5fONxAN5DlDoWXVMqhhQ+acxqJ8ro","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdLMCRA9TVsSAnZWagAA6ZcQAIJPOBclgbNqA2hzMNhC\ncLEtOeiylD8T9AxyEUBhq44B0qBLGdIq3CgjRGANtnUThYjb1y9QTadJXaEA\n++zgIb/XoF9Xk8LkUA8gk4JAnEUs2M/QDXB4VRd67mojPlVHyP8mHEcrvWwX\n38QneArEQVbTc29hKP07gR6VX/aBi7Oc7JU3O4dfE/cb8UF05NvfgYebwY9A\n6LX+M6ub6cXcevcbqKdkVV5aa2DsBfl7ql0F8Bf5oXZR84JRFUFp5BMbK9YG\nk9We+55RzS0bM3K+SKVmSf2Alx7g9tPsor8lbZhnnqltPplntEKVFlCA9Etw\n+rU1jAGu+W0fszcFETwlUNdviv4W3+OoR+7WDB9JVthrUSLc8nkevnL2SHhL\n/HwSS5hOA3ZprgPdDgR5j1TPnLcdqHc1HmIrZzUI9WrFKRKrZuH6Jb/9vESy\ne//sAEfmYbi31Y04E95nutHo6icVFgRRwKfzLbY8HtvjYBEypzwWrnO3GsLL\nxsxfm8yHH/qNrbFj1DVCpUc6eLRnB6i8I9+7XSorYeiAazBbgdmtIO3jGLzT\nrqd6VkQCXkZ98D4sW4tyAfM4yEEjmFX279J3R5YwBj/FZyy+WcN/QE3GrVrC\nx00OS4fCIoL5xwFvV4JsHjYGjG8gsRc4QsciyGF8BboTA+JXBw2r5doExqH6\nhcsq\r\n=Qqr0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.b9984794e.0_1620169419723_0.8813480707657928","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/card","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1818e91274e7489b5d5fe13298bddc2d2ac14529","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":19,"integrity":"sha512-6JjP9U4OVZMf7jzVWn61eOAPi0pfEuCQWHDfBmOhY3fkO7Bogz9jikrAabRP1/SU5cnsm3HL1tVboz7h8qY79w==","signatures":[{"sig":"MEYCIQDY9nO0VIEvNiAkhYwANHlB9WB5yYdM047vFB6hoFK5ogIhAN54uuRAjsiTCpgGpoMVD3N25c0SB1dugPiqDtMsTHkw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdOZCRA9TVsSAnZWagAArhAQAJ5tBP161LKvSJj3Gs2y\nZw2O6JWSX/NnBuEVtdcFZQfrE1bJ/OPjv31Vs5oRAlDi1EucJnxBJVjnPPPI\nClDFBIFnXuWwP3a3YDIlzCgDVElxJsOmyAK0QJ36+W+yiFMRkwFYJoxdmcWS\nfXpm5A4AW+Itolp9skLBnivIvuFSdbXAxeNgus1P/+q5v9ouzuCFpZZ0XQCP\nijdHLQ53FG+p8vGnsUAMXY/nfjPuB45x9fzYBHHwGjxyvjs9UDuVTaR3Uupi\nKsMlHQVhO57pMGKqqw6ZHZ+yt+l07TI0C5gDmSs5zabE1wm9luAYDT97Y2ij\nM2en+BukSVC4CgYqEtwQMS0Dejq33ROZgI1LVvHoJBYR0e2twhLekBH3SCoK\ndlYYRKxifHkr4ceeKMJfaSmnPus4vBAYknlORZ6EaKd+ycveAT7F6k+2Y1Dh\nZYecOdtjZQwSztY5zQEEAOxyOOpyfp3mGeKple3in9oqXSwsVdhLqoduD0iR\nsj/VflcGEDHVY27hkfCUbd5c61bJGgyXA3Re9GvlUxNLhtg0P1FCuXIRaO66\nyZamuK395Vz3p1ANE3TwLc8mp1fIG24qTnqnBp4LknVnqAkn1yPm3iyw5w45\nO5Lb2baXN9mWHaPQ5HIACZxw2m0zSt7RBbdb/vAwIFMBLyMfjLMuEzawPjDb\naTZV\r\n=ysr2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.b76f5fc9d.0_1620169625191_0.7960798626011438","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/card","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70f3a1158f81e75886b31b905bd2f3c055262b43","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.055d4f10a.0.tgz","fileCount":19,"integrity":"sha512-pGMc+b/SujGIj92/f/J1ph9yItevv/FjTVioPQvUi9Wxf3qaXktvERUHkUrc6XF6krxJv+qFb4WmyBTqivLDvg==","signatures":[{"sig":"MEUCIQCmgY4LxskaNYCoyeatzxkIe+34JgxVXbPAPEAPkdKdnAIgG7xHxST+/u71iguCnXBdCgtMfuQgA7qB9TUotKhEb+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdcvCRA9TVsSAnZWagAAMzoP/jJJIMLKqGB0IkeAYr6n\n7Dos7HpoBO4QofIS+Tpj/lyq99kkoVfwL8vkt2LVyV/SAqt6Ijze2xbtDsYd\n0HyTsbLITner6bAd+xDF4TR0CBQyfvWVhPXz/r64mMPwLI1QanIxvQyIh9Ct\ngqSrFJaE7O/oFYh4TVcXuy+epKx4EzNt0g/U9bto9xc/j0QYKiTCJpBlk+gW\nvzsvTIbXTQWyx7H2W9z4gRiA3ny5mMjsiIxJK3JxZN8+PwG+uWuifBAvsrT6\nEXEPIXXK7BxBll8xsG5YKO6TeHv1Hp5iJDpq7jU+DdFIbVHwF+3wnZgXdiDW\nK/os37+G5GDhlYncLZdAcNFrS4LZ7CpBUK6Om0A0Ce5a9qNlbYcy7S6aYU7M\nSCugimXPDLXlmVRDya9HFp3e+YFjLhCodN28dP9CIVTEMlpkbH4CR0bH4Osv\nmW3a1oYLUKCnhNkRJbCfu32SQlSf4Dsci3kJJXda9rXuqTmzKLB9Or58zpYO\nOEGUVihgNc7dwGkNUuFbit06bgICUewtWgCFZHB4fzH43lnmuhoDyhFA1g6H\nZ5xrseiVSEi+RMyrGwz3jxijmEG7aOy41E3cglBx5IZkmBnsMgO6Cg3DI2ff\njboIa6r+ChNH/YXHlCD+iWZJPW9BTWoR4PHFhJDHmN5A8JSolOMU4eVQGkoy\nrpyV\r\n=cFTh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/shape":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.055d4f10a.0_1620170542784_0.016139255077904258","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/card","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"427f0da0be5195637497e339946252b25ea4da2f","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.5b6a46016.0.tgz","fileCount":19,"integrity":"sha512-7Ffz556/cAohZSnqZovqnZMC19s5EepZS5ZG7yTCyWqB0WENNaI3Ey6AbcZ7qi6foyczspa8EMWIQtW2pxhFHA==","signatures":[{"sig":"MEUCIEMWWQJDErHMiLHDJPakYXS6ZkMlO6Sev5b3uCMOmwQoAiEA15PEGCpYMcACOYPdbyeX4LzU2864iOlCnW2O19ototo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTxCRA9TVsSAnZWagAASi0QAIXrojCTexDa8UwenTCY\nRH30u9LsNThu20L1+X6BQvBG9OETLd37Mjydcoj+EdMcCVYWsonlfRarzeZF\nJcw5X5qsipCwZ66cPfHuR6HHpTKKxURrvKxJKyY0j5N8yxnNsOWP8gCRiqM6\nYcD1mC8Kkr03s4pEHoz3Vy7IDNA0g3ggf4VLqswSI/LgnroOJCDgNe+PfmTB\nc3ljgi4epbCXVIg1BhmWok1GMmDSujgCVf1vwurKgm4ewH22fLQ9fTr3DPiM\nUZQYGseUDF6q1ESLBr0kY0waGrKCx55vzTqwMNhuLF7N4Dt2wTm0QPxX2FsA\nt+Qp8CgN3KPinKkRNQS+zUB6sGxVtxNKvX9KmZisXQ7CFzWA3x4/r/LgauZm\nfNehEELTq2u93XlgbSjDPWhGdpUlhv1jg/VL9gE5g+nvdhRt+lC4q0I/gBSD\nFU2LYx2b5jcI6IR4ikixtFhCLxHWGjxYoIVEMLlfS6w6z+3zW9orwcOocfA0\n9UVM3zwq9GgT+dW+Ap+6Pgp5idjBNRnGt5uqatznDmI4DCSowZ6mDLt++p5I\neYMVV3/FAiWITMgh12zyTcqkduaDPPkR1QsgLz31WKIofO92aWLeocJs+Aop\nQV8AmHRhwSemrG5eXSJUzd2Ai4CAhQLk4e6vz+qaLmcQ87cIJdYjgJeCthBk\nr83O\r\n=wvIy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.5b6a46016.0_1620231408689_0.18709988884444595","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/card","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e24c37d4ba15b7f1ed78be5a04c8489f48e29161","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.33c9a737a.0.tgz","fileCount":19,"integrity":"sha512-nYVwMARMz7VMxR/X83tffDKGNmsuGiaSGXDubLiGh9XxIc4OxrH1URkbaWh0RkusvQ8LJ25pJtEaSLQQ0DwqFg==","signatures":[{"sig":"MEUCICeNOAt80U+/ElqMiY44UpsQcRk+ytQRBMpKPluRSG5xAiEA56SmLsEsOZaXGpMWA3KpbLgZyxzpFazgukpkxmvvgqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktWQCRA9TVsSAnZWagAAke4QAIF6rHkXsoQmSP0hOp9E\njD4dE6ZJwuudNx6wjOKOEDC/IQzqliy5QbrK6X0+yl73wYnvo3s8c3T3wRSa\nwvTqggKY/Vg3UBIph4nqiq0UAErNfmnyWl/NYa7cjb7cOlcawzhoW64Sxxvu\nrqBJlyghlnHMk1FbqEDiJ4nDm47I7K1BPEaMZGt0ah6iGAR3mHa+pt/C5Jd7\nxhFaPDC1p/PiTCxLlUWvbQqkZRLY3I9dG+YoL8pisEkohCblvTQyrgqYcL78\nGIasJD+F7wNCwPcFUZvd23keBygIp2d6H1wwawO+tsHQflYrGu85TZX+85of\n6hQ1CZbinCWVZiL+p7c+Tmf5d/MK5m3To1gjc4mGgUUZsxX4+yyMkUHCf0Hv\n7jRPZma0AhpCOD9OS0LVwxUrEfiQ3ieTHzYWBdqXvDRWVD+1rRURRpMmDH9U\n5yp0Gu3NVXy/cqzRBdZXaHic/EjVu18hrVcmyV+1jgRhzbQsUN6oQfq0MPa9\ng33fuJDnVyYo1Xel25MvKdeHwz9buabotsZIGjrBw+m/LR0C9Y+cR+ADfT1p\nFMwEaqs7QYG7Iu58QFQHvLG6H4G4eIAz8UG3JcrG8jQJnr5e3o/RqO1+Sanh\nwwuFkbfTkeuT/M9jP5ZauYaJ5vfcQu2eZTTbx/ARsWOACH6kpSiDbMu3r3yv\nT1JU\r\n=NdAk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.33c9a737a.0_1620235663745_0.17952859385818876","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/card","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d602d1ddc792211ace9fc1e1333199cb2be961d0","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.9bc0effaf.0.tgz","fileCount":19,"integrity":"sha512-QyXMiez4vpQxUbVlWkxsvQ8/cfozLQJtO/zcxs2SzROkppUpoTNqMqqVgs3NPdMoYs/pRZ++IYzAHmC9TE22lg==","signatures":[{"sig":"MEUCIAtDPRkGNtL3sgXe0pIP7E92MAsePoEI+KwYbZNFvNWWAiEA03ksfw4Z3CDWMtQhUz3hioekknkniahxts5nq9+eoP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdzCRA9TVsSAnZWagAAIqgP/2kLLz7uMjfjY/1B4gom\nohB2fdr/L+SSIHdDJ0R0f/vfBgm2wA7aE0xMJcSTqbosSwkGA2BLbWAM+e2+\njxy0MYlnOyVfcj3wBrcYM3BwgetPhK1xBFGiPUN5F/y0NjPCJLj89Sa28yR5\nJuYBkoR62dnb7q8U/oIP+kTerH2EcT9qU5ilHUSWZyHetPxbJsjobjb7d1Y3\nM+/G/CZrSv0GPEhbu7GFCPsVbcTx561zZfslIkFsw/7bnfydVicXgsq5lePi\nsk5jG05KXWctBUaJAzuB/cBw7OCDWlU/LB79kyRjRHds2xJgz+gEzC6EHLIz\nTHW1Xh3RTK6I8ew1VlHSDPaYhMFcPdLKrIuYJjEZZAB2adFgB0olcRaAUSNY\nSdJO6YKZvMK3GRCMmWqIw8++o7xcmxlUnjJqMnmx88/D6fvbcUKk45ktXRnm\nbx9XI3Iq2y3v5ZT1EVvf5Wmv/rDEGeV2ikCXt/hV5y2M18m4kKkngjT27eMi\nxqrb9cRmb3U7+CDqxY2BCyd09R771aFUlvGgBrZi2TljrwCCeD2n3aYuMCUD\nUeiz0/RcBDAH4c2DR3nuo/5V0JroJlSjfKXEopmShNXkOWiJCW7sdq49Xi2p\n5P2ktibqUn3ZbLuDPb1WIMyFVKbWbrmH6tZQAmHEchAC/Kf3XtEzL0xLKCri\nD8nj\r\n=6JCd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.9bc0effaf.0_1620248434515_0.3116801656709258","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/card","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97687518a30443364f7b5c02242c1b84588c90b0","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":19,"integrity":"sha512-A5X9EOlD47v56cSd2NXaFlBB/fca3QcRltu2YgR3DruUffT/wY6OCl+vU1MJXg+syZZ5G94wpTg0lDSAxDysFg==","signatures":[{"sig":"MEYCIQC8nm4AqWobiq4mgBkw2QjdKYVGfEl9W7q3O6uIY3WDTAIhANTc3iL9/L6BoHwxXDolKl10DjvYgtbRPYVpIX9Ff1CI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxEMCRA9TVsSAnZWagAAulQP/RD++6+yFhOzGylSwqTX\nS5zH1e5NaQvBwwPMOQt7axJeysZhBVhxaAQ8BfZStX1Fp9qnozgbftVzR9Op\nysJs9w2sIKOogJAoMyTehguGXgseXweGUcaV1wBGU4ld0RpvPXbHDVJohlYv\nyJHGcu9LbSZH7mlb6n6N4+vhwGs3gGOUlwnM9oSGJXzPM+sVCV+bDv5ogDAc\nnRty2rFhNODw/g2mz+DBOQI7AguTPKjKZAEpaNzwGxhQiexzVv9aNVAcKgyF\n8DOhrKq9DslXGelqy4xO8FH0PUXRqziIrMP4aTX0eOWeUNOymW+5eSOeub+o\nbmsscSAVbcfraFC/LZGNZAhg3x6AcS4ZMCtdXKMaNyqi4ZGlG7V2RgslMPQd\n0vqo3HW9f9QyhFQRg/HWbFZeRtwTMREZOAzCuUYrRZDoMknI4Pqm5t8iUmB1\nSPCKrhHeVk+Yzz1I+BQQb+pa88qeP4hHW1eJ/u7lssC9F0RjKshBvbCMBopd\nbrQJg4oPFVAWeNVsLEMgzK7bRajRcVYZh/S3SUepiHNJoekTmRUioKUmF7vl\nXFIKS6ZJPCgSNdMuOK8uzSHl0i006MNjjGOqiiOQYuFjHubB4mouy1CHno2Q\nZDy/o/mnJtSO50nZq4IjsTG8CnHLgb5zIDRXoXsiYolWSiiHesq7+4WVmdeW\nJHS3\r\n=4vE5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.a1e0f2af5.0_1620250891804_0.5440676054850591","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/card","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c45b11dea9e8c51e47524e5882e27e7ea6b8245","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.06930c96b.0.tgz","fileCount":19,"integrity":"sha512-9tG0xMKHleYTh3HkjiPi/IvCh2k1CbvAAW33BNOl7JSjckMgoPEvcNKhaMGck0+CCl1spigQE+i4IveLJMPVeg==","signatures":[{"sig":"MEQCIDZiHTlIOaxE4k0fRYjefazIWnBU0KIky4+Uj72VaMdDAiATh6gIEpb3AkhdKTZTYmyIJLbMML7kPQ8c32fy0LzKPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzECRA9TVsSAnZWagAAxSYP/jMqymWFazOAh7Ogj/L1\nN18aZzMIEJgWiZ3eFaVpsrxzfrj/618guU+LcUBi2sJ+OVQvcflOHIDzl1VV\n7iGhWvaIZ6gfv44/NJoBfdLm+UyNyuUIwtlYZDmLjvqJsl4tuOROd2lCY+K7\nm2ODDjReXC0sB4u9qj1gjHTeDXSY8BtiQcpp3BWcOoyPk2EqYZAP+VXhbgXg\nc7vX4tbx7PzVeHNkuXt/tkREzh4pOYw90DSDJB+pR4uiJferTWT+950dGtib\nBDEAei+T3jSnDpPoj3rfJ6cjjKs+MAebNjUtUDaCRjUTI4JDrA3SPuAPvW5b\ngFLMSKmQwBnYFTN7+dKWWxawcaNdRJtK0w8xXXsiYqoYHu//bjvDLz5tPmXb\nVOLnTdh7Pf7FnNgluSFoQyUq4Xvk2aX29cnzkxVgiJ63TuHHW61IsOmkXOrl\nBq/5RYmDaPuS5NIy0ID1W4Eoguz4fxxuv+tNKNIUcfigKIA1Ri2ChE8aBhzh\n9Her3ree7vAKlW2yj/M/6CBfVTziNqiRnHr2dUFsM0JfWFHxR2TIkAV5WJZl\nZYqC4aDzaw0Fv8H8tUSoWXr5IBqyk8Xwjp3mX83JzO0kQLKjwWii8Pi9yWvR\nwnt7/nFO359eLhc89vfXVBqO0UszFfS/VbmKbEvmnddtjjF7IlBUIOJYMH2G\nopfJ\r\n=0rUG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.06930c96b.0_1620257988216_0.4047929594387891","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/card","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c43d5d37746e3de2e2dc71cb50604ecd922dc8b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.03f525f9f.0.tgz","fileCount":19,"integrity":"sha512-/FVyTowDdwEbJjz0p64UgbAHygUYZQbr1hNJyDoEo3LNFJ19YFsy5cI8EX8vB0kuzxmR3Q5GMSuOimVF1iVWCQ==","signatures":[{"sig":"MEQCIDCfOtIdsYlWJDuA/RWsm8sYK+M+KyeP25ZyABbwUoE4AiBvxeykopfcJNKUPLjJrqJyTWWGXBJzKP3Kk9o39Npaww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzimCRA9TVsSAnZWagAABckP/34v3kATgci3lLHS+aoS\nAAPsX7Mu0hcqlFLRrknq96Rpvt9JJ4L7kJJBLlFVXbHVF50nw+xf4JSv7ENU\nyCMgorie+GSVToNZeksefCHx5fUoBFKOnGT8E30UQ2W3YCtpTCzoYt7/Jwlh\nkmmNM/MN1R1Nda5oPVbZHxmPhswsNYYenm6dymTRpmfOHVEyePRFy97jED9T\n4rEKehgqTKn7sDn9jWLe81wQ62WAVPSPz5Q0BFvYz7rYDWCmY5dvR53S7pi2\n1x9xDcc535lN1IFDG7LJTf6VoZ9q5d0cHDnOZoCTthjQy8D+d/J9+Nxh0FEB\nBZBSTBo0KKUl2R3DduTh/F++gp8lG/PYPBilgWpzlkOqMYg+bcXvlH6J0rv9\nISQi3e+OJ5QCH7CivEKvYvqJEJ1tVSKI4bIRP6rYnkfjJZD2Gti0xf33Vekq\nm52J4qIwXYSBgiyW/iuySPv0t24B+1ek2wKSRb/jKP8sKI63YBBufniBy7nV\n9mlCtnTNSOAqV6khdfTV/GCpA8nlwzJW2EevLBOOy6XeN726r8SG0maPAlkH\nke26JZW1NyXhY+XoEl7aU2WIVjCyzsOwzS2BFlgkp+jNaLGmzDBHx+rKYZxd\n09ecWzTwAbE2FZhj02WAsX9K53Mh4pKN4OEvTe1l3hMjoCxNC33NmaEhDE5/\nUGfI\r\n=/e4V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/shape":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.03f525f9f.0_1620261030178_0.2821357702215943","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/card","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bedbf9b5e65d4ebfac1a6950d3900990c71a28c5","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.e82ba2a26.0.tgz","fileCount":19,"integrity":"sha512-9v3zVf7D751SR6Ue11b74LHYh474ccsnRM2z6BKMFk7pjC0Hk3DfDDva5LfQ6FiGzI97pu6oPhy+CZ/ORsTqFA==","signatures":[{"sig":"MEQCICJMCqaYXfJo9rOqgSb5zijmtIfJFAl0Qk8WC8mw8LxxAiBDzyqm1El5VYlN9oVIPd3YtFrmiyA+RgzDVKXfTUPGFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBHQCRA9TVsSAnZWagAALkQQAJWinL5lkot3B/rLKdcj\ngv8rlOrF+lWtfH61wWOUCcxPaSfJa2NCG3YE4Hz1EsmFC2+h2Ad7T4jGPnUf\nKNHjQStdzpd/F+XfVpk2yOuHLNDf3pF6GiMzdCWrOZojEVOvk86jwCAv+N5K\nD4G4ZggDrIao6ZSAKc1fNgANe511L6wxQWagyCV3ajVHaeTjpNTdOUPdjIBX\nTaN2I9RIZ/QAn1BxjW9HzaYkuqmGkJt8/wxlis/7SCVHEPckHIC+MBYKQgKs\nySzF0GJ1jyQutuZVGFEFxLO1etBCZoEwSUx55n2CW/IvgjGbuEX3N9WM2J1M\nk2bv52OYLHhpjrv0OXLZkiYF4GlXNutbr3FLIMI1SKYxUyGt8KmY+6j4qyxd\nC/VkT5meqtqkqOlUJJ3US0jULchHUIQG10/e9KmITs8Ktk8PsBCsMPxNxzwh\nrD3PSL+ohu95gCEngbYiYZicbsVut00yz8MKYgPO55OLwT3h79/y3nSGOlwV\nkWxEx7okHq8VS2Xk+euHcBI5pYuNkdq9drCDz9aiK+cnFJakHqysVG7BKG+a\nuk9uPMS79qVz4qfH+7bO4UBGyJp9i3CevKfaoVHbH+LFmav0snk0Bwp1s/1U\n2ousVr1k7hqfkmZmbCp56o7ZQdgP1E4BS8byMf1DyIJqRzjLjlIjW1ikFOws\nsevj\r\n=GEcp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.e82ba2a26.0_1620316623321_0.24647699428024206","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/card","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3fb727864b0951c146b7ae86bbbec790f80852a","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":19,"integrity":"sha512-xycVhMdskyTlb6XPOZJNF4c6h1NbUrcHnVfRyKc5hcdUJz9lkwzyN0aE+/+MpejNq84tCfdIuhAh922BMCGzig==","signatures":[{"sig":"MEUCIQCFzOt6LvRpapyKKQMLRm0ke/OKFAp99aPxMWFkplcyLgIgQ3I0Mdqd/zpekCdEIDrI29Gi7500hIlUgJFieATHhkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCeSCRA9TVsSAnZWagAAM2sP/2dHV1xr6o+EKGDy5lvu\nQqKnA2ITw47MxIkHyUniMP1I1lC42ry+PVHajrfGjXreT5ZLn4Hou6nnBIEQ\n0hEKtbYG99KFagV6CuZXDE+OBDVQ8qUFudYKnzUXT75bS+RhIZs3x4NH9vIT\nnD5epbWVt7KbHoTXu/COYZPmhk53JVGZ61kKdM36GYbmcixwTsAh/A5GEQWx\nsqNh03jjmWe+h68Ije65lPnNb3tQAs8/8nq63631JuWFnDLmxAUBoL3ixZWI\nLMFwiyHTp98DfCBN/YSYm1sGdQhTIRi3nMd5FTUo7qsAmLTuZrBdUm1UyV6s\nmTAB0s1rt+u1z1YHUXpiQ+oqbAmP8gzEJjpU3rVaTkxZ2nd4Rm/aMaxgCtSK\n+PTho+fepe8mbhuQGs0TM1TsME9BUORfBa/wLG2VoDE6BjG3UWsifyE6NPvm\nAE8M0tmISbkCgjf/XrMifCzD0VxUAvkm5YggUXiSLzJINtB0ssvtybxy75C1\nbTXH+46Vxcfs60XPns3pZK7nkhxzPZlsgSZEyNvgptfvAotnDotsxyZa+NAT\nkO+apq84s/vIGW+y6PPq57vcanmJzArn+9e/WE3yjjDRNLfJErlR51Br8E7L\nj+0/8BFdpj1xbniKmSC/LWGXM9bjhkzdPJsr+UNR8D+YawGxrA+B5zehoyx8\nwCcg\r\n=v+OM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.fc7c4e5ce.0_1620322194137_0.8681619829685503","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/card","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43df3ced8b4b06cf3e40ec11bd461e0f12311a25","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.65c04514d.0.tgz","fileCount":19,"integrity":"sha512-WwdQTVjJCc3O8VY8QodJgZVxxN+GEjMXz6yOGJHeymrZcX/qdsFz8REq6qo1klfUnJRFbRhffZvHp9m+ij4yvQ==","signatures":[{"sig":"MEQCIFwBF44cbX+znCLJsqCosQHCtcEZbulk9pSZJmwKOQ6UAiBLIVtwIq6NukVPUHHEzLT6UAtpmqGjg2z+c0Weu7xLEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDj4CRA9TVsSAnZWagAAgKoP/RJ36dqPRCTqCQ34h+wo\nVQSBRPMxwd5R3BDnLEjrKXj0p43b7ePIMEkuex2iU0b+DUIBKDISJGmveoOw\nff6HJPFZtCXShacQ5WcEZSLI+pyN1+Ilqu6K/17LnpWd3qIW+t7COC2ChazV\nmqUKfEJsfthJ0PO5Tn8ebgJS/4rf2DfODzFtQDtgPuSz7DKieTI9HVxuH+Du\nHpnFjprP5uiYOPwfiKcBYWhxoPvc0UWWYhnafNxWni27CA/3qhRqb1+U/Qmu\ngJdPoCQb+RPra6691NmXbGQ20FWSPkUxK/wHWYOn8z34wlXo41zu8hDVLOZh\ne4XijzEWOgAK4RPEByI5fOBjjYti2QJoeEzjfwNdJYxRcFwLmLkz1ruc1WGL\nL1ccVaE2FKJ1+hDeRm4bSgAx6A2SyVWEYiYRpZ79cwISHdM8FZdI28kgg1g1\nMX1pcQVaSeVxwX5Y6czqmPTHgTQxEY6OLMHaW5Bk09BlqXLppdMm6LPa5Vyw\npzcACe9HZwbpXU60zY6WLTrXMAvvclqSJrC5rmTEc29m2ypkZMOk6Gxv6LQp\n6dQrUOsQx2/jYtBQ38KB2u7qMpWoVIEPMI/J/aVnk8chKWZRD2t4bp89VtV9\nuSI73K7oJxBxeUNLYq8dfntqDBr/UypbXMa9TjZ0XCDYkignEMdHAAP5yKr3\nmSpu\r\n=DXyw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.65c04514d.0_1620326648103_0.2503216471925873","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/card","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0f7dbbeb03ac507cd05b73a6e127aa7b254c0a6","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.c97779ca6.0.tgz","fileCount":19,"integrity":"sha512-IYmcSi2t3UbmmCb7qCVm4Fagam3ZvG6PK706LiAq14RaItmyE09mLdDnc5Tue+nq7izPNGt8LDBnP1pQV2bJIw==","signatures":[{"sig":"MEUCIQDLcNJjvZLj2Q3jUHb1/V/SXRN6fDImz1sSSwmylIoiewIgXhgQ0X+hZM49pnLHZ5uDnZX0gp6a9oQMhtX54oxVDwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGMSCRA9TVsSAnZWagAApowP/2raRczIlH+DwVQcmybq\nUwaAua8SZ+zlIgTe2rOdTvx2AwE+UhcExwH+B+8PCEdw1ri+/DKmxUu/eLj3\nPyBATokJOkZRXxezT6mxaK8nPnVGSTv8tRmuLxx+cqme+yg4QCaJYr6hMwLm\nGc+PqAxnJfueyUrR8y4p2UqzUgH9J6iOjRdwfy0yx+0YtWPw4rsZBSzFfTSw\n1kFA08/mW2Khif3g0ssabjETe+Y+6o6HEmvjFQHCnlLQID/fmCprbYvyx5EX\nuMgYszjyzC9WoBDUzuGPjDcb85jojigb/HXGpC6WKLCPMGkstSyUFVxq8Yjd\nIHZfnH84kzFYLFLInYXnonCYyFvRGWPJk82yNzZDG7c6i5e1O93R2HkG+LRs\n+3rG2wXELKtehkbR6kf9DLG3jIguH8sYmcdkaMVYuXHEcP4FhSP0NqOV4S0i\np9OWCE4iu7vqSk48IWmVmI28Eu2n0C8U1Nof7FMYVjTrBoWjTaoCrviBv5Iy\nqmTwlYiGeJ2P0ZUEw3jr78uJ7OE4soCEW5YrgQSUM1bYVDBGYx8FI2XXptIJ\no8EkNDt9ae+ePehtxGtn5Atati2r0ol6n9FtgR9qzoRm5iJPSCc3wsoEIo5K\nxU71FMdGkKWWD2rz9IOcHYzGD8lwBZjzQnKA6H6/CY3HlgNP1qP2fOZLrUOY\naWUw\r\n=cC2z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.c97779ca6.0_1620337425637_0.6877678108044234","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/card","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b9f6a16782ea6745a31cf8666ca43bf993c4205","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.869d890d4.0.tgz","fileCount":19,"integrity":"sha512-vn325fu+4gJu5KWSik3HvgLTUlc7r7YDe43GQ9uAnjQ8P9+H/9wzyTQ1oHpGVImbpaqQq2twOohL6KfgImbukg==","signatures":[{"sig":"MEYCIQDE7n/FUyOsFdSiJpjCvJDXorKenFN3BjAgO0eUmfdtlAIhAKytGuC3+MpBN4+sBnvV1cSngv6pk+OcjgPKp2ovzQWX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVp6CRA9TVsSAnZWagAAAKoQAKQIwfr4uHWTGu8uCS+T\nSLrb2+Pib1Dba6gXJMq/FdQdUVH6AANp/0lWX9bdCEd9p7XnM9EzP4Wy1+qC\naOXZ5bx3Zlt84Bic60a1JlrK4oVVwJezXDSxbOWsrDLdbkDkP+jTyqTsWzK+\nkqzp8oKPAV8xfesfSDqAjIxYOuewgrNYG4wDa+D1gyUvwSGdMiWi8CPx2oPZ\nAfTOB/MOEEkj5Joo5vPHjCcawVT5W5rAgTmcz5eQjNCTVD1Dd3QYdCLJd/sD\n6SOcaRmPsEKy/t+U4n9E+DH/Ybkg4zesGGGPm6gB1Z8KZJNtKwPjQLE/LAMy\nDaunRaU8ooK+W9tsLqhFuJ04cnfI+SXNz2TKSzok1FXLOyWZoB8ZS4nbCPO/\ncMFDbnjVo8UNz4uXPACA0OupPRY2T+WTyNqdmUWl98mIzOkh3Wtg81j/RnA/\nhK0LK44dZtJyVqPJkIxab4m+6aA1izw1KAapwd23UokmsHQr7XkIjro/f3BS\nmWORxxZlOoQsIaTldYQ3sJ+wCB4OTilVB0Tk7QawYKnrUZ59Z+ELMFlvDz7d\nisZsyYB+gue6QTlrfOg5kl4W0hJc0uQD30uX/zM0LIZAzotEXjhFhaCHaz/z\n8hexkmUn7MQ/FtRmmK7ykqyZFjGa7UODpwzlepnmcOaxT2qTvJeY0dOdr98s\nLehv\r\n=yI5h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/shape":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.869d890d4.0_1620400761596_0.25881207924258187","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/card","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"484fa7122e029d8d1087b1add9feb98907890633","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ec22e1da9.0.tgz","fileCount":19,"integrity":"sha512-r5Osvw/8RTNM3jBjvvydP8Wunozxbs5EFjCIgiR+hTYD5QAI/WLteztfrPf8hhYHJhFfwRjWRCuiILKoFfgntw==","signatures":[{"sig":"MEUCIFRsaDpkA8KvftShfDgPh/Ww5YFjqlojo2wyZwyLdt42AiEAt10ncMvld8sMs6CPG7qH1RjntAoCp45km5FPiq+BYes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXo/CRA9TVsSAnZWagAA3VYQAKEV2hKOEuiNOW8XZ3wX\nL3/PhhWwgKaELJMq+Gpgj3HBF0vfevMq4f5CIRmKwHjeSlhycC4hV5J9iSf8\nFNt42SGP6ElaYeoMtlGwoANQzAqJBdeYBVZYrgSSZ0fPCjQuxDHHD/wBfZm/\nKE4WTTZElw3JCbvm6jP/M9eUU5T3hYQqv3P/C/Se9RrA0D6afiePwbmfL53E\nRogCxVqTCjN8nkB0twBEw/bsG4g2lrFlvJyFN0vNtMvGwxngBeLx6iiqYuU4\n+uaQpVVR+R+aBHmQpnmW8Ugu7ZRrfHueaETqNJpenk+8WXIC4M+a5tjkaHPj\naVUuUWRQNCA4k2A9hGvGEfNl3KUemFsjKxOR3nCFcuJJEyNE9o5yX3DxbYON\nDI3EvDodHv2bD3qxMawOOL23rVCA00o3cRuSHoAtqXsyoSv8AMQMi1mk+Agl\n+jJkotVJRj2O/43/wGtHrpO0JPWA9K4aMitXcxaBNu4LQM1y/gTP+uM+Fe8a\nNL+IRKO5IWXqZQLt54YeIwpSO0BepvDE4zlWPQ4B5+DRT7UenIT5nYgPHxrk\nyo2epIm1rA3hDeH87IYqakVtBtyPjGfCWNBVnS2vAWZ8t8oIWCr1rbt8jo0b\n4D4yCGKnOOH9GvTxbzfnOQDwcSIgL+ZiSQpLCVrAJr/xgEeffhzIUC4Zj5TL\nUL+n\r\n=TzS+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/shape":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ec22e1da9.0_1620671038865_0.6687677244855108","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/card","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c604ec6cd7c254d62a602a7aadd4a95135c05bb7","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-nightly.7427449f0.0.tgz","fileCount":19,"integrity":"sha512-h80ee4ontqO6VEvq0/hJX6E1TZmj3BOYY7XvI6t1e7qUH42cB/b6/EQJ/JR4NgJ9vNfCZuX+mywvYjCM6S4TQw==","signatures":[{"sig":"MEYCIQD+qpO0ndwRcRqP9azM+U9I6tGMof3OYSXnfRQpI4vHpQIhAKcpzt9Q5hABgJJYz8zkYr5cnhetzY8+xTRelTvXOrgh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX81CRA9TVsSAnZWagAAJDAP/3HbjgW9e7o12AUYdls7\n0jlyzYLstwcnPhL8jkbLjrOPetGj0gNlJMHUKOM0x2byvyCYyfPe/kZXp7wL\no7/m1G/7rkgIELGav30JQlffgI7saXDGhA0OXMbRRqjjVek+cYL9/amPALTv\nt5QvWmYZn+0lwPAFNBCrNkRovESTKdpDq0O9RrOCcTVxIgbanASHUnDxfSIs\nqYezkOUBB0T6Urhlh7nu0W6lHKvzqUeZvji/UBamJpQIEOjHko464zh38Q4d\n2CPaKe55Rw4ZdvY6vQH/t45WVlLdT/9QdEzBQi0v/tnLP2JImTs6/USKAL4d\noEoDJHKg4DpF6mi7FWLUEojB9VfEfs3z+pETBoeqzXLTWwvNgFhiSL3rQeVF\nvOP2UmiKBJA7uMtX2OtH0z3vYRssCPq9sj+ad0XGN1XNJ2yZTGg0peE8oZzq\n7bjCEXRRKPTebpetUFrNnB+UG9LsKyeWECEaQyzvZbzy/C3Au4+t3VeL+uZK\nBeqIk5w0CrHMFaemBJP8pDLQ3IiA//d5FahztH6r/MVvU9CQSTU3YB7oxBkJ\nW7LDMPBmlApllo3D5k3VPfZHdRZOeo31dQF5j+hCOtII/3y/XGdtGAnjEjCv\nkdbBksBpmnmZwByyo8O6P7gL8Mg+GQ77YsnvxIoOO88iWe7LT/20E2O9DgKb\nOAnh\r\n=Mecx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-nightly.7427449f0.0_1620672309476_0.9896787327207557","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/card","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f38b2779e27c775c3b2d1a4f74cb13c4e59d3253","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.957cc3bf5.0.tgz","fileCount":19,"integrity":"sha512-JAUVxSqOFWWUZrNGNxfKyzm6IqeMfSRA+98uA3hDpYKj5S9CccuaW2TPRxlk9pbr3IRv5wpz/vbJvPSplEwzwg==","signatures":[{"sig":"MEUCIAlIvit9FvxL3ihClviU+fOh+gWzN3O+qcMnhVHqJwqqAiEAmm+o2uV2LyGwK55rurepi1v3xSypDxZS1g6uCpQGWqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxACRA9TVsSAnZWagAAapYP/16TIf9Eeix4MhB2uaq1\niZiT2IolqKDnkAu4h9Vsbhnb+8+K5f9rdFLeKsUYcG/f03PyQ2BkuUjJvMXw\ngzkdZTjbiKrqNF1LzPUE8Y39Fy/iHvilDjcT1aR7vgcWbGnJNYSQMJfTOc0/\nb2ijg2zZpjVHNwPTUWRCX55ZSrnNqQSwC6EJhZNKBxJUerBMjWgPzdwWPz0h\n253ih6ll6Tjw/tju9hX5b3mkzLDqEpHpPWwE42D5Q8u9TrSHLVK04+U6T8rr\nDl8mzKXXx+c6zbFhPwJmo8sIpWKKHp3otRFCSnwP5UZZiTcUkNmNGKF4webn\nJkeNTHmZjv4T0dp+UsnjneS/VUdmOcoUZe35rMsF89w1GcgwzkfYoOkqd6Bz\nlZNgSPddkEljvkBvH+3jzvZAbhGwgKv8GHERVKMNKvfX6vficuZi9QuZwl9m\ndpHgmg1qOIIAjPcbznuTH9gU1ID4HS2kfjcvM1BQ1PVWcxQtL43zLs+yCOlz\n2LK+zDeD5EA0vAkHy/4LxZhJ2+fCpN0c6QvElzO85mt7jcAsLn82BZRY46NC\nkZLpYh38BY5KqG+WSZ5LUgv/bdI4tYmApwFSf9BSnJQBNAkIDaxHEWrDMFGt\nakoVFN+dgPCO77lVEerazTuhvhgjghwuLaNk0HwZ/ge48dmVTJLO8AkaMfzz\nuxg3\r\n=N3Ae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.957cc3bf5.0_1620683840036_0.08502213081673071","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/card","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd86f2dc0d4d11072d1b7942d5bed1513bd21aa7","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.88a33cd70.0.tgz","fileCount":19,"integrity":"sha512-2m52so5XNfyj1TgxYOt+pSisiAWvncH263/OPU0B77BV6Yge8Nyhfo8hEXbCP81Hp5sYAbr1p4WGGkPt7r0StA==","signatures":[{"sig":"MEQCIFMtlR5eXYiBtM2W8Ukp2iaODXGrGwkLqgEXu6LlgMaDAiB3SACrtPHdZvC3CqhFWOeQAJ5zZG4N36IGSqoH8esjMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcs2CRA9TVsSAnZWagAAGPQQAI9036X9f5eU2ctkYL3X\nRTlWv5pxboD/NnIhg4qCKVb8r5FhNn3ekbDcBgGkZe5GJd4iE8RFDNNwc4w0\nHxRrYDcUad61GD4daznAP5yMNjEzL9Kf4V8FCMdb0zXudpsQoA6dvuiSkp6j\nZb5SMj+ptNMzUGzLY3TUlH/CWKdJhI7Drit43Sk02VC9y4tZs+fQFH8e7paC\nSPdA3LdBnBP1iwpq/IZVy/O5Dyn/SazL3HVRLu+AF900JT3okdGNZLWb1rl2\n+paLyFRQNvd6ITeMfYdxzUEm5qbsRVGiIC3IhufJh9eKlXgLeHcM1AFleuI3\ndIBAeY6YzMS6VNXAIh/tAIK2fPPls3EgulLeTphgC/JqdGntrTPAipnb1ZVZ\nEdD9WjI3E12sajjlZKcIrsX2XokSo6PmQ4Rzr5t4SQlo59kwpuCrRbJn69GC\nDP1IzW4rEPl4TYiNvBIqERQNOwWgoIglK4iGi1hEimsu9mGNuJZOwKlu3UPH\nriaJOOXr1o6gbhyLeREau0oGRL07pulGW19P4Fg2lqK8nmsYIBb8OgJoqbTV\nW3XvHnC3fDaEuY2rSm26gCI+2ZOb1+fCiXhzWxBT4nbukk0AJoxFo6BU/aW+\nRw5ygoD2QGn6PAa1GqI31/3eA4iqS0TMS5bhjXneLf/ukIq4QS6/4GeMjA2K\nkIRY\r\n=gVG4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.88a33cd70.0_1620691765555_0.9268581254723423","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/card","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9ea5a9f0e8cabb2240a7d9ab3b915b5198c9b13","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d20dc6dba.0.tgz","fileCount":19,"integrity":"sha512-tKZok6CK5UcHgUtuEeDRvK2FSzArEyOMoKed8KFxl/vO661VpnaIKBh6FZ5nIdflftQhisl+fL4W3r7IkOm6/A==","signatures":[{"sig":"MEYCIQCF29w11XYLDwDbtVrECBYqa5VsDVG/+fE4TcsHZZL/nwIhAPwhjVE0A5kSqh+Cd0Cg5xXHrCyeYGnsKZdWfLDVlUyM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7rCRA9TVsSAnZWagAAuIUP/3ah3PMLouh8565SYMZ9\no12IFxHhvkLh1rumc71wspwk/ZiDpzfaWwIVWlMn/QT0ddXiYUino+8N6DJY\naFJmsSHiAzQ1Gf0fU3+G9UavxIt/s4bY1Nuf2yMkTsKUWuTnihi/ryLxCxbt\nZu2VmKzrokbl7nI854nFuAAB8MoayYT03T6g34qlmGV9MnqR8Cvn9t9lRK0s\nps7vk4qIB+MMTFeYebG5pD/7Sp1uXdRM2uN6uVBeODH+tRUdDzUfO7e7QMm9\nZK74ZdPUaN9ScSpopJ0UI1o8N0/r0F1seEleQqFWnfuVHygi7uzIIitOFuYw\nuJWVPOdFlYznK2CyQJBefkmNXs1ySfaEuSPcPDfdD+mLwgiMilry78PfJ5Nl\ndRVEdDGfFq6t+EKOydzIWbr443hF0sYDA/TFx0NmDrCuq3UVSIM8SBH2kqPP\nEJScoTFQ2U1sJ/3kZXJMM60QkwkH+oOLzk7jthovB6PDpLbpe5d0r79HoKBX\nLd+cObesHVj45co3ebCZueIuyDmTxuP2s2uSQoOya6DRwAMmy8nEXlzi0fE2\ns9ZraJITSl9MD+mJ1uw2pjz7p6zlwcfAc+hmzQwVKOtpKJz9aZtW71assCae\nTND6ulbUllw+gA4YBuCdrEKVIJB3szOmEWf4QV0VbzjytFdrr30KNGNx59YL\nVFR3\r\n=YvIG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d20dc6dba.0_1620692715073_0.004492624998192918","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/card","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3513be25f4e41dfdc1924d8c085781dafd892ba3","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":19,"integrity":"sha512-bG9cRzrAsoA+N9RSbE737P6FPAIYXF/IQcf3s0AIzvdLvYfy8FqVPeaeDgyv4xBihTF8Vh2dYhZR41oyIKEWBQ==","signatures":[{"sig":"MEUCIQD7/1jB+hd4jkx82Ri+1NbcPrusVRbIqJLRh3nCmLCnwwIgPhzG568VdFXwpavz+0ihngvNXFv/+ldsfpR+CIoJSqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdbcCRA9TVsSAnZWagAArjEQAIwIOy1fdbY9cwvYsj6/\nbxE38cJBrsHHuuThpOp7MX1mUfOMJykRMu/Sle3kM7f7hlmPtSbRGb5ba5t9\nT8/UU+X4Q/bFexvB7mVCCIQNHKzSOXXfHUHs5TeRNvCxuZQ9XlIXLN2SH0Zb\nvTS4rbcLq54iI40fGZlQz5UMtvtK1iePNkMXEzsTpJ0JCBgLuI6J8BGfn7GY\nK6gSYFP1djG66UweBpbhq1i6FFcd/3ATh7Fz4UodTtpVGeTT6thX+/x9hCgb\nTsQFNtCGCgx+OIJdfKZRFDhltvT1d5VQKvZ88tK27LUbMSSfduZiw/nxWglc\nn2RoUoAVjGb8vtzUnjPjK5PJTzEpluijoNe36WPvl18VZYbrZHIIUxSjxwFZ\nQUG6ca8eZjDDvIbm3lK4LoOZdVHzMR8WUZAdbkjguAObOmjs3phUh2rxamfk\nE6gVre1EQFdz+1utofXSH+9Tp5RvoxeBnsADvOAuvjt+5wSazP5t//+qmG3+\nLCOBdxMFIdsBj3oqQzmfoRkgdgcte7AChxPGUKS0pUsvT2NddqEPyUiwqTB0\n/ULxStGdx2IGf3EWOlA1C/xvpkcfYba2Uc3s6qHBshHtMOnPAsyRKthi9oaZ\nCTeUbBzVGzlEyZCEGcurVNpJVbogcaekrCX9s6YhIeq6IjzwSumJTuhz0Q06\n6hmA\r\n=jS9G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.0ce2fdb02.0_1620694748150_0.5801042943193746","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/card","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"231c0b1ffbd82bcfc7d93c96d7e1734684fbcf82","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.cb162da37.0.tgz","fileCount":19,"integrity":"sha512-1/gaGWhi/WNDN+oaC6DmcPf+rTUJINN0KB4YDHgnyuWitpEHYFfegt33tObKolTkNeDH04GfkxPkvr/gFpy1eA==","signatures":[{"sig":"MEUCIQD+PJBq7EKNiumSofsrEwTS6gX66xY3WnpHRSvEJ3+iuAIgT2HBxkMN7mrpI10BHfTXz0y16HNX08zVSWr8oBDBDZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeTfCRA9TVsSAnZWagAAXOIP/RZ8EGZIZ+6T8SkDyJ23\nMEKQGG9W1UsSb/zR0OpAaTLZ3pSrzlwck/y6SvyAwoJ+NGMUC5EtdD3BNZXp\n0hWiuL6Jibv/tfUpYMqZptE7HChQGcHVYT3g3vi+FoVGADUuW4FThRc9LBTx\n4Rvi06A4/j1wlRjJ0yYoXOhTGcsJQD90d5nuyVMgiGMZNVl3J4U9Roo1IO1w\nuHEks/2MpvdWb5x1Qau/4aW4MBE+4L0b7HpM2/cq8wECWsy5mA9kpGYyQzrr\nA1yUTujgZXxCWnhOMNHxJ75lOHCM4CTpBL6VtpJMqeb4Tynp8SeEfeHf6RUK\nWKMI9mGN16QN4XhjSp5UDNEMdwcm59BeNvM4mXBTs499pswzNkhrAB96Sb+9\n4ulbRcAo8oJalGJhNWEDCMhngFx++xCe9jwFiwhBCWNHjW5mZ4P3mPFjhLse\nEZal3h98yMjYlVrjEVCVT15scMh2WA/Lki3Fo0WBen1YFqKDdriUM4BKTZDi\n4O3ZkLstVJXSVTiQCOCV6OKDe6NQOIVTyCgR9kjTGB0x6Vk2ZjfmWinhg1ln\ndsKwUTwnidzcRRE4NxhgnH+2BfuNwgpUfqpsQpuDqv4szfzD5SwkM1UPgg2f\ntmpZuYuGUDB3CSI88ypqP8IWYyGqbPvNZyTCw0AQB2Gk8G/KZxw5bRRMawAb\nuukQ\r\n=fX+i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.cb162da37.0_1620698335362_0.9204727612787234","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/card","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbc04c8de666ab1f01961d2d0213590cb6a2e415","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.573dc7ffd.0.tgz","fileCount":19,"integrity":"sha512-MLBaTXz9sZuTLCvIn06hNVhtcS81TDqcqGKNQ/7ttv3jz2b3+ZLB48Qmhqil6xvZgwK59hx+HqWXW45gTFwMDA==","signatures":[{"sig":"MEYCIQD4aNJub+nWleNtl1Mu7RwZmCNRIrXw2T6GFtSwyySqOwIhAJksIaujs57DAHc9D+FPqA0UeIjHyrn8vdtJVwhXD5ip","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmelNCRA9TVsSAnZWagAAktoP/0IVol7aC3SLdfVKi4dG\n5hoANdl+DTHbgg8uoNpFNBLXRCnbIgbbR4Uu1KAncUU8MECnD1ochnTxN5g3\nwNXbAgeQydhH9XTlGqoZNjqJdOYycY6+scs450wd3O/EV1rM+zgowqm7P505\n6B3VUWOg5OFAbcUW3IPhRcn2zqn1hrSu6ohGz4YBSZBfdLsMBYBduu+JxTU+\n+2pmDcfMRBmaMiacBGixc+OOsmV5o1SgIkr9ijObCua1J7+D5XWFo7XPW4Mg\ndTdSqX48GBc9w9IdKSkN1t9+/7z5W/sciEWHHhbSsm7ytPLz5K6HP6f6voQU\ntrwtJ5CnL4C2Az7cPJ2u7k/F5QnzSIgRay6CH8cTLZrHuPGiClX/Raj4ykRH\n+a6kWTFQuE0PCHCxAkJBoNcR0wkuBoflWggGvwtIMNTIwBUaQ8y7z51SQxPs\n+hI1h1oXbU+uBdGjmV+AgNx2DZmtKbFAsxb/3SsM0ZF87wD95rN6l1ZV/pGz\nWq6tFGw12hunve+NVNZ4qYT/37zbOc8fcyd4HkpAI/r1zI3ce6Gw6LjhIZNm\nqOq7hZp31JoXfVX3P8ArtS8063iDOAp5Pr1sY3F2SwyJJUDkFwM1UpZ/k5Jr\nZAQIEnNIDqm464dms6jIJnGI8ThhMmaIHSSWmqOrAfnCN2MBsy2iTJf5Txes\nVExk\r\n=k0Q5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.573dc7ffd.0_1620699468626_0.27105169467210444","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/card","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8f55d6e7517920d0147687afaa019f93cdd8787","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":19,"integrity":"sha512-Y8K7eskk7KKcaiBScBtDgaDj0OENjl5z+x0g3QEanN+Z4OSPvCMelfnO+ZCJVxvneAXMIjIgGKBsMCdLVtt0qg==","signatures":[{"sig":"MEQCID/wYb0rDl8X1Sje3C9cZNf58Oa17vYKfg4yoKYyMhvbAiBVLwLuqSjB2q4l3XhnYHSBBMm+g0DP+O509yujHXbrLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHUCRA9TVsSAnZWagAAxssQAJwrPPFCuBA8LfBmqGzL\nw+kEmIdIgqQbXxXQkOKqFYFUsw0xYzMz25EBg840oWuuv9JfspBtRmI5TfWZ\nGAN4uss6NVyoSuKXI5JdMmqLF3FsEXd/lYT5ZEz+icY+MrXieDAUqVnWR78u\npM75Vj2kxkscpFx1AjAt4+FOMsw7PEePKy5BHZaslVP9UxiG8v92Osgde8rI\nqMh7h1IsaGtV64wAJgaDVcdIocpl+U35wc1G/zDRbYBinOqPvRsgn9yubPJ5\ns0TGPLALlAwrMS01cKSRL0VdQkGaMwvEvcggOlxQIJjctrGoyd3qiFmFn77r\nJmrbMerwI/v+G94n7/P09Y2RltOu1bf80r/Sh6dx3ccOJ4MTnzH7lLIeQCXN\n2hbx6P3oFGWBHWLBPWkFBcSnsUOLtopsELX3lh13TPXtZbqdX9+R+8Rmh44S\n04ArLKcMhZA8D0lT6gCHEir2wC61o+23JhlDjxbBiEgtd1qA1RcBHkG2reb2\nTvluRrX/1CUcE946RY+Nqj6a94JFioX4NeEqwqbdbiEv0ttCEx1CrihAmZSs\nUYNLJFChrDAAgBSch6YzlpDfAQmX5CwMtvSCB3UeRERyk4a0VdPTAVjxpYFs\nPd6P6ylU0wv/yCyX1Udo4M090hxs8MYG4vXEGc6xgAIsaWc62iEfxszsemKW\n+ayp\r\n=fcva\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d5f6ad3fe.0_1620775380311_0.33306691779592956","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/card","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"927b65d9c56b0a14659281549aed9a2e3420b86b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.25751d2ed.0.tgz","fileCount":19,"integrity":"sha512-8Y9bWes8rotm1UWfRs0z7IDe+/P/ydg4asF9nvn1u0vHwJ3ldRo9Kh4EedDBs9p+ogSs8LD7B1/UMP7VSuZh6Q==","signatures":[{"sig":"MEQCIAkZx5Sz1SZ/XFS+iza8Kfc6nZQWLWj1dRrIEHG/PgbGAiAxXcdIPZotWviCWEWFUWg73m6XB2aGziYnI5oc9QBdVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAA/CRA9TVsSAnZWagAA+vgQAJMu76XuLO9GZlR+ACcC\nAUNrly+S9oDZnkeVCQwiJIYOniA5hbjTQG+btOtxd4sWn0CcSfk1xyD8Rl+q\nxMYW2QWLRWOmmHNv6iRhv5dRicBWcUKc+1HcdDmYiJALyNAFd1/LJEoy1J1M\npRNdMNi3u99o66mTdlMKcaJZNXRiTt7piGPCl/9OqufN2Uq5fFMMTi8Znw3M\n3YDVzA8rOm+CmkNm/pS4efL4Q/FOrXs3lF2cflbGJlIHBPst/VQSnXQLnvaR\nwGsfRoe7mk7GKJVY0ZbC4DKgiCIHh0U5VXhdYPQGS45OPvqxu3aPHBbu8N1j\nC78dMsVMo938vYRc2CeobSTVEVEb8CUFh9JErZA8mT3sfNCO0+kXSi8xKqPD\nLTcaE9kPVzJMEKcJionNBzILQRAmZVWD5MEhURj8j15NLTfMiPY2dUH4ULjb\nLX9zy2KJeLFgQ9VfIgOgVZH4OGONqwedpfEb3u7ve/x/jqqmsGWkpqWcAf+4\nwsqd4nxMCTN8oK3HwCYUsTOxUFfZzNnqCQ++kMMmrZArnwmmheaevdk3bQXF\no+B4OM7R5VjldwAT/fQ7pziVXUJBtFzRQlC+NTKlefrYVXKUfBWK+68k6Gt0\nWZde7mk9KJXupaorzFKZjnuoY+Q9BBBEuNtWKAzERp/O2TJTDfq7E0b1H7kl\nLWbs\r\n=dgRC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.25751d2ed.0_1620836414657_0.40010881127614817","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/card","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed852218cc07ae6830b9ea287116824d9d523c94","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.a23ecb682.0.tgz","fileCount":19,"integrity":"sha512-RZok7sTr3L5m9oiuISwjgU8d3h1R1w8IuTf8QgltMNASYFUxH4aJGghC7/PveBy/y/Ec5QhNCE/fBIJpRaWcQQ==","signatures":[{"sig":"MEYCIQCTSp1fEgXDSWE+2kek5n3ndfpdaaEnQldUzEmL9IpJRAIhAJzwFZXdrMaCDt4IxqVp9jb0SzQwMd/rNvzK27Xk+htg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0xCRA9TVsSAnZWagAA9zsQAI9EcenRlTidMoi4vMgo\nyO3e6d629U5DxoliV43yrYv9yeRu4DLer4c8fMk1l733rvJh+zMHgR6nGjQJ\nlvjip3VKqsSHRgbYn3zBdq36p4d7GQJHccPl5Ow2rD6XxOZcliskCbmti5a/\nMrNt20LAO0W04OFoL8Bcaoaw9eN8dPC7N/rcPdHJkkp+zsG66ZR1Mu1hSZUO\nZ29a2SFpZRM0jlUQK42MTGBY+VxN7KoOl6eXaeSvbByjT5OFQadvwZ7Np+pb\naqdKapoSTKZ2H4mzSNqarBTqCcSuMyqoOUv4Avv+aIJFcTkms3CFTozWCf7y\nojr43frOW1BuymJa4+F903L1YqWMWyXqnK2gy8fbQdNLd6E0swhl1B8mvxqY\nWcWNlvaksjPwG7C6OHCqlyK4d64ej67bcGHWoCkAm6WE8TJN+mu+rGv29mSH\nH38YBy+yJO1212BpYxcXdA+dYZT/2MNRQOrMb5WEnZoyq4SS1TsHWlTpcvQN\nfbKB6YbKqoBe9Xl9GOoD2pA+slgXaXwu9Pn/G8ApkOQLnBRXa03S8x+2dC3w\nm80AQ7EkQ8eZhAoAehwX+P7lLCnmM9BTuDaAYcjBohfkxSZeR3tYk7LRqfZj\nGHQa8b+9Q4IPYHjStyca1OP/pIAfiZQM2MZaRVBTb0xVZ1blAl4qSuis9WzW\n7VcF\r\n=uJ+x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.a23ecb682.0_1620843825170_0.35742835429810693","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/card","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d181c66b220e929c94ca7126a9214335f35049ab","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.33a954852.0.tgz","fileCount":19,"integrity":"sha512-m2wnx1ektJuK9aShKIDIZlB+3C8W08kbtMDK2SjX9KC4XFD4kxkiz94DNaqS/8K4N72zC8K5F1SUDdo76HbtsA==","signatures":[{"sig":"MEQCIG9XXMoHGCidXHvWbeiwBt8JQKfOjEJTBZMgh5zWzeRzAiARWRAG3lcpQ/lhoH2eNhXtt25bBEt9HSWd8KqtJBHJzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDaCRA9TVsSAnZWagAAhXYP/3MEhPFK18ey5PIXDHGX\nbkz3rsPuoKXNUbUTaH+VhhZnDGvvSc/AFAHWXomGT4/nBZ2seuKihDoVqaVz\n84svrXguezjjilaiE+/kMDNRUHzm7QCjVswxSbRj5FwNhH7vRuRRmAIP0797\nJC1bsTCHbSZhrUEDuI4/cOoj/7olTyZK4ZdyCWxHGeXJn+KKOUM672dRL5DD\ntSr3DVEAE+gV1bTmkfVltMepCquV0aHQ+NHnzyZY0mJOXh+exqFbnH0DylAf\nA/eG/7jTApl0x7avOyO8MWbmI+aW/JQc8DzGYfuipikoOnzG0qP3ygOQhOjw\nHFvvK1fybi1E2VPMB3PkO3txPDSZe53WuQlTTWdpNFwvFbmFW6D6+1w+nV8A\n+H+EjJI/EQhooG5khEt9TkKlcGPyxOUW4Y2Ki+5fcLKULAEuGucEL/AoDcJ1\nDUk/90EVxYzHTKpZx9Fq7GsqPKR/rMlKPUXuh5bfDtIuBGNxnSoVDTX5GSa+\nOqp3iJEWyx4iOoEt9vmxzpUCgJBhn4PbYF8jD/T+mnKu+7WhWuU6ZZG93Uba\nQV60qLaXzyDXGoi2Ny6hkuFb8oSksnNpCHaOXCfI0spF0XThgY4dq2anisCG\nl4NUCwVbe7sW9Hr6AtyvjDqGebOGBmvR3VoRiLD7fPqpWiXCVjvxMEhb8r2K\nlrt4\r\n=qaZX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.33a954852.0_1620918489731_0.408483197692159","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/card","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5d82dfb73ac7db48b8c4b6df3fd1768e4d202a3","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.a4484849b.0.tgz","fileCount":19,"integrity":"sha512-y9nKZ94D4gX8HMAcV7tCyFaWymK6Hq9xjHisxCidzwT6zxqqUBPxRaniFv4I8Cgwzj4+6zpI9f2tyTBFbTtJjA==","signatures":[{"sig":"MEUCIQCUThSwEJEx3p/9uw7XzjQsUEJRiHGl/3jGMnMYsLr03wIgNnQf+D2zdip3aWs74VlfVp5vUE+LsGkv25GAis3IPxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZSCRA9TVsSAnZWagAAYfoP/2TKmIRYSQrXDiRQVOr6\ngsu5WxuNI2namWzj92mamyLNIb6AUaertxq2u0w0tCxHtVr/Hf3wt/65HIIr\n/+1w8zZqPcygo8HX4+sEWn0KVrSAoPRYVMZploLNIK+zsncqLGK+16UmKc2m\niAhlvbeqCbkxbz6jZMgnMr1GtVMxTai/RSZY2NJZaVJLFB7GQXJ290kRU5SR\nTM3r0KvfXQoju/mjsSN4pp2h/ilOsskwg5jlBA4DuBikTGi4u4gqG8LPBQ9W\ncmpagl4A6dD4mY2ZaO4pCquExRPkSYhTiGaajQSFXs+oRy2Vc2xddfxE7h/j\nn5hqn0jn54QYJfZusistH0egZT5/mgH0kNtC90sSvI5NMtt+PgUNdoC9kh/D\nAQpI0AkP/798ZBP5rUAmvalvKKQMG9S/h14OHB8EvhNvC7VhdxekwXjh4Otv\n5M6RXKoa1ePdmZC3e0exKZ8/bun4At4yRuAq2+FcVpzvsNr3nmjzLlaXXCo6\ndux5TBBTIE2TULN9oiZA6G5WFcUTjXZrikClI0c02y8FyeAadC4xyLKdi2d5\n09Y3aERrulLqtD586cyyiiZcGh972TEOpVC+fbpI6J1bg5oDgk7od30Ptre2\nZasTITRtmcUwFC5ilrKPc3b6aLVmkkPQBLTHXIt/2G5wNFCsBAXkibhh5M+K\n4zV9\r\n=XZTf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.a4484849b.0_1620919890216_0.6498569664778189","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/card","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8358fedc98e3aaac82f6a074bb9886a895115675","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.b4c3f513e.0.tgz","fileCount":19,"integrity":"sha512-056rQd5LqPaOAASlJqdtNoypmzkk/ee00oRm8uhyZ6VjDu32x+C4d5ZBWwHJXdwVtjrMVJd+UEHfJl4jbz/6Xw==","signatures":[{"sig":"MEUCIG7D1pP+NbTEFdbo44j2wxcrJ+K4oGISbm4b6hUScqUsAiEAya8qv8P+WcnzJlp/2C6ZE0rlKNCZkhZurUrlEHwe3YU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8BCRA9TVsSAnZWagAAY+cP/025lROppbi73YHTQZ1v\n1pwMVNdFXcJ5CMh8zsm2Kj2xRL9ys/SC1hd/IrbbuUDeosMOmKx6liN7ruLw\nPIX1ohkI0iTzwInXFt81k++oHNdWQGrMSzeNQ2Zw/yFS2Df8NuBIhQOdpcTf\nxL2xbrCufjUCKEP/IzR7nWYRR/jN3B0xAy+E+lVZV8Q1m1QrQ7vS9Yf4IH6Y\n6M0wLH3G69rP40ar7LrWPqY2inTV+YycXXkbHhPGYa3lxOhDJVKITDhvggXb\nec0zz7wqql+zMBT0tsjCo3MGmEsu1KLsjD5xCoFA3LreqfZTmrNum4/Fk3V7\npTo/ki+gQLoWL+WwZECzD3mJSYL/ghtnZg4G9JTjJK4H64PfUT5chdVsIpsN\nlp5lPwZnFaczKblcL+/HMvnV4WhdggcapQP7bSZTXIS0StvMOrmMfvmv8So1\nElFryLFwFB3kSaoKQWfQVVb2lprpmmoAwnkepsykDyFmmy/b9TMVaRnWWt/C\nvWN/sWPbOyrq9CKVlVtE5z/nTE7AsgGHZ42XbsPY1XfrPd/2vkqKrK7yIMgc\n0zuu7rasGTi7CwJNh7sm0Xm+Qlbd/9BOaQ68TAvUz3V+bN0EbaFPNOxavkfL\nO/M0Li5e7CaKYEHBd5ojtxdGQSQIv7ErT6bGtp/sI5ZPuXGCeq8p/+slKksC\nMEEV\r\n=R3kb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.b4c3f513e.0_1620922113145_0.31632276959614414","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/card","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777dfcdc937d1a56aa80498fede9655088c2d801","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.1a8d06483.0.tgz","fileCount":19,"integrity":"sha512-Wd0vFx0nopW9eLfQEN+iEblNAfTSMcH8LRS7TL4p1NL+3NJ7V7jXH74cJWYu7Mk/MkRqZBTaH4ZG7hj08aHWZw==","signatures":[{"sig":"MEYCIQDTLHe6w+nLd3LqgOQaiZciUwN3XJpaomFh/e8O2VArJAIhAKG9ZtJ1k+2GNEXIzQE5H+lo31mVLY67vdsA4etSjBZY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBRCRA9TVsSAnZWagAA3EUP/Aw8o7xG2z50tn71msZ4\neFwct1XOKRtUjdMiJeRGIeY93Dx7NMCPQOgz3sMsYQt8LRnQeEkJQ2bwUoEi\nLn3PcU+rBfRousVU0a8ttbpUwmNdReQPof4mzSwu/cvCBR1IMFLRczcoeTW2\nH4j0zfWueWXacVEAcx3YntO9ljI+w6DwypHN72Q29O56K/UiKHXQ1LtjUWvA\nyntvcLSlhgddSPR+hhU+q8oY8FZaga/7NItbGd+FkTabosSbxshHiyz+anpA\nKG8YlxZGImzRqRgF6ts6Y1RfwAgdyzHaqMRfc8bhdj7Xdt9fbtNMvuLofHvm\nghLYySjzzHUi6g38Mz47b+Qc3XiOW2m3DG6qNWdyKUzxFfn5qyiGTDBbu1Lh\nFlrXymaiSB9BblImiUhGKcmTWS6TSUo4xK3x3nRdk50Tf/u6glIfZSWAbRab\nNrXkrz6d32KFEc9g5Nyi8HNd36b+6psBtp9DjIFXacBreVSiH3qQ3AP6N2Rt\n1BRWkk4Avw8pHqltoSYNe4uIpCGDfM9taeqx4+NFZGxoPyYnZuPvVhGxYGqK\n9ifeYI9zGUL+zOfO/6yEUuOWYzfHCeTER1ChE4ckgyHrwPSdAcb+1l2CRWCX\nKLKFI0QI+QjeXvhL5xPnT5wHIM7ZzzIEVTMnTKeFhtffeqRiRuHoSbLTEQms\nCAJr\r\n=7RXr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.1a8d06483.0_1620922448852_0.9259182878977816","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/card","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e40dabff3193186919626e8001050f14167eefb7","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8e6081836.0.tgz","fileCount":19,"integrity":"sha512-Ydn+Qwr+hUnMa7pdfICup+7Z02vjSvtrsuWcQKx7eXth09hNh3buUWIhbnbmXjffiOWqzuc49jDDd8yVJSJ8Zw==","signatures":[{"sig":"MEYCIQCSMzVQpZFV6cmtkKs5/wYAQpheVPgXjKCtvICvY2TrdwIhAPitsQJu6ji+uo58HWZQE8JybsX3+zO74rEgoXDB1Loh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5zCRA9TVsSAnZWagAA4D8QAJK+awGhn7S00BLN/GV7\nFqO2igtlBX2ewu1moBlPLZW1fn/s2ZReCZnQ5fCsnlJ9pyA1fDC/tQrnZNyD\nHb+OUQJTEWfoRJKYUqG7inhjXeTikPn+vhZE9mG+9Ki6V64leLzvz8UcxHVa\nYa8YMu1DurlrRi8dLwNZawm0rbvI5yClh/hPVJAlBtz0r/k2h4MmBAiGvT2C\nS1jgRIV3ACexLbVC34jrYENAOJQq+z3Q0LBk1lUDC2JUMJFGgaAZFMxrzpJx\ndfp+1Y/HfZ2IPRFGq6EKHfaR/PZI7bMMLm4K/izjHuXq55JdhRk3MaDfzbGB\nJ1PIc9xWTymlMiEeOi6YVwSxn9rBoJOg1k23vqC5InONlQesUTVyfwlVjss/\nSGuqZThjyPWNv6ftc3r7yyWNA1dRQ36hhVa26nE7MotjsXc+aTMZXvjNofAG\nIs3J7jU2S+rtID5ma4WTyAXeqV/NohIqF10K1RJT3GGg4PGYcmjmKiVVapCV\npqdawp+Z4yS7uDjTJaLewRGNjHwRo4naUyD7QnRRNWDxDrWAuJrFuXJc1FwV\nv03bfkNbMyRxZqtTw5HIwpRaN6gePbRS4uxu3vSOVaurksRVbC1WIBhuSacl\nJU80tTwnRywOEm7X+t1ErG2SiRw0ATQHzBxEpFWEbDQNdNY5kn0YDxwsdpr7\ncrp2\r\n=Up6J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8e6081836.0_1621028467090_0.33340132344172146","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/card","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65ba3dea2c87c414191493a9553a57b966a1ace4","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":19,"integrity":"sha512-3WuU6rYOD7enmuRVFV9c8eHp53Jof53S2QvoEkvlm+yONjXp+O+jttA7QOMyRNJScwFLtnYtlaUxM/24c+0N7g==","signatures":[{"sig":"MEQCIGjvXA5EdZwJ/NML/Bh9bjncLrcITKwYTdTDFV1isWaKAiBVMfWD6eAWWFOb6ttTQSITaI91IoaErUr/mGhj4JSU/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvGNCRA9TVsSAnZWagAAveIP/AiFT57qEjNfOOYY/8Fp\nptmIBPlnjs3zKt01OkuV7Q9tu8MufladzsU2u3/C/u5R6TqNhwcXPxAr2LNV\nt2wlMoKTfmD/HJ3zCol3TmShPf7PmWmWHSVJ2X2rPUgT0zj7JE6CemzfscF1\nTobL8LHP8nhHrAU8YA8pr/K+5vob17r47UFHknETXX4shwguFulcHpSO/fwe\ne765j5LHNZpFRyHg8O9WcpVuAqqMtUDserOB+2Cuqr4m3Bg1SCDlyw9Iec8/\nj1NZ9l8vC3ezp4Z3D+mi5I2XARJZVxAs5kSQR3Th57zrEozS1qY9Zio0p3i0\n9s2B4dFWQyTLCwKwwttdAssA1+uraPU3x3UPK0fwivmoUiT3ANWAcmUFvovc\nRxjB76nsBJHWEDnFeQtlF91WVfbeOiI/J46UmJZlstLcGkFmcnF6tZEUwXLy\nRfml6EEiXEJPUrOdjNUU7JOsmIiP7wLkiYuNSA9Z2Ret4mseZ8tgzfypM/I8\n4cxMXEBv3uTTjDZ2KkwrUqlZfu5JMHfo8MJMwJ43mrGDB3ikXYdFVFtkpxKf\n6VFFRbJV8gNUp7oJu/ORUkPZqsmdNzWv4weEts/rP9VGZMENC4pAIGaBW83N\nSqN/okVwHEx5ZqW8JF6drpVC+304M7xgwEAvGM8stsqGJsQtvZupxgvQvQMj\nyidR\r\n=uonz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.a2b0f4cee.0_1621029260938_0.6685938165438126","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/card","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bda9dc8a71a3c9d427b8a5aa7d8d9c27c2f9bd2","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.e8e39ad19.0.tgz","fileCount":19,"integrity":"sha512-6j3XhMbNa9/WEnH/Qa1/e7RwJvjsaKhNrzi7wE//kTuJWwVChlKhm52PUCO+2Lh/3j6oAERwmLnc9oYK29SGzQ==","signatures":[{"sig":"MEUCIBC+L8StYsVo3vwSxfW+Jh60mtN43Kx3DPyRqFgwk7pmAiEAxj8zxYdDT+Ge6so+a4vTyc4WwUkuteW8bORYlV4FM74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/yCRA9TVsSAnZWagAArDAP/icvo42Asrv4O6654H25\n4W/T++P8nBeh9R7CYpRSbZYn31T3+uz8E+lfKcVBVS6vxrk13pgdiAECPr0B\nvh8RnM4J05VJ3X4Qf6RqdgWZmXPx9rPA/QqozSgWFGcCXTlp/neIL2MdDYpF\nd3r3D0QImziH+yB1OcgLxi0lQEjaRC9iF1j3+NlVLFIz8qDPN/1mXtvP9yeG\nHfC6CIDHuRElKyaLd5hoVm8QZfl92h5BFoSR7v5uDH8aaKaAjuQjWx0f+sjE\nBNfQpQbNBpZ2lb0t0G6Saj0Z+1i+MFvcQhCqQiLE21ze8ReI7PyeM5EjDbmu\nzj7lxln5r7x88V7cv96lRn8V+8aplGwYMU9c2HHjTIdJOMt3iyDGyG3JAh4k\nwl2FUtPzIhu1Dnd8tDNOPBForZkenFkvFoM7D75a4YUXVK7RnghUfOmC0E9i\n1mMqDJ+H/0afCwXiX1BpmY0ltVpXxBNur8DKGcrMFC+t4MsB5Lv83tB78sa/\njmfnoYaD2KcFT43ImWYyIkUa9Qr6NkAj3i/XfJAMwFAPrjcbPlawv0HUVXJ+\nz8qYVIZy4odN/vzPeiePJgYbyunvo7bCya4L05/4HxQKIIC1KMyTXboAsJ53\nBR7xOaFNbcO1EG+OlJUHL3jSehx347YSpDTJfZb/G9wCGABpADY9vVYdT3/3\nhlOD\r\n=h2oB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.e8e39ad19.0_1621368817644_0.2140046478826767","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/card","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a11563b50a638e8983d0865176c5ece2a94bffa","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":19,"integrity":"sha512-wqJC9pj4tH8bqZc06ci8NcuIO7OIL03MLMTMbXkEnLC1X6URbD22DVvvqC/+Up6uS3x2PF3oS+jTPW7rm8rrIQ==","signatures":[{"sig":"MEUCIQCDPEih7b5J8yuktmCTEtc14DNCB4z6+gc+LnmLqeLauAIgDis37lI7Y/XXbOLpjxgiijLgW/HYA3taWVtei7P7BR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6tCRA9TVsSAnZWagAAQAIP/j5AGz0aB8VoGptdHflO\nIMSCKuzPmmMYq8OFxnDnxG6phhwj6FJHQicmXLawu7gCV85g2Gx0eZBth3U9\nbarA8AcrJirOXsbS0GsBdqKC+ct+RMF6xn907ZIGzERW9fVCjTip0yoMFIw8\nE4wZNhsshkVTHM5aUaKti9gaI5LnE5+EczANu41oOCEuSYsO86G0oA3TpA+j\nzldsbGYIAZbK4UeMNFcIcOthuiOAWSLUp0cVfEas3Pg4umSTwt8MkD6pMuDL\ngFwrU+tjUzrFOM7GNPAXNsv9WAHGzUqH7329mO6QkdFUhipKc/sRf02mpKvM\n14vMKxCprfWk/BfJugxap2sQ+P6NEATpJ9JlUQcBS/NJEEEl255pYt5JA2RB\nLINYucg8NtZ8RCLIIysbThdQzSVWwg63i6UUKoURWMQm56S3IKgA/fcfJwZQ\nWAysJjlMaDvxrXpGtRCSaFUJ/6O3rW6x4xfurDAXmB4GePvIDI5ojr08S7KI\nxknSZNS+agRVDMC6FFl15GZhgYDc0gJLugfP8RXRWfslF9FHH0u54u27zUXI\nVZm2sUn/VVPXQaeyNQeylg0a08m8fi+vpEjUQfZROcbBQpnGLp2w25ts+DwJ\nUOFjafuWs9EsIY636MunhNI/t5NzZ7a5ZzlmXp2mDKjrt8K4yi0TMZsm1A4O\nv75E\r\n=0SDk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.4bb5eea2b.0_1621438125416_0.6712380243241742","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/card","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93fd870b06702381e31a951ed09c10c320576a22","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ccce99cd6.0.tgz","fileCount":19,"integrity":"sha512-teqN/WEPp7AtyyK2xPFi82gpkg0Bd87pj5miGoimXxON/JY7mP1Na0IDumOjxU2sPix8+WoJBk54e9u8OQwlYA==","signatures":[{"sig":"MEQCIB+CcKzcdAJcAdSv+5bFkSRK959P3paV/X9qfa9/stFRAiADpQo4N3dufidn70sd1Fj9yebGU4mQS9OeMV8tH7JxBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPsCRA9TVsSAnZWagAAWQMP/1kGajzXAMfoM7eJmRV3\nqv36MDtS5FR9loibs26EgnxH/DHFl5aTetsWOi+V3q1SNk/HQc/CvLez5yMc\nN+mZ7rhkETFQnbOdMqGF5RsE4qduJ4k2lJQc3xcQH0dX2FWcQvg6/HxEGy1o\nO9Fp0eSLim39+C0iWUtD0JJKvmT4uYKtdWEVvudedUn6LBXrbg5UsSXhpl6m\nDbdQQ5REbx9EDnj+vkhsqCGuyvJE7Z6wEiMTObyCylCVRU04T0f8uzC0uUfr\nbSr+g9Drllu3+9MHXLpbzg/x9/WTNahsTygNz7WIXzOkA0TIuMUDlDdWMsih\nxbvc00nvrpbA/5J5HkeU1Umbl7rMwq5u/S2feH49HPrwSmsjqx+jNfbXMRI8\n1Bijm+jb3O/EEu80tmUBLjl/CTbkB4qa9bbz71KojTFwo4d/O5yL205iAoZb\nJD1czqGn3TgP0TecPycVdN4FwFuuHmKMcEXnAeNgY00ZoehNCYCTXlilgVaW\ngxWUfA+DCnaNdpKpB9FdTWeq3UK9lC5pzgRKAo5aXzPdF/G6mu/N+z8Sadps\nVd39STHkW24TvH10UGssQ6kx+jytD2WJqTOpPUuTCu1SzRZ3JfihC6gln8LY\n7tPCzb1hlUChnB9INS7QyILSV3uBFtHF7npsdEYGiqvq0n2A87XPT2ndCxrb\nIwfQ\r\n=prvA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ccce99cd6.0_1621472236278_0.11899834952940624","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/card","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"159541ed9db976368c98ed7051f2f727fc026f5c","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.14767a8db.0.tgz","fileCount":19,"integrity":"sha512-Fbx816zkMQQUhYRZptQic7jQEvZfGC8CNlOvWRK6/45eOO3brgnVBRq5Cwctu6P+mEK2kfopvaeM/Hf13xZ/kg==","signatures":[{"sig":"MEYCIQDTlXiA3GMHWGvVmFBSHf/hOI/j6X5ysfcqA/ggArgMQgIhAKRmXZ7EBPq3uUmZAiaTUnnnHgxTyEIvDShkIBXmCttS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsvSCRA9TVsSAnZWagAAw9gP/0P4BLE5D2UciV5J5ORS\n2+yLGQbOADYXVOPiW4TcSX2vhTm7qRXkWlsa5Gk9d22Qdd+A/du0gpCQLpPe\nkii178IFIjHibVdU+GfY5mdBrwQute82FsUgmFYcSzZst359bG4BxuQQ430L\nrTcuGhq6290bnfKHeKmFPrLuSEeQ+kPCOiXyYAlSLd4wWbq6SEcEjxhaGVEq\nBNeCnFG083eY2RLq0cGJDPcW1ABr/gFzvSa6uf5ZJNL0UO2Vil5PS2x2ZUA/\n6D/KqiTnqOrGYgRAeOTbVcPfsQNkj8vY6FoFoM+sigPpkhDHnVBfrF8HYXos\nHCLmbGhVo5n4K87IKtQ2cGIzJCxHlJ4MJ+HKjqL0hLT2slecBl1C0rVnEclY\nci6urNXjMijaBI3fgqMg4QALpyD+30Mx/ByJpotywEhiRp53TVzI7uV+Wnj+\na5qfpz4nk04lp0jcr6WsvMQzukd9zb5XErGZtio1C8k8XegOOYI5kKPirhJx\nM6f64QdMFflUU8auOqac1YCBwFdI8ifbiMPJneUtYyfuZ6QZq5Y6ibIz2Kvt\nJjNGXxozFXZN64cVPBI9n4kgpkHOT/gDlvLFBwW4AXt+KkzC6ZiH7khc4vG1\nyWGOCG27B6V1X8cFIVQc1cWz0UoXrAbBttd0wdWMOTHJoIJK+2nYItSudYbj\nNpLZ\r\n=FXph\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.14767a8db.0_1621543889640_0.26651527782346585","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/card","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac742667990fd6b486df686d235b8616033a4d84","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.22c6dcff9.0.tgz","fileCount":19,"integrity":"sha512-qTvHR3KBavdesZeDZ3z/0NvcO4z8PE53AM+dSkaaVEiPDlmLJs6iVR1x51A1XGkWzcevF5QbhOY2xktFoUCKag==","signatures":[{"sig":"MEQCIES/H5wjkmoJUhqn5m7KPBKj7reVxWPM1tPuppWzsOaYAiB12iO2BWtzgLx0QkHiUt3nRJ0307MJSLI0tZmrWU2Ieg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PrCRA9TVsSAnZWagAAsTkP/1PrObSMClautEBAMdO6\nfdJ72QeHpbkpqMBSXHkscY5kYuAX17dS6EkXU+ort/+4dHz0KT0/Qs8vlQ7Y\nuD/RbSUuYzPxgFFesYIaQd08fqleIxWStREgAPZpFi2j1jQS1y6yFtISqFJa\n/dvYrfCngBBM8/M9qNQqia28UhTR0BsW1nmG/TG3jx/zomzMKKgHgo9RTRFH\nyfCLQ7k4su3UN6vcoislM82EyRQl46oeBiGgaCrr8u9yLTJC6jvR76Ir72yL\nk3W/K9upZA1pBVOfxy7diuBcWMkUo1sw07v5dvL12LE9siy7TSOHEl8rVfGm\n+K7QoKFm3aPbOCJh6dfd2CbDdrIM3+CKR4dDHftilriBevgXUtK7o7urq7g2\n4SwOPkjA8Zs8EAhni0sKTK5GaXnBZMehHuGHb90+q/+LkReuxk3olor65CBT\nv5x55vFTuuLmy2sQdernEAO+3egUrlXM08SNRJoV1qGXd81xmZzb9B8cdGNK\nlHaKzziclgE4lAqE+uM5wpoos4RjWRMb0Bxk3C1OGrRC+PVrzSryuT9IHd+R\nI3PuBMyHWDNxa3dSnIDdLx5IMOxCVC2ykCK5colQdj4fkHGP9rjpgR4kdowT\nrhhQqmbR0LRQjrsIPL2iP7jj98HnJRV6kPCBCTLT+vHbNJ1NN1vDQWSSd+t4\nMcRL\r\n=DaO4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.22c6dcff9.0_1621869547342_0.7172589371816838","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/card","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f06ef34879969689a5ab4ae8fdde1ffe0027a5be","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.fadab3372.0.tgz","fileCount":19,"integrity":"sha512-7mSN3X4YdBApii8WTaxis+F63csQvdNOoGYQjXWL8wxsU1U8S6uaNUKnD/cd8EMRVfkVaXLbPaXfBa21KQTg1g==","signatures":[{"sig":"MEUCIQDqgWra0jgwDqgtqROtjMZjenp1x77mzcoK+a5s5rCQnAIgL7DCeH1CkyIMQktVlpVlcJ42DX1Dt8zpU7PxZt7z6rA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq877CRA9TVsSAnZWagAATvQP+QHN6IKWeFCkOMSFWb5E\nzYs4gm0kDIbCWjBAgrvZ5/tNSNKW0yRPzSfCMKkhUMAK+sC9YVrwegfBVGtc\nZf0KsDjyrzIyGjluSBur60pnfPzp7727IOs1AZH/TQIC459d3kuIJG3JUCeL\nc12sxeUWMmpItZluDtDKXrWbspD2yYUlVaT+L+Xu9amce7K+9DP8jA7gmKGV\ncaSci6vJkAN7EqoTmX6tV9rOnIBqRS0TgbUxoQzmZrQ63LqcwFSH9y5LwWjt\nxDcxiI9+zmIEyKh7gI1Sua5TGyxYWQl6NdVU08KqtU069tgjc0i17BRVl6EO\nmt0ttNUq+HVjET5uKkid4ACUYF2tMkqJL6AZcvTWgslCO4T8xo1HlbHvSJMH\n3rRhoK/c9mFyGNJhJjRZek7ebzOvCveysqwRLjivSzJo2tSckwdO5IRBmeX4\nu3QIQNAuISQMZFuCfDRfS11i8btB66KnsAgtpPbcSAYShBbex6OZUEV1ZJ9y\n3p2ewm/bLstWT441g3jyIGRgiQCto1EDFxyPyZXFfpbY7129YDJ+P80Fk7Rz\nqmTnG8Fh70+TWOVun2YjcgnJJctachIaJEUlXKxMfbNLqKn2p2fCnARSMRoU\n3rtAM+LIgtA3ZDYj2i1SybSDzqP1TtirQUm++trVWH2rFeXrf9/s0eYf0VV8\n4DPA\r\n=/RnQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.fadab3372.0_1621872379176_0.5294941436770799","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/card","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac87d9dbdb7f51e72ea546fadbe59a71a711779c","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.caa73aeee.0.tgz","fileCount":19,"integrity":"sha512-sITNipb+k+YywyH8GQ65U+r05CpUkDU1jgVkFIKOo/4nQVSFXZeMizbKqd9JrGzhZZsOSDCbeL+QbqvmWW0cIg==","signatures":[{"sig":"MEUCIQDVCDtM/fMCWynT7RgVw9hAF1WvTVPX4V8FqhylUYdCnAIgU6gw3lNQK7f9gulkGlvuZgHTTUF43ty+MfPthBSSJ3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":241558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZdCRA9TVsSAnZWagAAmD8QAJhROiLi332ldk9uBbES\nE50VgeFhDhZyda+1srTli4PrZsMyPRGiYptWveLx+qAnatybYwcwSJIA1ejV\nX/46SZYliYbEcWg46GP79uma4bu6luqkNvKYgPSKlqDjc8KRlnWCfcjMxMH7\n2z8kDDsxLNFJa8EcaO3wTfT2l2+ODpUO7IJynxfwpcpuTgE7CmXJTmgmdI/g\niOYeauSfHPI8s+sKL8o4PX02F69RCVEOqHWNZL2gmS1KNjpaWni5peKRTz2u\nUeAxQK5Au4JKyBnzvRN4CZ5oFRbzzoZTYGk1HgDQZSMUh/dTqDXgoHAFZYyn\nsf+IwykEfxATtfIOvkjzSmKTxlb7gT4BHp43SvMKZv92QXE3M8qhQpLN+lGq\nO/YYOtKslYNkrKbacatWThAoJnlgd07P5seikKvCuQLi66fwC5anh0vg7hB6\nsEIbsxuoVVCzquIDwWMRFEtbPIaU6MtXBuTfxW3K9IX9m1cwePuqJ60xYzVB\nqoKkRmx2omH9/MC8aq1+YSoIRSbXbOCBdJW+F0AoCqc89Q8uWVcjBlSfdGlO\nSITN/HiwYUuyb/IAiWq4xMc8SuUf35gHDM902ZbKSJGvELjBW2YrBwVIKfag\njz6ystNYhUkT6heV6nu9ajgetW7+z5gQk5VEUUzKGpigv1UKL2MyOks3pMSi\nYlzo\r\n=j01t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.caa73aeee.0_1621952093547_0.2919477337333076","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/card","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c11a33c48fa523064aa04552c37ef8b50adff246","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":19,"integrity":"sha512-0JINVT5oBhBt0TEQ40oplvM72tScPDuSJklNO/G1H2fIKkPXsjtOxv2V2GYmQkJ5QvkMjagaNoURZiSKvAFgiA==","signatures":[{"sig":"MEUCICZAdGKxY47cm0EbEqihrDaX6f2Smue6VH0XK5INDteuAiEA4i+fVyOiEtUSGaQWBcYk+eGhOEIm8quRVuetiUEbclo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":241558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+oCRA9TVsSAnZWagAAgrQP/0OUbFUg5xJxnMOvCPvh\npYO2Gtflmdap8M0xSVUOMBuJM1Tv2YeOW61a5AclfmHFJxMtyvfSvK8A9wSe\nTtHGNhDofPy0chwwoJIBp5mMbRaNEtw1jQhw1lBJGDLIuDzSLxLjfP/ibf9o\nAW/MRBnlrl1MA/KErs+mWTQN4+VlkNpuFFnusjhvC4HilhXPIuxiVvr9UoFR\n7VXeyy0nfMk60jpbawQzRt7xpFrhIY8oE+5rhnD9d9dndBopqDVNJRRFhYiW\nCclLVJuel71b6B9S+sBzMaULBi3UsEg3hhLKKgMrNzru4n0P/C1GUzSjOFzq\nMrvW4T/k/YYhSifUFEM2KO4cHIRmPsmLyp1cdKTs0Xd+R2Nxec8a5i3YaupL\nrUZd936ko/SJdV2rDdmqxJHif5kBx2jw/gTkBCYfwKx3uGt+flqQESrXyEID\njJ6B7Yz3jpA46PTZFX3a5lRwBfslKjRQEKCmZpzWiB7eNQbuDckEf21gLzdU\n4bIkEFxf/nw/tKLTl/WuXL0TeLkDsLGha9TsTKn7ol+GGhyYqBMAq7CD2gIi\nabjg3z581ApWwH5CkNFaUBVRPG8GwvMbGKnbMKdmSIvp72+mDd4krx1CX795\nBqEPtZcz4du3QUSuq+MNHQ03StG28WJftJu25Ax/OFyuwbztneszivRxvPz+\nlGsb\r\n=ZiaQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ec31ae1ed.0_1621974952139_0.7748833225656986","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/card","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"718d55b4e9fabe763e166651015691bfd92d02c1","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8530d3514.0.tgz","fileCount":19,"integrity":"sha512-yDagZCrUGWRqgBBX82fTYwUsZr8GnTbfQa2dnMCaqjlzSnIdSOmaPC5jPWp4ofW0ivVD5Ad3Qg4SOJxOaLH+dg==","signatures":[{"sig":"MEUCIQCynPShMJqemMSz72FwMhZ6WWQNCNoEQyvqUbiAzNoVWwIgXFgWLRs+9w7FzGXzXy1DOt/iAl7fosUON/Zu+NBihvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":242778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NACRA9TVsSAnZWagAASc0QAI//Lzig6lqAnRdR1W36\n/SruUlZ1KLRR/h6XGJ3JRgnNOp+YkAx7eCQVze/oxlvJQFvSo9H2nY/VyUPT\n2cRRcDsXVB+sIPkc8hAm3Fks1tSF6/RdyFZ5YOLimzhCPRglUCrz8RQauI2f\nQZ0qfEryxBfnanXZboPG6cJBM7n2SLe58XJiXly/Xc2yLMJJEb8fwlosp/7Y\nqZJqqzKXkLfdvDL+QP/0adIUsflTkgasFMueWaXIUarx9VunTXTgyH3q2Im5\nU6hbJj4/qd+gm9gjRXHen9kG0Js4f5END6ON0wFnfc7WFyI9sG2xIsLhOxUT\nU99Fsvve/SsVgaIeQOn3WMsrpL7ihQeGtOzcJ7NnJ39ei/OC4z8I2P6jpi/O\nZLS8DpZIa4Nd5pFOd7mFS+L7X+dXGCFU37Plca/hcQ3L5CWyKRfp12bq3d2s\nD15CBIMvX6dqYsWXyzYgBEfFc9wilhpab6dDZtx8YL+w8sXo9XekqvJO9B3z\nSmixnKwzhN9L3IYJQfHrqhgMDdSGLRVfULfTROn9vkU9getEcot6kjQJuc02\nejhZ0CqQMjCeHptNjVR0g7AaSf5k3TXd/+Jf/y2iv5sir1jTSLVWGHC6EFwu\nXcYlOQw8D5kzY7ifXpsz+U25B0BL+R/T3mMd5y2Rk6VgCv/S4v7EreWE2dLU\n29Bx\r\n=Jy+F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8530d3514.0_1622131520239_0.32516392840984","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/card","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91570a7db47ec10d24d98f35ff75d643109be452","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.00b5899dc.0.tgz","fileCount":19,"integrity":"sha512-2bCCPigerTMQGCiThd0+Ru9Y0Db9DsvooYB7bAUlboDt8PlbCr5wZImcTQ1L4MTdvKj2I18kTfUCBfIAshQWBA==","signatures":[{"sig":"MEUCIHESPHvLbvc1c4OymLvWRqnrBxquVpNEQwfRgpB6/sMqAiEAwsrTmpyfB1S2DTPRNU5pWGg+RQiLHFC4eflpmjRtdRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":242778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriqCRA9TVsSAnZWagAAmjEP/1DvFilq+jqgRGb63HWm\nVtALir0oHM0JBbqs66GvGsu7SBFkrfRT9YA6bAsXHGk7MT5HgTQ7K5S9/d0G\nW6h1G9eiKPWkDEvWDbhZlrEaqkEA6+WvbKjDYk3YnIaRLGv/uHqoDgaLqWyj\ngtWC/buG+pC/BrYTXiC12wBGIU2Uh8GkPzzxwWBibe0aWq3uiVc/UXjJPOrM\now2Kahk808NbxQWl+CEcpq1YZhvSRJ5QX4hh7deo/59L2L6s0X/FVWcB3Ijo\nhh0ly74GfJZYPiY8ycnXaWQQXOlAXBK/7n1AwzQx3J5CdihMp+20nyGpYY9D\nLOVtIaBWwkAwueM9SFJoyU1CWyNJUc/oNSYTgF1d2ztaj4AOyzXkavZn5sgw\nVn/2a4aQeHm5gNBFcUUFKy7nKmvSJLYltIa3PnF0cPJ/c3HmcmQ0+QEIPdsc\n745NtWXP7qIZd5kECQuyc+3yigMVMu0SoZK5avgndMz2csxDCnUIbuto5M5S\ncsWOAk0x4ltMCTehKdswdRPxbgkFLusRWiWf1Gabc7NFCU2oWiEqW6t8ySLh\nuulP/gG/4fsWQaCw8u/QcSqbfFKGASm135LT8PZoQTo8So6EPZ7RW8zHMWMB\nx/vzqNydqptoevr0HRoP9ULgcXKgQIWehzgakpo4Kta92O7+pus1PM0Z2QKW\n7t8B\r\n=KeIv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.00b5899dc.0_1622587561971_0.6144818677556407","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/card","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05012b20aa38ebbd9c876a7adab5042d6de1ac9d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.f1525ea3e.0.tgz","fileCount":19,"integrity":"sha512-+e1tlCe2QrUsz6WkV5BpQkB0QwrqNkbnuyWi3pCAxISq54FWDqQXwlUf41/oD0Th40EA8w72uWwqMKPK6B7vFQ==","signatures":[{"sig":"MEYCIQDjCrSqn+xft6sMqEW/+1rW/XKPrKie5E+QONlrWLORQwIhAIPwYopwnE56gIN+sqRm/A0IDvi0ywT/FyTIi+alCyAv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":242778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8sCRA9TVsSAnZWagAA4WMP+wda9EgqOXI9h8e5TNGP\naodPUfQaZqTMTqDBsxm41UBv1ENtUTg2J6MYeLXBlTAFwOHD0MKSZ9mLeE67\nlYXtp+MxcmCzJD5RqhJEtDAMZeUym5QbNZXUHc+KQDyQNFmJ27PXpA9LA87Z\nX+94IZHrOmlqH5iCn48lRHTxyhSjBQtoLzXo0lW1bYH0DNm8BQWJ+Se8Vqov\nZQk1kurr4cdTy3rN0KDxdewTskCE+Qzl7MJZa5+6XZSU7biksCQgYfZm30Gl\nWG/8r9s2rksEHudTWd1PAdxQgUQoCETGfLtYw0b7o4kPsEvmoEi0FMS0kNIi\nHnXLEWBTxK0uqHq3JaYwT67rPYr2btEGsxrp5178eSelwQP4KU894F65VEJE\nY8cDILHiQ1bbUqoZNMWdkJKPFfbtcIdG9CIUj5QZZ0SiErbGZ2/iBsk5MR58\nCR26bppO0ERgyT6YuoIyCnTTrA80O26rChdwZgB3qRvsQQKX4FBDFk+2uo4Z\nEWzs+HswwXmi2KWYXy89fqbNoEmvvMV9sni2bVLB0Y81xruSKBD85A+KUYeb\ntTyl0pfRJNgbz7PDKupnXNZB70RLmgCd8BHSdIxxNwqImcn68pYdHwZ8KoCk\nwg+jL+m0QdhqCS4qveFQLcoghx0UCu4DppMt+cNuMbBG6uvLWey3W/g3OS+I\nJJQI\r\n=DeHz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.f1525ea3e.0_1622728492602_0.3603849965362431","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/card","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcb444a20798cf22b30c376363968b04e5692d9","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.464a00286.0.tgz","fileCount":19,"integrity":"sha512-ZqvtbOf0JfXqlnEvtTfk5tEHafsM63myOU6FPstOiaWDnV//WbuQCwNm5Rol9treOjcwrHytHcOox+lxL/dXMQ==","signatures":[{"sig":"MEQCICMbm5i5iDx19OLrtaFAsgLmC8dgYcYFpE8yIN7HsUh2AiBnbOc8YkFLFkgQmfv9qIeuSDeHhJg/JdQJ9gxdt/F8cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":242914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOtPCRA9TVsSAnZWagAASpYQAKRgwXTdCSivWvnLeI2i\n4FrI37SBB748u8CXEnOqjMQOcz9QBgEej3wIBdlA+drzIS8B2UXutQnFncga\nyMCPjQRcGlr0noGbDq2EeplsmFQCZlWHv2ngWzB/ERpzqsDysnu+Lp/36swx\nR5D76nUQ0Us336AAl4bYYC4jey2YI8tgl1keaTShPKU69yzdHH1bcCwYLCKB\nOEVagHqKyZN7GaU43Y7yCxgavHixsXkHApFX/xjBNet8epf+KhrXO6yZaXWB\nApENsVAAoiRrP6JA5YEZMPOXK5bQ90plgUy4dvUVVDDhO+ia0wZRMfDfRAYg\nJx5DVOiBL7OzI4U7uo9ZaI4y0kTdj7lhXYFmjuQWCO/vJ6eN2UK9X0QEbOGa\nQIqaIsg01m/7sD+RjLpEkskhoiXsOmgCo2ZBa0AYW+9CiKfnu+cujw3cKmlU\nmq8PyhG1vTlxc7JmvngwnTXN1n+WXVJ6oIVngvsVKWa+amIvNUL3BH00zIqo\nYrZIPC8ctCTGN8FIJ5F/H2wmdLN3wzES1IhXZBQwm/9iFGcHpUHk5pU/PAmI\nIeuRdDLANxyhswBr/ed1iNoNqAX7kxRHGmdr14yqFgCrD6XgHjibTruiFcRM\nhRfKn/Skn9bDA2oUVyo+JcadIXiCxpB0nAaoMvlxMht/ysNFXSg8nBAw0rfq\n9/0a\r\n=q5Ki\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.464a00286.0_1622731599036_0.24800362611936078","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/card","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9b8d7535f4c87459b75985dbe89220d1918be77","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.474de7878.0.tgz","fileCount":19,"integrity":"sha512-NgDNskJiVRVeSQuWXXIVaPiSkTTfQ/EMrK6QGj36JP2JSTGM/lbjG1CmzN5w8EPjT0el8iiB/9RhgiF2dR1CYw==","signatures":[{"sig":"MEUCIQDhy2AGsfI6NHiEg/vOtZv6aZJWXFrKLV1lkB6OLjy8VAIgMlgfNAvL1uNWX3RHeOSCRbplMsBUaBPeOiHYMFYZuCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":242914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHiCRA9TVsSAnZWagAAB+wP/jbw07NR1LyojNvC7IgJ\nhm8zaV97vrQpEHiXuOmJ3qA3txO/t98uMoXpOtNGtnaOodptVdnaC7mSJkFG\nSSoQWHZq6mW2EKlgXf543KzoCwPdcAM3TrjVfO5QIDNl09KFxt0DIV0eM1c6\nkVit+BDMZKQi78uX0MeEAmgCj+nKp+5gxvGI68OW2i+WaC0/WmULYAK8EoQS\nY6wsLQzBtW2lbgRyY/P5KAbbOmFc4iGD0qh/maNczf0FDzEyMhnSYi9gqvlJ\nZtcZez3lK+jLMHracwfTLoGh8GWjTw3RxMKPkiycv5SvOhB/rrtP6SMbEfqQ\nMYrEvEvNrS7n0IbYimqR/zWE3gy1NDhmClJVdHK8dHM6ItstacQncqhrCg1c\nxz9N/WpBV4WdOytQN/qeoHb9BWi69a9BQ31HCtR6VONjm4JkxmCdEaZQW9XG\npYKDX6k6ycBDpGkkGVdu/cuONF913OYKyUM9GREzhFXj2w6048yCz0kzEYZF\n2xO64tEFrDFS9tjvsFWDv1KrtfE9BIMpwUFgrzPh7J0C3zuqFkXUIurCYi1M\nRrMCwIwN2g/3fmqFXt12mNva1UZyRoXJC8xzCZorecvK/v4kFQHF98LDIM7H\n8aoQu6y44vKFjqb1Zn9A+IAC+n1r88q6eDXUOsh4m86Y62obqJnlZ8DXp2bB\nbbF/\r\n=sfTt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.474de7878.0_1622733282727_0.34677096017110176","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/card","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40bf3913d170f9cb9f8147878148bf86778cab50","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.b87ebf74d.0.tgz","fileCount":19,"integrity":"sha512-9+AYxciFALJGDFC4+M438GyDYnTCt4K7m3fqMmPw46w9UOMlNBGLyTpsQbjF0iCy5UzDu1cMoLxbk3g5FwtsrA==","signatures":[{"sig":"MEQCIGZhmZ5LiUZqibNuC6I8+EM8MEkTP17MAXkxuXLPr3DVAiAyhy/4O/JC/evCHtwfsNiHjitpVhJuvru26gHlyOaD5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":242914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWECRA9TVsSAnZWagAAeeIP/3AngO900rUvdG/CxV/S\nmjuNu/NI7vgtikCG/KDwhGz02OztwXpraKGs8Ex+KjyIDFquXkXmITMVwACp\n45FOnIdQF2E+PZdq2X9GByx8DXxaFR9K1cQBcis+/Q/Y20rLk7ry25H6ze3L\nKG/CK3u9FVCURHLP6OILtV6it8r8Fe7kT2dhhb6FHL4huTavfGwGbr5SiHCi\nvxWHTz0Q6OeIT7UoCfPr9Tmvc6SJxhLkJ9Xp2EAq+jEkO2gqBJNw7qqla/GG\nUo/Wv5SXqPZRFJ0dpFkbTO8XEHLR8QviBGHeKtNTrZk7KjMJB8NzgrHTBBQY\nHKAp2VcB3GcpCnML8tKHL/FlI0lXrG92AYHd0BKxeCfed5qNYICKQMs4XRAH\nm6P+KZ6B4wlyXa7IPb8ITXo7x5kcyypIOCayO0veKXJmhmlMY1dAqPR0ZdkT\n1jEiaYvbzBXhlAEwcniWYU5O5ByDC0zssybX04cOr+UGsXSLCWcSTQ97x8MB\nHWvrdtuRuJAARFCrztPl4GwP+Snxo1pDatLEldC90gC/N8uf+6KFL5clMULH\n7R8N+lTGAtwQNwuNgGcNAlRast07NU4bvoRtsODQp2ROqh6v3SYiIPaSmzKm\n931d6c4b91KTz13ubtsVoaEGvtDFvPTMKSR2nFqNzriZ3C0w/pcPvEEjKXYG\naOXr\r\n=4t8R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.b87ebf74d.0_1622742404600_0.17617679692697252","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/card","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf13fbd7612c3dbdbfd83e91d28d786debe224b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.2daa49b35.0.tgz","fileCount":19,"integrity":"sha512-lISZx4sYnZgvJeEwUq/h/QuPtA+Vum9/HHgI2akgF5M+GXFWa3TOQg3XYwiJ3rsSy/jZGEEOwxkh6RbysGD3/w==","signatures":[{"sig":"MEUCIQCDiaWwmS0BcIRHaKo4jhi7zVulfq3Ry3nEdVgWChLFRwIgB6jLUS7C+IBN3ibWpJ4KBpbBb4JixmpUne1TTIuRTYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFtCRA9TVsSAnZWagAAjAkP/iBlA1xDz+mYXZw61IYg\nlbd9q4MIXegXEnV/3xiw7qwkExBjU1Y32QV4iScskZKToQXs/Iw9JDXs4Zvn\nUASzIMZsauX0DJXliCo4bCTtkFicfZkvvbYDvG+/wn8mlvstW8BHidFCyxpF\ndZGEcbjtOZD09os+eDEzVCFvckpyQs4/h5UgXuDCeJYg/sGLBIpbjT1oyG0U\nGxBsr5iCkR7xoPXCVfAwcfbxmvTr6npaIMXTBKyumn8X9d0YJtqjQiEahXhq\nIx4OXhW5pMi3BQ1BafANHJZB8oC5iqNA50667eGVF+LHX+XMIG+/eoLoMoMM\n9r/rZzSAUXZfcruRjurZCWaBBhByhT/27/nY9SGKKPUCfbJTCtKGRI46+REO\n4pmPJB5ah65UFfcolJybNebmgi2+r7w0RWuldztw9ahBLyttTLrUXUw6v5lx\nPHgNhBAEf77Iqq/S7T3HZtVTkHq0KXWQBvZcjaoHaZL5YVn+Lsp+1PJm4bW6\nlDLigGYX9xlAg0gMSctis/fn6V6gFOoETNq+7Eh+RooJOlQZwWlPYXKVzXUG\n416Tsj8V3r/AavcNr0rS6KbuVeNkxShWm8qCZt6xNdKGkaxuK//o7ybUWmfi\nq3dmuV3jZChG+oYbT64iZsvQYqoKuMv52lnWqz0aU0NW5ROE9WvfOJ0Xy57E\nRVQU\r\n=3l08\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.2daa49b35.0_1622823277505_0.5404177311247012","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/card","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77aa36db3de1a68caf728fc76e85694d6b6ba4c","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.08db3d737.0.tgz","fileCount":19,"integrity":"sha512-K3DrDM8fIEegxGXI6Q0cNObzeAFh6J/KnrV/gp/bb/xk0Ywme2nA1wvRwlrNgLp1tMrQP+6DW8uKUsnwQMW+3Q==","signatures":[{"sig":"MEYCIQDRq0OdbO3kKY9zOvs2WW9JG4RU5/PpKF0PtiLO3Ci/YgIhAPovWng1UN5vSWPXrarG3Q7rmMyJIyNqkporGAtfyqJP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoISCRA9TVsSAnZWagAAJaIP/1k0NCIp8HGcHXewCy8+\n473lab5FmHZb+ouH8GcJkle4Bllm8wH3wzoAMaTM/gK+FrIVyuuiD/LtBidH\nEeev4QY2RPzfeKqVYWlUeilyZJ171hsziq4seq/Me/w5+5+M5WsYLKgo1Laz\nkLaFl327YrGBYSA841/yvpPK1Tb2XEcAvmPdT2IKb8sb472NgqAeE7o1uSUr\nAoLWco3D3IVsRpzNAWh/V1oH39EHahOgGLVO6RL97Aey7D5swWvSsYFhTnx2\nbUTpTeL/ruSqaZyKseDELnHxrBJF6a86REa+CTJnQYyaCMkQlK0sKa2XufQU\ntTNUzJKv/24LwXu6HQ4moYs/j0Hxut9bojr3GsvWK9RP8mQylpiipaJ9s7i7\nCiInM/gAlacRcmsTZWDtcfNFF9fKan2uJY6nUQHJ23V14QOvjtuj97l9wXGC\nzSSQD/GOXwFYUusQ7lbrDDTliSaknQA6pn1F2fqF+iUOwOGr3oXSUqXKoQzL\niaOZcFwZGX8Eco2IWxdgACqb18lkE/c8/v53BEktJ0oiGjU+Dt14WxL9y26u\nI4aBOgRRUu+vGCMkTJvehF/AYky7dmT+pSxF8AnbyucYQpSoA57O5Me8Fg17\nM+DrEzXF9ugIbK2j7lK6UJm7q6sHxWrBhxH3OkZdaLJh3Ytc9vpl/swumtZw\njS0h\r\n=PAm+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.08db3d737.0_1622835730211_0.28470550691452545","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/card","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b32f23a96f5779e2f62d5cc58afc21cd30ed21f6","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.5823407a7.0.tgz","fileCount":19,"integrity":"sha512-+TYNzzQ23a3Lnyz4YM46K6AQ7QS+M/ogWwf2s2i8PcaQJV7ZlGL3Orr6S7jPZRT6DkbGWK93FwMAhX8xy2F7lg==","signatures":[{"sig":"MEYCIQDMU+UHk6HODZ8GVs7X/ad5wmUZzSl9SC85fAjJ+ErNxQIhAL6rhJh+IYX3RDoH76iQUUHhN5hEO6LDF9aNvdTrCiPr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5zCRA9TVsSAnZWagAALnoP/irFsTztGPW6Xp7ItUsF\nXP8RYlf6XR7xeOAz4Ed1GFFDgzybQ2RzAZpPrzCl3xYUtIRUJUWP4cBiutHR\nWDSIGzuLhKbucFcb4rmE8ogzgfm53sVfQz8JFELsZz9XnEeMwnlnTcvm4MBm\nX3i9mr9f6ahnBkPbUDn3xXIAS/WARQouuEd6S6y4Uuik32ah0hU/gllB6Hmn\n+lVBeDnO4Rckkq2F1WrIWhfGa2F/JehkofItmRrIFnUT7i2nmZF1H7l1eO3r\nuTJqxA8zPv67r9Jda+/dIK/33dyXol2GuCYZNVD8/NB245A7KVHv/3EpXEjr\n7ZhYVMzf1jZWzYsEMffsQjNo8SHsOyR6r+jUqwgaD1Jt3EWxGh133qV2xLlh\n/53bpayh0Lq955H+0D7PQ4iyTic97j/p1ibQvXp+at21JJ+DXdC/byiQyVPp\nku+zphSwp7XanLC5WvJO4c/cfq02YQ3l+1UpUAWD5D4OqGfMrY+W2O40WzvG\nnkEngl59sZcclGXN7ZZc6MyoHgCCBq5LsO/jGBEmXZsXzoWmwCrPS89GKVlM\nddKTVEzH90pdVbkr72oU/Nd1NAdZ+GSqNmQBM7/EMjGXl2OYr6rrFUsNv6Rf\nzIjLxFqOTlyS7HKVsKShqpfNZ4K6ef748tKbppe2xwwS8whcQ49gEMCOWgWz\nLOtp\r\n=9tAR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.5823407a7.0_1623113331442_0.20790265775309802","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/card","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92fe2364035d7f920743276146a8040fac8cf568","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.23b0c5e22.0.tgz","fileCount":19,"integrity":"sha512-3AqqXhwp3wkWdSf7IaBQ+SnC3XC1SfUCWVNz8UCSOcDuhlYTcU9NmsB2WgA9l+XI4+QYGY1VKSwMxof3bnstfQ==","signatures":[{"sig":"MEYCIQD4qUIYRQ9Q1p6HuC5bl10qvj5LcSwWoxKqA4bVJgVMvgIhAItaXNDFF9NQm1KsWjC4PlwyACWoalYFRq7O8FIb9Tub","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5lQCRA9TVsSAnZWagAACR4P/0qn+VFQ3WxZpv7ANtWn\neMBDNqHQQYohrtuqCK34ZaSrS75Bqwvodzv5YsB/rmMrIhfG+Yqzx3tNCwVo\n9NIwA6v3l6dH84hEFZYV+Lg2fYxo3sG0o0ZxTOk0Z6djg/Dd8nDXqblPfJ70\nzPf8nCcRSxSCDsiTiK3OGWXBJ5Pn1EhKYtX5ri04sEDIgqqyzxWPiA3tCd+e\nZPV7zKkwJ5rNcWfES7Y920z34VnwQm+qg94hwxIV4ypqy7Ky/EuzpdvokP0g\nyjQlKZTiejHI7Rl1oSZ7CSN+JKc23ngQvjwzP1xfFeZeVBiCm5S9Q2kZQrKW\nEOdt+Cik6JnNb1vBcAHkQNrxyvhp0q46jihf9jgim6kT9b2GUaCvLxj+19JF\nkw+AX6ydAflVZYhFjbu6BZmgTgH6e7fgpeuE9/mV4qwlTw6QlzNjsUEtvqpy\ngzl4tx0+jFVJ+CUCLLw846SI3mKniU5bra/amKwY6a0SpXqWT/+3vV5/h+u1\ngnzNyWtG97LzyufyZNzajSiLhkeBZIQ4efu5JjlY1bQGjfIDtVbVE68XljrT\np+so2VreRglXa8Ge2BUY2szu77g1f5Z15UjgfPpO1nvGRRW40fNgY/Hk7+JS\nCPrx6nkD02+ae7h6xbEWtZxEFYfB2PrIJnKX52e+KYJSwizXJnibxwZqzHMu\nvl7L\r\n=F01e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.23b0c5e22.0_1623169360348_0.6993399730431427","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/card","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cd86bf09b4e0392319ffb5bfc1cc580f29e4f30","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.2952c6a76.0.tgz","fileCount":19,"integrity":"sha512-l/ASsB/R4ODLVb9oukeXCTPxT/74vARRnTM4YJp7IyYkEPHqcnOIuyC6z2lCaAIVOEO2uVgQyz28vABulfS6ZQ==","signatures":[{"sig":"MEQCIGIR015q+Eaor9jCT7jLg3Slloe6f0YNGT1+NjU41LAFAiBQIek/bKPuoXPD7uVzOq6JCtf7SM5GTkFmeCmViFfiQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6u/CRA9TVsSAnZWagAAPXAP/1ZlquyEymxVm5ksS0nJ\nRHigF3GiAF3cfPhMvdXQRkXt+FnL9AaHLhT8TbVWYcfwrs686WZjNuNHj7Js\nyXpxGtgjSxxYf3gvFfC8wyas0fg+yX/LaQImqX0Dsiqhi9JdLj+DNv8JxTnc\n84y3OUgQuG+hMNGYNw/DZk87mAP2lpm2g+enm1G8v0YOsSnHp1z8sjL9e0o2\nzuCPZv0X9O5O3I7x2bTxOAThMfIdkQtbD9aUTuzgSnGTxZHE/U+gWG42fZwR\n4ip+veK+V/MZjgWFpDUcxmA8F4zdBHkE3OucY4hL/RcJeunpYbqNABvCQeh1\nkBc7mXMbZrnOkPeKBDwn0DMyiYl4+gLseD/rqBEq26xJX3dv7ahLoQ/PAQGb\nh1rX9iYauewodwPuwxVUHbaZrVH/gRB+6bw2VzS8+AcW1T9tnY+IHCJSqrWw\n85RoAszKVfl/cckh81JRrFUvAa8NR1EyRwBoBdSLHGL+TgIpMBctbwd4oBQE\n9zucVg8E2B8KHILjxEP21BiLJMD6M0iIhS0XtVV41aMf7dJSNmGM2hufYhW+\nUHAKtIRTTH6NkMwghAe9EyUUmHJp/HfAcU7pIqB5MlhYeRB/JlYA90MAuq1q\nxbYj1BqhqXx3CzEvQNWj9CeCEAvIxirXwDWT8BquCqnw2sTTVT+9o7Dnz6bz\n36HU\r\n=k8Vh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.2952c6a76.0_1623174079348_0.3266295364521008","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/card","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da113691a5b3490788c3d615f6f932da39ca6d5e","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.f12425f88.0.tgz","fileCount":19,"integrity":"sha512-VeFO3jH/qJY2rrwsbA84HT2SqqKCCV/aIsSYLDkJ2+WT3JXnfQ8MQNvbrFSHn/yIaNJwigtDOkC8NC2IcjI2jA==","signatures":[{"sig":"MEYCIQDn/PdZForMGPGTnOWr1udMsJUA2QzzkkKYMLa9PkyATwIhAMeST8FomxYSSHR7cT5dEn26rAJkfS4crfAJp0dnXISK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWiCRA9TVsSAnZWagAAOeAQAKEQWhLvQyy04CWoWe5G\njyzgeKi21xDqVNiC4jEfwKLyBOwru5vcEp5I43mebVQcoeM0nCzXOdIrFnf6\nlg+v/hUQJE/mdICYOZrNL+6Yr+EPrTrgpGK9R6GRTiikQIv2duha5wG/iRjb\nwhkDFszbNJCLzScFhCa7TcXcVUt1gfnip1LJd4u/nG7WRUzGbELQF2zOVDbf\noMKTEnVJcb/1esx7ke8KHIVavlWK7KMpmZCEM4CaZdRnmLW5kCm+pGtOvbNb\nwxa3KJf8f/O4niiyShM5Bb5/htAeDWpzClJGPQ0xZ+iIK974SvMulLIcoydH\nNJFBF9unXM7wgNkCSZELA/zQBP8cxa565xqshRgRIvXBAvU4LwasDlLgWsRo\ncwrhU01sRLb6F1E9UASlsx3yDhd/N+r5UwUAMsD4beVWTWNojtFoZe1RZrp9\nT1CWi1tsyvycdOOftlmndKjHESoO1JLssQ/QfFUExpDGtQ7mp5dc/PEuckFN\nY+fIrh6IVu9DjItZR4XrctH6n9+0/lynQ4ZC1DVn6b1Qp8u5abOjqZ7g9R0V\nCKGpagx94s4KAB43UQ6SBVmwgEg1DrTHSs1wgfavSwg0JpSmMWYhxJAvpT35\n0M761IOcdTWuNhEbmiCFsIWtNYxpg7AeKw6om5nd9G9T9VEMRWKfy1XXIA8G\n8OAr\r\n=5WIi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.f12425f88.0_1623287202681_0.08533397577269297","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/card","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cd9a3c6f0cb93d59d3562d6b9aa80310755d0b9","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.e543628c3.0.tgz","fileCount":19,"integrity":"sha512-s1XwrZwH6uKyUVSXRI3OzU1Wi2JkqOpt33Ae6614fZGXRfnWPVmJ38Z5eVoke/MtyBLUhBU41J+sxJIhQugQSw==","signatures":[{"sig":"MEYCIQCg55vY/5yHmDNTuNvQTrNNDbsg1xWf5xfzSgUSeNocPgIhANHId5BU937E1+rxERrrwEzWEMqRgKuFTrp4vmbcAymG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXeCRA9TVsSAnZWagAAdzIQAIM07jck/RSjwiL50vwt\nXLOYv1WGbhzCwBGEam7FYaNTK4/FV3kRWroZz5nXX6ybNQAsmzRRgN5mk2D/\nbmKp6tyYy6mSd7ej5nbZEBcPHzQ6hlDMSvJmeDGbd5Mb1/zc5mls2U2h6tN9\nxFNmU0RUx/ryJYQ+OZSe2T8pCrxkNmwBdQryn03HT1pu32wfwNj1B/Pnr7fx\n8Kz6VhRoUmKwfPpoooCmqLBC3ZrNrBaAzRsd8IPaeAYLfu+l9H73/TMUynZS\nK/3Qh0SL6+dCwLz1/TdX9BaGfs5WInVbvSIF3R43bs6cGEkm4o3I1o3TLMv8\nDK73VThxu4/q4VeIZYE4KpL2cWF7Id7v5T2Zh3tQ6udzm81IWsZLWOTwsFBo\npaC1a+/xFeQNRL2Vb7uDBHsKn/4SaD9V6hgjMwtUrheYMwSiptXxPLHCHC/x\nEB3tnfVmy74J2+3FoC93R54v48wYguH1xkewdO3ALtP1Qw7s5fndxfBZcpZa\nR6SzbnwoqQ8l+SPThG36kZs0r/RPMp8uWRLryR+tXaMRIu7KjP6p5cM5Wbxq\nEyDETbezJk6G1zXIPflPJx4OK+dmKvex2kP2FjBduF5FhdfhEN/ovkea1/Bz\nUHEwCLmr1iE2/J207eIaOJeoTrbisLgeOgkH06Ct6GOKTU8oQV/qI3y+KWFJ\nOZRq\r\n=bpTZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.e543628c3.0_1623287262155_0.9783732805101988","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/card","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72b53428750e6abaff1e7043ae025a88aeb8e183","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.e0c346286.0.tgz","fileCount":19,"integrity":"sha512-6vw7/Hk7LPOt1l0+OOvF2NfRTkvjYDZHL5is9y/T8FFTlmrnwnZfYCtdrcFisTW5gyxzN0TpBKm8LMhLJDzSBg==","signatures":[{"sig":"MEQCICXsTG2c1rpRDxinZ+ixRwynnlGnX2dMbGjBdAuI9X7XAiA/OkTSg9PpvBjiU1NsyChqUw/4tifumv9FeWFKSqPt0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+ECRA9TVsSAnZWagAAhbsP/R3J1nBz8lEq2WSaC5SH\nhGR3B5/XRusPg4LCvQz7WiYvhMSw7MpoehAf+kZIz0mJFnm6GzAxdG57HHM0\n3r58bt03kVPCY6x+Em9OAT/OKSqklb+HffsI3m23HaNkKhLj/YNcKrmixROP\nrLx5Nm8CEn5TrKhOQqXpXcODr7UF8yk0iXThvH7np08k9pRY1LHvW/nQ2U+6\ny74gdzSwi/1rd0Z4FHg6pk3mw568tD9hiH6RMW41XRYdGu0qMeni2T3EbqD/\ngA15njcQBDwXpopIHhY5AGD2eSFdX1fQsHlLRzuVOoU2nzWW1mqQ/tUga9F9\n/AcWLLYwePM7mtmHXzgyGkOrrWnssPX1oBe4cqii3DzQD161UNuoFWPfW3IX\n/pwOvLKJfN7yUpRiIWboGkGnVV/32CdTJf6yB8X1Wiw2fQEgay6nFgJIqPVL\ns0K3ax6do98KKV/VSOBxmdvN17MqS6bEd9UVVNfNdw85IGLQqcpnnVSfipAV\naMGbrhO6eGlPrW+ZDBDN/z4LxUbKg3R505tweqByJnIj/EIGfjEZJrNM3gOH\nMez3Sli4LksOyT5VD0nhtiyXnARkW805hHyfHVW0O3HdVd8q381RFrQdh7TJ\nvI40Zl5T3yXN/bIoIcuPTCAdDKcg6mzrw8SHPgSMjigCdTPnk0nueQHMVXyy\nT+Mb\r\n=8HRP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.e0c346286.0_1623342980607_0.39024802749213827","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/card","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f30d493ba39e4f2cfe12fef91eea0c0551cd083","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.f43af5633.0.tgz","fileCount":19,"integrity":"sha512-4Rtd9+XZTxxOdFfDAcBSOs59rBSR5wv4GSw+QvwwvAgMPxSgshPemo2gaZsh08nfO7AFffe4jJfVBq9eGq3/DA==","signatures":[{"sig":"MEUCICzBuuy0+RdThmUES+jiBx5Z81nQVb5OSR0ZyWMygHFyAiEA95dU/6WrKdEE13xB/38dfH4g6B+nsNGL7rE87DeoYGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwne9CRA9TVsSAnZWagAAbcoP/08XVruJC+u/+sRpqOdx\nCltwC6/blljVMe49VtGfextaS7QwJqKLOfjm1BiPxzGcj2SoIjMe6a7We6ef\nEmFHeydtR0oK8kTUUCdfDzdjeDaSTfPkbHdviyeVe+FnyfjpnAT7N1PYMLtK\n/v2Kx3eGHRzqpOW8gnWwL4v4cHoXl4y0MbP6BeQtoTW8TaSu//4WqySEA0h8\nS7atgFsEAXjUyrXi3394E0UIZBYUAMYhc1gXH987A760W2gRoreaaniJQTas\nicBGjUT2onU9Jk5T7kh68JXKDlUj8aJi3aR6aQ2mnLt0GYZDZ7h9FeP99P8D\n4oL9KqsoVm+hpE9suVaKK6Mheeq9d/4cvFeFSQeL0bwr6Lbzu5UP0GARAPG3\nDXaqb9EYTcrY3HOAVu5bLDVS+gzOr9tMZ3EDs4s86Ihk3lPoQam7NO4JkgS2\n6gDD0g+/uDp4OpmGjYpunU8ngNJRIuykVaCvpAPzH9zEQhHj9c/ownLVerb+\nExxvX0Y8KSzmWZcJ18fmDlkaDurxqTbaTdp5TPD5BpLkEgxllJqxauU6OLTe\nZuvH2IEq5jIDj2JaYrN4975GRtg2anoB27IFgky/RxZb9lSNSMZJFFI6EL5t\n1VVvq0nyCagWhAkpDLUtsZ+ttKUFePGiwrXSNhskU38p3H1CtpdI/URiRhQh\nC77z\r\n=rdWL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.f43af5633.0_1623357373304_0.030610749234947","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/card","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20890d0bf8a76272281b7f6e49dca3679eb10861","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8415ae585.0.tgz","fileCount":19,"integrity":"sha512-Xk/1mtZPiH11iXJlMn+mLpoNWmfIECIeYO2+XJWSpoOXxNSZGuTKkEIQDQYt6+/26Bn7zXs5jD21anYdV0d7Ew==","signatures":[{"sig":"MEUCIQDmZcht930uC+yH7VKR0HHcUHdVcOMaT5RYrdeb0LGL1AIgRzjTDT4LD7LGTl24AFj2rN4y4BzAz9H5BU7oDZtvsn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4n6CRA9TVsSAnZWagAAxB0P/R55Vzxn3UccNXb8Q24Y\n/aKrHoWhq5LzfVmvF6LF4gNbX3/ib2D1TEZL4OMPcHmkvUo9AdTxR5jMe7rA\nqPFlItPECSfPgGPvXSqbM4BVi5aPknIShGzKcfKiZAeTEqEYIOW6fFtWEfRj\n2lVUZ8S5GFgqv+DTemHbDNZEisUdtPqCPPxL+n+yr3amwYjVTpd4ts92DQOL\nD4Fj1NfyJGtzKVlEJiCLQjHrk/L4+MEA8Ql0nM8JC3gXwKT/pf+JKP6ZbDPu\nZPHTelP8iIRJ8+lk/fCkZeH71mUMwPmjJgPEQWdr/An3rGSbuyNFGZXU+GeV\nMmXTaA6HiskYap6gdG7+RbO9hBtGwDqiU+z24vTkLS7zg2GTLLFYs2jSnw0S\npXNkxEpJ/KEY+QTFqH81rLcluRYsbbWh+EbufiBK7VhwIBH20QmpxPAO4CXa\nSaXUzyJP80ioGzSWKpNPmNbTwgrqGwWcFhE3UyvSUBZ67blqc13vqfJvnRca\nkb/sICoVOgWYWJQUH1Mi5FJLs7OVQglf6YOUxgXhj0NEyNEgq7WuabGyuJcI\nc7FEi+vAvrVcgBDLOKiso5GOtKoqdPHuKoHz/oIECWCO/fHcgorXv3SVAkZ0\nqW+4TzX6ILU59FiuOML0m/xDMrrckUXlcxiBKFG00TUA1Rgou03KW20rmA7u\nHqfg\r\n=57ji\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8415ae585.0_1623427578051_0.7434310014151877","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/card","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d0a865a3392b01ca994d7b23d6ca2c179c0086","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.598fcccc8.0.tgz","fileCount":19,"integrity":"sha512-bwl7vOw8YedtMe+jxbfpyQbFBdXZNkq2DOTs8WN9CBGX4xLvGV3hR0CJ3jcJo39R+z9zmMKNunpPddKFOcpc4w==","signatures":[{"sig":"MEUCIQC5aA3nVa/VSIDBRex4cCzLytST3eRwJMRtwt00qC96mQIgKNqzjVMaWZJldtMN46L034O61cKiEx67vdSRNCPujn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9nLCRA9TVsSAnZWagAAtjkP/0Kp3HCK4FFpnzfDnkMN\nWFlmA1QVib9I0hY/xVuwypCzEkWNaEhJVlL00lRPeBh+kFVnlcWWdDcETbsJ\nryKwhqfRsoXn43UNnJNHGnJEpwor6CJJgwf4tiM2ndPtH0Jb3uDye/faplNh\nyXkpxhf9ZynrCaImLNm5iD3XaD3TD91egxYIm5IiTwao1nnt4mv3SlP95Z4z\ndsSRrVXTiUSlLhwMVk5fUAq1Qt+AtlckPXoMtniCTEtwFjuueB6JW0USEDQC\nIIwUCCh37bOH+Q2qLJGsvy4L+yeli2xJWwHleX0t+t/z1F0zGNZR+tAR4KF/\n1pD4dwDe+qxQCqrE+g7lxLtOZWV+bq2BJqg6eX8o56cfuqDyqzF8MBiAjWEo\njh/yL9j3Tm61OKSIF9uc9PZquflPE++AWdQiMtUKD71JVhZgienhJIfsjkRy\nYXuMtJeC1jBjjIp8dI3OGOzV9jGhcNiJA9ETaK3ZVSQa4vHpIi4nB8DH2gw0\n6SxD3G2g7fZQD3Q3kCB+/JkskrGDl9GDqFC9TntsFTbVV7KnGnLV2eififbK\noo0h8qRso2ScokOluCoev9petw6nWXV+4JnyPZ7Vmwr9vF4G8O75P4OftdIS\npARwQa4q8z4hhfCLTb3/sf7tmeWkseq5A8Fd10fVEZkQjRPxbDPb15qcN5xQ\nWiXw\r\n=dfed\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.598fcccc8.0_1623448011763_0.7506741893456155","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/card","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e9c23e5362fbb53b9b0593bcffbe5438851a340","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.5d0605188.0.tgz","fileCount":19,"integrity":"sha512-KzWr/5fSUJvr51C6UScJ875k3+5XGi6EqTe473RnTXTZRijTrbocONTv7AMjR7NqW1nUefez9XCbHs7GD3di+A==","signatures":[{"sig":"MEQCIBF2xCX3SW0OBy2Dpm0zFtrjMYHgoy9NxNMuxSfjfDQ7AiBwzlFauD7o2X+urXwRC+ao8JRBlgSEKx0Hal66+5PjhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5RfCRA9TVsSAnZWagAAOTIP/3Ic3XiDC4t0jVvcQvt6\nQM+qKW0OBk0S7AlXTiu25nJdS4CIg2JcS+/VrNXNODPq9plcj2a5BxToGclK\n3olk/DgjhPQrXeRIZ86mYuZGIOyiOsq4NR5yvYJ9XHGckC37QpFFHk/csoim\n32QROUYbnbw3grFDDayRzAneoOHAHCHivgkvz0ev/9w3D2U6BdSpXOWOlnB7\ntiulVKlXQbCQvSL3oVtZPM2l6ZsQgraheO4sGTclXKkgQvaoskf2Y8Fqz0ql\nrnAFtGyOVsIyue+kuPXEANOPqDChL5LMXECZNK1PGrUEHQNxGS/Ki4Z5X9/K\nQEMxghB3pPreK99EUmy365vdKPuF021Fn6loKG/5mzilEvOsrP0UjZJ7XiVH\nIoayNhYvcCsRewlBSHtSXt26cNR9onZqLp417SyqHvXMgkwW/3zzuXq09LJG\nADs69ApjtY2lEJqZyJtu+Fow2bKXst6UIRvg8+CHaS/f5OGTL05KseMBs56s\n3v1s76Kt6w3KQn7FktIWODso+ZvPl3DHmPnpLRULSoLU7mr3ZZEhPNmU07fn\nzBbBuXmEILnN3pgj5AJDQ+DjO/MVF1ja+yMx4TiM6OQ9Vz+X8mYTk+89tOeP\nvtfyie3SpNnKaH4cGwGuLJD+VTW+e9DWHnJKfJ88hK6Nmf01MPZC7SiJv/6W\nhh0B\r\n=rePe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.5d0605188.0_1623692383356_0.7195122636128848","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/card","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f9e847c5be776e74d60e9518fafe57b74fe6bcc","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.f147a2271.0.tgz","fileCount":19,"integrity":"sha512-JsaLn1OsHtczXmTF52x0DissMBKXJMZFcyVVmu2UBozNRK9AtnOevkeUmObfWnzwVM2PzL1BAQj3Ro1XQAfmQw==","signatures":[{"sig":"MEQCIFFFiW6eRR+HiW+CfjNkRfjyg64vlfOqCf28obsIMFrbAiAt3DFecqOwfQCT+CxuyuQoEehWT/an8iJqfSGp2Are3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6uICRA9TVsSAnZWagAAxOgP/RhNvd4dAVgWMjQ5Gu+i\n35Kdnj6gh5C4jQwMr9KvnzVfd9xt3kMSkt1ZllwLlOZXouOrDeyBg85cnz2I\nQpiepkDgc4uA1VRI0MTjkk9BQfqAO/gF45eCERnDKXOJHMOXIaBFvbklguUG\npu+l1ZAbGUEnR2pGI8iOHGNo221tpaS7h/sXuGmAwi8h9eFhge7qH213IL7g\n9e0Qg+Xe7BpnEjw4Euxx0qU7WW6kMXpwIJCQE+fKmPvjkZWxbeMdVRnI7yG0\n3etoUzbQdTwt5WAi0EEFRx77SuMrlCMmHUdqa6WxgWhq4H3F0Y0c+badY3ws\n5Xgx2rRI5c3Fu26k/cAXRHkPq2/x+nI4Lf4I6xDD/1NAZl6vYVOwkM2qPtww\nyp9u2Y0659NRs4XSWTv9Tj3Mpw3Puh3PhzaI23g6s0TKcJVxzGIpg1kvpg8o\n8Cm9KbDv3wYjGJdCr0IyuKUVu8yfhB5cTTAidszUzI17zKWw9rwq8SwG7nhV\n96WSe3VAcwE6rM5MGfgrQjaCdkizmwMEifxjE44R6GvKs+SaCLYc/Mszv0D7\n5L7YYo36qdNcuaqHKUV+ST85djHfbI/JK5mDBZrgC5WeA+JhtrdIlZ0xD6r6\nrX1qmyPDpxTzcDsKFNPQ0e922GKS6vcpcvkmlh481SEef5DBPpXhTTn6Hk7/\n924a\r\n=747+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.f147a2271.0_1623698312111_0.4169231606082979","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/card","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba04194fdcf09b1bdb034b4ae6cb932b4b08dc5e","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.33579e00b.0.tgz","fileCount":19,"integrity":"sha512-pAzhb0+/0XQS1kYvSyZu43iOTTzJehkpsAq3/skoFNu2MV2wl1cv4ybY7U7kaM9U9aErDdYgVAbHA8vRcBcYfw==","signatures":[{"sig":"MEUCIQDpAhbN4syMACcs8RXpDh1ZRgPXAGZhjGHhbdNJ20mCUQIgYf6d460Idli04mKaas3QwdPgmncaZNLnpf6PoOuPgLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LCCRA9TVsSAnZWagAApTEP+QE4G45ctDF/jJfjViuK\ndZwbgwZDB8rcqwKXlBcjYeCwg3CIZl6ZKHZsZBmchRwORrdPmoMexWUeXfWA\nozZiHQwWd677dKdnfB+majfzLXat+tHRcpI+Ojc40rvNFQoETIimK5PHw6DF\nAcbWbYQp3PKIDrzLPr3qBtXsb1O0x9gyR9tJJm5/Mzh6ha7YCY4RdhbUIWCw\n0WjA33cmuhxWh8Di6VKiolIcMgUw/eWXLakkmOwbzYVNumL0cSEaC9qxYYxE\nG6sFdQ1lSqW8dt+VJJ5sLxQCkAc6ILoVA604uuZCx1hagtnN3c/648sbLFpM\n4R/91pdO6cF3vvB1WrXpMiLAaN4VCDtx6LTK69k7b1+BtKDGyti3tkKE9a3g\nkYQ+hNse+vHJBRLDwQSgUf2n0YDzJxweReI5z5VnnNLht5lJ8pPoHyZGO54/\nztHdSp/VWBCaocQZgY4TmhdgAv34V/IpYgFITXJjFm0DIf74NuV9LnJ42CzA\n9OZKEVnkP10VnW2CQLUZTLJz8IIK+LVwpRxERFdGclunyC0ymxpmeUsy9PRL\nH4PMQXcrXxRMnveXZIjnQOmHsbeBQIw1fhBOweHII9TT33zT1PK7f8GE6Nes\njacawKxlmLJkxVJkeL8mrohrlaBZ69RPGz28n7r2yF1yTc5ZU59ghEaqEg02\n8IPz\r\n=lokN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.33579e00b.0_1623716546532_0.5541088626947603","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/card","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1524432920d29f51b59159a794395b079c111631","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.a6909c0e6.0.tgz","fileCount":19,"integrity":"sha512-qPxYFGtqWlFiuvv1xMIAJ/S+23WnNZJouZtkUdFjs2XNtptVS7Ljf06D+Ihei6gT2lFYlOS0VZzPN5TIRQ6Uuw==","signatures":[{"sig":"MEQCIDuWwTa5YXAQBqH0L5e3HWqSR5aI9tg06SaFsFiBfxmgAiAcP/yPW+k/cTiWpiYRH4Anqf60038A6HkUIFu8VEJKBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":243983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPHLCRA9TVsSAnZWagAAdwcP/2EDYHMHo9i6N1oSEew/\nC72TJ6dbDsBPUImaZ4pMvoMmZCiFkWiMN0JAjaBK4TTvGt3cIDpelxTZkngu\nhqrzeJOEwmBWOJzqLiO0DtZxiZsR57fXbMs3dpY8B4JKLDuj2sjbwed/Kls+\nozn5n3HRZL8o+p057sjc9pB/GNuuNach6jrOC58KZPjPhD9MI36teCJa81ho\nT5nhL8PCaHE/ZldJpEKhGL0kJmp2mb0dDkHfQOCIdzFr7QUF84mhESxpEZ9r\nWNfd4exobv/RLFhfhZk26ZjeXsYC4QuxMGN/USQy1ODIOmX0mEzvaf9p4HTZ\nnnp/EWQ13r9rfCENY/mh/+YqCWwWJeAmE8ClqE9ibizbffWJh/v9KwYTMpzC\nuppmNY9Nxusx9tFfZbK8xbmP7bnu6rbVv65dFcVqGgxDV9Ota+EKeLdVF4fE\nVXkbWGaFtagSfu743k6spwP1u/lcTmnSsvedIMulbUWO/eQh7EmQi0WwIG5d\norebTtAnsYW1YkUkfT/+LULogcyNqToXG1K/t3nbFd0C1zNonv5cXLfMQp8P\nR8FSKQASAYHPBky2c5izvQywMklM6SBeqnERX/ITywU/C8888hnCVYL8UUAL\nbZ+GDTDSaUcfrf42IhLFloetIZ57m5drQeXXlVY/UtJ6DhEXlC71QV/9gJ+u\nyxJD\r\n=d6y8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.a6909c0e6.0_1623781835587_0.8401955552411862","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/card","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"197e4807786bca46dcad672399f34f1916c2e368","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.c18b5925b.0.tgz","fileCount":19,"integrity":"sha512-I9ElYWdf3MkCfa2ViKGjLuqjaFAwNGAWFbz9xu7n/xHb1xjyhmTUVOUgqm5tTBBCuQlGKlg4UkwtzE0JlgKBRA==","signatures":[{"sig":"MEUCIBKHJqf7K6fj+sb5/wuKq/41ZWvS0tP5ZHfbiGKSBIrkAiEAxcQP5yKuUMNLIycLEVDMbwGL+fCcJ9pQyoV8V4BmK6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":249396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXBCRA9TVsSAnZWagAAySQP+wf/EBm/XHIOvP2Rrigm\nCwT//DQQwfugX95pKf+3FlgXIVgvj0psCjWKL6NAIthTrmaQZEcT5nJuR2ZA\ntEMJY8xfUArnfYTXNMtFxUsGIBePStlyTuk5V8+w7aIeXFNJ5dm0WzRwXGE1\nuMA5ezIZp1BzVBnQ3J1nWmuGXcN3SiMmNli4cjz2AbEQ6RTZxJb/EgGmc9y3\nrTc+4xSia3qDu14F5GCE3WQLvsWWBtQ2s4upWuQKLhxHN1vTr9UV+B+GirrQ\n9+hF90LUzVL57Eqlc3wGFcRXeUt+8Zfr3qlN3567qSkAcF4079i9DGG59R/N\nfbVYo/0+FYqOo4gGwUEqZIUe6ba/tW2gGblYGSnn8t0rxHFu6DSdit+w8idz\nhKE+rfrbz5Nzik+GL0iUtgWWUygF+7X7vxyDOKpTzGAQ2qzc82F927YGs1iv\na+1ww9nurmNjQgzdM+yeVI72kbCNM64ptkiVw0tckPgiq6Nf+i+8dRIs8pMq\nCaPiJO2tPO2JkiQHlq6Gia4RP0T64Tm6Qpjx4jgigqoS9J50UitmJ8SDvypa\nM7APMDC5rLARUhXQ3l8ene4fYJpICf4DrGVO7K0uaaMuDnakFQjITd/8Ly0X\nBAkb+Gm0IyBCj8dnURBkdc57EdUIJzK/YvE6QFaWHRAABElxKWIN6aKOr6w9\njTIW\r\n=YEwc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.c18b5925b.0_1623791041715_0.19415729884703903","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/card","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acc68a530b5dacd92a69ffb0218074fc2b7019a4","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.7ea2e830d.0.tgz","fileCount":19,"integrity":"sha512-ck/wbfXoat0DZOg/w94JbB4XhwERAgentQtL0fUXYPdMzNvJgUnDR/eCFWMv2faqE1oSldVXY9V56xk57diEQw==","signatures":[{"sig":"MEQCIBA8OG409cdfwok/nrgbSW/RMmpXT1VAH6iDUaafBCEsAiBL0YW6cfgeyVjLoogzRSAHHAG0bEs6zrFk2+zVpSgdOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7aCRA9TVsSAnZWagAA8MUP/icGyjzxAsXrjnWqy7++\nUGPok67T4GikhY6oP35nmsAdT5yVvcwf0M+3J4zpodvkAo/G38XHdRd0vL7/\nUKfPEO2N3CYhT06X0u6a9pe60nrPDtuz2gCYZH52o4e0Tnf3n047MY6a2Vi3\n7IgxvVdVvNN5gFLyuU8GZ5DexB7/9r/LsM1WpuYRH6a6L3yQzGXXbgHKpEqT\nQZCkQP7B9C3/Adi87+IzXmmYQVxIfW6u+o8V8cteV6p4UveC5ZCiSB0Y0ph/\nxP5slphVEcz8N2pIy4ck1sx7A/PesV5KbKioVqmWqMdEmD+gUX0lzsclaQRH\n6ucV8XI7A5TX0CtYXurRZAvYbZ3wLDDIJvbdgAgd1YuBsWqvbH9Q1crU0NVL\nhPxMA9VKeTLiDIltg5Nd0U8+HCPYUFphdCYfP4qR27iAoOGxCib4FL4bz4Or\nADhWQjuTIYTyJpK8U62kIyXdzIL0CUiUEvcwqvJgrciSXTqdEYZUcIDAnhPJ\n6a1F8exk1Gc9/jJIFX6eKBy0j0g4xanj5pW6I2ERvVsuPLLSxoZdVPWGkY96\nJz20nmjYGJhqF49OWe2Jd6I8Jqc1p4096xGviqxMCk/ry5EJA82/v9vXgYlc\nV0TAxfahp/dMuqNdDg+OSEbyXAeqtHaYEDS8ZIY/uVnFu6qWDLnC7tAvxZmF\nH7IK\r\n=cuJP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.7ea2e830d.0_1623797466039_0.4244170217930656","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/card","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b9d58762f04eada3823ccc3ee4272b9683830f3","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.271fff902.0.tgz","fileCount":19,"integrity":"sha512-94ZMj0qW1NVugpyYzY/dBiKZi02vN9rO1+h3c/gzbLGz+uDIIyxUuMujl2jjzY8yUDRoz0qusB+99LkuiVge7Q==","signatures":[{"sig":"MEYCIQDFLbsHiLKMNNlXApL+oXoP6wHJeVT12o3ZX/02ePhcRAIhAPtHY/WNe5+HT9ocseaqW8p8Ox3g9dK8W1Ncm+/yS4Vr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7zCRA9TVsSAnZWagAAeB8QAI3HwlYxTb4B3vS9CmlD\nPr4JxNEjINyEk1yNswfQdUrR7o4z64t4amd7Q8p0ZK7pcU4BdSZE05rPWaGx\nUhPVpiexRegZft+8OyxvY4Opq16/MpsOmmWIbmTVktzKL2BkwX9/hd2/CmFv\ncxs6EDP8r/vXTa7UFiKI6sTNWcRWWSeqK/BpJyCIg8x0q2UTuTF4xLgwHkvJ\nTs+QS01R3go3KD6hgbGI/IGj1IZh+7gAZvjjjs6LSTwknJAYpaJBwc1yV9CK\ntrqUFLskJaynj4hfBE9CRK4mCYPPGmE1O1yKIjeyO8JYzyiqw0lzPk6quPK4\n9swsJmdXgRdPH4WDb0VxfAa4bxh0K3h+3t9Pyq1O+7kxVFs5tLUdNL9dZDBH\nPSGaM390qYAJ8yvbeUYoT8hJD0QaV2IQCQPAbXLUbV+1/r7+8wO+PC3S5FWi\ngV/A3v0UDpWRGceTo9x1uMhj3pobQDAcAVl36mYCPyyTDhj2va1BMk/7yCtJ\nYsrubjLjtxwWF1OVIsJ5gIH10W2mg7abnuGQVj37ZOElRnPw5+VvvEKZMDYc\nNPcmyTByXAH8YZLCCmIO35jT4WdXij9wDst3+nU7NmJK5O7Vq/SBkctDQD4e\n6j788ypVaVDz4n6d7cYFE0pAwd0471Opaa4VTrgI7JVe8VfK4A+ZkzTd20SR\n+r/E\r\n=X7qQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.271fff902.0_1623797491058_0.606922288264151","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/card","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dae7e345c7cc8c76b14521ec11dff42ebb1d386d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":19,"integrity":"sha512-+oXt0C1P/0K6x2YVXrOjM0hSHjwSvy2CpaHqgLfM5d6bBMJlXCgRJQaRum+8j9YfzgQf/2A2+gcCBzfaNFNLqQ==","signatures":[{"sig":"MEYCIQDnmkBcfxkffKCb1LmBUD42HhS1n2bavvXWeYTB9dxLVAIhAI3nNdhOYEQG+3C2xT5x7G49TtZhKLDtr44y2rS9Zb+3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymfmCRA9TVsSAnZWagAAO6YP+wRSjUCTGTg/I2IgVFK2\nxQnxf0iIevt3LEXP16Es1fz+Ne4iAgWiu6OIhMaAldJ81VTjSypVBVNJnmAO\nkhQhgE9nSD7dNalUPCRjW9kiZNKwVtmOpYZhr8u5Wf23gWipcJRH67UhBK+I\nV1REdRvMbREkL0fmJxa7kQ1l/zWFHBItPpibcieaPGg85hY3drqoAyvcDMVh\nWxX/WJZSgDf4JLv88NmA+dqrqFBcCw0a2a5tsRt5SpCU4kUoC/w/xZsF86dm\nCMf0Qpi19gL0T++xuQojQyiDcISZTb8+v9lyTK9Q3gsNhdxW1T8AYm2VNpLb\n7vg3n93SIsY3zT5DwErgIgnPLf87OvxnXogt7Nt2oHkZVHs53N0EEOb90lNd\nqKKyJpML5dX7cK7ujAQZ/UFT9r61GVLg/bEA1ILomDPu1JUA7HbDhDNdkvEF\nA6nkt7gOGeFeqWG90kzZMZM8szVroXPp9irLHssPBkMsSHps7LLkCMJ0R+5v\n8xL6UvXXP8/PvrcsgB0TPhEkQV7CjvUv7Gr5XBBHEiONKRtc4ATrB6nEwPhT\n/To4zJYqkCTrhBuUDUCGDnkspVoNy2CLH8cjPEqJ59jKW1DgVZqsplDOhlqj\nGmIUTrIutDWHom8cGTpEOt0y17y9NTTi1JzM/ee7E61R3/7ame2/6iuqUGx2\nnslM\r\n=0ZRM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d96f0a1e0.0_1623877605927_0.0427830630626298","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/card","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cdff29ce57f6828759d431c48c5ab7a93c7bf30","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.a6183801a.0.tgz","fileCount":19,"integrity":"sha512-n850WvxxG41boypj2zA75j428ECZIwSxHGkCCgYMx7pD2vkMnwfNFZ+n6R4DJ+FARQsYH6ww2wq0+l+ZasGEEQ==","signatures":[{"sig":"MEYCIQC0+ZbFzVdzaxbW2Hht+uWez/UgV+mdHGxIcXORymxmSwIhAPCilVGXZFIwPx0DtBRBR9GIXWQ3Od10ot/47biIY4lT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXDCRA9TVsSAnZWagAAbFIP/jrR6d2WIm/NNzSu5qDK\ncnks52I5c/NslN3tfRE5ByYem9hQbApShNx+XPIbp5ZjqeKDCRc+6nTEcvql\newKNFBLJj/v9Z6+BocoV4wz7WmMhSqi0Dg3y0KvY61ssuzYR/Bol3Em1Odaa\nsbiJ4dOuWz5n5Yt0cqSeQcMZFB1TzBkVP3AqDCEhHnahxSCndOC4cilViTWh\npUHFOdxJKfVJqYo1tuOVJpZhNRwgASYpCGUuVFB7YcDDGQfGjzNQ7VsXxSLW\n79bqFSZ+45+Hkzj0H7Q6IBS3oVXPAVNLcB2WKX5nZiLKUPC8X9/XBTu9+/qp\n0lqQqpUKu7yyIzi51FtA6W7xedWKxwLh4dDW2ivF0tL7qDSAvTTPt00HbLkh\nRJYCVFkFU9P6uEccARUTorlyJO+H3Bg5JRfqkzR855+qDWiLLDcjn3WIp7pl\n9j959KOWD2LFYXeEqyPL/zkhlDIsl2ZjiiRLqZM2vx/4ptempzpkTiyx30fx\nCVseZGDNSeRMuI6xUQCwwJHe9OUj0BPW+cMtm8sVaKEFeq26IvaQc0zXXYtz\np/CGEvVQ5ltuP7bxfEIh610aEgIIPEBxjKg08Cocm3HqUUiiJm9A/XN0/B7S\n3n2YOePRCX+z+UnUj84XsJSXgJUhyLeJuYi3E1rf/aOHt//Tqa7CTFYLOOVt\nB6WH\r\n=rGAM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.a6183801a.0_1623881155066_0.9785065997396138","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/card","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36fb96f30357525a9011c1acf17b0891da19ff8e","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.940550232.0.tgz","fileCount":19,"integrity":"sha512-xJ9sK5Ng5MLB6knZ+iM6ZhanwPzFGTkm0Ki399EG8Df997weYUJWGnPcqxCqW4bM+OVTR77mXSPoOaBJ0ipkUQ==","signatures":[{"sig":"MEUCIH5se7bIiK/I6BBPbyhobILItadU4SDjgBY9JgZbL8ZRAiEAl22c2QzJYMMxsLQPSMX9xgxwV76swnO7tnl1t5IyalY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6U4CRA9TVsSAnZWagAATo8QAJp/RyO5aokt39n81Vno\nu3tK93MEcjHG6l86Nq4gPHccCEtmrjuU75cKqejYjq4Un96pUWcORU8O/6Ki\nIJbhEJskPVSqPMMDc1yBprxvo3DGQbXH9Z8t2J2rsA15dbwfFOBhSvHxqmYx\nSIXaoLpAW7g2+88P1Pv7QB3R0b8TvSQcxDXSqwUUllLp/QEjUBLj+uWT6dWk\nW0bQPd2Xk9zwNlB15C16KfQc9zu2N2BXRV+f2QYLAq7rM6zFDYy+JntdWdlH\nNIsPeyGAu3ClkDHJzDQi9rAuZtZixnSQJuXDg1Sg1tdu1h0n0VhB8IEXQ4w4\nHdcVhuCNs2XECado9252/l67+MRs7YfkQSYilzDj7735U5fy45fGgjboaqyZ\nK+ywuGXW1E/HTbjWuGhzt+DSv7hBhFi45ijk7St6S7IyLjz8YN2Ejwjff3oO\nzGeuA3xQU0p2O6zhwPIkjzZEnX7UA7FVbM4Q59ZO/05Rw/RPzTO7nomKVK+s\nRuO2xO1Cww8Vgbw8PDrs/wsf9EVbmeo7vKU9ZJXMU0YmddAi7pjDEPgioM7j\nwfYV58uAs0xTXkCvyjofBzSqzlLP7oTNQm9/8cRCGe7iM0uMT7yon0TYKFbQ\n0voGjXXQnrGzycoESmPAu3iSIah6cSATF11V6vHs/0AlwAz5XwCcISHcuLZt\nLvJ7\r\n=4UJR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.940550232.0_1623958839808_0.4903967516799128","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/card","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3334aab289a6599508f40394132b1839b06c66ac","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.f705e8048.0.tgz","fileCount":19,"integrity":"sha512-tyDbpjvGzoO/oJczamu1VP7LCluqf6GZocdFwzaVz/dW6hAHw3GDH+DSAU9ruUkzuV9bZTwTGN4hkI3iQho2WQ==","signatures":[{"sig":"MEUCIQC0+H5n91wzoaDVt5qCAfUpXRz0cyTdb7YKKEO7+LYEnQIgLTCthR6zcVvKU/8fKUtC4FIUj1eHPUdcUTfr7swt4nU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLrKCRA9TVsSAnZWagAAR3kP/RDYso139ud/+TneYEqf\nc7l6VCm6+o9i15KxEGlYOWr66TL96HjaJ3l+YDHeVxm4ePyeQ7s7uk7BiYFi\ndsYJeUeoToLKIAKMq8PkQ2QfP24Kzl8yZ+5sBOxgoeHsp5cJXo3i0xYxUsen\nmyGWtqo6btmM4qaER4x3QW6ZpgVcNCn0Doq0BJ9SXNdvW3L4aOd1NGdwX18b\nUUAmdOhcJ0dfH+pL3MMAumNOELreLYLCHRhT5NL5VJCLo/wa/pxFYOlQOLVg\nw0T8WGpIQT65b7DNxPh+XRFHO2doiBzJfvcIm6f47ggfeqa7Xa41tF2bLubD\nrnki5anlAOJmmXuYcbRvbTQJEad10CPsq2FIvZK298Y+9a6FpluTuMGLnGRD\n590/3pCR89jmvF7RXtoHeGMCFR2x9nRdT4RVDacHEoffDddJbdBmItvrvdXp\n2au8v6fOfab265DXkIITR577dFc5y1axkKT7RtyGhohWfJRBV9aIDtT/5S6X\nW4wlWZoqua/dijEgHjc3TJLHr/RSWGlVNq8L4l/b3jc2z14oFQXx/rasMUre\nDIruWm+LGgfYfTijdQdgkat38m+Q3kavz32sU6f5penkUrXvvs3ylxAEoGxw\nKyQbiUyoaEJS1uBgWz5eM1UBhStDfAW7l6Zp+MM4suCk4Gqpfn127abjYtyq\njMoT\r\n=T2Od\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.f705e8048.0_1624029898181_0.9011753990961275","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/card","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"287d8b3e3c3c4c0ca756e6e62a65c781a25e68ff","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.08d791f37.0.tgz","fileCount":19,"integrity":"sha512-Dp1A+zp2pQlYpQfwr6TpBd0WdKiZkE0b+NNf1vAa0DwVi8Ejk7sisy0rRP+pY8Jp8wcX6ljNBeSayWGPyu7fNw==","signatures":[{"sig":"MEUCIB1eq81odQ87uJPyP8uicTH9e+RceshpArnqbkZUKWfQAiEA7qOt5QVii1aFsffkGHXV8Ov6rEDAidA/+m/Re/s1s3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwqCRA9TVsSAnZWagAAPt8P/RPMdO/IHWOA4ZkfpTQO\nxpLVJnrdGwhtiAZ5N6PQN81GuF3XWvecqifoBLucSgimMTf/GIpOHQkeswv+\nps7dbM1tfBnersTrIQFsYjlvZZea7nzaAn570HiCzfx1+kyVu3QNUda62Akr\n4+z7lWcejwif3wSg2peYarBcsRr7bQ7JpF4AbcEhjhRdPfCa/FU11tM1Ptlm\nAz4g25nhEmTcQIgAKQv/Qood/r3ao52QgffFeoO9CWfQHuvU7HHf2WvBrmgD\no64ipfzxHlItsOuy27tbfdFUdakC+IlxWsNPNtBzHaKGsSshMCiTXe4+b+0z\n3C/JCoEvpiHowCKjnIRGECAq3SjqO+1cwdv6yL8FphqoUio80Fj92uU+214J\nCDT9EUSDFi93XJPFFMU1QbVLqdNP5a+F3IGlCZWh35vBqj5g/kcjTGJ3U0U7\n1uLkowYbc1CjZb87W2DqZQCW4EQpdJ27jNVT2gz6q1aOjKnw3mfIXX5IAQz1\n4hKTGCO4pZot/xQTWg3lv4yYdkRJ59onbMBiFsRG6OLlJekBR1McUaaukQjw\nBhMdTk82bHxgkwglWZ/z38SKMy9YJ8QfC0cIpFmJSYTofy12PnoI9Csd1ktx\nEDRA0DTh6BBOLZMNHJFI8I2vt237asXm578QEsyW/0VnjgK28BgmILPgd4k4\nl4oX\r\n=WnqJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.08d791f37.0_1624050730375_0.6717707054310218","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/card","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"172460d47ecf87c7dcaeadf9643ff3a93604687b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.e38d7440f.0.tgz","fileCount":19,"integrity":"sha512-ZTUdPkogRBzHTqRQiCsXWrOE0y5sN7NEreRjKQnJvBX9mLUO09Um1HghNed7p18RvslAsAgifXqKT4B79JkDzQ==","signatures":[{"sig":"MEUCIAnnlPrByKb1K7AqTbH9G69QfsfAI4iTU/D69gkL2nC+AiEAtfHGyW7bXpKn5Z+1yzqk5N/c68RFTXGV9yLSHbqfuxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M8sCRA9TVsSAnZWagAAUsgP/0ch09LFdhfsjnX3afJ9\neZfMdqbMSNHbAULaVorMm1Of1F+Gp6tr3wrFLdeQvxLpke/4dMOWKkjNLBtv\njukYE+YWssXlcBc1BR2vBSAQHkerWCGk4KvIyx6w0tws2rdN+cf+8422hOuY\nxoCfCdYSWdwJIP62RZIQtix+Ln7wn/1pDw9ixGJLYUEiGGDRXcITGUI6z1OH\n0XySyrxXYmE3D5tsJZLQhP4hZPINOWsnTo+mdXnIFMjQ+wsziRlVQPKMKyBy\nURrSz65IpEkKckkzQpiL+igRplrvoj+f2VL9Thp8Ie9sIongmnGRDUEjXalh\no1gleLtOv6IywOyojHQbbMct3D1DPjvANoXI6DaNASlirIIHcUTxyTeEh0ns\nbaTdTHblExuxU/5vDynz1TE/umSxrdJSaIMRtGwdPCIHpCxn7Lvmj92rJ25q\nsY4PVmFJvNO1u210jQrfRYwJlUnkTmQn43jx+V/NVDdkhDHldkBRM79B0FM1\nbJkGTo2XNiRRQuR1NKEHXMFgNciEGRZWIJBvg+PlNhU/zX+eSAnXgsQ5zbMI\nGERXDCoxzJIkaZvuZL6owV22PGPcwR2qXvbyWFT/lCW7ln1nhijrAyABGsUQ\nFoA7S3BYeZ/55nLzzWnfezvmWNfbq2ZdtPkAwqDinresVrWFlT7Mf4izoNJ0\nwyYM\r\n=j9kC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.e38d7440f.0_1624297259549_0.28620430278119224","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/card","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c88944277fc4ffad2506d3c15a17ffab79fb38b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.75900a5a9.0.tgz","fileCount":19,"integrity":"sha512-/ybcMQjuu7S+DBRTVLys2ujr56CXlgxGDpTaXIr0AX/+QYVuL40zlfnWZ1lsYyeec42puB742ZgrfbKBxhwyzw==","signatures":[{"sig":"MEUCIESsYzhWlMLajhIypXRU72hIylt+oAP4ce80SF/eUNJKAiEArlaiPGmQl5/WtQOMndtWrtxJbaaVisL7vf6H5yTpy4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxpCRA9TVsSAnZWagAAMIUQAIixUxJ/6Gkk7YghnmIX\n4iueRd7GPFME+YSJLR2MjNIr1KkOWXTeARx/cUhi4bUXzxy5krD1NMx/U0bV\nGTMm2dnchNVeFzy6FyvTrEujWCbQjIJXZuz05rGoyQfHPyH+/u0EUS7y1wgz\niRL8M2KmI5P+s5m7D+fhDqTHnvgECRCx2wgyO+qfz8hTJCQnIJSoaZTD9iMk\nP5bX9iwO+tmgnJzKUc08iG/brZNicNtazKqKx5hvyZT8SvVqea3r2Qw9tb2h\n69jNVx9a9ops4a0p60qip9L5QWtjNi9N0XSVR3tlTKhXnYWGb+GhfmeZAKoS\n8m04uTf1emc9dbOYN/Iv3GQNagCA6OdzW33KxmUQykEzEeq/xNJCwxZE2ZIP\nkfgLN2Z+Nb+gUr3iAYTx8PknzAgNIMtQKBIgwJ7+Hx3lRZE2MEUGT/QccHfR\nkpJ1LEh8KkLY/Z6WYYs4MKZFpcsDBsYA4GQyKrNfMPiZdj5QeVe0R+ec2vVh\nCaT9nDn5DrmJI/uIFxidsceD7uiteoS1CxvQOAtINdrCOTbCfj00ZmqAVbUL\nJFzpVjO12RebtKJDAYr5dhA7kZ7HQXChU/ZtuDRXhtQ6qZjHVUPc1tiACPN7\nl7mj3VAKB9a6fkn7nTYBSndgRWjoZhd/hTAzCEI1MP2A9e54CJPveIboU2c8\nsPhp\r\n=9bAT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.75900a5a9.0_1624300649294_0.0807982040922921","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/card","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac8d87818592bd8ab7ac9c9a70e7209d0907de74","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.33e6f50e9.0.tgz","fileCount":19,"integrity":"sha512-jTHZrURYjnSY5MOwzS2+QQS341NIekjWIN4UdB2LB2Fsl1gP4CO1pkmxJ2Nw7lvAt/bvcxdYc6/WVNzReMZi4A==","signatures":[{"sig":"MEQCIAWEfamstHzwvmLMBTnNd4ZjKq9fXEQ/+341PnEzRQeUAiBhw0IH9qwplKkk/OKUqzKB8liNjtSCbjKndc7pasXZ9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxvCRA9TVsSAnZWagAAkRwP/jYsp7Fum624Jr56S5zD\ndM2MGSysjsNYODRiwlll7fRVY6qnhZK0wvp67Qv1TVtxARybpKH0x7CJvSoN\ncpVnk9Rnqq7aOs9FINWrq88bamhKQWAnTqgwkBF0JEqBPv1bGoBLQJRvXt1K\nJFx+z7JJT+p5bU/75tiKpFhK6eqe4c5Io+Dr8ej5dkH5NGT3EUbYx+psverG\n9YkZERIXC2o7owxLAO1bipqrKqiUart5znxqBbW0W5y2spKj/HxpPljYa/F/\nalqXhH/lPdf3yhs7t4I9PW4Z9xJxMITEiJ0a9bw0v6d9b1PAwThhDBy5uk/I\nr/hgK5zPNo3/OUH50zRzIbelOa0+Vq1RypmpWGoW3smZA3QAgXpqdgydePJf\nShjBx92gJsy/feeFmUPLteeaAqEBodIyp4/OHxT2pWyIf6ihcYMlw4NhvE6Y\n2vScIaHOdN4iQcKrJzxikPPrhp1NoEtSq+KLV7urrsjVgzfhk6FCnl9N0eKE\nsBX030hmZReskul1PBLwsHLUW2WdAzSjFbO63dFexYm99MeTbsNfYFAFJlPF\nuLERifjQwjNFzwcnBTdpS+kWVldJY2mkvB3VJef70lxIXLlpUXIKnL0bA+Rm\nU05r/j/f/+dqQXXHyVQ+7z0+gnTXUSjMBNSJYMx96hVmB78I4DT3thDPFEMq\nUq6z\r\n=Jof4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.33e6f50e9.0_1624407150604_0.38114279873124124","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/card","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3f16adb717eb2c43c9938ed22215aaa5ca7b4b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8c685301d.0.tgz","fileCount":19,"integrity":"sha512-EN2XN59kz2FyM+jFhZP+aGzRr5QPYX9baHFN4VrPpnW7CFdd8dXL+L0F4NsbZIYwS+PuXzIUBLnHVFSyAqfn3w==","signatures":[{"sig":"MEUCIBb4zItLJgqRoSMZ31JF50rRSYFN98R0PW+JQMengkMQAiEA3zDRX36qNa14rT4yuY4KTKTNKzp5LiwDUBsUtjBStdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03x/CRA9TVsSAnZWagAAxgsQAIorndRksV35Pngq+74D\nXucYln0pJPjOyt/IwVpTzcIjrPMe+TwOpkiQuizCxLXoaI9lj1HfGatYrfBX\nhmKnXMyQuIgfMXRKkxG6F3JARnLVk8MVFN8Eu9ghMNc0uRckBOfNXMRCzurg\nQ4SLS6qtmcOHoan7q1w1HLRnKDYPjPeRJ0x8wqVTwT5M+n4H/gRrsvYX+OgA\nYQQvB+GJ86l77QFtMSw/aFQvlkcaM37s+e2L2XO+xXyQGbcarGu+rD2O/55f\n5l55uHujmfSj8tvAjGkBVKRfuC8EW1kZrvaZz1JQVKTkfEjy3+p5M4+gU9DN\nlHasoFl8c/stMjwFlqU05bAAWx5YJgmpjx/WnkJrqWTsMkjqi+CHJMVEIVDY\n/4Hy7YegmcUF5hzQoXwgILJzTkU45CU2kdq22ct8+LIWF3JhQuQtTtETQtXL\nCLry+J1pPjPD72GC+G4tF1YIang0TU7OaW22NMpnaZMD4Y64SbfBDCT+8dWM\nFpdeWbGlcoi/tI6vf3KYamewrmiecrnfjPXYWqtUR62xgs6IC/+w3SgmMk5e\nIqy+eX1ra8mHgunmo4lTjFTHcnQpcXCZ/WQZHxCSkxLLXorhSvIY+piu4KqZ\nH2HTiWp9z9Vw45pr5UJnZYBLeo7m62eWG0akgb49buzbofnXQuZc88XOG5eq\nR4lY\r\n=ZLE7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8c685301d.0_1624472702782_0.09853277256935788","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/card","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"354553a08f89022258d5f219ad3efad3f870881d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.8c7d994ae.0.tgz","fileCount":19,"integrity":"sha512-b74+UYx3wFxf5luIQ/N9kmfQbdwic039F5xBX5ZZo9nnPlJaczy8XcO1yRBE1zetiXJ+bl1xiVMYFo6ULh3Jsw==","signatures":[{"sig":"MEYCIQD/yd+ScBsZlByQW9+G98kjBcy56QOEXEIEhpAIYU2/5gIhAOumJg/i+mi48r5RxgF7gWN3eaCn91sO8dYPUE0NiMYM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04s3CRA9TVsSAnZWagAA+oEP/20+MaYRn5R3Lfct4LW4\nXzjGbnBz9ztDc97QUrLG4N14goRT4XFMjm87ZRf4Nlvb4h2vEl+92T4hpZQw\nQY51iH73ki67PLhtODWKSn4MiJ785Ycd5qeKyyQobfzc4R/e9BzX3fnzWXdb\nluaENzo73dFnIVU99s0Lfjfj90QqchDMn5fl9UfFoWkwxSUcLQx9Q+nkv1xr\nBy9C58zAJtqVyrGNbR0ODVKPyfWm0gUX3gq85K22cQSxLDGk+TrpbPw/MfZ2\n20/6Qm8QfrVljJQP4fJ0ayJ9lfYdH4q/9na6dpSWmzqsAFL5++N4SmOslDaX\n0A+KfbBmAIUhrPTJu5TrejOwQdhTJRgjFB3Zvaeqmn6jL+hu3CSxtfo2YNSF\nN7vbqSHZyCkW9i0V6Lk4vnsLEioMgAsNXQXlrhI7xTQoW6poBT2CzC61dztL\ndEaw8BlfC6b0gCY69MjTwfaVUq0T/s+FlxiwCpQ+clHA+CfZm2ndXLbU5rOv\n5Y0Y1xb+Ft/XkqWi8YJtVYlA/8uhPkqV2qwKRnKQFoIfRtVXrXRMcpqNX0wN\ndk5NY3pWCc+2mzGZgiXNqbhz/f+R+yRuuMhEmki3/c7y/S/Oqa7NQW+K0M3t\nJ5rCywlC6DVl92vZORx1ZcmhOIO8Mwww1zZEwdYN+ET8IsmySS+JPtMIHf0T\n9hnL\r\n=XBYl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.8c7d994ae.0_1624476471514_0.17025856909867998","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/card","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a93a863a9d214414f988e4f7681405dafd2125b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":19,"integrity":"sha512-qcGqX0ZwtypET6xgJb8kdrVv9vM8ZA7iIDTtnitmITA0EgGnaIPZEoL1GeY2JRPxX0Zm4z/DuJRNjVneNvd6Jg==","signatures":[{"sig":"MEQCIFrDSDW+bzu4ERXEW4P1++Bc24pE4+RqpmxOdBohHeAuAiBBRaBbbBwYnONj2YgSYyVen0T6RKvlY5IAemR+RqJjBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+cCRA9TVsSAnZWagAAA5UP/01QeEKzojQu2AJPKVPt\nUsN704nnDW6iiOmmqjq6JWNHAvaLb5sqLKLPy678uUN0VjA+0+Oz83JLLtMA\n+9J6I+nA4gXFOQLbK+7SyWy9pyfdG9/sme/XFD2Tqk5BTnnaMv+3fPGgT0rU\n2DMF8t1jYRhGjP1r0jqg0H2UAULl98yaqN/mR1ngJJg/GUIrpUd8EjjE6X/d\nI33wyIQbu9h0uoqO/x8ikUvr8paYMN+JH3KnXZsdfKrBwG4Dlf51KbMWB+Go\nDdeZwgXE3ZSKDMEIbOOXTPrV2jFIECk+kdZpkS0S/wIV+SAszjGKpdm1MrBC\nHQ7NPHpSHG4ZeafVjKrWH4uN6Y79VazGyLN0qR1iVBsva5zbZdIL27ST5rfx\nvmdUBgAjCR3JTMYrC18bxzc1PdwL++zwZqixwpUJsJu+URJsbFT1wDPiNDwH\nEvuCBmdGRtickJjTksO+vET0mixpS5enG4cWF5O/Bo3qt5KeOOHHeQUIbJAv\n+4QUHhdRMS0ct3Vt0X+QV06gjMJ/iveZ97kwsxJbx+EHZBPFIY3TSdp0EdER\nT2xDyU3Vfw9L9d8Hsvv+Ah6K0xuL3LUZwxcyceLNiVhRwcrXog3r6sI/Tk03\nexfIkDG8EjWgn6xKqgu87xxeuwuVlwwkkqBdnaBuUC72EvQHYFZrzhx0jr64\nbsmb\r\n=MKVC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.4ccd39bdd.0_1624551323555_0.08063540787551293","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/card","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b453fdb0d5a49ecc0800c86175191ccb2c8fcda","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.17553e9f8.0.tgz","fileCount":19,"integrity":"sha512-TV3fJzg+rw56Yi+YhcL+0k8GqjUttQHBOrR60R4BpDOTVozc6VN9gjn1vGNrEUfIkzTok0ChXwfoS3cYJ0inMQ==","signatures":[{"sig":"MEUCIHPQVknxBGrzwMkhvjMiuZIxlNMEy8s8ZVbGCkvwN2AyAiEA6bLEokeH14Mv4KGrxdT0mpjB/E6F9MnYAsBkE6IZ3M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lLMCRA9TVsSAnZWagAAeokP/jxmnQ6yxB6KET41+IsF\nr9C6gqCHCBQK6WUgzrp9mXF1sPmrh3IxsCfN5KYXujSnrHEZchRdYV0DUT+j\nTFhFMC6bHe0vrW19vFmL/OBB0GLtF5oLnrprILckwUMBCq0tbMCTUoa8jj3Z\n9pIffSgxHiBuXSW6lJcbT4AScnVYSUPgefCFH7HDfaYJ5zgwvJ527q/dF8Cm\nYoAG16BGqif54rD61GXR7PFJ2h4eC19brOJyGjzfumFNMQDZrrJEwbvxR8xP\ndSI6DrGDycM8Zdx2kpKI33tuLtdiePOKr0K4HhPsEY4QOORruPr3s83Bze7u\nRFrwiV7wW5IReUQZYOoDcz1an1qvhM1qzz2Xqg2wyd1B3HGcdQbN/44d2lBP\n+eYysQEQ9PukfB1rgv2csz4mJ9PQJxD5MWu3uQ+OJvsMdnReA1D/OxAYa2DR\nQuPlzC8oh/2RLjeqPglANWBKrXUXwpms7uLCzPoHbQUSsgEDmwAn+f7vAW4N\nbYawT6tpJ4MR2473mnJwjDn9yYg7ylAyBG2Lv94RrkgD8I8EHN196Pn0twlt\nMa61o8BDby7C3kqsxJEANzn4TYxFhXR6PrPrV/PDnrg4fLH64r/nLgGSauWj\n0qNE3gRFb5uJ+r7CrY6k4ChhX/Ny9C15+uAJJq8p47KNxs3C3wwDT6NS2hZC\navRQ\r\n=+yCx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.17553e9f8.0_1624920780298_0.823289194071749","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/card","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb38c50a0f1820c070721d854852532a53b70a45","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.4c80072fd.0.tgz","fileCount":19,"integrity":"sha512-N/FwoffZ1K1Tgdv2PQHlBVgDQm6HatjXA6hud1N2RFyLU4riVaYYflybXgMjjcCowrXElMHPDSPKMssWf408MA==","signatures":[{"sig":"MEUCIBDhRXOx9mbADlT3ASrFopqCA1YpkYOK3rUNogIc281hAiEA9sTH1FEDgJL6f5zUIvrjUo58X3yoKAjLhcexsasdB5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22lQCRA9TVsSAnZWagAAMrYP/3MEbwQ60yMCJyLRRu6p\nWyZNOm/nxDEYDc8GzWIVHxukKufIANFnuNscBnqoLfBfEFZYb66yiYM55KZZ\nxTxzbgtdQKVLaZ5s4Y3GJwMszUnnQIgjd9Skc2r7iVm3riEkDrlTl9VnUzrS\nVp2vUxKFTQ0n6+yGOjMJxiGoaH9CfIqy40Kebk8YkTjr6ECd8HuZH6b3YFJr\n/KPg+sgBW5FnotwSceDJFAM1Crg24TcQ9EXf3uusAADLRY51wEwf+ENZjRnv\ncoi3SXDdAeGyLegEldWELO/si94zzvTMTZAFVAkhVdyfBY4195H+Zv5QISJH\nKU0I4wwqe1F8AG79bgz8N446FrhiA9hbA6QQeA7CN2kN+8kXJV0Wzj0YahfR\niSjd9lFnI/M09NXtqNP+3ifLc+AaV7pRLg5I7fMxqgmgNCUYovIR4EvAtfPR\n/XSUUrRrQKmB9Y+ROz/82nyL4ZUtN0IZG8N86c2N7PinNCInbMnJA8RwOWfs\nd0pCUJa2NZ8zTyFzA/+p6FF09G25mEcJKEDfhal0D6HrGgSYvA2xCbW2SjZn\nPRLqXTvmP4keF4N/yVbKgH8OHcmoF8FcxJJaw/DlTI0wVOeFBfnOuh+ADUAi\nGuQ8dMqZcN8yAc2E+cVjd8jZYm66CIDeNKFFVwWerpstvDq9CEHhl/V1vALI\n7OP5\r\n=mWBj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.4c80072fd.0_1624992080356_0.9144496567142737","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/card","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfc62e7ca7b2e98c02b46d29b14b84d41316a2aa","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.796811db7.0.tgz","fileCount":19,"integrity":"sha512-t+8Qz1XVUHsPK+hc/GLmjji/FbD8JdAeZ0Zn6KaV10eTqBLEVRot5PDJFyRkZvN/Grz+VQkqiDxPYMFdRJMNLw==","signatures":[{"sig":"MEQCIEyBylgg3uEOtrsu8Y7jRZIaUOp+jnJDm0OumthiJzuKAiBCzYY+O9BVVOQEpqAGBJmJWbgQK00UTZrnCqkBTw/iXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZnCRA9TVsSAnZWagAAsZwQAI1w75TLNIujsHZ/QqqX\nxfPeb8CiJdCI71A7+sTC9sOIGkXECag7FYwHz46CX0XsWqtSHgqeBnjgLOtM\nhDXiwp2yBUjr9iOwhDVO4R2jDvFP+vpm+9l+nnJphLjsZxnrpXt5rzZgnrQC\npm6jhYk5oviSGQivaU6Qd1TeroOLeftdYa1tTVbYtdtAio5dWl+CaYlLBopd\n3r0fPT7pqxABxKcJ1x9zoy5wqzIHemHoMBa7vRGNxOKT7xjPQkITpVTBv3rf\nKlR6k2Xetwiwf7xTlgXlMCwX6J5zJZ/3CXAbF3+u4DPCckY+uTItKhgryvP8\n2kJbs8ViszA+6SdU+9GkzaTcvPxG4csP+/kxNsU2ipcltPtSqYgNKZi+BIFl\n0jiV/EyIBzNMY3HjcB1JNzzW/A9FyjwohpE4q5sR9tUYz7w/Pe1FCGRe1+P6\nO4Cmfs0YzCstDIrWldN/hLd1TMRDp+MiPQ0mKdIk5imGfSd6FlPsl4vooG7i\ncH5oPwgDEMdE++QoqjxnOS7K4oA3Gg0IepHuvWJ7dfZXY3j990xJdecfT8Ln\nbaaE8HxnVfUJTeRVnp7pJb8DrJPlp2bhAI8QjjcOHmV42MOSeJSbakv6WCu2\nt1kOfpBg+qBsn2xfewS714Act0qJWRsI+d8mbUQyb8/V6kHiUg/JV08rpVS0\njz4e\r\n=CRrf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.796811db7.0_1625097831482_0.1679000780641584","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/card","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"836764f314c21f501ec475eefa5b63ba20a62115","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.70e1efdca.0.tgz","fileCount":19,"integrity":"sha512-NYsCEBXMQfUPyHxbdp0p/475Tvbe8qwOKgkbXcBlu4ZI6cgyAiUAAC8o37sSTd9yRcUvOjfl3BTisCfkzpj3EQ==","signatures":[{"sig":"MEUCIF50PmG8cefODofWW7kwzQvBLO4qtNxnGX2dSYWGKuxcAiEAuxkQ7M/RUbBMVIG1Jd7cbReTDgWfXSzVVJpKIYZkog8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fY2CRA9TVsSAnZWagAAgCwQAJTdo54tKmbbXbsyhOaq\nDO79jfV6UOCmqILt4LFXtLlip3d075CnvXVSKpIuTKP/g9DXXmXvgwlk0iP/\n24s4Rtrcl63MclfPsb+JMtyBy4O+1X5Qc6iM2HJFoSBTuGw34g/vgUOCpQee\nakUkCM8wFLsNVQTJD4R1X1es1XPUZL5sxTsbW5bxPSy9C2TbHtydi9z+FLoh\nugYhFWfQO67E1wIkloYzjm26115xZPFi0DJm0O3FRYqN1o2Q2y9YmomN40VJ\nIiOSSzv7xBzgogLNUdlh4KcrvLRutlc5GedDsEFPljLCO3Utol0F1aju+G52\n0LYy8vK6/5uEjDUTl2lhWo/OZfOIWd7cGgbnjsLBnPd7rpthrAz2tLKiHq7b\nMP4K2LZ9lZ2QjKYhbqWhQ0ev8Mv7hSUM5wrnOtQ+BCMzQzAfSfDeCgwvvRE8\n8Mgszc5MIyuwAR9AuXl55rnR/mG/6KbOBhjAD7OsVFASXcVM5/9NxFWZXkVw\noq3lGKwqN5P03/YonW1oqnxg8Xtk+qZG+Tdof6SVMJWdZYqlJEjL4FmRYpbI\nVh6yMGxCL9HdP+Zt9o8B5sHcvi3OghFR3b+rJLJIVnEBmM2DivMoclGM2rmw\nQFcH+lQJRThoEmmf0yvO4OgTGrRGwNp9F0ofO5WAMOQXnGD9IVtZLMeqQ/u9\nwpia\r\n=SkDT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.70e1efdca.0_1625159221707_0.37169282833216344","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/card","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bb0dc0a9876f8ac5005e064f9e4d239e9c8ffd5","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.435866d32.0.tgz","fileCount":19,"integrity":"sha512-uR+iDPsgPLKsDt01eaETxEBdS05oT6+SJ4RyN9b5n+QvagmWoJ3dR+TVOUM+YBfJfJDlkloVl3vqIzlcmJ/lWA==","signatures":[{"sig":"MEQCIEhMgA3qrl+pR7oI9mfIeWfBM7nsfj0iYatkclO1CfQUAiBCMZg1ExDCtQhRCRFJqRcGSbJwcVr5FmlnjpvjIu2laA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31k0CRA9TVsSAnZWagAAxjQP/14Eaxkh34uo0CSK0YAw\nzTWIQMQDGkSYPIsqIS83R3jjO5rfFjZGZBNlqflS4R0tFby+MOy/moil5WB6\nqG311ID1EBofcB8KNVEq4HMn5nT/BzZJT/Q8zrMqfaxhfa7G1yJcGd6g3tje\nlczn7vUVzB1/1EJOx7vKqUSoTJZCgg4QFL8belYgeBvEqceYQt210E6O8KZE\ncmDUYEbFxXGyWdYU22CgobgNzPb1z2AMRELz8zdq7sIcRKUJd8KtP7sotn9g\nx/GTryIVQvkFrujYfrmUbycylzqs0RhVM7qs9dAWmNgl/GoSU/8KZHQw9Lbg\nmNF2hWZ8ZNAMhnr22rCKv7I4nSPbYxL3pDEjgIAKBz+cQZ8MjqZnpkjbVf0Z\n3I9RLFPJi9Y1GhfcKuJTwoav4x/jGCLWbRU3dePwnWjCWDHUPY0aEi339f9b\nh7t7b0XI0+MMtTb5lHAta384wB2H18dnK5Nd8DBxj+5cVGOV3RDI07VThCNa\nxBHfNDKKwcSjQj3dbcQhTr9bf3ztVnnqpx2lLvG1CUEar/xe+B3Clba697WG\nPiSgUMu+9MCrTVS0wLw4czQyTyYOQMICbRYGRfEi/SDKZOuO451ERLxXhBE5\nJQErJktrzyxm8askFqEVwDSAsHmYN48HEeORZWJ3q4CVI7WAhSraqK29p6no\nI46a\r\n=jAg6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.435866d32.0_1625250099787_0.37684266483286044","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/card","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c1a8dfaa03364b2892a917732c7eab57806e159","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":19,"integrity":"sha512-95j3sexLNc+GtTLak15PXWf+LKoi2LzN8KvtkJBxJc2+xnIl1yZbuyR6BUN7CYi4agVbsCdNNT1ElYbUxuvr/A==","signatures":[{"sig":"MEUCICfBtyflU5zCxycnLXsPhZtlkR4IlFPWPfJLhdJFijgnAiEAi5OaRsDYzzhxUafJS3IR/c2+N3Bt8uq+/r2oaR7wlJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36ifCRA9TVsSAnZWagAAjPMP/2hQaop/4ezk9d0NTFof\nUuOaH8sSU7MT5ZagCLv/gzin2vyxX7gJ+CmIeuf9r3R3aM5yPXPwR3YtG92k\naXjrNYm0Ta1rJqNCYYyXO+fbRMLpxkJ4Hk2t3+mw1Zw9wXyHvW2QbJd3uSvw\nQnjbS/bIUVvEbINSFgffvXYuA66vr3H2BJ8BfWzb88Nz40rndymuhRRdBrE0\nh0fs/qVuzH+/5l8Js7Y0oxHHiXEFg49+V4vbcw91UnRVWU+yIi/XRHxrmth6\n05IrOvFuIDN2he7biLlO6AnReqNzVweThUSVoRgUi0ZISqUuREY3rnaAWlPr\nmiR0lfOIuH2y64YkUv8cAF/AnrNuzFUc+Tdb+4szRKIpoTlwyVvX5T2TYVsS\nffJLaOT+0XEXoYAT0un8OSgEPFnscfwqpcz3iyWKcI8kESs3qEMgLXCRQHhs\nU/OIlJjrDrzCYczaBfK46lYGmuzVfN+t8Hzup8zYw/TiE4433X0Y2eGFQKrk\n5tZTfvPbzmv9QVJ9dGAUUzg93DczOp3lmahr36+Y5HE+SrKeXkNglwuyYEnE\nXGHIfUL/CjeuW2zLEfcCwmanpeIXPWDuzPTKLpYCfGDWDghfgywPeIOIE8ve\nXHLP1DC5pLe9rCtyvqkGUnOMaTuXhyIEeeS66zkU7TF2eue37DgFZ2/bFFU0\nalo+\r\n=X1fs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d0f9f3f2e.0_1625270431382_0.17303103697331856","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/card","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7584749bf180b940813f73d33ef2e26652f66c59","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.adeac0549.0.tgz","fileCount":19,"integrity":"sha512-hgi4fcdbwav/K9+F7U6BBMVZwbBaTy1zsANUS3C2AreOjk4aelPV5SMgGntRzTA6pRPEoebZL+tTIw9KWCAIbw==","signatures":[{"sig":"MEUCIGP5xmO0/M46ldF9IRGDiiDbkJB2CpIgUMJk44jwPrQAAiEAkqtOjJ90i0xcDAG3b2/xFlFl201uSb5GFoB4ZCuqyt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xU4CRA9TVsSAnZWagAA95AP/1ksjVSXX4Rk6ToerA4E\nZ+0ubzdBhERaJNSixIlquhJSEKiRQ0+qioEe0YlqNGvOjrmRF7yxA7Ztznib\nNjEdeesFOpSnvhG3CIDGtMJK+tG5Xm0of1iGkSpDAXvhf9AEpt/6MwGijpYg\ngQiDXWOii2JSyINVvqzebe/JExFXLEp+2pRv7ckUJJXzRj8m7SZX6/ueMQCC\nKUDrgFuA/X8DyLX7jEENToe+VtpGaIKG3itOGbtY6+mWltuw82UO4p8rFVV9\nA2ku7bqUCFtQGirG6wD6S0nbv3HW2skDo9aWircfNKGnPdlqAYPmkm23TsEA\n25C3B59T68P/18bqaAgAQQSOx/7NZ6pyh5RHFqbB+GvsZP3KeEl7OqdwJ+Y2\n2P8jfNB75gnXDsdOC4ctMD8nIx/S6tNJwcBYNOFOJ5C3yC67OEqGW/6GdP0c\nRro8TyI4NO2qMv88mgZqLsFDKuifZBqzKzPZa7vbAu8o3IGcmE92WF8UaHTo\ncs0+r6IWfkBia6DyOYxdnBQ3nXb9r1ofblWszWj3+GAiF3t2C9QK7ylmkg7K\nbez2JKYARdJUBL7kd3GUGrOaK0OQuUwSNbVzNn1D12A/cRQzEWPmRuI2aVke\nwzOuGrzwOz9d5f6HX6ms9gAFvO5bZyYDsAdu74cWy8Kix2mQIeWQspKtusQu\nSK4X\r\n=vGL/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.adeac0549.0_1625756984460_0.2666278382973424","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/card","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91b25c31f4ef244d6431d39cde5238203e00b7c6","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.068fd5028.0.tgz","fileCount":19,"integrity":"sha512-D2sdQA9jq7o4pUCXdpR78szFerf8xuN4luySAKr2/ewpEkXMdj9JAbBcp+xoFIvhOuKHOZpDPfFhVYQDkIJGfw==","signatures":[{"sig":"MEUCIDNQVyAwl3t8gUScMMFou4OaPHigHpW0i1QaLpyNlU4VAiEAyy7SWDRRH8BCODwVtA8knM3BvVMSd+TCGANDVdmx4vU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wqCRA9TVsSAnZWagAAqyEP/2FGRyHwSJX8lAb6z/Z1\nH+aa58CxOYSsXKZeg+MXmsTzn3XGEE2CyZGR2rqvCKpDP93a8PT95OOASEnE\nKyCTGMEffaOspKqWblQrqiIzHQ0zjNxVCnltpEJU6vvHNty2VOA+G7tnahoQ\nNRleRCtLSBX4NkNLEMlRk1xH2LgGCYmHKiiRpbeefP33yIiEX6LyGYVJQpIX\nolbxUnj/ueO4Wl3VZw2UOp7STj3nUrsCdBt/b3/f+bGsKPGgnAjUmLIm4zVq\n6hKPeoUVAUwSXTNjSzKFzE00PaZmeIkVOgfxGjo8GjPcrBYcxoONWLi5+xjy\nkenuSxmVKo9LThBTD2mfWjzRc4p/ALegfNXC9zJG8fq0DWkKW/ZsC5StvpSX\nmNe4r6U+M9/s4yqsxa4WIAe+kapJkEsh+E9PNcKyM7oEtPuV2xwQqiDOz/9e\nswL/YVWfXOlSUJ7fxNx3CQF8eLae7uFktoOyXrrYpLm2UO/SsblczyY+p6Zr\nbWjP4xwOJKCVcaLU2EhUnEl7j8+cxlKN2IYZmxJ9CEJE+THC+hzKG9VqYkf7\nw8u3wJvkVXsPkfeB49fUO8xByptCzX/2Z9lzuCU0YL2gI1sbBTxEHtLKyZY5\nm8p05Z5LjhiVSkxX0C3Y6fLlnSVFCEs/2m5iS2zUsKhTO2EorDUCxiEYgRcF\nOgOa\r\n=nWcY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.068fd5028.0_1625771049624_0.16307998056375106","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/card","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7cc2dee134e043604093619753cd5afc4944739","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.5dfec7a14.0.tgz","fileCount":19,"integrity":"sha512-5oZqs1K2IZ9wuoM19JpCau8lmQIiHmxPO+5Aa8zY3ZcSd7W6izyEFEfEf9KxyU1t7RguHXtbxzIbjVYSQROCpA==","signatures":[{"sig":"MEYCIQDizLidlxmopSpBO+uM3M2U6L99tjWmB3xeMKk61TBCOQIhAN+fLxKn+InkilRNKYwH9xYA99NuSj3FVpLGqDvL0/HA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBZCRA9TVsSAnZWagAASckP/3HCDfuia81RIeHIuH6S\nYSdAUOkX4K8eJcK0Ya8RkgfQThoM3+yO9RhgFCp2zGjflXi6BufvhuV+BAW3\nQdK1bxZ0lr88i+XlsSAd5NErE1vb0qsDvJH5lM/21eG7/kz7xkDnXFu+ki/e\nF0ruBezrZlEcT7mixPxGmc7aAE8ukCON37m1cv+dsPmsObZ6cztuETGLNlGw\n4ok0rBh64odB/oTHWbmJOCcaIUfJ7i87sNsgFE6zRanlAKzdgKUtVKgfntuv\nGt726zXbWqJFlmW1dA0y4EOpmFWI8mUoOcoGeChop+6fvdNV1hHec3cO12mN\nDoACfAlmF+/JR+RHASHPZIbRpkhIIuFwZO9WVJMVanqMJIceY1gQqmtqSrHO\n9alFbpx0mS2gte78VWAjDDOg+vwb6quLk8zzT6ALgXXj73y8UuE5kJzF7nWq\nFVJf44NoY8c85UCWxbS1SbtgOAGZ8zTt3c6m26l3NAyx2GCL+Bxx5AxuVKFq\nFfCkTMirw5GpOSR6rtaDEuirErpvbhGZz+Ka5qkeG+FvyOloWXE9axL/ekXJ\nOi2xR2ejnKg7ZNpXhRSCS67MR7kw7Vte32iXKmYiei3doeDuwFpRGuFRMejP\nYwswcfK4jidrRKwzUymFYx3GW5kc8t62etYr3a7ryrfoq9O2A9XhoLuccTPt\n7DyC\r\n=o7KL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.5dfec7a14.0_1626120280563_0.2540564870420585","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/card","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2523e3856c9d42505a32aa122fc255d97ad1de5c","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.07a73750c.0.tgz","fileCount":19,"integrity":"sha512-iO0ZDROtICJn8n4CBJ2LtGe9TjKvXsrYQh3F8oAjql/MZ5gMoMuVpAJT+4xgP8H7xZDLq7j3Q5qNHaufZsVGPQ==","signatures":[{"sig":"MEUCIQCegda/ZuZB8dbKxZE2GZ19aP+3ObCDMQBi+18XxbQIeAIgf0TjoLmCZOemri+6Jj6+DZQ9KcnilLCybMQMUHJXpz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KVXCRA9TVsSAnZWagAA3GQP/RGDQsl5qYpKb7tTJQeA\nPfg/I8gFYmKO4UrDHb68F2AzKJ3n9AC6sVLBuZs0l3p6lTaaQ1/+eJMIt4zs\niraPGFVn6qBJyDUwYoNSm6Nei0JjRigbWs5IUgX1cVXek32kKMueoTY4BEjA\n/gaPd4FOm5dtS9CkBvpTYZlo9Xs+ukKj3XfSv+2euRi24Vz1bBASGdX+1QXY\nzeUERgislPWUJYJQb2XFNZGhjnUor+zW/rMwi8DmsCesUZMi//Nk1WCbl+mB\n2GMkCi87y6F0DLnNLZ9uFCwWF6L83n1nbARRqlqxA+YhSeuji/vJgCqK2Max\nqXxG2IZmEnyHDoltiVBoRhSJ4J7ZvYI/RfXhrZWDrNhgB3VKGL3G+yOLSH5m\nZJLeW6A9KgmDk5DihLptk+DFRx86Y+p8jFStnqxpOsx5YIlBi0rTWN5fDJQT\nRjO45WPv+jv6+WE36qAJ2mwFX4sE1YOVlefNSeYEV3FbWk7ec0r63KuSboP1\n0vCEpL8kpPMdMJ0jy7QplYXwLhB3x/alRiCqrExQEJtAU/IhlVV2rEGSMVvP\nF1OWXqGVnMJCwxK7aytO0QjpEurb7m2iR4bedfNL0wo4s9Q5actJ6y3TOgzi\nyLx5G1X00QdBF+gFMUHyx8jbKCY+feYZ7s91RuUoSSOi42qP3qWPTSyXidO5\nFU61\r\n=Hrd7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.07a73750c.0_1626121559126_0.922375094877621","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/card","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56b999dbc0b686b66f79aae085e3687ca807f8d1","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":19,"integrity":"sha512-iFFYRtjD8HDGWnAnGsFvmG34nfqXUypr9yfGbQmqCotg4d684ljzK7gpeWlhpyuMks7tUtIiydtvWE75Xgo0ng==","signatures":[{"sig":"MEUCIGKOyBp8wPpJFMVCueDqn8+A4KPzQCHZqbNFj+PFu15HAiEAv7CjNmOlpVsDW7Y3jS3UrgOcbfE3hebMhFkmsxfRlmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PG1CRA9TVsSAnZWagAAxN0QAKP69Cn1942GOSC0m4cl\nk5gePBkiW1nncRV924lAuhTqbe0ewi+57lr4UFC6t7fVLwDwhIBcCEdU3DrB\nmW1EZj8gDdnAcdGE7nrGOx+Wedw7MccLaI3IRuVMF7PdbResq5a0AqyZjrDG\nwxGlVvjvMdX0BkfJyZ+ffobx0zV8NWjvtQyTFrzzv/ofZENFKxBSlMQgeOSy\n0JWxNkAkmLGRrcRsqLAk2L5yl6sElEjiqUJot1mTvd6WvkeM+uLBZsd+q4h2\nquapOVcpHEDjoR6u1ha51wMNsLfkumrpAcejxxMBuffHPbtG5Q7SRQL5Ec/Y\n+qkEfp+4mTc/PuIA7q2hDBgNSjym6mpAyly97Whr5w2s2yR3WKhi+aY+5mSx\nx8ItItSNc8Rlg0hME911GBCN6tQPod96f/1Yvjvc3DEKKAl3h3+/1ftvXaf1\nl6KOHh3LycPFIoLLlKupJ0fnNzNoLB9nWf3Vao/djXjJICpu//ZvUGeL6Kqh\nIW1Y2GBJwCD4StcUyGqWM/5XH1QD1SPKkBNbNYtJwopioqqtMVZiek1pt/HO\niubgOcx2EyiytR+2Oeul/JYX7Fo5j/EKbI3OXtFuOuu3RgZhH2+9q4Gg0vuH\nfBVa+Dro3IvCbL5i3cT/tkx43G1bz2xHRHH2fOjWEK1gE8hxmPK/whZhUTPv\nK85i\r\n=LaIv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.3e4c6dca1.0_1626141109146_0.9247638711673258","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/card","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c570408b71dd2ff37db88acdcbb90fba894e3f2","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ea77795b1.0.tgz","fileCount":19,"integrity":"sha512-CZdPzN1KE3yGpK0lFHEiNseDNE+QzR93arnzU/YGxV+izICjb/OzNybvdugUFhM0tp6riS10Xl9o+UZaha59Dg==","signatures":[{"sig":"MEUCIQCIL61nY+oq4noOrRNJJHi7nkcKoEg4o4n07D/8VbJW7wIga4feIwpp9coNijKSUv/Wdxd39bj6Ki2o+AS3vJXTENo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bYeCRA9TVsSAnZWagAAalcP/A0QhMnON7Ui3TaEzsml\nkzvAaZm0dXn9/XfiAI+MQUzI2h8sPxY9tuxF3FpmOZD/vpKnpi/nRixoo9O6\nH9tsPx3S+IrgsUc0Q9fBXwlIMFaV2MYvIUgGHHCXGb117vRbdXin3S98NQsm\niUOPNI0Nw/krhE9x70Hj3tdxybm0m7N1ZcDMOkal68ED1zwYJqsMeBPw2Ljq\nG2x0eqx4Jv0j7gXCJoRFdTgfedoI9rrg7401NmlN1bfL68jzB+ryGm3H1d46\no07vxMR/tK7Kh63UXjFGDwvaen+U72lMqYC1QFEoZmODG3toH1nvKMhT53TX\nSJ7RVvLkOhZC43XGC/Zdm1IggfFa2u8gw3W2nvydnuG4Akbydm2je4wLWvK3\n3A07gaLcPFD3WrZihhbfbT4VOu++Lui5zn3vTXWD5wIFteoMdB4ByTf8KrKN\nZDrnU+Crr2k5qOHV221aUmWP/Jx1cGz2TzP4FfxP1b4vCtkIfoY/sN10wbsx\n3nrmfiWHuS1HMH1oEgPoCZ6cOEyudDkBK9lzsIOdEN8oSQuHgZRkj2i+pM4t\n63nhXmLx/xQosyX1Yd11rWD3C1jAWnfVbSZC+xj8jCOefDOsvwM2Xw4SDMmB\nXPMYNhcRzF/5Q12KgpGwNTaDR3mUCR06mPOuctVKvusJjhz2CWZgLYgedw2v\noV5i\r\n=ReFP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ea77795b1.0_1626191389837_0.5793619461269455","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/card","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c253539238608689889f998d820f6d70216e936","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.15a179fad.0.tgz","fileCount":19,"integrity":"sha512-rDlcZum08Yren7Vp4xGzY1ZvHRZjICsBMUY4Jm2Rp7uHGoZkMUgFb+sexHgpfGQHcz7K/r1cn/WnO3eI7mO7uQ==","signatures":[{"sig":"MEUCIQCI2Hd4iqFM9C1yzAeDih2fhtnntVW0dNqZHfiXFx1pAwIgAVKZS4OkDamgCFO7WFD1EJm8fPATuFGRL1djwGB9DSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7db0CRA9TVsSAnZWagAAqmMP/3Ep6j8NBzT7gTlQsuS2\nwFc8X+YzV44l0VJV5Y6PnS8Lujli9RtwjUV8CvYtaUxGfHAOvTHjvZFKg076\nODaK6MVvNODFx6Iy7vlT70GN/N9snzvgALoqdHU2/DrmUyi78ox6xqu1AXQA\n0UcJ8aAByEQ9q0cBd9PsNK//HQHTq1A8A8baGGKcZhDyzHDQyg7FCVes6muh\n24YBS6S/nd3hUpdc6xBFj68otlHgIxJsLZX4QQLQmzg2SIUQMNjrmKke5weu\nW+Lv0Txs9RxVNWSeRPqkvDKmoCwgxU59vVhsahvOxRUMx4hpX2G9BX97fkAR\nOHMmpB7VbDvjbz5+UqK/PxWKl8EaYCWgX0GpzP90gDBzMU5udR80dI92Ms3R\ncn2sbK+edm/UGG2ofMf+yte4oOKHP5iaa6WRuI2Sn6n4FXHj8IH6sI4sDSDM\nZ6DWAr0CAQ73aPNdCSE+SfdpaYWBQLCdG1xlrcy4AfCbDLrlL1zOHN5DhJGV\n1R1lp5qw8mShNCAie4fWqE9e485+jdVuA9IT+xaLhgzb2UWma/Gjqwbjv2fD\nJA4Cmrg2U5+GZRcU5HkIEnrfvO/1NYl4KlE4GjEMlgJHtAmtfzZfvJ8jQ9w4\nNzUBbV9EGVht0NtJJAdsntsFErs/2JkvEG2r1jtPnpBASw0zNFLioNRMSDwP\njwmM\r\n=WnFZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.15a179fad.0_1626199795821_0.2953535531368223","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/card","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4375f70e04f2f67d99c670a5a9c14af441c74fbd","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.c73142a1b.0.tgz","fileCount":19,"integrity":"sha512-Oc+VoaIZlCxrOL5/dqszwPya/ZtccfJJmCTEwt+cFt/qUU/pDm4EwKSjd0XiLrRmN5EjifhGL8A2mSjJNGckKA==","signatures":[{"sig":"MEYCIQDT1rYwOIpDhMUJ5BKocYGUXA8ztAfoxz3es3MZfa/MbQIhALkxuiilzmFD/A6JFEUWcIUWlm+KW+vupMmf0wpmJGW2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8bCRA9TVsSAnZWagAAoUUQAJ8J7fqkDII3kIq1J/B9\nkPSymu0LQaeqRLe+a8HmpcYda2gCCZK1VD1qXdiVCXlEbS/IToGZdvD5btjl\nSzfx/r+A/+Bftiz1qcS+xHpuUEAz9Mt7xOk/2m/Cx9WQCepqZX4/HWggGbg4\nrKGUc008YznKu96QLQPDSA6s80RK8NPi/gVRWmb19UNZefGVvHLdNuEreZsa\nTndiWBUj0RpwWGsR02nQGtFSUvuRfdarqTEk1E7snvvxzscWIkdpgVbcAqx6\n/mI4V2gwmelLHVZOkFs4iskUDqVQoYbTOzzXjTiAxyCGx9MFdEnZkjxeamja\nOE4ufCmQ/yEki3dM2lkdmA63xNAn+vNfGFQiPMiXXaPbpgQ9p8EAXasJbs/a\nP6xKZR/SQacHYHPvd3y8ijeSHdP/JnrJenttiZdiZIKMJ2xXNHa+sduiwpEi\nnj58EJT96sbi6DZ1ByTBDUbXqs5FAA442vLju+n0NlNF7r7IverNH7zI8JFc\n62pFL+zkNKnqh0GY4Yop1fj9G2k3uvDLyPsRsmYuxmte7yfdVJ6hhikRAGfR\nHaXAyOWqBfmHfnbhN9PRWHNhu7vfhmUfdfTFA1krkKan9B1k6phktXz7pC4s\n80Vr8ZGH2l/HW9RNoY8ZKHSDGL2ar5EGTDH42NdR+VvWJqZJJGGUtIfYiN10\n76Qu\r\n=KIW6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.c73142a1b.0_1626201883025_0.6502157155446942","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/card","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ff328e421e30b946aa8557d93680f1bba6da8c","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d923db73a.0.tgz","fileCount":19,"integrity":"sha512-Qm5mYwgMjTR8WAlgBCpA2KH7Dq5HywPKFqZho5q27n4SlVDEhy+WUqd+htyy+wEOpHspzbVmuvRlYT3LTh5Ayg==","signatures":[{"sig":"MEUCIQCCtMqYqVnRmFhLUFagsDzORwOWBcF65WMYk8AHOXdAZQIgBcGwfBZQR+KxNHCqrcqrZm/Ldo6DxoFe9bCQ9puPo54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2ACRA9TVsSAnZWagAASuAP/i2cEN1nty2pmeT7qPOx\nAVQ3Jvz6y/NTzo8L6gNyUSpCRhN7jNcM+2vmyibImFicZvIJs9LxD9r09IU/\npgUChgTEzDydd//a3IloIVIqJmvvekPKpZ7x2ocsm4z4ptPsCwW4STMzJIvK\nED0qucuvcrIES+JY0VE91wDqvcBOFmZf3gLDb2ej1ebKqlUEcWVIz9fmjt3f\nASuU21rRcPnrAm9z5GQp0lXZmOG+FIXFZF8rLFOsql9vRKDR146IAAi29uCh\nb048LztTHMMwJ62IZDBIkfAzCESAd2fTjkwL8nBi1ioc7NoGiL26R+muqa9D\nVS/p/BaI1cbYpjjsVAtAwtdbnFd63tSnZYMW1ZyE3wI5ai/LKSJrsIwKZzdg\nnx3lGRZAfS27lUHs4p0wevJyRyt+LXZmxRAyYt2cpwo1HsihSQ8xLEauYDa7\nL6zosQzAeArm/X7Ye97syUm1GruVxBRLxkgC/VEqMDtwBs/1E5q0aIjuXKwF\nBV03rCnvtHNJaGN6XlBpA97oiWBM1jQ6k95WxDypSCyhnZb54AIrqG0YsnVF\n/8b6Ohs7X2urPTwQj3iRgMvpt/2+9ywPQYUEPQHxcsqiyOCRJg5gmNCQslu6\nFRzWRr6Xx1R2EpN5mBe5umfKmXAoAR3sW3pBF89bsldsm7FFedsNGOUYJ8zK\nWMkw\r\n=fxWK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d923db73a.0_1626209664441_0.9243474497698856","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/card","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba7647a276bcd51ef46cde19dda9d09790c01b98","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.22d29cbb4.0.tgz","fileCount":19,"integrity":"sha512-ET1LCeTWemzhhJV/orOkssctixQ3gntUN3IrXwpnVSi1iS+60Z23BtL3GN+ZSRA9qQhvXRrL8tFYMonh8FrOcw==","signatures":[{"sig":"MEQCIDpFCiYr4fd0BkVFxVxF2hVxTAKCYiDpekjufyO4S5JDAiByUc8PjNBY/EyMTk/iyd/NDu8ZNQjEp8LTSBkEDlMU1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hjZCRA9TVsSAnZWagAAAx0P/3GfDUjRZMZmTmbLK061\nEb0o4qwma0KnuR9Y+ZuCzJKICeuKZ2ugpFPQSvChHSzuLd6NT6GbBggaQypb\nvk678ZujU2lRWYkH5Ja7Zm4xoOdfuHEL1tlzlpd+ttLqqfb598bNduC3BTdZ\nBrDfnFJOJiSbBkTr74eDZg6xE2h4RrPVTHsk4sSduonuhCXkRJiQfV9AY8Tp\nbQO553QT1N3MRG+aWqcOCg0JV5tcX3kf+sFoHWPcIUOk/RB0x4S3lt0NqLn8\nA0kV2xYEVEyT1tuxql58ZiVTKtjZHXTSk+mnle2y6HH7XINaAJVK7ZoN5vTp\nINsqQbKcjC6EBhNqtOYFccRzxCyfIyXDbz7pz0wkwlcIYm+DtPrx5wBxdJs4\naZYuJ43s9PjfWOjJLoQglfMAu93+zbEYeCHpUpqwtrr9iMmsRBrvgP4Dq9HQ\ncSrNJIifMLdow8SUHWw/eEN4DocPQUdgshzzEK6S3aUB1wwOlg0KLoMknRpV\nZBgMmocUIKCLJc2nmfCknFlMGKSnkrTfjHRPhr46cHwDAuBSp1JV/gBpWiMy\nlqhTIuYagOfH9zucCBkeg+i29jiLt8+nUCllF/Xofvn7dy9ICTpSmm9S9P1H\nPVY1RUkAowU8jEnQGvJsY/U6INTxAlHpHWRVwpGwEKNCE2unLFb6PP/4cnrd\ngCPl\r\n=/B6T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.22d29cbb4.0_1626216665156_0.4057877374093344","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/card","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95aafe94c6ee810d659d54141019303b5cd2f883","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.2749604bc.0.tgz","fileCount":19,"integrity":"sha512-jGsCL2M6goupYoU/PhF5VdO0OawWCWJ5vDX6Eb6uPcVBpvZxeCTXvgwVUokZjHLm3b256agYGEkxYcJ6GvZNyw==","signatures":[{"sig":"MEUCICGdLVURPOn+qA3YeyUbVavzKXXFUK1qf1UtCvQm/rEzAiEA0ly4pKTPJl/qYJo7Lz88GbYNWIZDkc8SumsVPnec+aY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w9iCRA9TVsSAnZWagAANcEP/jByl3DBcbmGjvaHjhrS\nor5rqcbrKitClUcabyXkdSxpuLYzuiBtJiHYjNlzHDBqQ46rm4F3CQJmdtcw\nHSGm3MGy4SlKVno9i19jhboM5inGmscFyyznXimLSrB4wkquCwYKXbr6mmr0\n437g9aDMBuMJwG7svdnQuz3VCimUgc3aLJJNf0tHnYGmAACV+Yn3J2+zNFjD\nQ3cRPOWepODL3T1fE+d88Vt2C4NeFKJB9oUDjl3d2nCXFSFdingivHKlKx71\nUJwZQcRqDd8Fw2p0JsrlnXyzd9nkk43v3H7usdbCEWQoKfQBRK3EZXiXIbYZ\nvroaj/KyQtJfPxu588hlpz/kb2syJuLaW+oLdsp77LVNy5vLLFT2SYO4BvIK\nqc7eL58KX36T9BqPgJWoiRJP8VT55F85NFtMI9faXSLEtHGYiYtDFa3mSYLO\nnMNEMfOz4vbOF1WV8cPd8X0NzHqilzxpwD4Q6F8+wlE6AtyWT48ut8LIy1jM\nLDZxCf7Rx+BPpmLzPdZPm428WRoJU5HegfApNr0/yXBovGFugaPNHbPM4U+Q\nKBOCfGSzLodUMg9tm6pssPaBPQZGVSqWtiBDnGV9Qzen9jrXDJ/xxebeokF9\n6RfDJ03VoQi05YMEBls6W6WdNUzIgMqjRBsQ7oESN5MpEYyhejv9e+CQcK07\nFxGm\r\n=tsNj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.2749604bc.0_1626279777688_0.7189335066846776","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/card","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"975053d52e9f1347e2edc4445f50d0914ab5ecab","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.e1703bed9.0.tgz","fileCount":19,"integrity":"sha512-YGpJVDcyvZG/ftoqpKMCqY58eMcHODO8KD/Op8YksFHDbwXBPkxNbKD3W6ijVCZTikua95dfjjsikYBR8vfLXw==","signatures":[{"sig":"MEUCIQCmBGGn2Dpjl7zCIlM0zY24hiek2SXA5HAllQKcCmwZ5AIgZVLz25Pm08M852xVKjyGareMUM4Ov3XKNmIMsm6UFi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71uzCRA9TVsSAnZWagAAfoUP/jIfx45RGhHikEjFS8Ko\n9l8deZCuPO1mY5gnQmUqh1ocSYFN0yMzdfysyAmm6BS1zy1RzZK9vWEDFrT5\n2Os9PbWxTvalesTx/twa9BmO68XhRjWslxLgfDFIZxAjpS5u0hyhHsSPPMGG\nNicBGI7is+MKjrUO0WFfImNa1oylPpzRo/7wL2VZI2eCQy6fXBNARNnbyL5h\nB9UMtdOI+7nsITVH9pDmvFmaVKZgjBhsvK29kA9jiHoHVmZ8KeP73lbLRe/t\nbw3h2q1yZR+WCet22pbObS3TTGxkAnkLwVA8Om5LxA2t/ZEiRg+xNqAye3Lw\n1y4Pe0396PnSEakaKorAwjsQfplwhf7DYai3xN2/E/n60zjClFv9KvC01Z4F\nzYpNtMmiyEGnVYCIPQaVZEzB1/PwJFFwaQOb7HWEStBpk/2xkQloixcsFem/\nDhvdy51OYuELNvpEQfo6Rd3VdK5yA4QnEC9afBDEDtQ3eoCVNHdLoi480VzH\n/LFMiwVKLW977vvMreGfAHhnDTvuZKvYEU9smA77dFhMAsrwXNE6ANPNElM6\nvxdx7+KcYUTD06WPqrtUjLHnik8jxl2hA2CDEKATeVXN/4HI2ket8wnDjm3R\n0fTO2JdKsHg5AGGIoY2TAAhwFy0c9QS/qnA9VnR7yA/YTi9AdXzNcpTu9L5W\nKRFS\r\n=a6HD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.e1703bed9.0_1626299315517_0.9615797637094954","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/card","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c97aaef9ab0a7f27a791c04a7ed3784b6aa14d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.de48eff0d.0.tgz","fileCount":19,"integrity":"sha512-hdCuLMtTMDj2tGlUarCSoKZMfms4+kr8pH/f3J85+2jgYCTDzsIMU75iP8OeY4fqN3G1bJ/zlYt35XVxHhM0Hg==","signatures":[{"sig":"MEYCIQCmUWUlvWHUlWKv8dP6sX6uflvZRcBhuf3SiBkT7AljJAIhAKHHrJww5DJ9ZJjYWXYONus7/lTQngxxIB5gTc3BLQAT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GuWCRA9TVsSAnZWagAA3w0P/i1Sp9+v5dnC3B/Qc7UV\nUqysbsRoH2x6vWobZPsiOZmRuiSj8LNZ6FrCBsMSFCnT8CGd3RDheLL+lZAs\nhCYRqiK8D1I0rnw7BeB/XCvG9Kq4iIplyp9w5KRQro1uR4cHdLCAX1WtD0vk\nVN8DvbblGAS0oJrMLkc7w1vmb6YnESkj3+E9GLbCnY77jtjQZuETDoKDyZRS\nopAN44ZxQWNyTEt8j2pjMpDrUB6hYJINHT3TexAUV0bn+tbrHl9k9idUbFUo\nQ8WkyNJAOWp8wlJuEmRoSDspiKJyutBFRXIxjoB6vCq8wUNooNLyqZ6sg2u5\nBZneqFQgy2toegFvcI3RsUVy+2t91bSM6hhFex7SyudT2ethWodco6xP7JcU\nsp9ZGpCRNxKWlLvFRxmTcgmKl6ctgkioUbi4PgsiS9okxgYVXWMXAth17PhI\nFyUALnrymq1cGaLLv8b7NKxQ0ZJmqb4L2Pmczzdvm8kqNG35jdv/IkYms6o4\n1WmTBTDyK/vM1xuqJssDJfbkpVeyJssMh5eY/aZpIpxuPWdW0nu7ggpVoi0p\n38iptAvH7lIw3Camy7x6O5M2EdTZFDlarPA7SisYIB2tRI3zT4Pf76XAq4s6\nqC+8aiIF/WfKHNXAtcQxbWgy+Hor6L3Zft2Hlr1pTasyRjq6fox7QyozP84K\ntoO5\r\n=4QvV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.de48eff0d.0_1626368918705_0.902671086738136","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/card","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81ada715019804941700bc84681a3e1be78e2803","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.4f060adc5.0.tgz","fileCount":19,"integrity":"sha512-3FFPU93pMKea5Cz08JtMXG0NjKrncnEZ2SL20u/LFktAkDX6PBSN6DXtsNpvH86ARhM17Y13A8T6Vjx0S4KOVA==","signatures":[{"sig":"MEQCIFsppH3YnFJwugCy1vQ7f5dMcwIigeSGLTrDhsiQT+eYAiA/gSlEhmRn3cCyp+2LeaB+Z/8c4Diwdj6zXuhDvStSsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IruCRA9TVsSAnZWagAAoQgP/iLrzS4us65SdGVTTT8k\nvE57XpnFH8wnCtubxcyH73JMLZLNcochSwkRKwQqqxhHnEonEu23+BwUbUwV\nW2TWxY9mKJXqCvBtBy0z/rBUtAqN69csPjW92fta9BRjdgABZTvnt4QrjnCf\nLg06M1qXie7V0jIqo3NAA/NACsyDdEUzau/Zy5BYIISbYKT69xSL+3UrfIVq\nOvTQYGrubDsoZ10L7RC705WxlbmzLnWQm/rVp4bsw1NtMQdMqNUaRZDIxfl5\nORYRPCvU8Xtj/bp/NWGIS70G+2626LgIOyrIr4PluItWYdZmRwUIN8Zqcr8x\nnHdYxrWTKQcOa/Xcsx9BxztpZZMl7M3oa6xwuM18mCxhtXfcsggcavXQm6UT\nC8Ig8Us4WC9u9wOM+rl9PCW5L3+0CSSexObo2w1A8UMDTXi3gRw+jUN7pDg4\nUE3J7FnYDg6VQvbcoux/0YEqvVrp/MF1STO1E9PXTwS7+ATxAPef9RTafBJ8\nPazFJK0iS1GG7TZT1add/I9Y7b4qTdNxeA/Sf/deGy9dwChTVxD6xrMieYmO\nRGxcaWqB5KSWZaubXpHTO9PtL/bMz0Y0fvLu3i/Mip8jqjVwYlYs4Gp13ZZ2\nAY7ysIwAMf4u2ezKs/mAdBUaaV6tgvwccqt7H/LjkrKxTwExwpemuLnB1t7G\nZday\r\n=Volh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.4f060adc5.0_1626376942519_0.4711759242549316","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/card","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a046153c9931d38ba0021343541ad234979dab10","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.bd25779b2.0.tgz","fileCount":19,"integrity":"sha512-iZEnFIKZrR6ivz6EkoBzUhpzS1JE936Q9B7mNaiR6tAqPlfBCGgR1rqsPic0sqMnDuwWJLkF7MKS4IyC7hPBXA==","signatures":[{"sig":"MEQCIDq76wJxizHAIq4Vd0P3ua17GAO8PGy4R5dy4JyNOFcUAiBtSwvPzjukJVAnzjytPQxOkSXRES7HfGPwKFNlWTIv/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J3ICRA9TVsSAnZWagAAze0P/1sHIfeN8OtYWn06P4bi\nq13O7J7WSvexVvIBj5MgDTNsD2nBDCb5KQuVA5J2rqFZEaZ5v4KAiIjbVDv6\nYsiPRkDw7Aj4YxoiXXbHhjrTXY4tgA85zr7eeB7BPzspgorLQma5nyi4Ejtq\n1MvRPAUubbJ1gCjtorADCEl1zk+2pKPVbUk6HINu4uUGt7H2Z8Lmod5xSqus\nHREuQLUKa+Tdnkp02NOGseLSbx7TPXWM6y9ptvh3jXEEhcCzdqhRMB89Z8K2\ndj5rA+jOahPTFLa61GDJuU8eejwhMj+Ibmr5mzBM7G45lJZOZS3Msib2odl5\ni8NFRWjJRu0SKkosSjxUUPku/xruAFO1SDJseic6L4wag08A/hcbyWDgEezz\nM+PbyB72sE9dXLqVvHzpCjKFS+7OZDYapkcUzBbx+PUzFXrrc1+DXiZzWpHR\nGe5klA/+j4W6eCl3Pm1lWRpJOogKl/n66w1cpV2DpmHY5oOMuIAEG+/PtpSS\n+DScxkbylOY130+9ByGoxmEiU8nF5twgl7vzKYbGbOSJuXlgjoNw0GtVeBLw\nAi1XRfUk9WtW6QTYSuKywsucp41nI+pgcOmyefaQFlF7p7TQZcY7FOEBJ07B\n8HNYwbu81jTd6Xv34V3j4Stkf25T8jMRB0X8D91Zj/K72HKd5uyssvuFDPmm\nKbTc\r\n=4gVy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.bd25779b2.0_1626381768239_0.962323485094893","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/card","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a14832f9c72d74c5a9382e198651ac562381c19e","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.9f68a932e.0.tgz","fileCount":19,"integrity":"sha512-wedo68KnLPCOFR/Jag9JXGNUMGZXQGvXZzvH0y9bkZEbNn7Dneuf++9u7EXwwFX3JykOd48fwNm38enDNfeozA==","signatures":[{"sig":"MEQCIEuHXpmp3C+skqq9I4PtK8LBGqDl53/IM3m9RVK5MWwUAiATLvh3rTu0Qxd2nONdNGz+Xb4VOYQTaPG+qiqxptxo5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGsCRA9TVsSAnZWagAA510P/jZQY8TtH1wMAb5Hq0bJ\nINbuVZ+egO2u6t6sOFdVVFZhdy7C4hmN1nRaxuSirTj6qRlZoezC1HhLWB86\nSi7Q6w0qGTkAB1iebPPihULqQxgzDinc02h/fnFM0vQZzrFcM4VGOdKYxV9A\nV9u+8kV2gIUi90dl8YjZFDtYJyu+qATMCOSG2xR5V+rtHh3tORXqJX9a8pC6\n2QHA6XSDIE4DHD6wvuA7I99Hf3xTRencDck2zM/ROL5UVFbdMCDcENF+g+fl\na7jZJTt4FZ3sOpJOqieLQREhCosWkE/8OB8v2hzX4D/ZU4bQToSywGzT/B/9\nHTOZFflxgeqXZEmuIDdFZm/qki1ST3/+eyqinZQdNBV17sPOl/eavOZrtaD4\n0gY2zZ/tNaNFCqhWYSKkjaGLDz3WHX72JF8PYxBIfOXDhSLfXCxsVJ4TVsaV\nhDGDLdyGOpJ6cIp2w2v0wMvSeW5W/icsFbkpELuxXYddmBhL9FaOnEPWR8ef\nDRf80HM0PLdexuZ3PXr+0n5Q+s5EhJLz1y6EmHBPQuKLZzGeG7D2fRH6EXBx\noEXB1OF2eWsFir+9PMdbAA36pcIXB+cmbjKjaMel2ma/vuEdUmXd6r2jgO6v\nsfyHtbEafLSfetWZPWECTtZdHRkVhs3M6i2dEMoJQwmx8Z2BQK/1F/r741KG\n6TE6\r\n=w0av\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.9f68a932e.0_1626386860064_0.047642148956233976","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/card","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22b6303fe834d525a01c803b7b507f85c81beedc","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":19,"integrity":"sha512-sjcmezKDWe5NCQm8fzRzAClLHW2jnwLafs6qVDnjisIhw2GDcCZV818jZff3b6STXXld1XC8PR7ppql/Utev8A==","signatures":[{"sig":"MEUCIH4rcxKuc/QQ44L+LfP+MzIY3xKqSvSqmWlcmx40VYFVAiEAkczB8JebEhYiAiS1ZsycJwgL373KLE+M9cVkKCzXXnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6UCRA9TVsSAnZWagAAgk4P/1kzvvso7QL1fl0t85K4\nKQrvZH5deOZV2qyjdXBgc4VMrMwy2Ks4zi0AyotNt96WekmlKtcAgng/ndmZ\ntZ6OimhLkpwb3scZgE9qKn+ytdNxV2d0iaFgDNm0Y/3pJc3Qq9Dl8e7yLb5k\nqvp7lEeWAx+DzLFtPx1BUvNfqR3vfRo7T5TntkPTGWktkPCduJxJFG0g1NmY\nUE95Yv0BiGrHGsYYfcHhqb0bW2/hfOCjTdLuOt5apYOssSWTOJ+kLvnZ/NlI\nloRiOGEBZG8zoAMyJEcfbY7E0rRmr6n3nVWa0DyBKqCW9Rb9atBBlBj8lKQd\nCTEZul3YLDDynBfOzdkMxG6f63Ni1a9ws965P4u4vBuM+NdROWaDMmfxocYi\nCqXJBYAZzsUatcV2uBlS/0B5a0cAFTRyEIa9bC1fF+dy1N+wDxcBtwAQEsiS\nJe0Y6Y41rb/9MV5O7bUVdtTIXORZV9YS5VyISeOipro73wicaD3G8Av0QSO4\nSX94SyaEuB+1QD4Sg01AEz/skHJjUwofqvEoTmEpzzcZq1c7y7xKT/pQAJxb\nQUZ3P36i9ECTuakqfeEbYGsl9MIaUUoJTaRsMQG2q5QcpCvD8Qq+EtpDHZcM\n6jLIAbcjbcy9UGNjbhTvyJ8FdrYTm27TZEMl0FqtWH8Dpcmvw2lbu9BKoH6J\nDwF8\r\n=xn8x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.4eecdeaf0.0_1626447508696_0.7954534709032977","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/card","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b78dbb2198820d2caa7c00e44a5e80e3604cdd50","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.7239684d4.0.tgz","fileCount":19,"integrity":"sha512-tb26HZ7zVIMaPifA9MJIq6vp9mInI1SKnyVQIaLktDJJHnqvD/e61Q4sWUHM+SeX056+Vnwv9GuJSRNvhdyQkg==","signatures":[{"sig":"MEQCIFF+hhBZySN4iCQUwJkbsUBLQTh71nlNyNpwAC2OoENfAiAM3pwS5fz764a2nx+frCldAMu/7vq3WTviZk7o2mTCkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azqCRA9TVsSAnZWagAAQKgQAJgq6Zzv5eYNpSokjzYC\nFZ3M/iyI+A0bSi+ZmOZOhzub46VlgnfyPHP5ZLNr/axouyO2m8QHbA4Nsuc9\nWayqbyi7xJbYSXuIvZObfOZbjese89BTgHaA7ffuSWUqdXI0JW4HlKkGG7jZ\nHerze1rQOSqH7x+qESmbGP+zEAAAsxxgWEgBVaTd+ebiotvYwNgdn7PBHaXO\nLzbJrtGPuh2zr7qAELRd4fTEhljQAGcLuk9LxKf8dVS15ctrUiMS4f4O98jy\ntwtZSd6QBwQoUgzqE22wKeqCMGBQgC3BfW0qSBwoXL3gs7mCrc/s5QZnsFCt\nfguNvuoxZXGdlbTBX3PVFrTIZbjvEWuIf/GRe4bFuw8cL84dkT7t6jn67h53\nPNguW81oPOO9EF9E0uKAky4AxENt9IxrRYuoBeTVj2RMbM1S7JkAUVIWTPzQ\nvpqCMFlcqlqbG7z8ZQdOLmhzDfIkllNxRpzfecZAb/8A1r3fZ6UmDlgi2th8\npyO5eu0DbeaTxyFDGBR+li00THSlC/5dgh8vSvbZ4z5PH0eIB/UhqDcbZxvt\nIfO5EMS8XJilAaO4MFYnBsvQPqwKNH8ktavn16MVBha1mzxPocjtE8hczJPs\nPz01ffXP58v5m+eW6wej1cK/NNgL+MZF2K2qxqVVlqayfSuhrS3vFYLI/7JD\nzvgG\r\n=PqUK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.7239684d4.0_1626451178060_0.835579615380059","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/card","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daefd15138a47c161d3c1b2055476ab50894c51a","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":19,"integrity":"sha512-x+Cp9n6kQawUyMGuMBVnIKgxqAl4hfTCaNb81lfdOCaM40hdouGn1aFTs53OCkb+5UULn8vgUjQ4OIw/WpiqxA==","signatures":[{"sig":"MEUCIFzNaRbv5D4I97Iy7o2k29OUW4VV6NndMRhAGVuqNB4QAiEAz4JBW1uTgywtBobaW5pyROXIxFj0jMtSHGV7XOvLxDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBnCRA9TVsSAnZWagAAiQkQAIJl6KQ3+WcqlfLcKa6k\nGPNtN7txWTswqxlkuXWfFHWpk3Fr+harGtiulHQmGxJX2XpPSRBpCLYPZfLc\nT8LE/8bCpTxu5zroSYr4vUMCbLUyQesWq+zSMmT2A2j+w9FSCqXNDg2Yn6u3\n9leDDiNc78UUOqH31aILzKsB7y/NXln3A9jnBB2XwScJOUQnOUFixKt7Y4gV\n59Mb1ZVUw0m9pfgMUO7T7GRLyVNVBunMYzNrJ7Ov9qTh9/6zfqslfgptOV+c\npmR58Q5BG8AYJx+G5C/x8H7xyYd8P+OUupjqJrrQFBeOMN0VsvUd70d2rFbD\nuPviqGyYf7HDVbVP6VVT99vtIR7B00KdjGJLwTx0jOUtyVRfAbXxt+A9uRg3\nTY6ndoMkhm+n5Hsr8Tc7bl7kFK8gAQycTtdoypmz/4zrinh8g48Yl6d4LlzV\nreDA8SBCJiK5H3Yo+24iC2x100TAECNvwcO2H6YJq41174l13hdwhMpYy48T\n1q456KjI0VA6yXYzV51zwS7qpaold82CdqAwM78xxPDwLagkkwKjyTRBTujh\n+mM84wpNl/GqJ4YjV7pT+LgkDbE3MK41XoxxdBMLT71SdWecs3/HMxq/Vv60\nHvVFTWtL2ekqi+9XO6KN3bhOtlmsjsbC7xkO8HoaqwOfGpW88XGH2ufxIAon\nkn+/\r\n=vsDs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.d5f1f7c72.0_1626452071541_0.9833013472945356","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/card","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c3128b409c29da6b670783d106c64925ae94721","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.4d95812f9.0.tgz","fileCount":19,"integrity":"sha512-m9zPSi5vOFSweNaPDWWLKW19QGoCPftQvqDbOzY5sujHHhkcrDXVFFjnpsTi4PtjJagLL8OkHPr6XyusF6Q5+Q==","signatures":[{"sig":"MEUCIQC5/ti6tdYDeV8XHUj5L3XF7KT4KMjEEEWjnGAeXGD/GgIgXdEirXNG65IzZHetfI96WQW2YURZYScCa8g4glANJBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFrCRA9TVsSAnZWagAAHwIP/iKyBp+a0qlv2L3owkZl\ndm82KGcW/r9dIhGhaNoNv7RRkbf3zwwWhCfMJUiWACi6Qsa93B/iU9P7CEXU\nXbu+0Orqil8WKjFBO8ZrcT24/NzG5MGPZtZYy1jivxeA+WiRqp1NZWEvNMMQ\nQ00dN+BBsIPk04nPXPNKjmz8FLTMPStrOxNhQ9f1gZgap4t9vTevATj8PNOy\nTVW4vSewU1oqw4x/M4Xm08eXGEtp4qhosV0CTNdphjZmkFqAdw9XIkoUnMro\nY3eBhx/Ty8Wbu+174xe7La5SJNc/uDvJkVJn5Acai/hH15P2EqbvfV7k2AXa\nvlQ1S97jI6M1XKk3xSZWxwrhCZfQl2AUOrnjbkqnZ/eX98GY7GYoZ44l55cx\nLpiYDLAnUECbpJbsIYcNIN+2HZCfrEZA2rh0DPaY47WbbqPw0P70t/U5TZ/O\nT7cTojK0XRLtNsC4g9aWcIjYxJvutwRltylZwzsozmOSzvcrKiSC/aMkjlYe\nQmvCDai9PCRiAWeFp4h3EbhaZ00l4ecc2j2ezxVUTVKpi8t+R9Xgogy/tL+w\nRVx9a6PgQerldczZlAYzE1WS/XhxWrzENn+Y21GzVTJishZAXDGb6ufB7DtL\nLZkp0x4FR5Z8eAqZx5txq56gAFVresKbGOiNn5S24Gs+t1O1RpqhlY4nqQZk\nXJLj\r\n=hQrb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.4d95812f9.0_1626464619315_0.24883908526434761","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/card","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bc4ecef8319b8cec1667b23708192d6ddda1788","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.38d1846cc.0.tgz","fileCount":19,"integrity":"sha512-vovCqdY79HzvkximKBp7xy9SIVb5Y/PkBOoZNyXKHG1g09hQh2WdINOvQk41r6i4cuyVNQqfwtYT6eouMbnHTQ==","signatures":[{"sig":"MEUCIBUylzvrcvh2LwHSrp7fJdv/QnFj6wmK58HNwXUBUoAKAiEAgXgQezTkzAHqgfL49JuuTJ2KUvuVY044XryW4xtpLLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ceVCRA9TVsSAnZWagAAUhgQAJqJA6sEDbQ3GC6vh3jd\nJ4Q75Ii0icQjZiF8BH0craeWYPoSA3qhljFHwpm61UOrGJhq/QjJRGPCyI68\nYog9NZ4jev2IxL5AtKuIQVJdZ3gJYC8wqKEMsF2PpOkHs1ql9VG8opWnBDDH\nuc8idpGWnasUi3DG4fXVoE9Sl+5KUxzdLWWWzmtiKh7orP9iY6I78Iauwd+H\nGCPAM+rxtBLJREpqOsx0W03XFyN1WDZ/4JD2gioG6yHnnGXl+7IAaO3nMLad\nfaTmG14uTa1IBfTyd2xmdmBgN7B+mHTjesrNH7oUJ3ooZRbrZbJ2w18JBhUb\n9N9zViCJMnq7kmqC0mNz9Fl8gV3f+4LWHAmQlfadZmEIWyZcw//OT2bO72II\nY9//TBgseH+MGo/iHtNYJ/zEkCBzCy28XH0Uipx+0hSRvxiQfGb+U4W4C03a\nIiVdtuqagEOxJ6To6qj4qAnj1il1MR0eNi+5BiveLGToobOZnB3zL6w8+gu/\nfmf1Bdu8mVbyb1onL7wCRKhm1KKjn1BWomH5g6E3WkFTqOcq19rZFUTpf5td\n1+BYnKhY1N7C632UdS8wy3kLlCpqzEZWnod1sxG9tCkx6vgWD1u9fTi5hATf\nXMkmxP4dKu44YO/Z7yR0K72FE8iqtRqbU5B+Sxo8wBMTcPD2UWAqsUnYH/Hv\nu//w\r\n=qZQe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.38d1846cc.0_1626720149336_0.3970172327594752","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/card","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"525b951f78fd2cd515cf9e0a8346ab02a779c92b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.3f691eccf.0.tgz","fileCount":19,"integrity":"sha512-XKNrhdWM4qiwnrZ0z4hIOkqGrMqUhKJXKf64XYmrZsE599YIFZdINhD2acZ2o/NZYqenPelMnDtxcqCFbXWWUw==","signatures":[{"sig":"MEQCICb3XecHerdwOAo5J0w3k3GGNP4Mj55+3Zwt4a3GLKFhAiBUOit9pZzVXbzZOn3jFWcPJf2b34qrjHIUxM90HGpwBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUxCRA9TVsSAnZWagAA+LUP/1QLJLJMELszMUOPkpDa\nqIqJjf81lwk8Tti/M5x8hPASpuowYMF0zf9HGm4yMZksvup8rMEiZ6Ydd2Gm\njFTeMeaNyAjkHy2hBAzQ4PjzVvYlnRKNi2zSY0KQK9jXdA5DyhZW3+gfsv56\ndlsQBt+PtcOE3W0PTTiCtH10O2bzm/RAYaFG7I2diMQKqzZJy0jReGTuuf40\nSZrQrYEJnsHcyW7PhkOONXw222yl819k1cnAUz822Dlwoy2I+8yuS/va5wwT\nrRqApQ6PBqXONWEfclgBcx0H9DTfXewBuH6dAqraOWoAVU4sjrzn1kmPOoJQ\no+LCf3A7zAd65Qrn4/rl2Z9ceiNtEx+K5hss1xzHKXoYy8X7uoO3rkEkCF+k\nbqU0NP9Vl//9BBK7axvE80FMHvsIz2ZytyT4woaisdo6Zmc0K6wDe3gczhXC\nwslk/dwWHAduBDfIb8TWB2agPxqujFKy5UiG0mgP900x8JoAaKJRLZDIvmQY\n1Jo/epBkd33xgm8Xh6ccTzVQrvQ1K+JsXSJ3ZohgV4/yLBZJnwsY8a+wgmVs\nqaGMwllCjoXnXOLm4aMAnc0GKZNtz304EHsS9WZPFLw09/+oADbtKY+0dOSz\nv0rgH7OtjY8lsQZtOcP/ViGxV41KzAdObmRrG1iBEewLvYOz7nGzwizXm4RY\nZFz1\r\n=NtB8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.3f691eccf.0_1626797361348_0.3280717064406169","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/card","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"005c754600e7546c490e1f9f1adfc0c1da19632b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":19,"integrity":"sha512-1w39Z9eX21UEMdvrWv0pdKi7uTvZYttaC/Bg8Jd5RH8wqZscxz5sJqj62HFsDvTrV8eETj5i9KuffHBOXZauXg==","signatures":[{"sig":"MEQCIHo2cIWamXvqBY0IUS7jXzTJ1rVI8fGkQwOHCFh8lfiyAiBwAYFL+ZlpoczsfgWMWdqMRBum0jesYyK/rEBHW1uDqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBvCRA9TVsSAnZWagAAFJwQAJqtmq427g6DAvl8CU/K\npuhM1o3jdg3YaQMtP8QS7tUhYsvuJlK353P7icYlLQoM5xp1rUvTSAN+YxJV\nej0O1IrFmW2FJOUyTxuE4CD6C87GMnS+4HdsP56+rtwvNeaQb0s0A5USEvyX\nJTvbPVFKu9LiEwvhaSYvmYZ8Ge0vZJWP9Gfid2FwixWQtu5uPJQmvqlBHJg9\nMjCiKpOD0XBmj2ZSNzMg6xP+0hYWGvTnLUD3cbt5DK9JbLydhd2xKpthY9XV\nlSFrgzDi7MW6ZhyuQ0UfqjdSdLshqnpqQ2e28hrOcMlvlNQ99/tNKdMjCWc5\nHTHXQ3lDIZZPK/ZvM3PWUExMALgZDi51Sf3fN/FlWhaFMwxR/lkfEdCWFssk\ngHPDEOHhibqoeDo3ohKaWGqEbBB8IJKBLhzZP8LJuDHnf3Wt54NsgmssFgqc\nEQLRa5GjY05HpHKLXc4RStUlA8FUJXWTNjgVzcjdaa/a/8ROc3jX5jYyLg/B\nK8EIZwhiU3H02mlH3H54qh2jgr4uPKpApHzpYr2jCYWXFzOxu6qZ1ujDavul\nI7NvoBYPR1rx2r10PwMzNYv24+BlmDszfCote7v46YhDLnwWk9vtysT4l0nG\n+vTZdqnxRFq03Vc25prP496WWfPWV4/fZOG/sfROQpdhdeIDc9PXqDXsBzBI\n7E6o\r\n=7e7q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ebb5c73bb.0_1626800239554_0.28708359146953155","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/card","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c941e2ab86d1ad9f6cca3195ac96c9c99c0e328","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-nightly.778a0e8a.0.tgz","fileCount":19,"integrity":"sha512-OxjUH8NmRuM1+24bYFFwS4or8UXCicHs+Vs4po6Qp0B5n1+6Uc+95oTJIixUsvI5uZ3diuACJWZtLS1Okn1g0w==","signatures":[{"sig":"MEUCIEo3D6Y3eHbdZhMWmlMoUxwUgYV4HY4my3HpmrF8AP6jAiEAtrmg1oDaPgt/7D4tpoggJgEcS/Jgi0/WwqzNex3wvqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zq6CRA9TVsSAnZWagAAlQ0P/1X4a87Pwyg4NgrXpc1e\n2RZrK1BoIT+L2yREIuYNS8fsXPqQwuU+3Aq/0TxU1aH0ZhlmKdKnrf9EgKTw\nzxfuUlZPaHojl0zxp4zb4Ac/h0necPNh9lpIzR8uea/FbCdo/CY6etF+zO4J\nqEMjFrOps2e6qqmYhnFF7Wchqz4S1beGtRb+rLKc+AQR/h3bmb1zgBEJ67s2\nKR1PKxfpZgJfWnjuZkT83OZY2bnE8bKzMD9421ETjtBp0kG+diCi02lsgs01\nAA4aruZQrlchYtZ8vaWTEYsIuZJ9uslng1IPjnMUbOqMBIXcalmKz3sQJilf\nLlRplBNLNmDxTYAq1lmjAlVd1CSmWbnlCMmlwxipizBRZfU/f4EFbdnULgnh\nWVI395OofU8Z26IbL1dFLRWIKrZ1ub47bGXflS5tF1OoiRRHpG7C0UFYxR/B\nElezs9eMfmXR03so9+71Pa6F1tfzEi/vvG/LOLLUAKYL084gpynZs+s7qcX/\nnbkT2aT7EwBYkYwWMPXS8Ul0XO7HrC5dZWZw1rz8rV8ctZEyeSqelfsd8btz\n+7G759D6y1wRiraBUT+MH6IbeoKjKzQUUFiJF96QLgmoXxS1ejQ8ZVDSaYbp\nC7pPnJDeC+dzJgjlWvzTqy6G/Q/3IYoVN4wztwwVBsabKx+nkvLuNv1r11Hv\nfWQ9\r\n=8fXP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-nightly.778a0e8a.0_1626815162514_0.4191432500100061","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/card","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3175f2962f1ced52ea671fdf282120e85b14fb9b","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.791311bba.0.tgz","fileCount":19,"integrity":"sha512-AZ7esmB/sdlVzur6Zli4HgVbn4+5X4xU950t7yZ30cgDPBy0dB5K8a2JJjnx2UfM2nNk4haA+P1VM1EyR3S0nQ==","signatures":[{"sig":"MEYCIQDLGGrXsFdaipwW3A7zp1cQk6W8C6ZEa4XyY6HoLEioJAIhALan5cr5S+2kBd48bUNIldhX2qho9WgDcHu2TdQ/LRMw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lCCRA9TVsSAnZWagAAuFkP/R1TakB1/YijA6HfOVby\n0oRgAwaAOMkBL9ZA2R/7QuZCB8qQPIhwsK6iTkB5zg7wdiBZb8sgx/cTQ51J\nhH4tjuONvCXrbZ3cYHDdVc/ik+qy99Djy5Xq7G5j/QQIUmfRHXJlq+R6USGG\nBMXQ1rqQebyAxdw0K9UkL3oeXSDiqVOzTS0aitObfU8+11Dtk3LGQIxEqe3J\nR7EewRphqGI257BLIjVQGdDy/BRbctVCCWz0tkAdLcMsy3Tax6qYspj4Zbgm\nJRq9n42+96kw8MQCQo1ONoMiANIqHHFxIKZdJQt4JsQ30kNvUwXICMLSJl7P\n10ubdj403Hoh3vc8B74EuGfbOqXSFQ/hTBnTb2VCbYUdX7sBrS1JCZEm+LRt\neSrpwE7066IJNaC6LAWEeQr5+S1X0ei8yKuZeF2xxBKhZdCdU3Q08101yVBX\ns1iW87ukukX9TYTY9MMsW6bBZ+UpZyWd4xOqpgjPVPxeWCcpyjHAqpX7L+0l\nTGMIKfYxJalMvBl9UCqvbgy9Zha04mTAbJgB2JCP+iGYkm6HfYb+YDyszXdM\nmP4bmNuFHdzOV/D6S7kTB6sPdP+7JH+vIfFa2+CJp6OA2phQFv6UP70sqS4Q\nvUf4WZi5v2TWX11moMFR5SFfV2arjXGjVP94g0/0Ns+T/h3HKqOaDfG9uECw\nWwcL\r\n=2Yqi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.791311bba.0_1626818881976_0.03145786056247335","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/card","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a92194958945e430dd3ca80b85c16916244002d4","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":19,"integrity":"sha512-ZcjUCRLIQq3nJAJxgyYgc1BN5ixa4rSSo0FWvZ+KDCPPMHlUir9iF8sIRpocUyJmX9QK+OEzJacovxPssk24Gw==","signatures":[{"sig":"MEUCIQC2DIri0ujKQyUC8sBHMS7jJ8s6ENXHMYSpxkfOwpcxuAIgN3A0Z5woslzFLgGXdOT7E0A/uFveuUMDBM7g08rJrPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D76CRA9TVsSAnZWagAAVL4P/3KOnUrXdHhynhrA6flN\nIjoo5BHhmI+nfloCScJZx+N/pCwSegnB9xX+UMKlysGy/1ONAx7KX+jZafrb\nVj0sFtap1U2FYSc0+9OSh9Z4XTl88aXkMhdDfbHlOTK81XNbN0ooH4/ZIRFL\nHqfOyEUJnsujDOGb7qQDAbaERRMZwfhKF5Ry9cxIB9Jvs1Msacx2q+4eLH0u\nWUfWInGL4XKyuujK4NjukEDetrO5A47AywE196/J2GhnUAcC74Qq4siJdd6K\nx8/e5pryGLEWdt1DD39FbPj+744ITsgW82ZUFY9gFso6Fe0AE3DjGVN9d/0D\nqxpQk3Gq6rXnmHdcL18VwIW+aJET8Wruaj2TXMcym/b1bj2Bf2cJBdvvwzJy\nMpb7QmcKTEqf8YPYUvRrMDMBwAIM6I1T9Ks0j0qpJTGiE9pMijthrE1Avv+H\ndBy44ROxJM0CPfCWe4kVGRqCKSPU6x4GEx0C/aB8zS0gymO/hn7G9M/UqniE\nw00Or7TuAWdnOTJjLg804UdftK8r0zf8FBQypBaKIL+l0SrMjUqCiklppq/e\nIGaKcIXyGJ7gSGlVn89vkmrk1h25b3e2aKmxHK0ivFOZqnC7dFpBEQE8LG7E\njW8WZ1VD8F8ZvfFJRTZ9J/tZFRDxohYxHa1C3i9dge7yp3U+D0qH0upaTK/f\n0KMq\r\n=7O5x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.85e9a6ac3.0_1626881786201_0.8878256657177581","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/card","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3adb984d088e8b8710abd6034d295957b9ed8740","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.6b0442278.0.tgz","fileCount":19,"integrity":"sha512-m5py1xPy1YCPBPEvK5H+DzKZwcjrQNg73eIKhWt/wOBJGMUmycGLC7aBvaCozfJayszTGGKQATFi7gVdKW2N2Q==","signatures":[{"sig":"MEUCICGylhPl2bcVt5GDs+i/92+hJRfwYV0DtPhNRWH/DlbnAiEA+qnTt9WBMIL9koUufga19Fgrc22JVaNktSilT3ciwCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxwCRA9TVsSAnZWagAAI/gQAJ/2mEdchM8gH9Ae1Fyf\nuTcb/K2hRS9Y6P4VeiJ+YJ7uvyLNVNLP2FmWsN2CI/tiPzvBQ8qv6L5NZBDb\npjnLKPGxWo+ihrUSt0T4+PjflIS0oAgUuhyJhY17uqy+5+YWF/px+FVu+scA\nQC+pG944Ag86F8kPVCIhzq++lDFQhszh1ezOjihdjG0hJFMpv+lsCtra/Mdc\nQfprYUzo7EQCm8suHj1wHS/j4Bj9p3KypFT0dv1LmN5Bf93pVLv4IbESr6tV\nNiGo5y/M+9Hoyr/aH2zZFmevg8yt5Mu0hE/r2aEk5xYo1++261LAO7N13gB4\nC2tcCqsMsrhyx+wNp+AV31Xgk4MYeOmYqKmdg9RSLfzzMtIoIUe0mzReBtHU\nInAH7ssAfQO65ELlviXo667qXSaQ1y3F7U0k8vAP3jy8n0a44hCewTr6YhW7\nxv9S6Ye9WkWq9BG6p+8s90deM8xlpfZqB5lYUuXDKs9xYC305RF/jtuLFmM0\nWaf3disRG6DUUDJm87gF4AuZTTWQW8qomfJs6ymGPexAguay+YJuMFEunf2/\n8Ipz4mV0UBKqP3TyhEqBrMlmqa5O0TUpa7jmpdFuSV/yk8xKv9IZaxV4izhJ\nqwMNsroUnyZ2QRx8/TFJMieK0YEbxo/diJnzowrZS9Uk5Xe3DEhXlInSx5DA\nQYeS\r\n=tw9L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.6b0442278.0_1626893424024_0.8644181681672316","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/card","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ead5b28c6bd57d3f8052da222cd1d63723bc6e","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.5f00e454a.0.tgz","fileCount":19,"integrity":"sha512-/H9hKGbDxgAyAPGqFndq1nM6eGYdAlhLkeDcNbww+yGFjlGKxdR2xzbeejzU97g+zTr22YiBZe9H+KMzYcDJcw==","signatures":[{"sig":"MEUCIQDkkLAW0KwV6EHP7oZpfCb68wn0rwP4kJc4GewcDvgUcAIgOLKOZTj8xGLFILN4qmgo0z9zNkbiM1sThn2mxigKMC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWuCRA9TVsSAnZWagAAVDQP/0+R3u21svU9iiBNrAId\nC41NpKl1L4dN+vvlsj90I01Ew62PAS0QDYMyCfb1g5a6oH1dhqizqKcCMUK4\nHAm4++Mjcc2WZBC4O7cix3ND3VMGIhgF1C+3CvXS/2tw82kLoVVTC4w7vVGT\nnYdIj+TjD0f64oas0LynQGNidtH80IZO1KkMplcdfa3oSl6UhTURrAvkVnZs\njnRdC1c7VfrBDelhRHgZ/FcrEEQ8gYjUPG+Az5kNi14Mn5jVb2xe6pVOMqqG\nnsxN6ex9wHnVIabYmHBFHXkAymH7/6RosaRpqp1ivKWl3QPjhAMohxsYkCxu\n7Jtn6MQNsjR3eZgxMdiu/Y53cNJutp5OlvPrNjgkdOOXMx3H+PFLG0uwJSkr\na6ZSry09ZmDvjvoOu385dv3QWseq6TIfz5KlkKASQF7SptUtq+aeJlPgMl0T\nWNv/+BhNY2LoWvq541hmdCxGa7hKIWgU5uMMqkHy+5Q+SRa+J18OKpXpjskG\nNpz6HehiB6lkcgAbv1PkFOD0ey0myTeLI+c36UbetESZBXWbSxp+ql4UckqQ\nGjFHx3/h4cflHh32hP6S9lNAwHebsx0PO7YHB5C+Fj13zHkCGaTOUWXDWlzz\nLi7Nd0Plm2Uy6+BoP1NAJLbx2vdb3MTYKXavQoD1a3XaUA7pmTDhfqWLvnAi\nZowB\r\n=Gu5O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.5f00e454a.0_1626973614279_0.737080952213985","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/card","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8343d2c199c92287b8dd10dcfb4b667ceb8ae52d","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.90e08fc6b.0.tgz","fileCount":19,"integrity":"sha512-KCsajUenHu6OoP4quZKY8Wyt0eNZFCMM9jD2q4kxkY0q6vBvssGddcA8l8B7qvXMtpE+v3nzhk8P43E5BtaVzw==","signatures":[{"sig":"MEYCIQC8bSkFOTUuCw8iyergW0o2ZSwA45dmkM9eCsExgDdKgwIhAJ9BFtuIGijIJECiyWZt8HShlHrNl1bInBolrdbSoekp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gGJCRA9TVsSAnZWagAASYIP/0Dg9c9vyjV3qr9ikmBo\no6PCzDpXl6m0+OrHW5VL/8JDfWowMG+DnO61tU60PkVxDte5FFDWvFb5ikQO\nAcH7S80lIQvjOfEnHqIDINu1AbE38OJb8WGh7+XiB3bN7l6tHn3E6pqhwQrB\n8lK7l9Jljoz/GP+8RILOSdqDiFY1wpgHeYoJqXmTg/U6QrTXt/VkVYQpKoE0\n600fltK6Q8baVQdIcha7ZdmdDXQLoEqsX6KqFoy6w71wHfLuymujhaxP/KyM\nN8/xpVOZwjTNwlACHrVsZhsVzZ+KV27JFW3JZC68k0p5/alFJ2CmC0ani8PZ\nA9PqsGSfRjagb89xxB5Dhws4MPYsRr3shASyvKsMEVB77Brxwh3sO008rvjj\npxeIUPCsXbl4GRUh8onrpBquiFh/3Vmo+A37h0hpqxe7rvwkrn4vzRbLDzWv\ntJnc9oJoXJrzi5iakdO6Zj7KgLkLzLaPuw4NG1AlrDMiZDFTyzxptYywdgLV\neAa9UXUvXKKMB+uN/+SIhQ8a36QNmZW+tqrxL3tHvDRPPgXC9yQ/Wgmwf1XS\n/H/n/siAZmry7dZzJZDprZ4NdrF/LQF2jCxaXLG7binPEuulRyAfVjR/w5A7\n+vZ+L3qL2tA2eRe3tI9Hz2ZFcqLxV4BjpWZQ68zR2e+CJiezZiHkGRrWaweF\nInDK\r\n=YDG+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.90e08fc6b.0_1626997129446_0.8380457132503221","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/card","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4588a49ccb264bb3a1ffadce9d3f88d351091dff","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":19,"integrity":"sha512-qoD8EJG9Vy3Qs8FGB5eE/XSR5opzVV+PFF6et1vBbOcLPD73+EtZOXMU1Cf8T5aYrZzPSDozVI+eWQH9VaVktA==","signatures":[{"sig":"MEYCIQDa28Pd0SkoNb6r9bN0ZpF5PPfpkIimiMnpIOQq0PXqxQIhAKfHPgmG9nkaX4wtVd9gf9zOPOHe+vJ19VGEqH1kei6+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wabCRA9TVsSAnZWagAAcy8P/iF7Ff4eql74u69hIUmu\nKeZVQuntw3kS/RD5RzsmaTRSHtpFdK7JtahBtrs+b/XjcNY2z73rdJxPOys+\nERmzipVIFBvv/nlH896TUvhyTHyTBzG7YEM3pvuV13Wu7nr6MgJ4NK4gtwdi\nicu7d1z+T8AyUMaBaxekIyzXrq/CDguN6HPbOqoP7JADWCDWYSi3rYrdNAAV\ngU3ixgPr3DlXFuIP96Awp7UjY+mueLGrjfP0B9/hsZR9BRs8AE9qKQxEDnMz\nLP/DZLr3UGA5sLgKO+6vIU6Zzqucglg4wAMC6sKEDxuL3E/vb04wzE0f7I6l\nCOhYjb0ty8i1ySZYdDbOEtAurR7QRXWnoUGoCCLsnA+3g5czE+Q2ezdlX8Qt\nvXgwQ/QQa2aa+0FDDef/SGPpXcgHtZIXcJobah78xEpJRSq5F29Ugb9Sk4EN\no66KMf5lJtuvhkxxwozQ/4tFO5tqa2qpydUIkSbTgoMOJtpxp7FC5K3pPulj\nI6hCr8tKfjP7TW8wijVZiISJ0Ar8G9X2kbMZPWuzNiSIoayFk0bmecBdmsFr\n2UY/oBTXDs+HcZIPr7rGXM8gwMcH2K6osxgr+91udQSWa4yZgu6EK+GipDkf\npPK0yr+EaGL0b2zRChM6UPLuO6REYlNY/RlI0ckywQZsscsgPIXE5FzfN7bm\nA8Jc\r\n=bOiG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.cf5b9eb86.0_1627063963750_0.12912748408072905","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/card","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94c0648602ef2f5d814c6affc9cf2c2c36a8f855","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.3f36ac75c.0.tgz","fileCount":19,"integrity":"sha512-ikST5Pszf6rSNFOMuSiSnblgLujwlpetCNI7oHAjQpZXRnCHVID5H+ZHC/kWrYIu6wWcSOqWQwp9+ae7uIT63A==","signatures":[{"sig":"MEUCIB+9t/8b7KHz2DCtQHkUpo56CkDVgWwexhQzOC3mE06NAiEAm18K+oNTULBtkPuUfhDbxLzP5xkEXopA7e1sqBSBNIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wtJCRA9TVsSAnZWagAAz2oP/2Ka2kzgTS+melaGSwHF\nR/AQLb7IZgATnwg84RlW83nW0nonzA3jEY8Ek+2/bzhj5X+UngyKtcBEKjzm\nUH18+7HFu2v/ZkEG7eFxxEyulWoRnhotXAKK1UNZ2RNdOK2Fb4eJ3p1OLAoi\nO1O4aYz8y4vlPk6ycJz2XicJ3X4lICfGsc0avmIsa6ScvDMppdKAD/LKAmAP\n+KQJmLXbzskDznJg9Eke3I+WHZoq26SIFa+tJEb3KrL2/ipoSzcTlDdNLD14\nFVMrqY66DOQL+vekSz0hJaxTxHfPYc0lV2p+zOsnBFnfqoF3pgsY/g5EEtsx\nwyzBw8TEW6ZPS+MB82gL1vZ7Y2MxNoRwhG+CGOMXwvKGlCyc0PWFWTRQHiId\npCb53Jy5G0dFmAGFzUfqNuKoRNG67HnZQEn4RtvBHRtfjg8FK9vmAHQYGHFu\n6OU6tnXxzLjHum1EmylJVPV3SJxMPFYXlJmksEtDaJPKiNGI8R+uPuPaC9VC\nHIBt/IQKR1UXB7WwscFT3MjoXfX5ApktVH7oAozZluTwK7BP1T4PBR3OY63D\njKjHU5arhMWxfbLV7iDOl8o58+Bs57W4qW55KG0NoPkf/V8DYwZ8I990ZXqb\nUfARKuEmbN82OT7UC3XpXP0nazSrLqeqrTuKGNNFBv06rtI3tCoe8vroCfK3\nh4gb\r\n=0vXA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.3f36ac75c.0_1627065161385_0.3077348923342773","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/card","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c159b1007f22eccb2f1f63358e2ab25a0cff12e0","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.ea1e1b850.0.tgz","fileCount":19,"integrity":"sha512-X/BIZokMpTLbetXyTWm1F5ydRDa95zG7YIx9g2srtu3KQUgOdJ73gxzl3LvFZUE2GZiopnf+ROZM8N/1Kk4c/Q==","signatures":[{"sig":"MEYCIQD7Grx7AERlBngwU47bELRbVdQ9/CCzveMFZ36+OepwQgIhAPIjcZrWzc3QKcffwWQdw2iiqXLLBzzQcKWIuvgTIgJx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5wCRA9TVsSAnZWagAA8QUP+gK3bg6xiaykiUvQgBky\nUrqehIcTKXXPpT2dtUD888majlhpOeaQGRQGQbYYiRpwDQfqrWgcD9UNXSp+\nh/z5kN5+CexPR0iN8+iB6wbLUByMXSgf7CeDHuu6jnZ3eTUJN+gFNiWFISrB\nN4c/9Xa7Vgn9hY617LH46RYwBqCB2KTYHOB8xy7bVhUHarwTnGMRyPhrs6xB\nfGJ/X8yQS3q0ZFPKyO1TxKzT2FY/go5C2X4PI+fV3SkbR10oL1YbqU+6SMaJ\nPRHMdDmm7DtmogAvOSdXiCCSvTyvN5dyk4SesqdTOqJQ0aCONC9ZhjCmJ7aG\nimGJvNWq60L+yyKW/ZCA0D/sD5JoKLHRjgSR4957NVP2VOTCMZKeQL8FGW/n\nJrJXKc+3XYpQKhwxVcxickhEzgMSl0Ouc3r8xaK4g+vHPL1RZpMGu8owrnfQ\nSA731xUI6SFb1tz54YT3V8dcg96kGbCNLZPWzNLsSsrSX6RERc3SGhSYXPc+\nhcxMoBeE4/L4HMCOTuC/m1H7Zob9IcZ1LVDbpoeTMgJSZmmEhdXFE6sqs52n\n189V8WuCVoq01ys96zYYeBHjLFGeqyqhrj0OrWD8a4LObvc6dH0BrscpBqfS\njCpBNWtlEyamkiBT9hluSvO/nBYMiHyStqoB+U0mBIYzFv1z5pxn4VIH4E2s\ne2sx\r\n=FGVT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.ea1e1b850.0_1627160175848_0.43803237418548524","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/card","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b60e8a0e8dccd0985da0890c6834ad7406d20861","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0-canary.22f390c43.0.tgz","fileCount":19,"integrity":"sha512-VyJjXe6tVIV5jB+MH4TVDqnRFPDpYxPZvDIwNHp3t+s/jhpU2Gihv85wcdSBiSsQ2VZh9n1OZ99ZwHxwOaqvLw==","signatures":[{"sig":"MEYCIQDC4r5JwH6Db4D1dCnGQt1hxCCoCyCkzKmJ9OnmU/blRQIhAP2t6pZZLHk+s45JCzpETjXJGFMJqCTrzfj7PkCgslPZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFfHCRA9TVsSAnZWagAA9gcP/35mF/NzTpeNgUzlSrpD\nDgh4CErE5kVIZWaR+ZF36Ni8ZtMp6vyEq46N+cMrQPaOvPHDScDEdVDWN7Dd\n1v7CgGH1dqhS+4AlmBZqYJjAEMJp4sPMASxSQvkXm97LfZERPkYCMb4eOBK1\nAM0cORkG9hamxzVWMWQGq58N9oRCm4smWymG1OrOWqTJp0TOBHo0puscciqN\nRAZMC68c0Xw9UWkrUTSv8Kuxr5TioSaU6cOCNPeqLOIiriG0CM5JbnH5XSc/\nx7POcMMJCzlsPkAMhLv5/R5JMhblHUWa8U6E/McvmQ+fWMfLNqARkU0HgAiW\nvYIkLduPiuzBgd+kG8T6UaRo8CAxryCIzYW7sWPZq0BbCQH7dHSBK8is2meF\noElPWg5yGRoFdD9C7O0jIhUxHvCpjv5eeqweGu3oYaVEmP53aAJLWZWstoZo\nrSh7KLPCMZhImtWGLzCHtqeih2NogEilXV28Zv7IDwZOaJbrhHk5PQ08v17p\n3xSve4Q8xw4rjpDNMhFRdSuoR4hiQ+OqnvEiED/AW1OI4n2kXuqHDpjailm1\nJ9qQwZ8p5/fG7mu4qAlggzF6gvSvqirztwuf83gFIsJ0vNBMFAXFNIDSZoOS\nGN5uz7MGCH23CE9Sz6xEKQk5XuoVzy4dKjVZL1GVd76qlYDVv5ECsVES+nKS\nGhrh\r\n=10gc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_12.0.0-canary.22f390c43.0_1627412423289_0.5006131445703295","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/card","version":"12.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae24dcbab4b59792227148aa3da375f5bf971130","tarball":"https://registry.npmjs.org/@material/card/-/card-12.0.0.tgz","fileCount":18,"integrity":"sha512-qOzXAKTF/iV/t+HT8KmG2rfB4Otcd3z7e3mxdnnmZKb1tCxAkoKLnwJWDuPayySWN7x17Dqjl29Sr23i6YxLdw==","signatures":[{"sig":"MEQCIG736hqVs8gz3N43v/cM6i0YgpfHqZJ/1f3Us0dbN/78AiB3E+idb9SdBqIdjQeCpQiAinEB/5OZDBUymYOJdxjOlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGN/CRA9TVsSAnZWagAARO0QAIPdlnPp3ViTkoWahm4e\nGmEJSr70d4CrcXvt+zoSBxaTMPStJtEteBdLbkWonsQDCVrDqMkA8MhwC65J\nVzJDWJF6VJKXMLYiOEHJp6v9V8JNvGhDQCrmJprzdovCpo0Jb7EKyJIjBryy\nzLxnbalq4MnlzoW13b56DXiCGuPAJmJPFPKBTxOvWduJ2VGwB6pOGGu9uNwg\nlgMZL5OTmHBJKwP5yFvujNxIPkGNM+8lIVLFI9WMFg5cs0r6hIOGPjFM7tbs\nFeMVqfMfj9Pz2Y/pYHnRVtvzlQ5L2sNef0McWGh1nUV9EvbwaZJ/kN5rSzPe\nFhw/d650EhIf+cCKRuXY0lpGW2EVeQT7JQ4T8xSS+mI9e4T8pRMqifiJW0Hg\njvyom1Cc6yOhKfQofZjLONHNee3vbADNzTH9m2eO9oejzF9D6vQH6h/XhStz\n0VIKQkmTy/8dXZKV/KVfCMewvfMmSkaCYkAsnLziSxFp+pz69RUydP7QarCl\nmm/1w/3kyOw5w+f3dH0V53yvhzMyxuJJsVRlAB/0PJkIs17uW4nZE18m8xgk\nUva2LlpqsPQrrsryckLK3VSwTU8fP0JrADZ3XHu4ba4UYj3jWl3eCTnvkZMm\n59bYdX2Kyt8xNC7gdgXnfSSFbrHqm4WMRJpeRgpJvBOGaCeyliUBgMijukuy\nBB0C\r\n=8SGO\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/elevation":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_12.0.0_1627415423051_0.7630924565000436","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/card","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13b3cc29dbe0315e29918df442b2ff70e3f696de","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.ae85f7eba.0.tgz","fileCount":19,"integrity":"sha512-NKS4rVgBX7TDT3aUryDPg/ugPH70qjQpm1AXET/ELsUdZfVj1YoRa8qYaTq7JCU4SZgLtBapDO3540Mta5EVnQ==","signatures":[{"sig":"MEYCIQCv7Iy2pW/bP/3zrrygyh8Cp8ah+SKJvagDzXEPwftlHQIhALVYmPdr56V/L5S2+veArfosf4SkwnRefRVKZazMlOZx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPfCRA9TVsSAnZWagAAfaEQAIQEtC7p+6Kv0Dk5Uh7d\n4YjsSsVdtukhXjhWBpqELcnIVpdWCURzcQN6RPZcoMTMdBGxizaLLsgJuFTi\nkX+rqTnqTUFp25GqarW42yzCx/3pFfnWd3TEfEW6ggTkzmahbGQRnKwXMA+M\nSCR+OnpwUT6HfooRnIhPycHnnLCQ95xBWcKLU+1NZVAkyKm9moxWq3oPCQCq\nPcFn3c54X6LRkh1WgNcMV8SD0FvLlIAqk0/4Plu5dC5mORp6BL73xWjOwISC\nedP0fPUeEVfRqnkh9JCqRWkTjDO+tQqGCqPceeoObciNx5pF8j8pbtJzXYeI\nejskFzSsE3oxiyMJjTmgFPcs7dAV8LxMVuwaJMbPHZiSdq/bmwjI/yU1xsf6\nkQvTQwucfLKN1KfvY3+foVYnDvIv5Znu9rvD/zkg4ofozjDlI/kKBfTKzEWN\nXe51XiYxpJOVpI8eQRP4gWUA1+uqLzaSNPoWp+sRbI7GDgUWLnmRHGiGBQUF\nV4MBNtbLp8v8Q7UVWw/Dmy3uqcvoW2yvF18/hfhG89fJdX0tDkGm1lr3HCor\nEmb8Y9XsbJSDLijtnvq54II4k2lrwo/5BtDjf/6U1YXmDwcf/+CFqyM1NtkI\njUxLPN4R1T9WuQSz5SHYFu0cN6Lu3fVIsfE20Y5pid7OERsn5dqClEWzQ37c\nOFoZ\r\n=tx7/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.ae85f7eba.0_1627415519802_0.11232430139323957","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/card","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec29db9f5a00931886ca2c939e74dcc3a1375c52","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.5981207f7.0.tgz","fileCount":19,"integrity":"sha512-/M3/UyfklhRJIbdA/WBEqlZ7UJnhPnDBqXGdzv4HeRcB3SLnKwDufZpYJzxsvg13h8cxNA+Zjper10PGkVQ6Cw==","signatures":[{"sig":"MEUCICKIEkN8LHvinkAVB0tqCSCkgUDiF/rDWsi23VyrvOqPAiEAuQ4AIzD+kM+7O0RDOoOa4/dxH4VTtHMCZ9HB1YwgLzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRSCRA9TVsSAnZWagAANT8QAIuShWzUaikCubz8hXnI\nz1TwKoDmneFStFwnw9zxaUzAgpfaGh2Sf1hqh7Wtka7ZuD327naarXEsS9Xw\nSDYY8rHgcaLysgfVnRzstbCsqctFXH7br3pS1XQmZuUfFZcjcuLjHMdmVdah\nOBYF3OCX9x9xKkgxTXLn/TFq4IuD+PpiLc/vbeEYHahxBmTGwsTil1WvCQsE\nYg4Dmur9Oag3ohIc759JY/aVvmHU3dhiW/wGS+GtWcsItbeCrHBOpH9DTfwm\n1skddOfrJKvzjkJOOQ6sKmXmmoMhhHTl3K66S0a7gD7JBJmhH3ko4Zzlol+M\nhxgRA7OAJyLQarpuhDKXgK9GEKxPnDgVvsr5N+93FXPkmemWfSH2EG56dq06\nTGZuPBPJFOdEyvVFIwMW7rogaHBULqWU0ANIVtb+EH9kpOn42GCfPGY3IPk8\nrrIvMWJqSFLTYrQg1haVZ8vUC2Evc1XmpM+/hWw5G7ICryRD2KMrUtyPKoao\nHTTwGe37on0LtDEeWsa3hKlZeaHMajxDs2AJ8XS4P+LwR7qsyAyEKyUcNoDK\nNDWaMvPjUtTymnhcr8SFEN0UY9x2TO982alFq/ly9KIkx75XFeypdUPQcFvS\nEWVjePLBS/Zo9LFVeG4eaNg5KkqdhdnxSxX2KIPAu5GSI8jHpVPMmauNZj7u\ngmiX\r\n=9NYG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.5981207f7.0_1627427922064_0.869325484245228","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/card","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1ea4094760d48d09224f0ce345ccbe8ba91bdf2","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.83bdd0222.0.tgz","fileCount":19,"integrity":"sha512-bZS/VIIMeXpCy9yY/I67+ok0sswVCFUBY7IUrgHqispOLOKA8wrS+G7R/rspzkl2qQZ/XWG1a/j1/ZarhlzcLg==","signatures":[{"sig":"MEYCIQDHAgcE/8sAayydgdPEq8oDHvY6K8FHDtvLXOGI9DskigIhAOaC27eaoumJy+egYNEzRTgrcNixbQQOhpsLsYERoi6x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZM9CRA9TVsSAnZWagAAJHYQAJOAa3FqA/pkxpGJjfgV\nakUlBPw5uhrvnxR4ix0hXWbaECj03Cn1bAZzhuvZSXW1rRmIUAkbQgooFGA4\nGwikS2Tbp/FpYD7AVg7nF9lxBCIbPDIFcWLFA+mJA8328MmQLUAaWlFzC8OW\nkE/Ol+TPCzubHQDMbYdEDvh445zJbnMotBZdmp/WdkbI5pP2fDbi4sn9/OwR\n+R4Dc5fA6zUpKe8LIkJOhAeUt75P9lea8kfFueurmXl+2YtquF6WFXXK+fWe\ngVQPUU6UesW7kLfvb9rWmR0JPpYFcoHhlDIiPVJoDJQe98eTCnbgk1Tqqhxi\n8v7hxfilOsXcLus3GN6MWNLs2FFZUXRNnTO52w8ZyHDhXXtUg9RifA12uH9j\nUMT88XUgfwPJjBFTuhWbqulHH8USp/8JtBOkRUYx9sSS86vXNv+zWWiG+I88\n2CUWEvBbJv2yqtB4xomHJ0FyhqLTfhXovQUf/58C2iU4gRI8ibZAMpfNhEUc\npb5EVDXTjRz7nGsWU9EAJjJxFrQ0XrIx7D5E41jb4WmecMRTPYNQ8kI2xMTb\nejs9p7V1f0uudyZDVNwL7om4CGQeKhRdBak9KW3HSzj5vxgawv2X5uffdJLF\n3aBbbF2ndmq3kntQgfpbqSf2a2duoDxMnhutpqteeoSFUq6+pZBuxbPmN4KZ\n2tVA\r\n=/QI/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.83bdd0222.0_1627493181509_0.7037091118310432","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/card","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"273af0b0600872fb1ecd78742d0cc292a000651b","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.28656298a.0.tgz","fileCount":19,"integrity":"sha512-9UKez3W8CkI01WarYCgapV8ajw/AxfnvwDMAsVSQ7cKsH4j6dFPogkoAgfsx6gZOPEkTCqkNAtB6XaV70WSBOQ==","signatures":[{"sig":"MEUCIQCSzU4r2I8bNmMlggZM62mMhtARs6UoISbiJT8cF5FuUgIgRKQZ5Jq7whbqbcHvCDqbE85BE7BgElZmJm7SegP6xyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/PCRA9TVsSAnZWagAAaEAP/j8jI7jTugl2P0tuokmG\n0ZfKAZ5XSqJjO4kmdUThwnR4o9iT/zvbyQR2FuqFuJdy133Re6U0kxbEwmvY\nrqaxRPaCppGbfCSTBPjzRzYmm4m27+XQr7M8L/UCpOplkq2C8VJMfp6Vy4pn\nGqLF+jGWZO7XpdO1C4By9yJSEvjSryBjZIds4mMCDT9Jm1s+/UwFgk1gw+oO\nP4oYYSaRVJ0mrEVoeWwZ9/YhuFylkKQ6w+KZMVdcTuNPAj4bnF1D1RwTdCqL\nqOOG7dOXFuG3wNwpmSCJHBJaozviBhWB0clqS30Pyb2B9mtiJBQncAPm2f27\nTTvenFqlQtpz3sH7fiOxq786KeEKODtgzqGYxzFFFjnYGuR6pQ6gVGRenJPN\ncsSOZz6l66LuRpUUPtY69SDcyFyYOPuEMvczB6cH7pah9PPlH4VAyl6xJ3eO\ncNRme9kfzUuJLeyf9+ZxGIt3SjPB6koghUQ9NlH/+w9VcWvFawwpTwn80XEI\nzMqmFT/5Vk2mjOZ5whUhk4deuKi2SVYW//F3PrwoYImxaq93UV7jFDhK7N/r\n395IiBB2DbRlZ/cYsjCqfAlCvpl8w6B9m5qEWqTqpiFM7gDnrJnP2l9aUIsA\nwATu5vOQh4eCKfeucW8GxRQx3VK+jtRdvlDxH+UmTPWwczplHHyieGRZuSOn\nD8tg\r\n=YgR6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.28656298a.0_1627582414880_0.9340369835607925","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/card","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fcca308c78b8a0ea179b0cc14fa8dbbe9695614","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.9e797daaf.0.tgz","fileCount":19,"integrity":"sha512-RD8+Ue23dyzlTu39TtGotfbbJa1lx7hf2mMQ3/OsqKA3F+/GYkafCn/yr8bJnJNqZxi5uxmqoqnHl0VOXH3kfg==","signatures":[{"sig":"MEYCIQDgieQJ2SMK9M6gNKISOY8e8Me6UKufHKuL1uM4A01NjgIhAPPfxrsMZmKFGxaqL2/bifxfSh8+oN4b9M2i8Qd3CvRP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":266882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUGCRA9TVsSAnZWagAAzwkP/i4Cru/y4rhSR6CODwLs\n6GQ8O2FMvECgaSVKK2qNpCacHTy36IwnyKI4ECRJkSL+9bbzMvPpZx7JNf52\nOpBbyxsop6ZSZIeRjDPBcVJviFoesWzKAwWZrxZ8WSi9EtHjSVZmFi7pxFtf\nLzcmCoWW8Mw/MMAd5hO0pAIvb1LaIA31QnO8cqYINN+xzU6lLgY4PrdRyy5g\nmfUp3k3i5AsXWZwoZ9udHZE2AHLM6D4ytxuvLn1PV9U9Daf5nnxrEYUyPQkU\nhSpAmmdXsr9fanuL/z5ECVQHXSey+EJlQCVQMvVqZnyyUf1+MzKJhnpMWseQ\nDmyQwNFju6664EvAd5GXXaEnLoSjfNAOzdMhLNR+63wt0As2QD+g/l4/6CH9\nyyQX+YRjpnIE5nHBaslODqKsD+UQVqiWiFhhHPaLalfCRelXNbIH17dbs7tj\nNkF+1BMsVHkcs0DJutma4EE5TJtqW4zfRiad3G21dnVu4kEc0G/B4PeFxAsl\ngua0z7yKmwqThATCG4yhPyc8ISneBag6Gh7qJNkz/Fn2P6/hgH8KO3MO7+gN\nDQJn3G0172g9cXp9SkJdGZsugwl6dOfu7edagSFHotwBrJFd8s76/ee/ywcW\nfEQLhYEyZKHSIEWjd12Q56S6tztpfEKcaQTg/OgeWxUcbR9ma2FckvG0DWJE\n9zW7\r\n=zWvN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.9e797daaf.0_1627583750512_0.048159623468112533","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/card","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c77da66cc11ee25be33ae5aef2871bae3194b31","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":19,"integrity":"sha512-vBkdkUYjPLD1705bzF0haT0MaQIrBwj/8ocMbB3cmE/YivlGJWE10/d5yX3QPp45PffNfuFodTwYibwFT+LUeg==","signatures":[{"sig":"MEUCIDCtYMOtYnN7Nq3rIySNf0UqWxrC8j0OwaHANquTrXX1AiEAjM45pbm/uO6URP8sLN7rFidP/ne86KVySc2WGPllcWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2ACRA9TVsSAnZWagAAJC8P/0V0xCL8Xy/FozHXdoI3\n17WuDdInMj6MKFJfM+uVRxuA0wLdvAF/CTFBeymFwrzaFubu4Hy3MZXygSa8\njHIWkZmxrSNQ8Wk2h0Hvfnbr6s844n7wgkvaTTsU9rsTjf3adkVDfK9i+Qmx\n1blhiexbyhywZHH5Ts4Cv7lfW+GANgZ3WPIJ/0VhNOprG4ehF93xOCnVsAiB\nVzbNNrRA/4/dL/w8Mg1G/kn+457cV+BCaq6D7pbuCkfYfh7PSa+DYUOC9Rzr\nw2zsqQFGKDrod+3wmC66JnhUYO6eQKNVlOgH5t0/sWRvHEMSRsv+VjZDt17q\nd7/6BXItZagLYPx77M16stldM9lp4ajCXnUdUtkMPap6//9oMdd41E/88YYZ\nMp+/pzbMHf9j0+U1xFYbIrDOx+tmp8FoH8m7qTZNY4DAPQqPw7G46THkgnwc\nbZ2vKA12w5tbb3QfAPxAhNbDjY3YQUGoJ74tJIhO4ir/+zOrYuqVm0I8YA3q\n97CNc0DKNr0c+5pRI0aiv07dkECgBZzK8KaDnA6yguTm9gWn1cVEf1lRuhGW\nwq0J6mAJPtjhr5vR6k8NhVVPNw1OneHyH9SNCQjl9AbMqif/v+x1C5PKK0Z6\nYLhQ59Yd8czLsTgasy8qUEeIW4J6WutHp2Pxr1HOP41ywAFLqM7RuT1/1gj4\nRnLT\r\n=Qkxl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.adb9f1ad8.0_1627671936268_0.68243916355562","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/card","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"766e1e9c1c727ebf90619cda80b5c0ff3d908299","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.cc5377458.0.tgz","fileCount":19,"integrity":"sha512-4/p2icBNBlr1IR8OnDcYZGbOgfuWjRyrc9srqke0DR51+ovH60bdiAKOfKeo2p6gvu4z0mbdAN8DGo2Yt+E64g==","signatures":[{"sig":"MEQCIDBOXxExLYygfljrnwlliiStEsqzXfHKsImqV/jkcv8tAiBYu482wwSVKncDaIqQL258HryXr9fjDXXrsg/7T2+OfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBACRA9TVsSAnZWagAAoAwQAJWU5rAinZh+PiM9AeM+\nWpGW4D0IBxQEEJTvUH2d9MHjB5Ie0NkDe9QFb2Hgwy+eFnQAJT9AgW+EHRPZ\nlOBPwXBlf4lvjvq1DQS5Dn73ABigzWGod2FeYDXkKQ4Ja0HxYokJcAPjW0nS\nVKvUM07HTAjEaqt6zZkV1bKN0gHP6irjjqNENqGVSrqfqi5wONco8+mXkuxK\ncm7BHz9WsKqUBN+U4CA8jLt/n0h1KUMNDmLwawAMApnD0i3IIfUNPXSb93Tl\nItvdZ3Qp67P3ILN8/+HpNJYJeNvn1Gtl8bGeMoG7kYqth0EMrAaE+3qxYX1d\ne2vklaBu+htPg74e37RS+TDQ9FjfFOC3Dmsc0sum4ZyuBWdQkQP8pPuSxMWK\nEWB9K7pprpWGEiLnY2cC11icSgFf5L2Mkg08/mUVEllVwJUdiX12R4ZFJWa+\nQbamuQEjVE8mWm4frmQcevcFMSTi9Swa1V3vA4zkw4TfzygSdQc3lqUQ0ty0\nVgSyXPfa81IcpB+PvdLp3cYW9TWuX9km5Mv127UHIbw2ybynSml3q1ltdfz9\n3hAib87tYQVx2gqisCBUFbv856c03KJiVtWlGUOr1kRC7DgyF9DRM2lKMaiM\ncUkIJw0McYAKwWoU13DJL/57GgQwwNf82AiHXKh15sL7Cndw4jCNl8nwgFZP\nVoAf\r\n=omJ5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.cc5377458.0_1627680832614_0.46689311296098523","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/card","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7deefd9165f7d960f3e014efefb4bd7f15d947a","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.a395972cf.0.tgz","fileCount":19,"integrity":"sha512-S6h8IGjv3dQVo/GbAqTsScuuiFLelpD9Air556bxPaiGZoEZK5yTnbz150aiDZGdnRcV2yZ9Q3M/lLgNtWXXVA==","signatures":[{"sig":"MEUCIFINKf9gAu0X2WJwfJhIqFEsxog0OAi87PRhZtQk//vMAiEAmmuL1Z0rB/as6lxNnG/aWJcV5YFhoIQXHTJiBah+NSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPmCRA9TVsSAnZWagAACeoQAIUyPQMx5z1Eq+dlkQLN\nzi/b6cmktrY2hpybKP9N3EpF8dJ3f5WExnM0bRyUpKDjYd4B4ssPYxrxK2bW\nw2JgINStddY/2V3lz2+cv9uAP4qOLENpS1hK9DiE0hylikN9JZ02WmTQOn9Z\npBTan2lZDNHBqZRLPEShWxcmyJf5NjYTUXckIia9zDKdHev96Fh5YWZZZXtV\nxAtJcZJrSFL9VB4yUZ9brOpddZvh6Z4oQ6JlPPU1T9+x9pGUxgKVIY7IDKOl\nTp5xhsqE1mGiM9bxKvo243/K/WlOQjbLd2+6uhkgdye9QNS8/OYWTwr5VSWO\nNPvuIHSaYbtSujM9+exPBJ2Q2dvx03O2BEg8g2+aerJk3ye2SHdB3JhP900i\ny75LpswU54w5MNMERHvlSHNn3ttvibsBoZ/8kSqWWUowK+nsJXfYPu58n/eN\ncZxC0bcuHmQ7BUOXQ65PbWSl0FjDs6AFCVQEeodECdRs/bE99b+NzI93I02/\ngOiYSpqKaApagC1Kc1NvvemXfeao39AEYuNM9JyT3fkXKIFB8rN2onwdTF6w\n58wPfdKMmjrWR93XgIZ5ZKfB7bfetb7RpxeDDaBgfw2cX/aVSNSZOXXgFi2w\nkj5XpH28GsLYi+5YKmHC5re1OitT3eUTZToc0htSEElclSuaUvBE6nDwpsRA\n2Kne\r\n=iuLT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.a395972cf.0_1628025830750_0.9926157526585722","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/card","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afa7299a8746ca34573c184c5522e2782bb5a040","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.7c96e6b98.0.tgz","fileCount":19,"integrity":"sha512-DJbJow8oyLc4WcYJTx5eDToCgpDIpWv1tTI2utOBRV1UQkEXxpjBMaYWc0KX7SF31ldgUiPJusxSSAzcpUS+Sg==","signatures":[{"sig":"MEYCIQDtNquRqcgeznxDQheCUo2bR+Pt+jJS89WC9p009+H7PwIhAO3PmN9Um9278Z8MzO5o/0eXtpAHnZ+lVCa0Ze3IIQGP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+/CRA9TVsSAnZWagAA5acQAJfCP79q+3fULzzqwyW/\n+3FBhDTAD2JfyU6w10KuYT6BVV4t/zq4vFtkfKggiL/x7jEKA3/qhImWSMJD\n6yvANA7mV6XmNR7I9ciyUFFqNWpN0A+L7Rh4sLjtMoAxTZqshulLE0JAR0CA\nwkTZTxAL8s3nyUaAJ0xTYACfRvFBgLvyksWGlckHveisDx23IQtN2lFiP4Kn\nv804ZLzG4Ea6GXKVgZBcf0YkA1u2CsZzLgTqo2o0wlLLLTRPXaJjTfGOju2L\nFXbhYCYVuUH5/BFq/ysbApPvODUJPr2iwyAuZRJ0Tm+graptb2LKyyUEmCop\nZYVUSK5fs0QVwsXhXFiKbzwFJyKVvEDDONxZH2M8FAnKYjHQwezETAcdoUqT\neaLW8i0r7dCpA8gvSjUsuqCy9/J/FYWpP/T1V8nFrVnhKQ5YYluL+7jpsshP\n3LROcCrvHHKnwO3c+S7knRpRDjZbWzDjK9DD0Kb67bqA6E8d4J/xsQYZ8tGd\nALrL1qs7qvB23xFN0c0wk0j6ZgwAXZAfTczSqUOlNYU9+Hhs0oDWBmCs3StM\nB5f7aqlwF5wUSDyHq3fJ70/Cd0K1h77JzulZor1EzBIxnuBLLWKUFMFCgKHE\nNHQ952aBKpbIoCDismPdFqLyICJg6gKDg3xwkDu+Qd91fUEsYeUsjCwt21PJ\n9kzD\r\n=7htC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.7c96e6b98.0_1628028862383_0.3824472456310253","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/card","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39c31b83bee54487d4177c03442fe9eb8887686e","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":19,"integrity":"sha512-3YDnVcq7ancJvA4vHJn9KQ04adaVKuw6rNBANRRVn8BPjN8DlExOeabxVpXLtYctFpfUFQSeMcDMQ10Xx6HPzw==","signatures":[{"sig":"MEUCIC7doudJO2ovaq6xuJPkocHGRK07xmU+snaCxUZz9ulpAiEAp3eeAqE/jm3K35a/QhG0rSeHVohOIv8xGEEwYYrFd0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyoPCRA9TVsSAnZWagAA/dEP/0uGo9FjNOf//pny4API\nLpnHRxzf4jXiTa8cN0uUcUXnivq3vTDI23UIV0NcwXHntLAWVk2j8B0kwzt6\n7qzW5RqfBznJePYglHBZbiB1HGbSaGzjsK+blLYTJA6INaQklKVYe/jcOYMS\naRhweF/iseC+5m0/U0Xao1/HY0lS/UbfRePdOhKvyyO7ezYcscMvo2h5x29+\nom+2OiGXBQgxTkEPQvLX1kcMRKYTd0X0NvzZkWG1G1HuREudMCE/I0dJdr+T\nyNrTNyY6nRY4LstKXvchgTiPwrynoKLALqLktuT/zL8J9XXqvgmwTMyxdTnB\nuqYWXmjgmQ9E5wVJ8XnVGPRafgqxQ4IVCVZLTpqp5hGZRRaza0PLLMZYyS2e\ncXRMc0f+hWEsNfDkOij99484RyBKFx2/RgCjfzRzs5N7TfJg1BuEYzS477h2\nPqwuyJO0bfKMBaiiiFvhSw7pCL+krF+npPTIKwk54wwsHABGga4Nj9hRKf/h\nyw1nFIxkYmS/l02LrWkwEO8Cd85G2eXZjJlCZd331cRrHSArjvVLvXn+CqRh\nKVxivkakcOPPcLRK7Mflox6/23rSWG7RfH1YD1Ta8m2ItYpSgVzPHWbdKDx6\nPg1fDlqHY8xTjyGxsD7VQtnyMYA5kRfPftu2n/yCh1ppC0gJgnxilOpN8PzX\nsxG7\r\n=cGiC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.a80c8b2c2.0_1628121615838_0.29737435956794855","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/card","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dc4fa3c50dfd4151b2ec3879727a39d207eeea0","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.3dd611091.0.tgz","fileCount":19,"integrity":"sha512-TwwT4YVW4oL2nySOtR4K8XvWEAlHJqEU+/IIHUCVW+sAQ1Z+hDEZAruDLvdyFtwuGD7hncLNncB4gGF7O6lnjg==","signatures":[{"sig":"MEUCIQC6uzalTNbnoNK0K63sD8oEoiFrGe4a8m1mxkN440S6qwIgMAGzX8lutCWFE5chCSGtXygXW7uIiDjAhF7XbPM3haE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2GOCRA9TVsSAnZWagAAb00QAI9it+Pef1P6SRryGgnG\nj6gX79JxSGjPLmVf+IU74gfW+3eBJUQCGiHskhIi2nyiDCp2LoRcqAF5hb2L\nuvKhb3R/meyZYnqulo3Af8vdgdxoEI6suqTqMvslWnnIB3g23Xniy7Gt1P4W\n1Dg5p0yqh9Q37iosDm5vKTf3oyhSVwDLQx3z17smECI9ZA+INNBkZiJxWa6a\nW8B5I2NWBDPV5CfN8ABLrj2Ik5HI609WKOF9HKjbzmaZHmORwYJLjm0kC1QF\n8PNUVw0hA6ImK7FgPkmktyliFjhxwrrbYHjsBhUvCt3BZCZ6YQ4uHmXJStmY\n4OqbXDgkRV/8qT5erFhQT3RLBxLS8VZWAnAcJ+m7tidltc8R2V/Dbd7dSj2Q\ntoxIcq9XdruzMHIEbBnTaX/YN8wsIzDyFsFn7KUT8qT740VWVT5xPGklWnZY\ngZNFD4USW68K++ScU5fimNAqO2cAdEfV/UyC+9cqcKXwyvvRki3fkLSsd/8z\nM2c/I01enpKyZDVetF8C4ceET6FmeqWi+jLdUeE/5jJIPpQqT/4IyTVISOO2\nkAN9n+dQs6pDvwL0oQpDYiPS7eogKehqeGISEy4Eq76r97BGQzAtA9/+FhQf\nAUjJRf35fEfqdGidv0qNQkciRZT8QqEViP9cTjQZj57vZvOErk1jZGOJAPMK\nGNbb\r\n=wHVy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.3dd611091.0_1628135822111_0.3877175540259006","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/card","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6522862dea86b3807da2042a31e4ef5a9af70eb7","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.5dee37ff6.0.tgz","fileCount":19,"integrity":"sha512-B6LmORmmggCEiukKVFCzKoYHizPTInMYeOxLaBmraM+uoSSNzwf7ibrk4DDfGcjNaSAEYZAPVn1y6D4vTPaWWQ==","signatures":[{"sig":"MEUCIGQloBxmpkjD2Fcfokgk0+qUNjPdTxcNtneJRlbXkfxlAiEAgDpjObpkCMbq+kk8RnUJ9GZwQVn7uGHurNDbP/d5JVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMYCRA9TVsSAnZWagAA2PcP/2vIOVC9U1mCO1pcuKIg\nC/u5yUhUNTFfk6o8LpdceVo8i6Nw0UxlXzyReBuA4S+B292kCva0TXMn02MH\n/oZzfBUx0Ikj9gvG9iX/DEfrI+NpPuc0vkcnoM7zjU/OnIcQgVAJxvLBV5oD\n3eoN3Y/czEaXTCUn2jW9UMfss8MvcWuzugvrWOqTHUPA49c2DaB12kzi7DX5\nG0vxRIhPIbWH129+hl+GDxCkyMp9k/u1RrCAeRLtu5IBOctq+H8z8OqaQSZA\nYHMGIRluiP5Z0/HiYPcVCsB9OQmk6DkOrrd64q+ypP3i9G1X0DANylfrY/5N\niXfTQ6GuK0V0k7VP7XaKhkbzEQmfep1J/uFd31v24mMZU+nJrbSI9DyeWy1T\n4IOyFZ/v+FT3gFZMlg2nw3E2gpvkqilHmyweHxIc2ps+ceOY8ugiz0wzKmz+\nbxQthGdVcMYs5aQSulCEZBJWRd1XcB9I73Y2vai3TGcc4blbzRwncoKCRZ99\nzZwV9R8xScKjAIoeI5wYObkC1xyGLlPxnPx0kjWaoDmGX/pPTNCIduLSa6CO\nWFycOtREJ1oV3GF8j4xs6byBhOop/uXgLw6TZX3czVADYfCmu8lfS2LrGmF/\ngXHLPgVn3fozq40bvQravrFJRajBK8lqe7sieoRkdqJ842p6ahgJ2c/CA3Ji\n6D0h\r\n=WkkT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.5dee37ff6.0_1628185367833_0.41839700628022714","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/card","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99b6871cea023428989d98733c0fe767a4bf1f64","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.bf405d22a.0.tgz","fileCount":19,"integrity":"sha512-THKvR+U5lOz5xc5YK3E42qkQZyVzZZ/r+VY0Amjb+Ym2lOsKrxCNwyme61Emx5dI6SzlhJnoL+B3+M1tNZzEnA==","signatures":[{"sig":"MEMCIC7uH31VEY8ikYRXuqQsFEPJK8cQi80uHgLevsnNweAqAh9roXGB8bNpbDlPXghTaFyqSyVXpVgJfwUSuZ3/kEas","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEefCRA9TVsSAnZWagAAUsUP/il2s6BZMYu19dDgR12r\nBFPmvue+mdpKWDIKs28N+XzBC0QpXOAf1lcQUAwb9l/iDPr7kMsXehfbUycN\nfNggoYa+fqSse04Guf2VvT8vRJSEgqIR4rxNOOwKEoKzhC7zbRykScudZytY\n8J7tzWcFoL6cl5bb1C+x5eicbg5cy9y+UeHMFH8aTjkVP6p17ZSPsn7vKTmz\n+8w57YglcimrsxBm1YkE1NSPAfujsWbgxIcSY2ANSDlDRkc+jRuYoJGscSFE\nQSMeDHUT0WPmwZyP1qUdOpWpM5+Sgjm5KcohuZb33dTx6vwGCZhsB+2cLUdV\n4ZaaE47OnuuPWAadgbKnl7Wm3k0/VVWpopmLqY0xNayOuPZ3ueKuc0nAq+Mk\nrEx6PtWzFvW5iqqk3XNmoeNoi3Gt+G96g90mzwmZg+o4gerCXekW2Wsxd/4t\n7fZR8f7YJPdhX0y6BTdSHPb08VXQqeb6zB83uT7NNQ20qjuBLKUR/ahibdJm\nTiB4MQBhuokLA6SYhp8sTrLpA5rYExT/ZAzjlQs8m5RLA89MBST5lrVFuCxv\n3kPCE+8fEhjm5lerVbb9/Yq7uWiRekGQo10f8pvDSQGa1byJILuFnzL9SY3d\nBgluMn8wkarfNrqATNrWYSjx/P0FxnIQrzvI+gfKJaQgooQEtMK+2+azyiZ7\n7d5C\r\n=tOr2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.bf405d22a.0_1628194719397_0.1450082639694612","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/card","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892acad42abd7a81506c371216fbcef62aec5ab3","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.b47dd37a6.0.tgz","fileCount":19,"integrity":"sha512-LIoLYHewDxCO0O5nHl6Jj1EfapFLPYkZL4loHFqtghOQIFuCaeJxTgSrNEdrGkhlnLRszlo7fWNRGwv3QoxWDA==","signatures":[{"sig":"MEUCIQCRSYzeQWo8uHb8gseFzTdF1KOxVFGz0Uu/CKCZki/G7gIgQqkDKQ+o9EcJ/wSplyZ1d9rZMRqSqKf+l7zu3oZ3jvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8SCRA9TVsSAnZWagAAKacP/iYNqAMJIp7pkBOz8fNB\nrx0fwZPTUwFnsQdCyraf4gW3le/oZ2ZNazQOeFZuys8+hDPXvrIO4jzfjN2n\n1LCqQ1txR7RoFNF5l7ZSl2xGot6upUHaGk72W68N+R8y6rDVTTvedO5xsYtc\nFhDE9skCiKRzaqHUN6yaakkPOgmIT5Cp7/NTCW+NxOPgxxonpduSl7BzNuh+\nS8tgL8xU3ZWwBDeeIKM8wv3ec851VN5ytb10wVcGKqdjRUyfXwVybCg8LxSs\nQtUP29lu3w1lXYNKIZqA7sN6dxbIVCDD8dqkIN5AK57N0scm9ux2Vfu68uF9\nSugSqnebmZI08qsAMmg1PKjthvT69T6rCvVoAWgqCVMkiIjOwN0Gs3WMrYMN\n+43ZW3yAEFA1t40dmatahTFQerlFSP8LsPRomEW08PxNEQtiv0AlemOmbaSr\nlCYb+pIDPXWOZtWFOk2SK7gARCKNlSZvh/BRtaehGZ66PFjLCFHKD4P30gXk\nJd8yIhNhhMSsRKSrcaIQeWq0I0MSwR9502/UGK5aBf9ZelyqZzsQWE1gXXDK\nCoJhTdDnvTCJyoTEZ6eUkzVlo/gXi2VI+EKl9IQP3HBUBMXQsytV18agu9M1\nnyKWdcShpxJeyfYeb+4Usa5VszU8La8lFgm7CPiJunie3D+KrbevjEtaMS3p\nsIOQ\r\n=8kZe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.b47dd37a6.0_1628196625875_0.11078746298932463","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/card","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf4a67f6f1aab4dd99be35ee7c39d503537e71fc","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.6c82b965b.0.tgz","fileCount":19,"integrity":"sha512-9Xk6y1iyfglN2i9HDpuG5rOp47nO0tisqLeqL5wZ7ZIQHrbaJx/wIKLQAkHptnVeNCAk7/rnz65D+p5tJ2Jt0g==","signatures":[{"sig":"MEUCICRNyU0sqplp28L5rWhN6TBH0exWGCGi3ovKEKW7T/V5AiEAoWjmVQFSMOTqlSHWM6hLfbKWSYKGzTjUqZSU6qD5RL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAbCRA9TVsSAnZWagAAG8cP/ArrzZj1LCR8XJXtOTuA\nIVZDltcu1g9qo+1PiAwJrHXY0cRkcg2OhvfVpmcrFUxdBKJCK+2Nx+IhhiYQ\nFSHIYRcUAw4/RR1wmeWPTn7cvpFaa9noweg0oyE/97pojf4/qSN8uEOXGM13\nREQjKi47KNdbPbjD80mBZZfTCCW9AI92q2Z5Cd+t08TyP5UuYc4lR+99iOKk\n8YD1fU8mYwTmEvp95mDklENfKwaZF7XmCVFKM+2vXpNn5ggPrXvbaXQ5MSue\nFfIUruDwDMbURsfVFuyY+PPZNbs3Leo8cJAIEHVQ5I2BCndZ/3M8Mi7WNsCw\nxZP8W72EhNL1CoLBA82MFRQetYnF9P8Jvg58a/4VeSfbYjVnLJ0kq/3dFyQq\nVaYyPvKdDoOkw63q/hHMEtEQMiIi+HvJOFIzdKPamGbpWKR7QbY9xKHw+IUJ\nTCmKpMz3r1XAOn4P55PLbX2XguTKscCy3LBYKwGDM0PS2xdRuypFBcSg1On7\nS8Y1WjyU6+dyT6eSnWu9PJ/uYumqtAER5ZqK6CzoFqLac+zf8YQl2cJEfX+I\nWXcOBdhxYxg5dG/PiI5GoPikEPua/RzGKfPPKnMUN+x48WT6JvnyGQoElcFq\nRup7QSxBmJP1mJAZKetYh7KKKt1WOfVf8yM987EkdkFzF2fuKGj42ZR+dlb2\nppWq\r\n=fDkh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.6c82b965b.0_1628266523121_0.24048207574614633","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/card","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"120e5e9a62684da42a879f4e09feec04898bf5f4","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.4ca11fe76.0.tgz","fileCount":19,"integrity":"sha512-D94AFwwRik+2cKSP/ZA7rrkUxyuJ7tgm+OiWLGhV+P5mRPnWJg7+rYMpJISfYWR2fcCJAwmZMoPrVKrLc0Dw1Q==","signatures":[{"sig":"MEYCIQC01W13LETxaty5LiiAbVg288TA64A/StlvscfLzCpsCgIhAObIxgQMRVc9PSGrETYE2icuBEEFrMGcKQlY3kUhA9kg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxsCRA9TVsSAnZWagAAYJYP+wVLHbxwldUXyjuEQml+\n237SvLn1yLVbjPQ6ZLqjbi5MmoiP4tM3Kh16N/ZqF2O6orKQAHLUjmtcoEGg\nfQ07NpSwiRbr3Sjp7I+7bP3x8doc9nuf9U6jlQtAONFErNoSoEnFr8e9RA3H\nQ6vpRN+peF7vAMrteroq88bXXA2YTSZSPe+sDoXKh6zeREmYOcciLwIaL3rf\nwLai0t4qpQAJIA50wWWr77og+w6buKma5SWYja5Od/GctcSmk/rDBt74CUUP\nP0CxwN/YL0ncnbJCrVpZDqxAszt+eOmkmfpvyFB3kmf2GDYDTwCkev2EpWVE\nAxUq7Htol6g+iD+8sk0PwxYRdTrJrm02ODBzPVtAcEut/Qrvt+dfXVzs+/9h\nGeZZ+9ZnR9i+2NQndQizBoNm5+EvXKPApFMqzXji1Y28G1xfhEizO3MfBtkm\nQCOeMAQIkL3mSt9+kfPb68IwNcCrzk0oDV0+PZjVZP+OI5kv05ErXfkMkZ4D\nauvh0t8W+BOLrSXa6Rh5BnZdzJWrWHUEF3lAxjtFFrqeIgolOb9Oe2xQTg+T\n+FWqxt5OHY8M1KvCyz1MT5OdmbvRVVSfgXFotMXtFZBpr9MNWw6zNhHOf58J\nwlTwEkFFjZv1ZjwEldnFcsd6KVOJe6vFBMm3T1maeLhB63LTzBwT2HRDU5vT\nPVEA\r\n=QgNy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.4ca11fe76.0_1628269676535_0.9346261306376507","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/card","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8853ccb1fbefa31d6a735604a44c089f497b173","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.510cf90f2.0.tgz","fileCount":19,"integrity":"sha512-8HeS1iUq1lNGqaRK+FoF87VJ0b2LI/OSdev2HtEg2FCAN71gUgmfc3GOx8OG47tGQuuA+/asGEB45/XdHflgRw==","signatures":[{"sig":"MEYCIQDnk0rbu0Wpigbqcf8I/RWmXxGNVPWM295Q1N2KDDLNMwIhALJsyUYwaAyFioxKmyxGLAmNa5yOqUZICEbYO3/O7l2X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWM7CRA9TVsSAnZWagAA+E4P+wSOdwpmD2N+VIH5SlUh\nO0EliWfHGtDtc2OoiTDE4EefzRl2aaEOi6UZ8SkmcH8OBLdo+Bgqcf5AP/hi\nkVAW8ZN3LqQYTuRLGLLCjHGSsbsWLp+15DWaAfR4LJ3aHXcu3y2CXsmCdsv1\nn6vHy3YqA/cKJxRtzX0LgFSkHUeyfx0WLjoyH/Ah+wJPILaFe4RNXxHxD2JZ\niorgsceGJOmXIb97KNCd9xKFcCzHfDKzKrBEQmkPHjhVc/v7H/AJR5tXcUgZ\nzhxjzoM/O5h1H8LjkV6tsFUJeFGeftLWGZSrG/nwBc0EXq2Nc9F0ikvlWi3Y\nay7/6UvHtwYh14P4ByqfVTnm8vXnkNBP7EAIXiZDvcY4YCIY+UPNYrCqx0lQ\nhn/pHAcax9KNv3uEp5fXNpMRjkFpJtfac8wA9nBe1fi/ICeAo7dioAd994kc\ncynQ7secDIlBuGAMkqKGw6BPTxx/OAKhPB72dJvoLifgWUveWpx/aFuBjAEK\n8UpcGHTI5aNLZcCy/Ne4Ebc4ER4v6W0kCLlTq6tIGR624FnyrmLeuuMDxF1W\nHzPTIA3UgOC5otYr4zUDiCiWrW11Q+ZfWiKCcYlNgfIZyZtI331K4fN8QBnh\nLE+A+AUIkJV8LG3JxWlwoaXLPQYzO2BRLFxvxEH+Rgq0SK/jBnQ1xiaOywS6\nsJw+\r\n=Wl+U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.510cf90f2.0_1628529467294_0.31329873500066374","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/card","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e344ffc24c1f106bde2c611ca0fee8f5b9773dd0","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.17580ebf7.0.tgz","fileCount":19,"integrity":"sha512-imQz9uU7PL7enxlcb8Z/jPsA/fK4hmDkDhaRD3ChPftRvD6rddTMY0wIC+2jWQS2YA5FQ+IcYsMkOxjVhkhYVQ==","signatures":[{"sig":"MEYCIQDUSuQhzDQAhSoId79h187asbJ18T+RNaGDvTh2IisuXgIhALy7oglyIpj3sjWCkIGlmj1Tlo+FBG5cxOmGEv1F59HG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXFeCRA9TVsSAnZWagAA8iIP/3LgCRkLC0k5yorX+Kvr\n+PR/H/0QLd3VjCm3y8rMpAd5GiNlhvySC6Tubm+LqXsXNqyQXAK5MXpIlnuH\ns9U4lSPDI9kSB6lyHSH/hShc5gdxQhDaggtKGglBTAxASrwVBc2LsFmaCUzv\nSe5Sy+BHUIjV712oyi56o+mXVB8J9fW7Xpi+9Tkkq8QVz20SemQ+tQucuFMv\nGdAJoj5jC0VERqI5YkY5ZPn8obniCbQo3EWJK1EBH9ntDJ81Muh0XO885B7P\nbsHvcXDEmfq9ABbhBu551Qkra15OOz0djv3iswnU1rq4NhVM1GXFEF5n6WiN\n2iq6RAuuPRWYWfu+o1XkLpBG1Ip2OCXebe98Fot2+IOz4Hi8L2W+CuMbe8Ro\nZFwb47zRr2HltksBM/qpfwHOMtqP3y1RsiqiEgpVHiEzZxMSf4VurArFxSmI\n5qn5/NVfeLuJwV2jKVytWz5oJ1Aw1U2icb/42kTpzQ3H7Kpod6zyfNlgOUCE\nZgAhKJ2XW2CLwfG4ci+YCalSyGzGXikCK7fIcZpvFW7L3rEpKoX+CXn3eCC7\nD6x/sJh4xkH9Wmse9mGU9NSzglkKcQNkRKg1xET4m15M2X6/sHuZX2IfHT1N\nB6u8r/o++A15Ks2nQwazEjTJiuc0Z0RQN6yQUqDxf80RHgFgRzyoZp7pnjSM\nYQ0o\r\n=UMkZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.17580ebf7.0_1628533086501_0.47577585208325535","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/card","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"397eff4a3b17ffadd269329e2316d273338c9806","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.7249a3060.0.tgz","fileCount":19,"integrity":"sha512-veCCcyAdqk+8PTB8RqwMP/gHhk11nLyj8gDKdVnd06TvEKMstG222Xf/ghvlsX1SgJrEFwwGbu/NI/m6FOvgvg==","signatures":[{"sig":"MEYCIQD8pm9mXiOPhKLJJnHYFi9kSI188eB46tScgnqwIfPJ8QIhAOpK/CDDHGQHDBV+/orIuBsab8djVZkW1oRsPgvQl6Aw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJMCRA9TVsSAnZWagAA8BEQAKG7T4lbM86HfrCorddR\nDPCS9t8fOYmjylNTnHedUi7LKMdsbupV6CiJVIsPa/369NddQTgQdPQ0MUZs\nnfQvxHHwBR/1aIgwVB0sM2+N8G6NOBTefcFlpDSnz9/bEzo29iJUptZJBFt/\nQUNRXG9nkIW8Ry+o7IS1h7vc4XKeaUz0qYMaWITA2N+abCXsHhvidN+zCwBv\nF2IPE6kbOR3kyzkJFqAQui50TaeKBI757R9nhjsYOFVjd/ub+LPey8aLVOwE\njNLk4/Y14HlVLDTK0Qal5jCsTP4uXTAEjYYYpZyvucHJYo3CBedCvSZrvfT2\nsz/LapYozc7xOopwPTbB87x7zDNUxQvI5S+sLTI3QYvm4EiDHWTHyF5t3Nav\nvE8PoqqMzFbYS++5j5eXYMX+qJsA33kHyDzAcH6DJFb1nKSUeCE0NK8WTvXT\n50ZCb40wS2XB8+7qFuLwPKXDCk16ORB7ChdTNAOAF/HFr8LDOdVbg8HZ7xaD\n85Lbj21+EK2uDSDhpdMjRTrsi+PfanSTAQb0czCz/A/L6mwCyvPUIG12sFaN\nZ+V8DHc7FC5JA71HRQfeVev4INWyoF4XQ8hdq1AMtmYevMlqBSjvSxqKugDY\nZVW41ssyhppH1aMVZwEMAfgk6PAT4P5Nc1+6gJbZ3DcRvCb1v+ZDWhrKu+YL\nOQPX\r\n=N51g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.7249a3060.0_1628533324745_0.9408780734411275","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/card","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d45b76d1215cc50fb917bd548b28bc05403a402a","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.4c405863b.0.tgz","fileCount":19,"integrity":"sha512-KEzoBr7L7KRlIoKeeoQBHf/lbFeid7KD3zCoS2ceO5E0KR8Uu6hATVXpWcRxfWXl3vM7WgOX2Fu+PfrMdSoA6w==","signatures":[{"sig":"MEQCIG4ZtC43MPaHY+TKREesnRc5F4jqlUdbGPBfyMBkiD7VAiAtBYYk1AKlls0092p59Djhijunepbt0DGQRDL9efkIQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpFCRA9TVsSAnZWagAA/w8P/1N93KJgw2qj+ifRZ7kb\nAdgAPgdeQF163JJ5kwkpUOuQM+p1Z9HkJ2gfUnBwmSE8yVuuCni1jtWY9fHj\nJMpOeajScd6yU8YjqYfXPOvsuHM7X43+agz6vFibG+6TOhcpi7c6PQ+b/2pv\nlnB3GYecblQ6SzkgdC2Xi8jc5HSYSKHMQr/EadzoO5oPp5CEG84K/FPvcfZa\n+a1plbzfaoupMUdz0IE7FzXiZ0HYvBT21T5hA12Lmhudo6SQB33QtZl+mmfa\ne3apbsRb6uzEMZzFLFz4FwBNDuu6E1R/w4ud+d73yn0aYBFPVnacwxQQ/CoP\nx5UypWKHCqs7ZkmqWXYNCrLdE/D43IoOMUd8AjQ7PxhFql7Z/Dc4ZZUdX9l7\nyPhiYUNRY8KSq/Ur1ohXFwFLejWnep+KBDf4fxONYe1iaxVfCJjsCAhaCwYg\nESxUNQfkiTBH63gwuCLT4gavGiHTwHWDpxV0yFjpsAO1s0qZJaiCETWmS7hP\ngyOiIe2jYKrFUHcBVXc5iIWkhwcVHLwDcKbT5iw+Z3Ia3rjIVIV/YrlSywJr\nm14d9kx6FCVGyL5Rjx9p/gh6L0hgB2BHaFir1f8tU3s+Cz5KDcUrDfB1beNa\nFJnMMINeKohB0HIdyqa+9FKvtTuU7JptcEX+nd1UfslimynIo5XL3Dh1BRcg\ngpvD\r\n=mC5G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.4c405863b.0_1628617285161_0.4423135194045369","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/card","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f93ca6f16f1d506cae4b4bf4761fcdfe0c0c17e","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.f4241a42a.0.tgz","fileCount":19,"integrity":"sha512-46Wcm4L/wl6eBtu1Ns9mAZvQpFQXh9cYtonc9YuhcdPusFQkVbwg/y3bWHjagi8s3Ovrj+hw5Ed28MSDWabICg==","signatures":[{"sig":"MEQCIGrgsCQ/Ggs9ySzAXSxR2w95LriKsieTyi2X5oCkVysRAiBXzFREp5PTkAn1Hnl0nz7/mPW7d/Lj0xr1kKidyUTJWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAIYCRA9TVsSAnZWagAAeP8P/1m7kehpLpntVvk7ACCt\nKwC9yv5C2nvjjWeERnIAgNc2t9jAhFer52eItNep/9zLYyIP6T4DEUl+RqFn\n7AdOxDQeRFCVqgZXOXuFkeTBmga26vwFldd3KFoKvfxx4+PeJHh+sXO5yxRX\ngqZl/+H+H9f0KgjnKjCG98hEeF2uY5NIxMpcquL0kyt3by3SUE0HxB4D07qv\nG63WOL65A+XBSEhDnlVBong42vdCG7kOFiN9QJ1OXXkUhjbbwSZkxQtcolqw\n26UiYlRpfD0vudPssds8RdoV9enENKXyisCdZpVIm5o8V7JO/hd/dwqs8X4w\nM777iQIOBmWJ/xBdTeyhYr1azHxjnqlNRjEPxesQFLt3R0zQMTh+QPfbpMKM\nmjkQAwk4i4FhA3ayBX8cQXvQq2cQ2Kg//U7YhVZk2bFh9BT419xcAPX81zNm\nFHkBCRl+1xcf8Fi1s/sNRVpfSp96y8pLf5SvvR9WgjGeU2fA3LXlYm5EmPCs\njmTfh6ife9LrUkUun/2GTZcDsZRZmNOtwQYQBqkViZBTF8rG0rXLtJSiwgtt\nAFQEeyiD6fLqhtqT3t+JhRoLkePC/Q7A4RYdKrxnSD4WwyUIUhyuLm4NTNh+\nPlfIGhQKHDL6voxWJV0kcKRsV0ChyzUsckWsib/VAYX44CDpSqySEY9xx7N7\n/kuI\r\n=jXeK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.f4241a42a.0_1628701208788_0.8949344499670833","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/card","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c7e49fc3e992593c06a9b72c4e00e927c79b6bd","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":19,"integrity":"sha512-P6F0UolgDNgLIg1WnNurOnH1tf3tzWCtXLQWl3zu160wWdJWABD7Y9dfdYQx6WhhQB09oFK8GObfKqprX9kgZA==","signatures":[{"sig":"MEUCIQDrPAXkuR2LPnMFk0EWWwXARcKvryCdBR31WERDdyZryAIgMlbLD4PJgtDVDkPT+Q8HTkUDHSlKXX/peD0kcbjzLKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEuCRA9TVsSAnZWagAARB0P+gJWaQf/ehKJGpw08pXM\nCvXLhhjJTcvEOw6vfUf+jDmCIW4Pbn4PwtQ+FBb056w+wlsdq6isAusjQF1f\nDi4ZNlsaYUNEyXptR/B75k+AODKjuiD+hqUOjqZMJTRilNzM57qXLBRuc1ec\nwI5wIOVMa6eH46QiM3GpA9YNzHgPbee7eBDzr4KKnIVkR/ovTzZPGIFtmmwC\nU8rps/gXnMxEEjggra3caQ+TtXKJUEdzkiRF+HHH4TEwHEzwY4Njc5w2+BEA\nSeRkW6n7AaVe90DoGGKle3aiTp72yDI0gtThPqZ4jrPMcAJ9UR+0fp8PTdY9\nHAlTfBRAyDF4IxcJAYH3DU2wJNUrely4ReqpP9BMvjBNxLLkYbaU+3KijEcZ\nxJ8lZhfd4NfvJzLDngmg64SZRStlOSPI1fyfZPNbe5HHOHhV8j8+Bc5/15Ny\nMg8605bpIz3G/Yq9vPG2oWx6AdmLtUMBDPeENsAQmtv26ClJ0y7Ix7SMLKfN\nag5Vacba8b+XH9mwMfeb1TVXsOZ6eLa2ogdTlzfc0rDa+2oYDk2Ft+1Raasp\nxvgFQmMGaPC48CwcvHcdaNftBfpF40FXmoxveecux287TJscSZbmDoTlrH6a\nZMQYcXRB++4ZJFdXjagDfJk33LyK4vlUo3HMxuPR7UdNv3KrMSCYYaRpRBCz\nVe3z\r\n=xsd9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.0ad12ed3c.0_1628717358000_0.6273401157655583","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/card","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d3ea1d9b0d94a8577568469f7bcb69c0e08ec9a","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.077dcfcfe.0.tgz","fileCount":19,"integrity":"sha512-h46M5q68zIVUubEXjba3fZmPRNOYXivfyt+WdPYGNf43gVoxJXUgZnrAazQ99dYDLbv9KQXRVtVb67yNFM0jng==","signatures":[{"sig":"MEQCIFLWB8vRNQd63DwILTdmDn8ULkE1z3HV9ogFwbjgy6VsAiBfabrjbHeH/cFv3nnZg014rBMojh6jNGizPYNqDtDJ7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCoCRA9TVsSAnZWagAACwEQAIm7VrnhubMUSbjDHAZk\nwZQfEQKU2kY2HA5hMd10WnqjdzXoDjFqknu46CejDzXxOxYIw0K1LOzj5BIJ\nUNvFM8V3VYp3vOq7YWpSKRjdVhHvw4eKVsCB79NNaPfJazVOLX1JYR0PnvN+\nfE0V2i6hzeS7JxcmCIT1MJUaIZkM5Y507RX7PH7Jwiz5d5hv/P2TQzHS91mW\nXSnddNQM/0K2WGSl3Bg914D0Rx0zDKGi/J/42zmFznSLGpUMVOMxyHpE+llG\nLNxBnkvq13K+oIJoXDds9Y3Cxgm4qk40qtPX4hqYwqcOZUh9gm55DqDiCIBj\nOKkBzO2qEKklv6rWwpDhdx++KjdUSP0j1Ii2JRAtFDVMENYCEB3yZono9eF0\nt6FqlBdN9M/xW/OsoXBj2QZJ4F+IKgc7pKv2Q6dDug9XfWj3Tx3CqYCS/Bdr\nJuE/GXOWJoSO4YIv9woeVkontlzD2/08Eb4n1mU76B5fLvcdy0BNuQPagk7U\nRpzTXp+CtGGcWwIiSSN+uiCmi23QJM/vuvMn/H7V21UtAiGKNlgp8VQArfEB\n1K8oOmM6B+mjcYAbMwoO1Kjk5CZb1fp7iXQZ70aymdWN5m/wGKRNU7QNe/d2\n8E69QPy8xmiCdFtAHtNHfsOO/47ZRb2GwdVyYeQfxAb/9GX3WdM5qhLQEGxt\nl7wt\r\n=bXTo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.077dcfcfe.0_1628790952070_0.359813581830531","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/card","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9294b65f54ca67f688867560c48377be0cd24227","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.e3346766f.0.tgz","fileCount":19,"integrity":"sha512-UzNJyUAEzvqP8YEKhCauMNTwl8UM53YVv+eXkgHm1uakz1t6mKQJZM+QHjAXHNn1w17GoQiWl5ZR1vspFB6nGg==","signatures":[{"sig":"MEQCIHoO5/yRRdqruS6p4NgL0BZPRRk3lbRi0yLsoAU8K8atAiAhEJgBeldT2/NnW0UXi+TfJLJJ1AwhfwFwR+MnATMAEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvuCRA9TVsSAnZWagAAojsP/RonhCxbyzQC3z/mipGC\nTot2eYaBlFBO8XRQBx8CRd/uXRwlFmvTpTSvGVujM0E+oI8T4A6pmFx6b33A\nDtUpI1xW2T4GFWBflTnBfk5ESKbi8qG4EjuZGlNFZRE+FnBMwrs9gglygT4b\n3S2cNLEk2ZnJ2L4lRqX+ib5Qsi+pbVOwM47SkMD6PHV+L8CLxHgtu88gSg53\npr0UtYW//UTCov8G3TzAOH3ZZbeRdE9gRLtD3pF1zm6p0/Rsw+MsJg7qrVVb\nqsFBvEkLPNQcHkAfE6r1PssdSY7GBV3WXP2qioeQgqsO7y+QTfR5ts6rhqAp\nwEE717Q/IAv6FRIJFeBu2Lwyn6dJSomTc4y/EGGRW+qwagGN1lBTqdBopOfM\nIven1P9cbI9g5hbIol1YcHwGifrjaG4hTy23NbFVdFn0JKQQXTZoenqoVnG1\nB8Seup5T1tkd82dpJ1v+RFINby/sdndpxGl6+uaVu9zKOgbCwX+/DwKSGRgO\nzWgQC2p0OslMC8sMunERxy9KiPBRbrhKnz3KJuVgam6ZYhxGrgR/82RKaRUS\ngcjFefoFiaPowd8Dfs9RY/XzfmYxdPLNE8SHcXdEcS/kJ0Sgh6Hk0N6cDqrv\nOngLOoc0SgUnaOjllXVp7g5F3xEAeYBvsvtjbIhhO+Q1BA8P7ORgVCFHxXvc\nZDXj\r\n=8+KC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.e3346766f.0_1628883950047_0.8015079537222658","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/card","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"074246868ea511de519d133d4906c8a0b3e57511","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.2fb068fb0.0.tgz","fileCount":19,"integrity":"sha512-mxKakvgsFxH1jAqUDfS8G2yPT8vGQuHLqfVxi9iZUPvze/bp+Nc5GQ9SGZ+K/57dDe22DUJT3xlD6BAnP6yudQ==","signatures":[{"sig":"MEQCIBr5AK3B/0Yc3ABr/vdDwATWBFD0KOxjbh47hj1FHBUKAiB0tWy9vyjErA4Wth7stsYG8/3TBIxDbT3dHi4VvxLO2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsysCRA9TVsSAnZWagAAJgcP/RLJjHIbF9ovm8cIvwl7\nuRMeDzbypXwXZy9W6nmTuNLyUU5tuVpkcrqxy6Gf2v9oNovnqPxdqglN5pE7\nbQrzdt69+hqIK9UdliZNTbOkq4j4CXtAbqPUjyB/bdtc6zFCovMl309jZ7tJ\naj6YlQXN41zbuHz+LbEQZfXcUZS9/4VKjGDEcxZK0iRgQ6d6M31uDK/8l7T4\n9SEti4I+BtkfP6/nbm3kcExZgPCNnneAkwIHBZZPrwIP8HGG8Ne6YXeNkBxR\nnASAHcdaglvYQO7ig0lkoW/VoGjhiUUi7QwE97V0wK4oLNGONNKQxL9wp3wI\ny96wAPnOmep1msVO4rlTF0fJpB99xOxs3LeYlhfjyKqFMb5LZ1j07pMuDM+k\nPIr/yMZQHg+Bx2Lz95PwFwdXfkBkKConsPSBETjTGW3kZBCcHx4MRxqYE0qc\nkH5yl9NqVHXec2JMjkjmUeBlMmFfAPdhen4/2WLYKBWKcFHK6pFo9yEiTPD7\nrmWHdcLeWQK/UcsHd4IPw0crdZRtPYRVu7fY1hvYNeiGwC7O6K1N2phok690\ngb1Rxi8EfrqwMi2jjTRbZRGDHLg/sXUs1iNJq8ikXRLH/rfUKN0P5Ldfl0tI\nY92Wh4beVw2AiF2QQC1pPql8UK/dM3GHMYV3S275GwsniM8HsC0Oj5JXnOTS\ncUwJ\r\n=PGhT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.2fb068fb0.0_1628884140665_0.019529086569756382","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/card","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4797573edb955dfb74ccd69d04757da4086b11e0","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.fb76c5069.0.tgz","fileCount":19,"integrity":"sha512-6dNiyEw08N/ZRnyXSNUpYKZ+qyX861hhzwx1dYEfxTI5GnQxsvVJGmUZhCvMlOqq/gpfoASDqe213VLvwwRIKg==","signatures":[{"sig":"MEYCIQC0AoQ1LPIT4vccW/FmVE6Rb72fTYvPpFOkqrowpQk57gIhAM1wtUgvcMhn2Cnj9ygdYJTmOVhPR3uJXPbr7wN9EVUR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsXGCRA9TVsSAnZWagAASCUP/iyZuNBuoLfTXqK7yTTe\nYg+RY7W8huVXJiYxvSNgbKe6eN/xPAidQO7izNr97nyV+wg3O9SY4Rngq2Fn\nh4ANfeRDmLRXxpXmHeeK21Vx187Sb1GkPG56a4JG/97gvZ3v3leaxfs2Ulr3\nUJshTZomfjwaRv+eNiF3lNeeLoS3rdnZ8tzoZpz0Nx/fG2/UMevSpECrumdt\nwJ3IJNrrQYccpzxbHMoMzGHb4EG7PjAJvfUiTd950DO1iacelMN2GmFB4Oqy\n5GOVrU+uLCdzo1H1QoPh0kwsaB8MRBiiDVUIDXjbkBcmdisd0PqVBwRuhHIb\naj6IBKohb+H6Swe0XCGGpw9E55jMd4BEpi9M8kpcDK5fG7nJsLchqAIGzzpN\niqaxtBIeLhDGO4+9QlQJk9HMpVxT9+sPXOLjakXgUqKg3V2k5Tf7OakUiw7/\ns0R1bL8HwmQxB1JZ8AN2ECIW4Lf2oDB51/Ya5PujfKzwFF7QTahPN8UAq8kX\nKlPOWGYMk9D2xdBFw9jgg8M2LgTPCLo1omee5aSmWaQ6JmX6xbZr0TKeqK03\nkBR5SC3V4SdAOHDR+Ndyooa/K+OMnQuRbEBqHm8T92eFzGEXvGD9ZnCR+TtR\n3qeq+s7BIiym4M0Atd4Ev5SsJRggrBRCu7rBBHZPD/38eZPXT8LePP/+H4jk\nI6mY\r\n=WqjB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.fb76c5069.0_1629144517851_0.8247642400413355","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/card","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ceebed0bc506a5d3e5a9d80149261461aa79dc8","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.457d89aad.0.tgz","fileCount":19,"integrity":"sha512-HgQsd0/3ak+Yt16UfyKSgNYyfHvBa3IOE0FtIrH6UYMkI1/dNBmFX5FEUN+IzpM/sy28wBNjQXxoZZhS6wGWDg==","signatures":[{"sig":"MEUCIDBv5njZQG1RoOpeSz31GZlKV3n9A4yQAEKluLSXD8q3AiEA8Zn0gRM6FiaYpKewLqqXselzCCAyr2PCoJnJZ03foMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QuCRA9TVsSAnZWagAAVSMP/Ap0fn4KqoXpfWvHnjZk\nAgT8dB7LC3ruju5TEMBcZWshD7KMbg86HoxNKTPUPabnSyJuoHdkq7W30+pn\nQSSufQy4brCpGNX6JbeLjTKI9NfSVvONo87YdOfBkLMZn7fWa/ZyWfWnAcX+\nKH8jKHSxoD+mk8Tt9fdc0iLdZNbmYGX4GmAiZmzd4i2J54oUwpiEPXDv0ORv\nxXXw9XQ4lUZr/fxSVybH2BRaloB0WT/3GvLA7OVeo4r1fG52LvPzGHh1jsJo\nf145m5ZFMfTSk/aRnhWbIQDwp8MyAxLMxiN7yBBuFETAIX8kpwLYYUt9gP06\nabUwTIMbRFATklrC/vyrY33lYT/3imxRAIiDVqs3qqYKqhjiVDteYNFnfZ5k\nMTRVboQRU1dAyaXHzLIWXNIOZ2eP0/kzfvMrWDMdsPj5crklWETUVOS9FtUd\nKjB88q4fUcLhjJYZBmYr0ne0NregWaSgIhhOWpRiCsGx4m8LpCtHu1ePmSi0\nB2z21IKXWDaY6Oo6TJYDk1VhkMupnSEMOnngU+OHZDGssYZvq2xvcRY2ghlo\nf+yCAGbNvkw9Vx6NYbZtQp1Nq64DivkNTn/MsiCU3ETxc1T3Ey/x5ggKMb9Y\nkTnoqnrne2zzbPiPqxZ+/Z9EkZ6WwFDQJNm5+p/Z5hLiEA3O8s7x6H0lyhan\n9QIX\r\n=/9qO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.457d89aad.0_1629213742479_0.5745582770481472","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/card","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aca8ee6aa9e8252a4a3de3ccb89547d05b0d7b8","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.0de2f2edc.0.tgz","fileCount":19,"integrity":"sha512-zzd1DHgEdtWRZ/l87e3VFrL2/6oTwCzXrAfj72f3W4TVxUSYc4Mp7Wouhm6yeu4l8OqGV+vullhMuqSgNoE98w==","signatures":[{"sig":"MEUCIH5rafni3LjEQb+DKJ77deKeYJ8uCgx1x0j+JQxU1oseAiEA/eo9qZ47F0xSXVF0zoaayvnBnEgNWsGtlD72UmK1zU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCIWCRA9TVsSAnZWagAAGYAP/R96u6sjJikeokdIVEYr\nA3l4VFV92pYqmAo8gg+N0q31epZAlByvSy2MfPcNcJJlpcLdHboKLCWkGt5o\n5XvNoh3mJoHp3jUh5SM9U1tvT44S3ApN0ubU4dmPbsp0xLZaG02AUB0WQkcZ\negu/kOyhYZFpIBya9UVAF1ZlRoaqn8s8yXB380C9EDpR2AWVZZGNwIRDY9XW\nWx4BqFPA0Nyaf9PiW5/9JFgFyhn0KOLqvlj0pC6OPV/eT8foDwbEunH+8DIh\n17lsPJFMNQeWc8yjNQPlPeNG+CGMA+2w0HMytUVzn3hO0TCwI5DF9Evqb++G\nZgaw9kFKa8aSw46Nj1ACynhBMtOD8wz4T+EMdywSz0gZw8KtltVg5fVXx+CU\nPgEXKYi1oiTt0SBVzs98d6qu1McrZFLnT9dGkZXLjxAAV+1Z90MECkPCAqEv\nCwzzAleNP6ETn+DuHhxnSNk38Nqp/XfqbHWK3NlrOcnX99YW4t8sibJiFLxc\nivufOvIiCgeCp2t3GAOb/MwQ4m2BNpTXxh6cLZGugH/7plLHZuMsGZhbYObw\nZKucgtrYfnqC7Ch9KekfourEdzkBkp3mE9yW7gJCDEW9fVylnbVwtCE5jP95\nvk4WeGiga2v1gSynEaVFPNbKZGer+zWCua8UDfSgi3Pq+oTTuXR0rSeq0ms3\nk63s\r\n=Xdi1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.0de2f2edc.0_1629233686067_0.9408906663065644","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/card","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b67c2e4bf357c989f86c3b119240ca863db92800","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.1f9259b9d.0.tgz","fileCount":19,"integrity":"sha512-kepFntdbYKcKi8AEPEGTxzGG5iaPFS3rqZi5uGC2wNdMtFwCFAX+7YDB32yc7ekcVIM2rWWIDp9S4edsmF2BDw==","signatures":[{"sig":"MEUCIQDKVOO9AjvYV5g0ZLxV68qUr6dreyrdMvQJfJgJgXmT/wIgRn50j+F8aNpxZjkNjNO3j7EJ/CRQnL5WHUtZGgxjeiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDTYCRA9TVsSAnZWagAA9wUP/2+/SinGJ0vlthZrD3oX\nSyPLbvikItnCNe2q7HjO2i10pcTaDMaTL2zejpqXUXFus7a+zW5A+I6UkMeN\nkuImtIN3t2G1dLji1FYFrB6vdhfMGyCWBZoLXIMV0rZXYIBdgEtmwg4ZmXGX\nPrv04R30GtdqDgsCRBrR8Gq8wuvbItEY2Get4W5o/k3pHSWPST5M8WdVI0gk\nd09IbJ6GB4vICdhVeLBJ/VuntoP1j7LgLHAa3hliFar2t6y1xxlsg9EJgJV4\n936prB3QOG/X6vQej6sb9E4FWIvJk3ANYyGO8nGgYx26rcbGzP4qy50La0u4\ntL8s0wguuU+meggs6nOi9dRf8TvpWgcBbEUHcGTDk4aY+aQgV2cbOx2RwgRk\nOB7AcW7JiMH00G1KraegtN5ZepmQQoWlxWOoe2Jl8EoNIcv2m/r+jT5ThqF5\nQE7qyVWTtNBJofBNXYPebNoUq+TFkLcljTTuVoxjX3raJ6ry3WqTVSsNCB1J\nwPcYgdY0ubeZvYUMFV1Kx2+i8tpvkmHNvYbZ+3Hs/nMRTHUeGxnNinZB6a5p\nNdysAoOuOgsfajBWomBQjjWnWHXGjXkM7NNuoz/WRXkkWEYRkm6I0YMOCaRd\nVIy48omFZRM6ro3+5wUWpK3ikio6CVhqhga1XJraTaBRvcR3KN05LF7B2m6/\nFQYK\r\n=MNPK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.1f9259b9d.0_1629238488568_0.8346433028280646","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/card","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9717ea5469b0ad9f1dc9c3fd29f5a319359f81a4","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.3b9290351.0.tgz","fileCount":19,"integrity":"sha512-LZOXsdJwDK9u1j/Uk0/lB2/FUZSU70vKNssXYiQjhjYx8/1nPo2K+8Q8DqQp8TYY7YwTI1illy27j1MzF6I04Q==","signatures":[{"sig":"MEYCIQDAseYBnkRg0cRQU5327QlvgzwkDRsn/OsNlp0KqX9VvwIhAJLHKnheKj2u1dqyWZNq7sB6aHg3tFI80nA/YKNIB2l1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJl7CRA9TVsSAnZWagAAayEP/iYQejB9IcLz3KWU5WZE\ntNpyKU9bZ9cUtk1F2hNTdlwNXbsuv857IzYU9kK1ccSPpXSUIEhTiGLtKN+d\nnLnjpFsjejJzNyxzpb2HHoA/AXRso0yNWRZLGra0LC4kZZXQJUrbA9tx3epA\n//Qc3dwL5o4U1Et6uJrD4JDVjtPJkkfQn5RH8HsihUccQobnAusO5enowZrV\nWiQQOsLjn7IARWCMd2y8/s7OUg3aZPN0JjRpSmeusLB6tZAjq3l3v/csiPfS\nnHDsq+C9WOCkwX7Z/SxryXC/ZKHfdhGsPhvxLKQzO3iSdgsASmI6LC3YW2GT\nX7/3kVSEqa5ypjAkajLq33x7nJfq1i2Q4QFI3KL6eYNDsuMa3dzEYPziRg28\nX6bVlab+Z5KHBeJVI72KqF+coK6MvgsusT2ZGKcEZhup8qlJL0o7Jq1EdJI4\n5Ar2+1qsGTzKNm11k9DVyqFuAFhHej55/SU/Sbs0L4pqhXBwelfK18HSrVM0\ngQhqBqQ0RgJoDXVbQzbQht08XbQg/axIzCvjtT82ntVIs/5KPwLRSGoNGUR2\nk91qDX6EXvz915QRnfhGEmsB6xHCSbcFKkp899rxvvR9u0LuHlnc/vwU//3Y\nY8eiC5M8fXcj+8NMScnMhCMuqKitjKHGlabylJJ2pV/QjXa39798pjqi0VcK\nItJM\r\n=8C2m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.3b9290351.0_1629264251676_0.41258038530425956","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/card","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"371165f0b688a774b4c75c3194660543c5516969","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.43d2eed2a.0.tgz","fileCount":19,"integrity":"sha512-onCYUgp0Oi0eAMN1rI1Sk0BLuMSRzDYo6My6bszL2TfJXM+c+NCLtmPfOWpzNtGQP7UhzaMdI8ZSaGnp8cmThg==","signatures":[{"sig":"MEUCIQC84ZL9Qz4f2bOB0+fPPpcRvDWexYNpqPJ1DDd4CdICNgIgHOwP3g5B9jvAXAh8844qeh2iIkP/iCSxoauFCdPZ4HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8mCRA9TVsSAnZWagAAEuIP/0nfu6TQAlvE8IDr5Uj+\ng9yKVUMPMPxlBtD9K9NJHTMxZItKJ9SC84gL1+JqO7qbq2QBqDsLJ/5wnlQ2\nIVPQoWMt+4wMZQW6spVcTy0l3AyttUt9ZemTBOtH/4rasiaExdr58XxLuJhp\n2Kn3oMdQ6WdeblIbJu4eh3lptWFrn2qJw5djK4DxJtUXg+k+Nx9dD2VTRtgo\nBJO5UzH46CjSaUWBORNjaBcrGvKqreJFKiY58T7Hbc3prFjmjoKTM/1zByPG\n6J/Yq0qJ1fPlBYP1Pj1bsl3SHcMTA9U7zQzqiWu7pjmSsUs9iCsdb8qZPJXG\nPmSTIwrzcnK50ey4YtXrQWTk1GTtEzLhVKqak+56N7JhOcJIJb4UtpVWi8CG\nYPp/YHbIdS2DuMAd/Ue9627Tj7c4wVz3dS5EvGwucN0MpfXNv2XYSsC60Pxz\ntEvuL6nH95TjXdedYRyXlmaWTe/oJDR18z3jtZrOXdgzLeWcND8EBJITqoBZ\nYeyBxRLflgr3SIz+S95+BuQWdM8I7A+Wtup08zKvu7bxeLlWN1270zuEqtdQ\ninrPgzIluPcUmxfhcfx3NuP7TT7mFpC+Wt5JcRBA4Pg8EzTxo6k5scFh8Xmt\nHHnSnFsKPYq4GsEDN7okwgNwxKtedVuPht2RGmsEUgAUGKZGGpgX3P8mVggc\n7doM\r\n=qtZI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.43d2eed2a.0_1629302566166_0.2606104285651538","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/card","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7baa2966ca5d12076821b5b0adb1c881401e7069","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.0a9069300.0.tgz","fileCount":19,"integrity":"sha512-oIBQ2e/sWwzUpQxSNvHQh+IfGjhjx9e28TeACSr6ZSKBtf/wCTAGFIa2ciLV7b7MLgClAXbhnVsf1nOUhs/qiA==","signatures":[{"sig":"MEQCIBE+2WSFUj1i17qcVA87R2AcemmFowkr9LIL5TFZizIvAiBRpABKeTeCB7h1CbIjVV13S1C8aaUZiUm0Rc7dhAdZbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRCCRA9TVsSAnZWagAAxhgQAJ17XtU+PAFfnkCF5Vve\ncLuL6OgD0nuBa4siqElwAoxVhm7sD5ygF8CV4mu4O2n8zNrCuvGmHNHITbcn\nOvcUh1Q3ix8TqXuLF/8URtbSXVd92AARE9pe59CPtTYGABsXHRIvWT7yw/Jc\nKyh71bdkQOehHDNL+t6ku+kL1AkM+GNYkEoooFq7r5pclMWWzULErnvssCjZ\nuHcYwf6D+/9KnbIkV5KMqXONe3NdYO4bAC6qKCB/2+n1eLETiFI6QWtrBIKa\nZbfSUtI4vEJe+X3D2+0imICD+eRgHpTw+KH7u6DXC8VnTEEcIzieb03PWSLh\ny0+ZBMBzW7iC3kIFsu4I6/StDv61hJ1nDHW3tZw21AIb1Qq7/S72MzgDxsA4\n3OsIIAq+wr8mUhHDjNYXUf06HnF/e72B4zubZoW5tN2hZA7ShzC/k6lf4lcB\nbbU7AXKyIzz68jNhOGY6s7jwEQSE3lENAxXuMqfv17+sXrLcCFb3o21cF14b\nLdFPbv0DJSYEdO2PK2qLeU9GKsijV+xi5u47xgnCS7/gksR6Y1kY2maK3+pp\nmhJwA9NviPKsUDhFerFpCfi7er6fmSg372dQQ1johagY1sYEiZA3G0eq9u60\nO1RIuW3qjVPu7SLBg8fnGtWqopiU+r7vTIGFB/mleJncaFH5NrOfDImS0T7i\nWy3j\r\n=/45C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.0a9069300.0_1629389890383_0.3649180469327986","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/card","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"208ecbf391a0c81e8d1be1ec8c7c2d31fefef545","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.7da413ed8.0.tgz","fileCount":19,"integrity":"sha512-Su36SekGv0Qnbqwa7CGwofyR5PluOnBsF/y769wP7lOgg4L/w88CYiY45bHFt29qtO3lhsDVmf8JKV1a7QJZZA==","signatures":[{"sig":"MEUCIHQWqZ16o8sIyRIEkKmOTptPHntWG+3CzaSJl4DzDkjXAiEAzFAeFQYzs5tP7cNGV09kd81o5FG2MhbNRo1Z+G5qJZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88CCRA9TVsSAnZWagAAkLcQAI406E3/eYV/LUqy/MfZ\n0Qn0BDJVK3j141tV1rbdBXMUdDw/RrVdU33m7OH01ZDpBTVlwY4fDQhWFEoW\n3vZNoraD4eY1TYSDvPhQB6g2trAHzef0qMiGVZEPVuB622Ekd3YZ2U1vx61w\nv13Fb9gFMk8Q3rpH4KZtZW0s/exNZz6WOz7vMo2+7r9VmANlC6TnNeqbwOjV\nBXRNKy9EtCOOk34XJF2BJqnF0gkkS4lxjxLBQYLbQnDLJ3sX06A15vcUHECO\nPRfMpMRNmv+2IWyE9+bJLSCrsE1tfaEYgrNj5sK/cd49nyCjr3zT4eqfe52a\nbrOZF8s2MtO12gO2PDS9L/X8/RdSYr/BRBy795yIF8Rt370XSCS6or/ykd5w\nfsiktiuQHk6rQ2NRTDp2620nYTC03IY1rJyGlEN0DVho1WQ7mmt4bhMHT/Wz\nYiK4ztcUKBNTbq0vKR6NqY8JdXIHo3vucjuJMutmc+3llygRpbU8uOngqv7k\npJsMmq5vEwcqFk+De/WS0+S4ZWQuW/AhJjOfeIQLJWl6HxS5a5oc+XXPRRAz\nMqWBmYtN2f126B4UKGuHCLDna226jEjBnewqS2i4EA0QI4K7Ed/anXQ8gMkq\nOLLPkkEhpWD+PV2b+fzZZ6ujf/dIXe5Nla/ZopqPaOcYSMhV2FOrp1hPcfzq\n1kVQ\r\n=3B0R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.7da413ed8.0_1629474562660_0.23746745532540836","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/card","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6a138d73bef005686199ed6ea68f0d849de109","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":19,"integrity":"sha512-LNDZYVcuDVxLvbIOzl2UfpfxD8xo9QhUdQSMFoYqrYdonVbWMChAaPDP8XNfpgNhp2VlraggWYiLfktv1mUG1A==","signatures":[{"sig":"MEYCIQD5+PJJqhuQKpS6nMaOtWQBMdoCXQAVu9+Fk8fzm324TAIhANh6QKOyLC6wSywWR+78KgOZWpD/qGqg4RTK5TW07sp2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANgCRA9TVsSAnZWagAAZXYP/i3eaZuI2T7vMlGFv1V9\nutf/hK65v2YGUBfuDBPfef++w5+/V95BO2aQ7OKKwhBCzsWgu0B7Vord/XEN\nsZ0efTPybd237udukkVI9QMl4hfyR2SnnsvkmFCbQtgzRVlyzsCjevSltuyk\n4cWZYAFBzR47bpBZbhR+gj5gFFJ4FWNp+Cjc6GF36BbAEaZTvxwqKf/CM6CE\ngnk0gFEOza7J2E4rmzfWPNhbKW+LNNCarKXp8bE3WV+VgcBVkS20GI0i2tW9\nrGaSdF8/DQYa9pV1Mxw2yxQE8pOnGwkOwpbG81hcdqVN4XCT3ld1TYNQ21nm\n/76KhN2yGjfzr+GdH1z5YgE/GyQ0ECqHQWQxXm6QAIarhDRSjM8m2UvS2RSF\nO89Pm+lXjapeohUmA7RK2RGOtSxuCoH/UaUZZDnxq/nQXlR5ka+OpQU42j7v\nu/Fo/M8Ptagh5JGGgWyvUv4GmtkrMznZw72V/plSvvCgAx6vhsQOosYe+kwE\nrG/OnS3jwf/ffc5qcF8ui1ICPrhKZiWCfbHXlnmrfs50XTfCZvGZlW449qxd\nWGc0lD1cR2cQX2Bvq6tMZfcnLO9vgMB/n77jK2JahWSCYFY2unluVPZtoe7G\nMwi1f2lv2ulTLRUxPC51PyRDpx6lJfREipRhI378g0ck28LGfEqswjV0lWE+\n9C/T\r\n=JKK1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.e1e69fd8e.0_1629487968547_0.25104371564089445","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/card","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e60b9ca69191943adb6ad7fea1475a943aac8227","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.f5afc16df.0.tgz","fileCount":19,"integrity":"sha512-+kKf9aKlfcPqOCQcKC7vsPOsXgXdBE3mMrFgN7WfvhPoOkAdbSIuQREcQMO4Y14gBkBgklwjRmBZHEvGQVi+tA==","signatures":[{"sig":"MEUCIH/iOOcFd1TgZfD0hfepTipXvqX/ONRVSjLrLj1pq/CLAiEAywBPuJws4wcOyapWU7R+CzuMThWUB9pZAF3YUvDpfr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAgCRA9TVsSAnZWagAAvWUP/ijRQBOmEFgrNtECz/N5\nl3ta63OQZItYKq78wfaO8LZsxMRmfwGTjD2IGgKwx5e4TqL4javqyp77RcWj\n42i5xKIQLFnBwgiMlIA5cYoZMlOCc/MmJ0+WMWsWLwlrDb2FnizIRRilSw+c\nNJMP/sQg0vDpaDALSsXin4G/88mM4Lvp3tGEBZbq+1oNJFzS54hLRhxbLTQp\ncKr/qTiQGuf+IHkL5xECaMOCJ2JKD2SgB5G2VCy6sc+FFHvUKFV3JFupG8AD\n1eX5B2kw3q623T7pFnEcRotMAj0usrwxsUa17/3uXPtIdWkH2z1ctry7kn/h\nOjoCJd72AIoNbysYcIf4ZUX8SfR6Tx+b/AcJA9b0FByfu9Z2k5NOpN3QXrR0\ncmGw+v9GrtvuRYClTdTDnVtGOqqmdqirNtAyJ6Hq4rWt9BOcUBjvOmeKc8pa\nc/xCud4S5NHgMoaBSEnMKwL5tSbH5cP2prEa3h9pNxcvxPJjl5YO09aGlWnu\nrIavDD0beUeyO+LVH9tgFiuajkq9NHRkj1qRsFArp4i/7W7ONo9C+Zl2UesN\n1Bm/SvEdzYlL4wNLCbdm3p/3gSP4Y9bOIwbArDukRFC387Q8qpWkV7cSzeYt\ncPyG+qTpan39sJOXOIftR2IKLglueC+566iwq8qZYWCkLytDThAYavddixe9\nYsjT\r\n=EOpl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.f5afc16df.0_1629491232302_0.6822321767754167","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/card","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f17285228af00b7c422efb048bef06ebc98f2606","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.28d0d75bb.0.tgz","fileCount":19,"integrity":"sha512-pZxBH0Xl/ulDiFXWpYremr46Mg/R3qv1+jtlb8sA5wzLDox2Ni15UQFbrR0m9ZUb3elUrexRPDwSA0GR/oF1vw==","signatures":[{"sig":"MEUCIQDyHnb7DPnE8E/pJFKpJtiEXWWEgS7LkEmyAu6O7x8kqgIgbjXYQcyKpBOn5paf5MIQpB5zZGZ+Cu5fNZLx/Ag8wpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICrFCRA9TVsSAnZWagAAYMgP/A/8D3h2y562Cc9kT5I8\nDAxl8NlW6yJyBJRtNmSjAugR+futfvy4/NuBasQ2scBreok/lELvJnf6jC80\n495TQhw7oaOBILXxbJEe3LIryYXtQVYFRNQmBmmslr+QODEo2hq1zktzyuEm\nauf6J8YJovHBcMc7qzNA81CTdPHdR3BB4HJj14YqEIScsYu5Lhd+NSJpj+ef\naCLxPmEzsNBLyR5zdFWTUUBC1sAVg/nhF4prWbhhwYjzLdXURVurt+zbJSIN\nymIf7/n5PQ/NZeP0pxd9IdZiiS6PdJvk8XeLNiiZqMZg3mkhKQI+RrYBuKj0\nw3TWy5Z360Wh8MFkapEYKPMRwoE+nWDUV0IAFBq6acJO8hEnXr3EW5J2o8fr\nt9/lrntGSEvauZ7mVu3yf1foAYSdImu8O1iEnuxLnwzlkA/6rLt7fbt51R7a\nRvA6B+eP7xc9NNLltwhCTBQwE2JsRj/6H90IEa6gjOPMAQQukpmv5TsRUgpM\nZrwuPIKYJb9Rijd2q1a8LLyUoeNr/5pkUS9MOhYupS/irtYlXiFMvaXEoyER\nG4tBCJ9ZXScicSFSEYtKkh8cJpH1k5c3NUwFpiTqF5Q3yRkGo+N9XCb1zgm8\nl/IlPhCzebBs9tPhzzEVtLwCjytp6B3OwTJZ3UTzeljUO/KzEad8p4Tercf4\n5hyu\r\n=PVfp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.28d0d75bb.0_1629498053523_0.5363547585761621","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/card","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa5e510ed29d90dc767928dafe642911014f9b92","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.21ece5360.0.tgz","fileCount":19,"integrity":"sha512-S9zgYMDTCSbrmpw9Sr6/YgrU7puhDXgpRwKrtxwimLGqWQTxuUEWs+3/nBhkDlMb8+q8qT19Xq8o4dYjz0AgKA==","signatures":[{"sig":"MEUCIGW7GhoLS85zS6xmQ7FrIeYeSpwDkIyLuv9L9PCBh0luAiEA8UQrUnsyvagPVx7g3r8maM70AstwaJsh46dogep34Js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5wCRA9TVsSAnZWagAAMpgP/jjhsIUdvf+C6gcacQXP\n5vQzNLgtEDIkHqVnGNeC7Pt/U41NPCeLfVEpm0cvNYfKks8uIxWCTNPE/SdQ\nAagOI9fHWzO3/YcHWsBtewrJYgLGYTi7CklF/ssVHUp0GzXb887hQZQXTzL7\nwaFFZHwT2z3SKKNX39zfK5yZomn73ktk1Il59Oe7TC3ErToKu82aGg8w/pDp\nPfjxHku6dkrHibQCFUD6G4SY7siL+P10uyddPg0crcGnwESbtZ2hPpLT93JY\nWPJjScvvGybX0h9TxTf6t9Cts8iY9rB0MeIx3Evg1sZitVZ/+B/5ZnU+Mgk/\niKRMK/y1NN7lWuCsRalx0kSRWXXx2QIMpj2NbW0njck5BvKW6b9xJ/PRwM5a\nKf+DdZaydxAdf6qXrLvm9NOgKQBvOssH5tbXjkCPrCNg/4K0ZySKNx1jDLMH\nhQ4Fygmi1RgTP4/FrUEcHPoSugVvqvbZrrAZm7oAiw7To4bba458yS5vZgQj\n3wflsAL06okBC3i8Hq1JRhpqXqj4huJ5yg2IefbMEqBx0SSPW6dawDUy1KBr\nUxNqeng7FpJYIRGAf2ELOFfbE8id9lpKxrsXRSQ4eGVykZzUvINNlJg+Dknm\n6Arfkf5pnoeMp/xylZ1+nUIOYPVEQfpkSPmYtuZsArx6kodmGOyewEIrLCwj\nZ0QO\r\n=qUqR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.21ece5360.0_1629503088699_0.4861367255937803","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/card","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d09d1844b79079408fb5837f93200bf6ffe156d","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.8de07c02a.0.tgz","fileCount":19,"integrity":"sha512-rj0WuXFwZVSm6X0VTIu1mokDjm3djZ2vbgY9UncVRrbzjwgjVGk8B4EMyCTD1ZsFkHr8ZwSoge5ca/Zvnp1XAw==","signatures":[{"sig":"MEQCIFQGTFM5CXo/PgWxTxa6mQ3Cy1DqSvmY/Ipf0WnsU0m+AiBF8CWvvjv34a2bn+DmjlzNo2xKAhSXmLT6xs4GcTyiqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI75TCRA9TVsSAnZWagAAZ0EP/2A3BoQx+Bg7dYT6vuTF\nVgpzgf8FUzdLE5gqTgKdDIioUjncazy+qk7PBu60swyZDQlO+sN6CuZ34sbK\nvwXhmUakflOw/vNVzkb+IqscMCOHi/H/0WqxXQCho9JyRweeNXR53/3/a1PC\nanZDvFzhzTO20QIG8IX6kJvYZ7BuRCVeOLYyC04v3Y28OA4SP58jK/cCZOwL\nGmw3PxtzMDBjKcPIvKNTZ7FBBZHWqi+dBmGMKECPn+td1bmchK02Gb88TlqZ\nnCm36FGUEsYEEI/2f/ZaelUB77xyr+PF182ryPyBNZY05LK+TZVzwZHoT6y2\nr3W0iSuP2dJ54qFyBEI8w59VX6F5Al9zgZKfmyIq7yotfFm0QH358XftaCH/\n+EsgKk5+D8On9Eqo8tIIZwr4sWbiey//StVoZrjws7Kg3c0nOphe/Qix3qh+\n3EzjWaoo7M5WA+BHjWDkH81QrUYmuODZO8AUeG56PhwfY7SRPLR1psDzSljA\nKphLtlwTXQ5dnbDy8nWnVti+Iyx3zOSO5hUBzNKTJKbKFS24J7NbQzm1IE46\nYLDdeVIWWYRLaQ6tvJbFl0Tkeh85aWEpk0rd+c+Djs2qRZfFCVcbqFhiaCbR\n03RUAOIl9LFeKHRKx5GQwIolEVQ/H875vckqzLPD/vx4VhFHmoHskGWPkNds\nHnRu\r\n=KqgO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.8de07c02a.0_1629732435113_0.24031057337734074","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/card","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42b7818b8809afad1bb5a803c05ab2edc7d7b810","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.65aa63b0c.0.tgz","fileCount":19,"integrity":"sha512-Df/rA8qSv96agd6ZxvS/GAC7tjUVcJI8P1U38KSGM07bz/VM6KuGa9GTuEAJsKHPTEXlKQFVgLj4fDO+Ir87wg==","signatures":[{"sig":"MEUCIDIHnoGQnpvPswmQp8bmowZIZ6pRQ8/IMk3AXqjpFNi0AiEAsyMLOZz6f52jRxjM1QYf4dyhe1SIEQSyIss+ZrWfU6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBLCRA9TVsSAnZWagAA5RcP/iC73jpF5Uwk/FZG6I4j\nWFmEx+f9mOtxJvGQyFx5ePs0WSJ/Pi6ifvY8obj3CtSMmqNBKDR85m9kquD0\ncxFpnUDkMoKyZ7BmQNLD0L5Fl8bqviJdNJcVcPOkDKDrOsN8wwNbvbjQMniS\ntqAeZVz04k0AUTaxHyIa8/aoegqYrtY+fp8gAUbA8VqbA1hH+efAlIYi8Jdm\n6yu82utOh7Onk4DB5IkJSU2nVdZK0s1aShq4M2MTNOFmcRHPK3/4d9aViwgX\n4sCzKGO7Cxg7v6KTlERtqcjrWDN0fuztoifVQU85uOX1Ev62dapksc87JZ0n\n33mNED91ZJk1hw04aV2/1tPxtIsuCa6rMkT+EFwh+kmyUbzncAs6dLK4s45U\nnfs1M+sFTYSYuhuqFNHoI6OyYo89lSr1Fw/KGaoCmxR+FnvqSJHvmkjyg/zg\n7yr/QkaMuDOWs5e1I0VAhA9lIaF3BejkegbsCWJoxAGi8nyApBCwfKOJyeyG\n5OQQ6TAEYHQpUNDhAnAosioZf9+1mxCK4NB2xD1NXycAxDwmtNtC9HZbo8ls\nLIz/5yw/opRaql0XlaoQ1M9+kj8YqIks1zvGsTdiIRRTNhmsW8TotwQ4jk72\nHiIiM5jYHDrjbXFMlWpHp0g5AmcaGoK0THKAlmRB3u9l49kFUzLaxlmh0OOv\nf9A+\r\n=ntoJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.65aa63b0c.0_1629818955762_0.9041940223238787","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/card","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f02c3b7e4215f5951955545e55b49e07be18abe","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.15981e9d9.0.tgz","fileCount":19,"integrity":"sha512-3HfuRPe+TXrmFjy7T7mxlRMVO6eSkL0pgwg9fCyv1gw81bfaiwzpE8YxWGDSYv+r5OsVRfdxCTGwcgQdHMMc1w==","signatures":[{"sig":"MEQCIEHUx260OX9BvqOiAQYn1wlbEjBysvTDpiGAhtIv2Zd8AiAocYJC2RjZpczKIkodMJar3uIeRxow6nfRWCsDTidrjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRulCRA9TVsSAnZWagAAf9cP/jeakp2/tlbJH0NTLWX7\n0I8YhhKEU1dlm9FUkAsVdxwTSWxR1qFI6a8mIajTwP5w45f2BsWCXzwElire\nUIep8POqMFBIe29matZSTzq3XlcvqTZV4ZgQnX+q3p8UNqSSwzUWNbw98zQ/\n0w3g+bDgD7iQ27yrfDWIrvaqupx4t23/qitkrdykC0LbwIJ+y84NtoS3uRRg\noVk39+/3MkhFMv5lGavcGeQ584XlpqLIAJUuOnhQNAds05jFU7IhWU9Uzv/A\nB93TssPwWnmfujgp+/kR7qYvLWiOXdlR2OKn/mk3df6yfYaLIT0h2PiPDYn/\n/fcJT5FOxm7q8B4afeaJ8MdNGhxuFmIll80/hSOsKmDvIqhHGRdQ6dBmjD/Q\nJkB72nLlFFz2GiltRg7F6tLOMyguJnJFQIPJl3zqo9ExbNqFq/fDcc805iyD\nHCcelFd9AKr5Qiq8Fim0OJS1TJe67gJ/5ByDo33ubEXbKRmJIhumDz7RS8oL\nwhcp+clH64wYLjUTwJFnp5CCuecihMg6X2BeBhIU5jsS9bW/99G82Oyvg37r\nqy4KyA8tjCst0Mq7JaaJ0EPSqZeoOuejUUqhcE/q/39UwrsP/QJGxVQBH/R3\neZcLcUaV5+IWR9ypogd68ejT3WSmkTMZIehcKSMH2pRtHmmmcr0EWWbn/8sQ\nZIb9\r\n=W5FS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.15981e9d9.0_1629821860986_0.6363205366468658","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/card","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30b085f3909b4d1a610b38a3a1649a346117db48","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.fa7520f62.0.tgz","fileCount":19,"integrity":"sha512-cFcnREhKLHJqOmgIqIvw1SztyDdf2jT70Mog7HzHFQHiUt1ho06DW3jQOn1SaY2y6AEmRc5jUkO8L7YzsHwtkQ==","signatures":[{"sig":"MEUCIFO2Jlq2GDuWWdeT2cnWlSajo9swzCGsD0d//UhrPMRVAiEA/D/AgeoiByuOvmKAEtvx8YBox+IWFfhhpj/bDoKoH94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKKCRA9TVsSAnZWagAA7UAP/i97tNaYhcvuH45lOleX\nOfrW1QuLMDMOiujFA/WlQ3JEudM+53hQ3+vAj/5912mwGW+iqRsUfdQY6kHT\n65cJBvJilLqRP6q2Fa2N7sBUNPqqzlpfnd0IDfGrfum7Bdl4lDD3BzGHGp/S\nFii/SjCTIJaDwXmy5eQLcPRsvf/AU62mzPjl3DAxUAtoO9E9Nq5tkJ080p+H\njePVAH9SUHvSRqHIwEbQeJW9Ru4pe82toQ1GLNwaU/gMqhcFbRxcrKk1j3Zr\nPfv+mbDvGvxTBOf53Z/FT65eKv5XdqoPdCUbqdK+N9wOaG3etU1/0vpJrceg\n9j02w9Xapo/j7UC8yG1xRmPiMEguM88HKdWMfGYarAYu1nD0g6ty7xZoHglo\n76x83lHKanYnx0Ql33/I0ECtILnbBNAFaJXzkby6Wt5C9BfOr57Xnrir4DiO\nQzezc3Md7k5jtYfMVQ4dzBKilqTIW6iJlLJOAifERXApFSZaINzt581HlseB\nMVIA/FajPM65e6Tn/W71QpvGwXXTMEnPS2YNdWdcms/IBMDVIAXncyH2Ydpu\n+18qxzFmivamvV7lftK74Q6voWlTIfcnRdxalmoXTOww7/AukG/Yk9fFeKtZ\nzWdGTqovcoN1bftNiEbOWB0TseNaNn+UDfJS5vASZMHbDRtp0tHzSvU68VWB\nKiQM\r\n=1fGD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.fa7520f62.0_1629844106272_0.9728300444669353","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/card","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32f7a0b4508108f144282072412d2b9b66dd6712","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":19,"integrity":"sha512-dmmxs55ddoxjVHurMEkSQOmYeTs/ufLBZU4FSvmohQk3AnGrf3TYcqxYDePfEdvpRL3XfIAxB9zrvvTJe45Edg==","signatures":[{"sig":"MEUCIQCPnXBpUAgaNdfyRsRrU4KIfvGCGORRsfoWu11UaJrAgAIgQ8r4GW+m68ZpMLhr7YZerNFOhYT5WhNffhKOHbrPgIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdiCRA9TVsSAnZWagAAPs4P/R0ojDWmfBga1nrHK7N5\nqVYEOBLG+XuyCDUUpIRneWsZ91PDr4vN6Tg8AGgsIGsAtX4rKGhDnG6YZNY/\nD+fYjHo5tflGDq93b/EdKSQ5C3PwWKxNAS6Uo2OFfy2gkiM0hHGVA7mya5ne\nzSke9ZrfZaQTQkryz4NPVttQAoI4yiGXIKnKjK25qCmKZL5egyncJa78mo/H\nmTp3rdCK8tnyMEd7UgzMXFotISDkUwOU4vrwqXgmpu5pW+5rK4wLJJck5/42\nQ7rKMAzatO0GzQa0YRPlqzdzua4ICvHNRLkZUoNVnSHh4Mo1bQe6GHfE6P9z\nokJRX+XHGVQoQThKoK/WcvocAFnhGUePK8PrpjX5q1nM1SHkFQqky46A5EFz\nH4ef4zPpti6mJZdPiP9Ekxd7tV1IGC9ZsjqGEYAL1/8NsTd0ayYb2zy8haOT\nqbFsfkK00qlkKLEmHYvV/BIF2OuX7E9cdqnI1qlWY/np2Fan/XPZohFv862J\no9d8wNDMg7lXXH4CgGKMPCpMc0yFxahAzkiPalFTSdCypWIZ7fzVpZTLcb7Z\nzI/fIN+zUCBo81GaS6FNeoJZMIEwNQs0VtM5m7w0BfeKwuiFes4jeCE0bzV6\nITW1mcy3O+LgUIa8hzwvy5k+QAwGY9iODugR6xzJwOMzZUU/BeUdqIWaZrmB\n+9Q/\r\n=Yffk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.ce25bc3ec.0_1629845346554_0.5299001130501948","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/card","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6bc2a099af9bc2d51dfbee3f79fc7ffe0c0c24e","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.12f5622e1.0.tgz","fileCount":19,"integrity":"sha512-oH9y/ks5LsYRbEUHprSydexUCOdPOH9/Trvj4Ezqw327ujzZgBFLQema/VrKga2PlPUGgTfC+VRK9+ZTNOPzOg==","signatures":[{"sig":"MEUCIHsBt+dpwVhf9w+q7lX0D0pO9rl9wnje0r1QanbdoaEqAiEAt+LM4X9Q5xcXOk9WWKfOQQEJKcgaJbUIFYVGuJp26xA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5TCRA9TVsSAnZWagAAIFkP/3qvQFH8K8qiE0wqsqR3\nbcBEXXsuusm/wcgxse3BIjFX3uhG4CEjDZX06WHnLyUSe4m7PsSjX4ULokb9\n+5wUtm94t1oFr2iEgDs5j5iKXbKKF1nvYBNKfp+Zp/nxTnYidzbNH8w47WeD\n17ikqEfTj14rusGysMtNdSNBXvCx6M6O8DiTaRStpf3+XhnnvFlmyTLV9uaA\nd76rMlORlTZOVXAy0D70eSkhJ/DIeZogCN/B4WHubOLhA76N/KFmPso5rgn0\n/+0jtfX7MoqGkQe5FanOjKURJLbUJauKEQXB5lbciUXIod3B84xCP4W4hbZp\nOsgI6utbhsHYdaMCCuiE43HqrY7f58gcDPyGcSkdYCA3fCMZ2laDRyaHza98\n2xVx2PxQW44cscfbSL44RFyNSCyiA0ftp0moBqDhjItMqUvE5rV3sOLTRy6i\n6YgcVK7pquhGs36K/cgiq8/T8+ag9mHuoF71xVfTIsj93Qb03072kinQIc1Y\nyJyh+OX/aM0CJyysFjyK/WRR4UUGef/FkR/BiBoePPVX9tZdinKIAM/E+gIZ\n2RIFPhTaKtCT9RApUR64ezvcKIcYydGDBQMZFedCNMhmR9pmL+jMP2v3UFcu\nQQZNipa0y2M2Omo+cFdqFl9OkxdbcEuRjUw3yR6y4/Tcc8o1CY4GMOsqAsFn\nOHlY\r\n=1iz+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.12f5622e1.0_1629847122975_0.5383080868785945","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/card","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49ac102752ecabae4e4e1cdbe7337dcfbc9a75f3","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.d97f8f133.0.tgz","fileCount":19,"integrity":"sha512-jFlh5J533PKcorA1Eyl/UpDiTVzAUJCwMlKXVjZhIwJ5mqliWBwu1ZqVZuCtfpTxcKUcW2pT2m2vPE/czF4T/g==","signatures":[{"sig":"MEUCIQC4ZjDsThh/dQ1BXhkIMBmUqVO3p1xmi4tSbu3lBJI50QIgc2BcIfRH3f9i2+4xqUxCh7N1LuRT9teV+qJs/VSeExs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo0PCRA9TVsSAnZWagAAWfEP/iaKrGAL/7rGgYYavuzO\nwZ4QhgAKJ4QpVqetgaepdB5qfySv4fYI5eF6v/XdwFDgbaqMHY9/YgkMYnhp\nWOvlxHLFpLQ0HLxtCFZ9mhQUcvcNyxLf/YkTJ3aXL8fuNfCilUhCk5yHx4lT\n7YhIW+69eBuBlJelR8hoL2XMqWurVG52tqWJ7NeSV4PxKmLtgoSPrQKPkEzK\nqVzwYSFqUEDq2vAkCbiUBkNayew7T5a9ef/E2VZBljGuLK66uK+XBE+6zJV1\nF3D2Ev0D9jkmEWsMmE4xqpUNgobZypPQAKUduZsh/F52HIYvbCSnTKymqj2M\nls0QimkavUsQ1SCQLO7LMgYNZkj7m7nrWYIrEEUMXF1MLmVbA6JYKALg4UtJ\nZ0ut2s1NXQaUwJZf8/A9/JPyzjBknC3Z5VkNiIKibrQC11W2BRN4S5wB8kCO\nvPdVg85Z09R0TxQI8oHXzxdohT+9ib05zBRQm+xB+vE1TFC87cfUcAmiXJ0P\nmtVesxVtpQufQh6THEiyyre5j7YJj5hA+P8X/rCd/3Bmn1n+7a5YtNKDXbAC\n+EJfVsF+vlq01Reh/zcABlJaicLR/afZtDoSfTJzDE1wLAPpjrKa+MOocVmU\n6J4aemunUPF0dcOPCC3zv/DHx3Gi4+Wc36qV3QGe/11PcYOSKdq957XfQDim\nvyLD\r\n=+DUg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.d97f8f133.0_1629916431515_0.7824043194450123","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/card","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbbd473fd0ae6d5b95d9c7d9881fc04c78c3d9f9","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.d86fb6fac.0.tgz","fileCount":19,"integrity":"sha512-jk96f13AtcDRJ21m4cKPluryWhTURvf6lzmIcyUfXq0+ov+CgU/9oQ+IhqxXepvWp/9yGw9BXySPJ69y7KaEaA==","signatures":[{"sig":"MEQCICMruHufqi+czljYi+2iRVVKc2YbB6zDS1jkBN0KqAbAAiA1ix9gCmfnx/0btifzjLJLiJ2mIdbq/toleGSVeDAJnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHcCRA9TVsSAnZWagAAcygP/2XtaOms0FasI00kcf7+\nlwPXvBeobVyFxjXdSxJom9Btl3v6yCvZFUvq9DQRoPLKUWRXAxl2QC6VqrDq\nqtHDQnPiSDBfEO7/PijKgknWWn4InTOsN7YtPB+jdIZTCAIAhpKFyRobCoVa\nB2wuGRHBGoQnKVjKTVGKgmJ+HBUzM8D3wzVjZMhf6n6UaJYKWfI8PvGmL0qY\nvodRgL864K0NjPv73TIDuMbleVDfib6LVgTbK43O/UXVOUc7RrTIoiM3IfzH\nZgq5A4d+3M/yXfY7hPmt4Zky6Ti4hro0FBAS2Mnt7l+1L1hYr2MM56QnWz3h\n1v7DyKekrUUOvgEDj6dqx9mC9DhGvK5CaK2WBMMU39bJSNYABHt6iRHi/4Zz\nNM0a1lbTkFdJ2cGephojZ95uquDGDaeISNudsNnyupGjYUDDAULqa41TapHx\nnTQVYSAuHNCkVIdHNO1g1p04vW7a2sWkRtyOCJuOXvZQCh0BKdx2U9VvYr7g\nwBirl6kPycPpmgC0RjpVdGOSir8rUGzNFnLSzz4rWciwJnYhiFItO2Li8Sbc\n7t9uSviR/ApWdUVH7MJ1JrnXt8+x32hXEp7zrNyh42bfNAdtDUM/Bq15ePXH\n1yq8673AUOcA/j3OQQl0bJ+ut/65sVmqvjslABLKJLXfiL5g2jyYonbGLWCJ\n6wS/\r\n=aHyP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.d86fb6fac.0_1629917660632_0.00019626635858926988","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/card","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"217a80d73ad8c3bd88ce5f691354f199dc39eb8b","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.e8554dbbf.0.tgz","fileCount":19,"integrity":"sha512-1lfPh65nym1tFiGWPJ7o6tm727kJt3Yk8Q10EJ0kyqaY7nXRBUoA4kh1LCSTzk7Mr+pReSZfNxTM2gXRK7MTtw==","signatures":[{"sig":"MEUCIDuxpVozoLeFRX66FoLOe62k7Gm9cSKeMEtVgPmWWsQaAiEAyl9H7w6eLwrbtVlOIl7Y2lXCStCdRj3I1llz7whui3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1gCRA9TVsSAnZWagAASzcP/jq8WBulDMo18AeIxGiH\nwOvzMWQSRzKuqvw4JUkm55y2KE6K5iJWidL0ZoyWLSyRwtONnBZ66lshu/1d\noAfhfU13nIJVbGPG1Srvcuy8T6QYWdB9EtuKHCdotxifgdpzX4mYCVNpRynA\nPkgqDLhXC9IhQJ7WMF/oXCrK9XhEKzF9dsKsgB5+o6lU4IPoTqzZCYeFIBwO\ndFhapt5q8em+GKU64hKC30Hkrio0rx5UziY9i6p3/J2tgIxEOxCXdEq6vrEZ\np83FhRPtlqv4xmIbscBEMGrotkEiK7TmlMpzEWsRhc2zqMJ7kZV5vqByJc6o\nboDgWvZqRaPxwpJzTu1enZSVc09VYfKS0xWs2YY+mujwAotuZMr0uYcsxZX5\nVAxQYWQ2xMskd9u6bM02dDGiWiquR45SO/WtjpftjPGZtRcn/tZ8cjWrF8Ea\nH4Y41QdlB9TTM7JgAwS1l+Tad5QWifq2aaJrrEgR06z8HKlGnjc6x/dTZr6N\n2yqnO0mkpTi99CPwAf2wtzFMth1FHOb+YQl4sgdh/YZGdOmbtwpJ0OMMeIDi\n+xGA4hyuMdGlvs+YL8v9WIG0pPyvQHZ7ZZa/rZRA8cfzNiGy/JBNepW2qVlK\nl70DCtHk5cGw2d2zQc/9mytSBszjomwIDVdHRQ+8pVxpQ/stBfkFDXQfVoKk\n2gzw\r\n=B9kq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.e8554dbbf.0_1629928800670_0.9928516878365452","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/card","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5bd80edc8f7fbca266e322f68a43561cb17551","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.877e3fb0d.0.tgz","fileCount":19,"integrity":"sha512-N12+9osNP00mobWZ6K3hOGyh7ihr2jizFGxFhWgNhXX9qlr3zQ0QaRpretVxmce/XydnIFuEwlI2kAZqbjYpIA==","signatures":[{"sig":"MEYCIQDl8GVaCGCeVHSpEm2NLY4HCyyd8wf88gTgff7PkW6/3QIhANOgLr1tbg03m2gmrYVMCfyZj4qr6ZwXrICCHy1aBm1e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WICRA9TVsSAnZWagAAiycP/0+5gSLaVnf/ibJf3BZ6\nh1S1/Rzci4NJ0EWf6l+0Fkege4mku84kPi+N2vKY3XTzrRQd5Am5aA+KTBtw\nPc+pi1C1Y7UpfIeHvPQy8vesKVdrogrAE9KNf+LvCdNSU68r1O9Y9QMqQB4a\naMzGI+YsiBbgmmg5gUUSThVTnStDszD5c3z4Q4Xj1NMTS8oM2DO7Op/H1y5+\nD13Qdmqcf8HBzrGLy7Ngz0GquHNjoIpqx0S/hAPv4wiOLyf4sowpSVEBCoQQ\nBmBUANKoiRzBM+rv21CISMRxI7qvWMp1HnOMC2/W8AtLN/bVQdup37RzVFYR\n1WpUQbztlDV9WvcU8RkVQbGR7QcI5IrLhb+znlTnu7EKdOO9WAvN2TQozS3p\n+4wwClcTUU1n9bfCsjXYeIMcf3ZCOrZd5uDoEKGaWt2yd2+zcuFnwRruuIi1\nO4zElGpRjXtCd+e3DlLVtE8Mo1qYb3vz7CJ6kZx4Ir2AHlcshsmxMJQcx7FY\ns66S9HQKpVxXTSS8T0Q0zblNsL3u/txkyKLQbbOFMXysKLnkSahkdNuOeR3n\nJ1auVqYtw748ToURX4VsKa7k7uEbhZaYhMNf23m8ruKmJWaPmCgbTWc9Hcba\nUPhHt6ReBskO75BLMd/rzNmRp7KhzQptUhebQ4ZRJxETQxNXSJZQndq4np+K\n+CiF\r\n=1E9d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.877e3fb0d.0_1629992327895_0.16625283569208493","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/card","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f828bf053e40b1bf266505dc7c4d676b4188a811","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.6236f3576.0.tgz","fileCount":19,"integrity":"sha512-8+fsea9HPBTC0Xt0SJy0Y2R/4xhw7GfydKsj2CMe7mfTL1Ca4iQm+o9Xaxeegjd2kqrSVMArv/9gW9/ln1Njqw==","signatures":[{"sig":"MEUCIGYmwSTCVkFcHZ8EEo/BmpIDsFBBhQ7UBmh2Kbckx4GBAiEAwhXpNHbET5//ynQyMhFK0mw9T8ZXhLuGVxbo6X4x0zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7wGCRA9TVsSAnZWagAA5xgQAJ9hqvJplP1MsuWQKoEy\n58PeQZd6Br3PihL0arkHzzO8JCdxwVGuqbpfd2a9InDviz0BMHPBIQyjAwr4\n3iofWRILGvm9K7K8m/bS0xuNKuwsPbRsf/fYfU9Hdq7aN1q0jaEXqJGv//xs\n7/MDOBhNBDln+zwM0PYoBqDl3oo2spqH84inbn0SLNfZp/x66SoMD4KJ/WkV\n4SiBjTPI1o8/evYVjQjO5qikSrkbyfEQUiEmqgF2UrIqFTsqEXsqqNIVih0Z\n1MBGNUhlOIEnO+u0jkrbhpBnhZ0hRtitZuEozklSNK2Q6QtS6OtapnyePHhW\n71WM1fE0+yPKu4FScxCkrmPHntsPcEW5aXlltdjR5RrFUOymIEBItt16doUR\nsJjO8YxUtesWRO8jtXlcvsmtzKCc4V4mFN0JIQ4nV6TcewW8zCGs52XQAbhQ\nRq2IeuGUZOLuYGpLMVbziPPWKRpXZygouC0wEHxSS8TpNaahiOllAIYEa6/a\nblAJqsc1oxslqgAnwL75U2yIuTPez+EQKqMT05qR83HL60RQ9zY0FAMnaahg\nuuLIQ7pZhxsL5iFRhCce9bcfYSATIK8OeAIy4RPa+F84mqSerEXdMdlfk+qu\ni2VmdZxwl90t8bYktv6uukaMdSw7Ey5EeLATDvqSo02CFNIjERsinAhIyB2F\nuO0T\r\n=olyI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.6236f3576.0_1629993990290_0.6467235909008966","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/card","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b640d44afe2941af35ab194e2fab35d0c352fd06","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.1d19158a1.0.tgz","fileCount":19,"integrity":"sha512-ND15oe1jrzS+XlkHoekFelMdW8ZPIN8D3fVLQtqtfDtLRgPERp5F2MhQG7yZXp/eNKsxeopTunwrpMdO7MDTGQ==","signatures":[{"sig":"MEYCIQDLNZy4wjzWEBFaUbrrSHQ3sMVmnv3C3U31TNhuCcLGjQIhAPZmNGXA2Gp7oiQFhDNHeDxZBsBBZJHz15Zgh0SrgKc7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8rTCRA9TVsSAnZWagAAglAP/ApJDxFR4w/FAelOY7gn\nTSXg05wqb1C/Hg0ofZQEoz1TlMIc5cLRdnoEEZkgdIYNfzw5l5rnkAwOJOIi\nuY+dqU3kN08FIupzursJHfcc//uYHZug0Cm8SbPAMp+3EGzqpKGg1cnwoZVX\nufcIeCQdUiEvLg3YLw/dLL1YDGUrQ6VFsADQf89GR2a5RC8PUPj08aSucqXZ\ngaiXm+8M/b56m5xW2CJ121bt1AkIEu1OOfNlO+RYD0HPZV0608xz3+uEatjE\nAC2/8oWKuYYzy1MLbmsVvD8iUBLpcWbEww2SXbMwvEE5MdXtiYFUPj/tKaPn\nhT7OiyDy3ERx4N9lez3DuUlsxNaXOoGHAnARYQtzrMuWCw3WVZIVhsCnj7Ct\nm362siH674H/ezX+irlTjHSoCEAKMPur6iG+ST5v1RGLGU+5RSi5NKXSj3G1\nPOb3xTwBxY0fDV3NmLzCbEUObsVrOxaBN+DORf7xMpeClaJ6sIBCmHkQtdac\n0Cn8+zoNo0ptfx7WMkXe2h6qIf82dvCCwMI+aE+H2HjTfh9odP7/jg76C6H5\nKEe1Ccb6Jb4w4IhrurkEAb8mfbK+TgKyJDXeZKyMf09sqOetf6CyRXwFp+Nx\nX15fRmkNUxFf2REfOIicEPKQDBiJWW0KqHwI+0/poDeqk8oEGRoONKJSavi0\nbQv1\r\n=OysO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.1d19158a1.0_1629997779597_0.6295099375998947","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/card","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34e943da06707f0d1d83b229c88f085677cd5eb9","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.6adc9e83f.0.tgz","fileCount":19,"integrity":"sha512-NVLbHbXoswstLvZwoLLznhtyMm6jvRWoSRKNC8pld7LoeGp3TjwKNPDmmCLTWPVBlvs9ucXdF3JDg9PVy8jpAQ==","signatures":[{"sig":"MEUCIDAGVcKfDRHPh3SaI8l+qldJMgvioiPQmBBtvTQCBoiKAiEAjTBvDoKz7j6RuIaVXFEQ5v5UzBIRH7mtbc9PRigkK50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9mCRA9TVsSAnZWagAAXLAP/0t/EtPMCydSZqW5BSaW\nzPP7Cz2LJTLgC40S6ID7I6TdhP7YHztQbmrbDsLOZKF6qBDhlXQw/lvhu8AI\nKPiKUltL/s8baOIDUCtBJ+ksmDzv3SaEwNKEx3WrqiexjfVBLiaAZ/Ut3d3V\nPIKWCvMGKVKZRTi5NYNed3oS3rPQh157Zmn7ntYgvn5eSlzx4ao0zi3JIWCd\nyBh86K6Hs+DDP1NgFhoJy+sUquxnLQdzYDsGL+Kz7S9bwLCYTcr27RC5zfYA\njp9UZDFtHCqspaRv5k/WVH1mDX56GdAorfG1kDwPzznthMf4fNspzoGOJQE4\npms4Tj+qUSLChrdY2XiQ3CkFEesHJL5KCwZS56ZEOQ2sKLn2fE5FmjBnQbZy\nIVW9C3YQmTGjvTfIbfmrF1jplRux7Hls7Mypo2hgSTTokjMrHob4NKHJ37lo\nCZYuQZR0EXx1nPqxRZDYEbHLBAt1zym8P30ldqpZX5wi+3L6B7lvUUMmvn6t\ndfr5/W2FQLdqcZdR0hPDqYrqpSTJqfBg7XBuQxMLEk8iqPWY/+Ss+cZl0LmR\nPPhhawoPozyzCHL2RI+AlESjbTFWEMxD/mXZCPdWcgq2bpc9NPj6ZscY4l24\nwtq8FK9E/r3InRhzSmzRWf7I6urkPK/a5Vq1+q63O0y42r1SVQ6brt/7wC6K\nOpWA\r\n=RHyR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.6adc9e83f.0_1630363494043_0.44528924205039644","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/card","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d0a067f01a381dbb8dd69c756c68386eb321618","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.d082790f0.0.tgz","fileCount":19,"integrity":"sha512-p51U+9PPaphF/3ggMbi7A+X/Bu/bBCSiQVII+ktf+FSfEKPkbpOH1JSEWsOdg5PMbTf2sA9W+VY170qWiqrxeA==","signatures":[{"sig":"MEYCIQCkQKA9TXv9Hd8/hYDrn397GGwCYvhztdIMrwRL3TkUHQIhAIp/kk8o5LPMrir7KMp/YmE8fXW0w0oVR1Ag0sldKMGP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/avCRA9TVsSAnZWagAAYzwQAIMhgFogmISbUhZ44u/0\nxB6JvDbtJPK7sepz2EnSULCPC/lM9nxBK6na1HichvLUSLDsx6Fg1dZ6Smvw\nQ/uc/aUL3uZebrSO6boUSZRgFC145riwitpP8XO+S1JvaZaZ48Q+XEp2pivJ\nZUwxgWQ7IUcKceleiHnDIJQWHek92FoKKo9sPzaaGJCcKB/ApxOpp+zFTsui\nxvkSnO0nRwh62IA1HNbikfWta0cT2l5LOvi5ZfFWqMzuxv61WMKEpv2gUDbU\nVsTZev+InR9JQcfFTPAkBVEWD9XNY/Q7DWyJYySWXWqgynk9bC6UklDm8XEZ\nwv5ILGQsLpezg5hf2LCTm5uKUEit84QatwFli1k0irv+U/EVaNsEMxFYUUXt\navo0ms9wzgkHdA6ZLtFUkjdquBgiMxoEo0jLF3N3vayp3XtZ/AHbzFzo7oRl\nXNyaaTmyeZHtytuzO9NhNIuTnNx+417jGcMcWYsEPuPxxvA27PdSwgeUpYZ4\nwJ6Z4a2a4cTAULKX/V0Owx6s3avXfxDXiWYGSQI0q7rgyNWofQ5qjOAtw0Pt\nrke/Yx/DyXFuoCPtw9nmy7JxpqdIzCIrqlcZbIKH9/EcFzCjUis+BhgRkxZM\nLwthTIiUDwGnq7GOVWRdDMyCeDwKhqLWPIuR/AEWbVvxyq4WA7uKbY1C7/wB\nUbp5\r\n=zSHO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.d082790f0.0_1630533295707_0.6983902781496634","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/card","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"035dea70e24d16757a7421a66c8a640905f81b18","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.e2c4f0196.0.tgz","fileCount":19,"integrity":"sha512-qy3iN0KOYXrh/0xSTfFfypWL9wDdXJYui1KEYeCr2aYGwE+Kh2izcmhtq/kdG8UTI5ul4bsKW06ytxJ7qUH9aQ==","signatures":[{"sig":"MEUCID9J/5kDYS+9B/iS7aPYv9muWZPbkqJMizZRbz7qZvQLAiEAhloQNpDIQWMVMtLo2ktWt8RAzNkWZH+C47VR7uQ8RFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLxCRA9TVsSAnZWagAARcwP/3fPDUx0aFUHMuJf0r/E\ngowd7cyIoU8T+PhB/JNSv6jtT8RwOg8apQvLuX9tOcJF7sFL8Ia7d26+3+2R\nBa3DfDziq4RZIbCJmciFeE66KFbaUK9csn2csBvpIhnRko06e0tztDtxMvHN\noh3/lF7iif3XF2YwXVMk0dq8sdFaFt5vyzbF6h/6t+eFlfsxKUNKk/H2lLV2\nGc9KTVkh3ZcFShS2Nt6t40zvZ3Qa0E8WY2un82lWGrYp7DMDhlRLOiooTJOt\nHk5k4DvF1zarj9tPFDhUEkfK1JJM++p6OcIZ2KZYB0KljWWXpUuckV/3XxvG\npP9psIFQvW1BCs50UXftHqOrgmo+HH1g2ulCiS4l9wJJhB1uAAxO1eiJyzX6\nDR7Qlli9SFYoCYTWPS34yCP0dM1SVaw4TqLSz717sD1G/UQThsx2LpT7k7ry\nJxffeCUUQ9B4tfDW1MqLbzR214aJXvbazAVD5HO5MkWSAJVJ0UfZR+bztqgc\nRVNxb4gDghe+JbHQrZ0TQKOIny8x9pbu6Go7n0sWZr7U16LZ0YVqs13ttG5O\nF0XjLbwDMFuw9uqtTgcF1bMGmA4qSv6WFmZtWOlzstq73u9ZQLO9o2ieMWVd\nXoG0ltt4pxbWhXN01IA/OdvMhC77t+ekWkFDpYZzod42iQhIt6MRjYFM6wjg\njd9X\r\n=cDrI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.e2c4f0196.0_1630548721168_0.4457267973634349","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/card","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79f5f87e5760e6dea2cb476947cb7c622959f11f","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.611db508e.0.tgz","fileCount":19,"integrity":"sha512-9xbHOjjQIeYhBYOQAzX2sXm5L4ZcIdcoTK401InW1Iv9AkKLoUrnbjel9CchyWpa/LWDpAIvGjaLM95FOgVjMg==","signatures":[{"sig":"MEUCIAJZUcOJRop88E+6g0mE5MXqz2+XxIq5u250TsJGepe5AiEAkKbV2mdTXFYg5KKZKjXH+934v0Pf6ifSjpCKzIwz+n0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEHdCRA9TVsSAnZWagAAMooQAJmra05py0PY+MNahjrj\nUcar7AR1orqDBiFj4yarsVS6QFQCfBXYUwDbZDr4EOR3Hc9D15FjFVTwv32E\nHu9PdfWuySDqKXhWWO/JNS5JE7Saj7Qv9oPGKYFYWsciiBDhvZbJuRakw5lT\nq7GfjB1O41JTIu33+hmiXLuobh2yx/ZqMPzjbROU6pZKyT59sy8vxnRUoaFm\nuoPMeNPRFg3RcPrcZjVw4iwNwGAIJ5jX3ybmXCv5VcYCI6CUiCFGdWPWJNtZ\nGGNn9hto/faMZWzIpjTwG8HlNeqGzjl4NhZaSgoXyNqLv3FYbVeSMqefTchI\n/vmccxFEQKosJBbI3zqC+3l7UIdqRxU4LnLclCpVzwmahEns0Y1xIosDpyZ0\nRbUVvh7c/WJm2P5/U4YyJZc5vy5btF9G1hnkkftKDi8ja3S+0M3IUqCX70Fh\ncESLgtYm18sBRaydv7oG/7BLIkIX8ZApkBGM+aHHLLFs7FanpEOPxykSXoHS\n1g6/0Ob1QudLiRZ0xSE3+bG4Bc9ldjTptToadcurd4m7IQ07TOHo0I8T3cp1\nohhvtekLcd4ZxeJCDd0PJ6i7+fmJbreko9RikEM9De7AVGPOcfB09Np9Tu3A\nGBqqe5Aw8E5NfV4ROUMKAhSfiK7PKInu/jcJTlUFoGTWXUWIRIJ4/3e66+nY\nDsep\r\n=U6ce\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.611db508e.0_1630552541417_0.5628837449572122","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/card","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2271e51c83eda9e35b1951d40562f6c922586821","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.d4706933f.0.tgz","fileCount":19,"integrity":"sha512-VFo4W2EAmaRQydSGnk/bRBfu5K2PDbsIOkpCeg8lnMCzO9eM1aY1TAgeqlOsdanRSMfhSr47wyrhOoJfXoPf7A==","signatures":[{"sig":"MEQCIBBsSq+8ZxNMp17TAyGVT0I49L73KYwntQwRpsSsk7f0AiBk9ilCsqLjQanW+VSI1W7IXEZ+6vNQHrnJLgMS5txz8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/uCRA9TVsSAnZWagAA4WEP/0nWKVMMYr4nUDZ/6imf\nAJPCiwubqJzPBLBRh54tr5u0yI5bU5l3gG2xnVd7yxVFBxNELZePO3wRRc2c\ngMXhin8CZzvqphZeZVhO9hy+j3h6W1AFijptt1Sz232kTcYvwXattx4318Jl\n+u76kWVanN/xBk2X+83m0PO+rGKysBOGVbSJOLvZJdN90rGgQeRrzCkCyGbg\nXrsD1RLieG2hxUYYLqMd8LSeyk8G8pdnBLS4nPExB4QCM5xf1+BQlZVnDY73\nb+tA5U4EPZ3vXTEyIPmrx7Z9IVXEwVtC8Sv0wle3mnWtPdNgz+vaQfA9jEhN\n9kfa/QtH3lCLyrrFBVGhkXrHOM5AWwVDQGx8zDkxGJHAnSrskc7FGJkvcNM/\nWl8H4kxnQkKB8+h/2YvisMOlBZI2sssA3evThtYlr2gehDjSjX9RZwI1RSz6\nokw4PIsYLn7AUX6yum6Ljgjf3UCyf63XU825wSSgzIIxn26Q6/m75Z1Qq5Sd\np94kbcx47LGSa3g0ztoedJDncubgL9/qtnV4j/2IRsWrElrhPezI7rBgK9k5\nUCvfEOwHB6tQeKuFTneICXx7GITxloprcQiHJpEfRo0ybaQ95Kl38ns4Pu+A\nEHoDTN7AtcFa1fMpignjRULobo+3c3x/Kjz19w9nbrzWMWoJdrO5h7uSi332\nMqRv\r\n=gI6O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.d4706933f.0_1630597101929_0.13028154376404943","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/card","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eddc08ae134af98da223a8ed46dfc9d9b65d509","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.c16fe03ce.0.tgz","fileCount":19,"integrity":"sha512-hrn/Qv9H11E4H78aO3wKMQASsBu+8fnmdy6XZg0NbgSpq9srUHZ/MrXA8lDZ3S1f2+T1il/m1QNhRnwW2pojDw==","signatures":[{"sig":"MEQCIC9ckv63m229A06AgcA7bvMHD8Wevn33fWaKBccif7/WAiBPLonRlv8vSKtRQmSrRhLEk1SqsJhAS2xZ5ywyO6AntA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2zCRA9TVsSAnZWagAAu0oP/jWAgIH/OqKVcuB6Xj5P\nCgWyrXym2ZA2/HXa1ArvyIKHcpZgzTMntBe1BZK01Q/zc6AEuY0NG+ykVNr5\ntD/Dud8oHLr4LTMBRrVDcswuBcrW8gf0cowC+oFheRkp7xzRt3EPqUNNgW1x\n+VZcW+YCh5dDe0N8t1/LzWBdv+AcNCl87uLPHz8KZtztJwnuxS9ZhmaUIRxV\nEK+VzkhwE9j8nP6uzoajYDqZdSSDtAKsRM266aCOSkLhw3jr4sSdPIQv5D/r\n9ZnAzHQFx92UiEDfFwwBdXEI66UmCtidZWQx246yFyPuqmOxvam/r4s6nUdI\nVD9IJZkBv19AreP2DxTAlVDHRdzO8EXIgleQ/4ooUtMAJ42i9XqI+EgD4/ss\nne4V2CnaYaFx6EgM+XQ/uhHOhz6UqP+b7OmevKYxqAQ2GvmKuQ5Tk2zwaUsT\n2cMouid56kNIV+IRC/44muiC3hSASmkgxwnZHeM2mnIq+Ow2dDWcL9ZkdfU3\nBXYtrCK1IVYi5PY9a//skwSyeJCbGCpDn5FPk2JLnQkcRkoPUp87P0fsRs0q\nfmy6EMIZ0ZmbB+3qfxjmyiv9LykY3515sUwYw75jw5/AAXblIO01u62iXw4P\nZCa65nQ0ABxxotIMmwF8ilPeowcfzezCWqbShUlJKXk2iX4qoK0Z8YsTGCcI\nKfU/\r\n=acve\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.c16fe03ce.0_1630604722804_0.5381270256907862","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/card","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bbb917aa86505490a9fed43d36adbdc838dd7a4","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.9203a958a.0.tgz","fileCount":19,"integrity":"sha512-HmLyK7WU0fSdSmoJ1sbMkHeOPGSsk3AbzqECZj5cYs4OHsjuqSIFmeepiZqAQ+2ZS3wPoPOpyFEkqZ29uU0oRg==","signatures":[{"sig":"MEUCIAaT5dk/wh+ydONvt0RjY4KYsx3K2yZw91aQZ8ZvNLskAiEAycAPB5hp5+6jWo08y+ueY6C1/3937CFFb241PMQ2AUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWJjCRA9TVsSAnZWagAAvnQP/0OsZiR0lUTaW1H3CfSl\nqIK13/6pgFZKBSmqy76SIkFeDkKby6Q6+4+AVsuQ5+Gu41m/4OGmKOImHWK8\nXFqGdSUpSm4yNRm6XoK9VqtNg3820yRtFvjLYaKhcrxt9Z5OqMOlHhp+z5wb\nQfeXdiqDzBusPHxH7nwMV7xNspRwGgWeZ4D+Y/gO1+1jXI1jo6gjgEV+tmT1\nB4/Tb2lCQpkow5QUTTfEiBIt6tsb70lacQNZf2PYr5En76KGuoyA67TK297R\ncjhLim1plbfo6irccy0+0dk+mILpJGNA+jdf7D68xW/XdvcLo6X1aq5SUPrK\nrkLn9Cyq4+cL919kYzQl06Yyk39XRhSVA9E7jtTnEmObiPj4WSc+KEVDfkoo\nUqUi/3RvahNqky1FNogCpwFIP8wdu1ELHJdBHRu0X0YXrzeeoNRuPT1ylhBr\nXmHsJFkkIkROyoOThVu8zAAkXczZhUWlFdXuWgwD0jNWo6erAhhXxlMLl7tB\npLJ6UF/s9Cm9ex2nRsSAASMzGuQUYBLHKYWv+mv9KhThUQaTlefDTp/irRBm\nf/vP1gfiN3Lz7a7ofsNyDTRBeu3+Zpj5bt8+bTjL9Y7yU9wQLANpEfb8oLVk\nfWZtk7cG2F8ut93NstV9NmGhEUMdNummgeqDP9PpDHfoQ5FuIxiwJyE8Bka6\nFrnn\r\n=Z59m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.9203a958a.0_1630626402982_0.15365195991219704","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/card","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3eb07f49d25ae61f40c73ca94153a54fc2dea3c4","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.fddd5ae93.0.tgz","fileCount":19,"integrity":"sha512-TQHJP9rPrpr9kkV3C3H1GwsZRZqwxtPLCcAKvzo8AOqjRtoWHuTYYUGUSjhxjBvWzCviYTDQi7TokWgARR3DyQ==","signatures":[{"sig":"MEYCIQDaj5ttrj3bv3XELEEMtmix8ZR6J6SaCkQYZgBIvrFTzAIhAKdg/Hr/vd9VLQ0pBKGHca+dy9tnssklvf8I8b9WMgfx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8HCRA9TVsSAnZWagAAYAMP/0fByKnNmRGnVrTKQhpE\n/7vHE/FmdIXQCJCOYEOpKyvwNIINFVMSOL2YQQStsIAUNzNNuh0AwJ3sVtCe\nRVpsgco6EcG+KenMyyx1vqQr1JYcOlDeQncagWNb+c63Prz9a+bxWYj1Vbxh\ny3p3rptJtz0Dx6k9bIa43g8x52wyldj0VGVlf+BSgEY0K826zvdGHlKBrbrR\nxyFlcnJ9Apo33rOoySjfZH18cWxAx35aDaIUyFEs7RfB/NwiQKGbWJM47m/h\nBcTJOC7zz/yPXIJ1ZS0DV0QAUblxUeuwBnhMGF8LyMYdYtTcTYIYi3IDQcqJ\no0C0NrkmzIaexQdJtp0ARFDY1RNA6WlwGC26I+nGUExfyKW0MDAECtzXmYhP\nxC0Q0ediT426F9zVP7iymf8mq7/zCmDOO1/+PqPF8Ha/5aUDKAAUu2y0/VYf\ngOx7x+aM7DfeZYLFMkkAz4EcAFxMkHGawwOlAcz/llqUZ9OnWXMaRlIPVBzF\nQTFYrRehF08NvnSFLzz4dBHzfCyPRaQEbJ+r/ukYp4lfCj1YxfLtqLdI8hmw\nnWl+T1kJVyehCX4R6ZrsvGATcevCRSaHirxxf4x9gKwqteaH1UfNTEJfOBnH\ng8jv09sKiEvz8axZse06DPj12KXT5od0kewvcqCWG/IuYI/CbOonSK9WNx6G\nle65\r\n=vONQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.fddd5ae93.0_1630654214983_0.2544113282709346","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/card","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55d53243b0a61709495f6159675502b88cfdf68d","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.117599a8b.0.tgz","fileCount":19,"integrity":"sha512-z17jjPOOIiGQ0nmiB2WaX2z703JH7u96A0bassN09FAK/e3upodQd/ZFx654kp6GuPP5Oceg/J8EZ5jblSvNiQ==","signatures":[{"sig":"MEUCIA64SjFvbQUeZadVAtP946SshFEB2hQRCTf54wlzN7sfAiEAyJL1RVGHDczVh4CunjYadbeC6ocMbKQXbtWJdVXU2TI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9pCRA9TVsSAnZWagAAaW0P/it2fCiI3gSMlzCpqyEL\nh06QAwHNk4XlwKUStuGMU8yFWXxbPf/N8awAAslJN9+7LZ4atRlx6i4j7tU2\nypphA5saw8b0Cy0j0YlpWB9tEt/qrL5fxKWclijBFGvgPz5VI8fTYOrpnwQ1\nUh3fpRDKBy3DkpRw/YgykmR1OzLaG+nM6ekEvLRodMWIW/n3ePHxiwpQGPra\n/kPVFMmU4C9PArHZrrlm72rFdTAgjwkL4X67o+cthypkLeYTvExHOcDEOeh2\nbYLhLmNERuKt7kX4k0vGdP+6EI3H0wco/dOknQuLHqpS2PU8SLmf01l7gVsf\ndW1Q8ACbYi7dWyZfoFS/iXyHS1yslcwVAt/i1exGztZD+1vflGX20Q2kD+jy\nzy+Jfpc1ZR93AG1DIc5Cdyq2W45eP/o07FYgpxK2TIlGIhJmDSElHTM92PW4\nLjrY26u4g7lEv6C0aV56OVoS7yFhmlgDf9SqSMlMKt/npnwzR9EUTYVQWn40\nl61I4TJcjoo4+f+d8PtT0pxtjUqf7N8QlfFtpZROEEGQEsETHt3G9iP96owz\nd46k2ngXWyohRtHz5ctT+r5FRuObYYNZzOWC4GsPX40npwVdAIrQ9sUlCLsr\nPcjPIDAIXlKtqziNnKF9A9RmrIKcBc1JWyUCKZQVKTWxgvJloRT5apI5WqK/\nCavV\r\n=y9NC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.117599a8b.0_1630654313387_0.6997091082115168","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/card","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9213573ccf659e7bf85156750e5e1a231d4967bf","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.e4180d07b.0.tgz","fileCount":19,"integrity":"sha512-G8LxkF/jfIIDYvaMyd+awkArSzTRv0rhtP/6eZOnfbvdWcvd2WfQ3ujZgeGorbKJyeka2zqgPc3OOTW7U3hRmA==","signatures":[{"sig":"MEUCIQC1H5ibMvqkEVdIYFnWNAYIFF39aILp9+nMGyPH7i77pwIgfbXZoyC45t3IrngL3slQ7NCLt70xR5mBho7YiG4BvRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+FCRA9TVsSAnZWagAA9tIP/jpolVtLMJa8U1zRcA6C\nqP6NcvGeREoGPsTwcM+MDY0lYzPKi6auKbenagsU3hN22SMYWsiZBvN+AWF6\np6LdtnPZ0obSwPjCRQqBUdvwlUOD2A9B9/sAasJP61xdA9wtHBu7c5H4aVbv\nEzauKe1f+bZsH6IwBA5kqkjSSMkUrKQq1jTWh/YGBbMzTTTuG+45Vuyvic2s\nLN6uX+ZtrL76XDR0Lg+vJcyoxXG9Em+bKwlbpHvlJUCTBfBdwLAGxuAb5lxl\n6XaUHPDDuYvDKAyw8T9DfAC7jBE69aEtQb8nr4MtAdJFOno/qSKlwdKg1mxI\npoAYkMAS+E78CnOGM/1OGkBircZNbgfF6CEpWwLGC/CKUaazjq9f9txBzCVU\nVkNbGUch5ZXdfj9ECahUx7F6iYPBzxUB0nO59/sMDw/KxD3lS03PD5Ok6rzX\nI5hFnuZZkiPOPKIYK8bX19z8dukUEt7/jXfsnkFzO0g9YFuOGG9aIlcUZa9s\ntD0xbXgW1WvTRKnHoxpgHwU1vmSD4mEB1wgcT7S9AsPIxJrHjGb7laE6G+zf\ngInv+XWuACbZ2zNjKzyl6D6FEziRF9dA13ky2a1OCrwoakvqqfp3RyzuUhdP\nJBuAvD5MW1ttRhDYNKJQjrJpRaAO4R/CcT2c8LQ98zVRR3jDMdJAf2nf8oDx\nGsgp\r\n=iDBi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.e4180d07b.0_1630654341172_0.3734559141310456","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/card","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c46c9aa7e68fc38eb3bac3ea22604328467c0b6","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.42d175efc.0.tgz","fileCount":19,"integrity":"sha512-szQWbOMS3xdydbEW8fOVJ9x1L25O3ev45n+iBX68uSeee8CT7UVexyuKcY95IrHqROIGFV8Du1J/SHMYGcsv3g==","signatures":[{"sig":"MEQCIEIr25b4IhsYq/q2TUSEtKMwyEtl0RCfItwXvPEZHRFVAiBuo6PXqbynxQw/WclskrjmwQxea/wvlSFL0+eIfZFREA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkKNCRA9TVsSAnZWagAAsu4P/2bg9FaX4vMz9CQjUBp4\nSFFOIo9iB+bD/OBG+6Z9al1VUUAy4eSE4wW0JqeQ0BqiKLGtlJYLElRZyxGA\nQ0ZKxY07V1Pf4uCemfPFmCtvFxwKbosFaFD11Pvg6+szRwCcRLJefFbgsTDI\nFd+D6B7bOu+4I1wyiKUs9Lt0+/fBgsjj1Nw6urLi/Z2m6/QlBhcdiIlj9Ei0\nQzrnXzMS0B9R4WB8kSz8AqXyvT52p57Ht2uquqG5h2v+IC9wsKvh/NcvvYPM\nBcxD11Nkg/YqXnbOKuiQuyga4xQfLSQapDfQVh9k31GgK6cwvBc0QAlJpE7O\nxbWq+lZtLGeaJVkUp4ndBM9HFlyXf6NBVCS6E+M5wLoqv369NIs4bIyT0TXr\n+pP8C79/NnGNX8cc3pABELH+JnCbF+cZ7Tt+vb9Ft4Qmii/wfzr6320QDbWo\ne9v7doDk3tbqwxAbaIW/LXnVf5geSA61ivGSfsJko0Xje2Liwtfw2FDvLmu1\nza/VbVrqaAx39oUBjytK1fj0KvQ0LIm01fhboTGPCvBKf24pdrMm3Kg1x3P/\nabQm4p4zJzeSD8fIDsB8zD7tN8T9cfqjGSh/qUU5z2LKDViYajRhrFOOt1uC\nwE0D7PDn73zRF2jWKOdcm+0YFme8QeD8dA5jJvzRO3B/bD/IEkYTWd+DZFdw\nVEkr\r\n=7kbF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.42d175efc.0_1630683789582_0.9707485205401818","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/card","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c3f63525b1e5d5483bca3a801f8a6c15e97fd2f","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.72464476c.0.tgz","fileCount":19,"integrity":"sha512-uoGMRpl73tHn3+vjh0Yp/Ah0j260/o40tO4YrfIqoCELTS7WdnuzilySVIiSVs4gfVmLnEbDJdhdkij2aK/cdg==","signatures":[{"sig":"MEYCIQCy6PyiQ+eIDNtNUYHyG1uYOOgwzPXbq2O7lEbUFIwUVAIhAKg2Ns8/WW9ohhNMwhV5voorDFPUG2UW/5E4+rFIrYOI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4aHCRA9TVsSAnZWagAAfNQP/jF3+sQAMDE8D3AXTjBL\ndPWZOXGwBc1DZDB7rFD2QPQXvNMTiNMI5Qc7/WKqyBAY8UjbTFKvQYsxrnju\nJd48sPhdFR7z32uRHedTHhyYAKYiC6KHjUI8T68PfWnkvULLC4yre2YRvuFF\nOPKTy/spNSStxMlHgSBwUXJsY2RT0MYLvPRbS+dI/IRYDMBQPVf4PcwuNHKc\ndGm0V0TGjueK/l5YzJFYVzaXIvKRQ+FvcHC0sQ9IzMyskgQ92wWwu6EMcpgA\nBZqku4I8sxx9++CJm8AhDM9f7+VFYdIU5T4sstuUJ0sQTZlyzrp7Tq+PTFaX\n7ZBk9jXk9D2WXIRWHwyo8JKEb57ZRUyV2V5cS3ER4R2DnYA9Xc6bxVOZ3ISS\nv1DqtijoI8MmV6nINMK+6/fnt3pgS6EZd1+WfCcMpUdAyULfNCXjhbQwyAl7\nb0XlWr/adDzUZL8X98GH0W5+NDoe10r8gWRI4e3daVucHlhlcfxPfdLhgD7w\nWq+ghUflA40OsJg7xr+0i9bqZgxJnlczFgduM79WdTzc9Ue3I9qJjMgxoP95\nksCHRa0UzaDaUG2zFzkRRlxJHxamdQm9ObBddplSLdMZdD+oqI3DV9pKmzmd\ns4YMxGBuLcxB8rXZhMP39vmMbvIcShFhVnDrsxMBsTxPWToInaFmUlp+w1E+\nFdVf\r\n=+LJS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.72464476c.0_1631028871607_0.13848629849107752","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/card","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0009f73b766ea47d7b0991e7b5952dae8edc9f43","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.37d4db866.0.tgz","fileCount":19,"integrity":"sha512-1xhFYUBgmeVcUd2EZKv39sogaGW1pUjZFW721PH+QZ7cDcDPM/LuoL1JT2Je6uiH0nw1BYTrZIeB5Xjkx5VqNA==","signatures":[{"sig":"MEUCIQCuPeJf+MJSjhHpO77C+TkLbYV5ExaQLNMzF8J+amymQAIgTb+pm9HTJ/Yc35/u3DgwW849QoDA6Fk0lyUASfxULZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhtLCRA9TVsSAnZWagAApMYP/AwggyPCgV8L3Ko0HC1G\nSUgDPwLWdoD0091ojwuYMRB+ooj3WCAkltEmR4mKC5NqiRBzTSGj+lHXRAqT\nV62oHbsQByD2ABn9FfJRtIsBQ6hoP07eR4fGZSicB/apMVBlZNKLP4r7eS1S\nWaOecrNqQF2g3nd3dhe4dMImW5UngOOTA/JD0J9bcK4l3dkBAU6VWv+pJdi3\nkBrlkG2Kt2Do+T7f6JDmtkMRf1lCXVeA1CCdDf00EOMC1JehaxkMen71VE2r\nWLn+EFlcADU4LQn8vugto0kWNPgOwQTIVX5uIhRET3gWzA2WpF430RDP2QN0\noBrBiWMWk7bOBQAJWBVgbShD9KNCLcSc+U9cy+mkGUCHSZ7qfxyhEQ9n6BxE\nYhkuUAzxQrKC9tb61Y43Vcx7mo22AoPVsH155njoY+/2M9O4suaOWWEplMu+\nWTOHC3y7NmFpoDy7PrSMrvVEJvF8h2miyaAsJ5ol0bayEO2hiW+L+rAPjIXT\n+7UY6YY5kU68omEap9jkmjVvXv7gL7GELf8Yflnf5NPCfy+YhAZf3MiPJOSF\notckv0sbWrqTrqgMbcjb2y4ZqbqopGtvBtF0a6EazryweQN1RrtdIfQVziT9\nJWWAJ4/xPEPc/nvGGgr2fV/4/Kj7ZxA2ZVsoP0Dx+xE73bsgcON0YOs+e0bP\nskA4\r\n=+flh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.37d4db866.0_1631198027209_0.21908297931760035","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/card","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48a5e6b1a452290e27ce1fed8dd082574bde60a4","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.6df682e74.0.tgz","fileCount":19,"integrity":"sha512-tYdWHiVxsaOQTZvMxMVc5HVtB9dQUzyaLWxte73sp6Jql/gUAJsaQk/EGVckzMcZgSAc+FiviAVb2WZTT0tj9A==","signatures":[{"sig":"MEQCIBpjXwdpjQJPmIpGsKMabmYll+NaXIy6hC1JotAGBa7uAiAy9wHA8YsWX9zU0oy2/B+0j/myvlOFWphQuCVkRh4Ieg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiuiCRA9TVsSAnZWagAATGwP+QE5oDo/gTLIfcuvslXX\n6CNI9QWVyDbX7EkfmGrKUGdriQfOVOfmcz/zQX1UsLofyxoFARcxTQ4L9fBQ\nmFFlLL7HcjWXz3iT0UJM/jmB6EnsmthezujC+zxLkdQafJpPfEZye2i8r/Fz\n1qmEZ04Wl1xYZqhqizG+Zo2TKuK/HJi9TosyU/WmafiyD1UEtX0MAjJ/7Od9\nEaDI22oEyZ1h5F3fRj+5f01xvg3ZlK7CMg/fGk1lbkJiCZqOHLRwSq67YDdJ\nogK9Q7Pi7+3Wip4ORAd9bebik7vvp8MCF0eUKB58QywQvDpUsd1NRykcmein\nwbF4fECMUYsEkr8L0X3fmErBB9gBNyU64pyM9ZkcmNA1cQ/GZ5XzI1B1DE9a\n7uQIOaospl++8YAMi5OtCBVdrmOFP4w+y722XDwthx1fYIncAjMcXOtoN6NV\naRqqw22Xq7fCt/w420bLT0AyEsOQIb5EY1NaWwj0mDSLoLcYp0qBP2zcLGEO\nVlI9AANt8lm3pFYHZySr1UA0RocZTuWs6p1lRBpkz5NuC2SgGsKggMy2E6p7\nAMTIc0QS0iwWXwDupWIOeonQypr4IYeqmbO43yr/ysnQ08tlpm/A8LgD2F6k\nIQhZi0Ia+h7kqbMdc3hv9tqecGGlRAvaszNJEwEe+m0ehrkXzSR4pbSJBePG\n9lPW\r\n=IZaG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.6df682e74.0_1631202210456_0.4307083199759729","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/card","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d94ccebd2153fa1d6613ad1e663ee080ea080f","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.b49359c35.0.tgz","fileCount":19,"integrity":"sha512-XUSuE+iN5REvZW7enTIkKc2Ukb4ZJKiY/bIiYcZA9KKgRxV9gnE0X1MN4X55Xy5RNpmL9qQP6zASlNtpia/+0g==","signatures":[{"sig":"MEQCH1gzgnTT/IOiN/R19w1OMCh0FfFhdTsaD6uVQwgHDXICIQDNiMjYEcs4f6Lhlr17VvQIJ8R5Uam63xBpto2vOlQUYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkX1CRA9TVsSAnZWagAAgEgP/2X812Y3eBnltGhSBIAc\nV4UOBO+VD5gWPKT2VHRmYIJeWj8RNbENp7nWR3ieNY+GuBc35Ysf3GzIQkZj\n6Wwzf3mlN4aa4bzuKUk3IK5hTSfcEO3j8OohuRcbiC/bcVCCqoB30ux6gDu2\n6BTup8sVtLjHylWT5A1Yne4I1CNIQG9nkUJ0Da1EocDJGUahHYOMstlUOJ7v\nnranNCjizGb27EhRMu2CYeQQZGiPf5gYMn8MtBWcby2+C5zuPOgQDP4VjYwP\nVmNBv5bHMfue7b31y4f49x5a24dvXig/yhoFwQH9D5g4s3MuuO2Iq0bXFRUz\niuITy3ZeHBpU6piih2RaMeTExT2CVW8KVCrIdlnr5SXBLLAX3rVebteUqzeA\nr2Dsl+k9xOTK17ZbE0zkzhHmd7RcS2nOBnFY1dFWLknH6nWalRYVutYf+nID\nOoSglC+ZyfB25mUMtR3OGOuVA7Qe2m0k0jg57M7t9PZZ0DJRZmvZiETdt3oE\nLHdWsR+T7IVVkFt/SA7nF4Tl4z6bqPGZTlA3VWkXj09EwdmBvfxS/mNHjUVQ\nEWpkZV56rLzJS2/GM0ABokZZrDQJVg2F9Le1NP2YpHQOQnhGFESiztQXvh1W\nQvd4Tr3lmiYmn5F/c021kiQ4xbmIA1xCPfsulDkO+Qp4uP/PAvnXBfUj6pBy\nVDzd\r\n=KjFz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.b49359c35.0_1631208949380_0.3610104634480389","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/card","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05dd1e22304fb7bb1bae9f51e731f6e5498e9e8e","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.470bd34e8.0.tgz","fileCount":19,"integrity":"sha512-WxSoCLMfTH16qodhj5XysRqAGCcNs2scDFH0lqxPcQPTO2thYjB/NPVPlG3NO0evIjAD7HXlYgA80R1TqYJg0w==","signatures":[{"sig":"MEUCIC3EhM8iCRpNZVMzfymT9SCEfl5JuNU7ZlpxVNfKa8pUAiEAxNH5g+XEMoqxJkjug7pgErXURG1K5/R6Acz8aJb5B6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkv1CRA9TVsSAnZWagAAw3EQAJ+HjPyymqi3OHSrVrNf\njAkNmwOFcOxmTvxZZN1nSX5iEMzbga7QVs1rbnG+5EaROnt4G5yyC2WTSXKk\nkiKb2S0FGWzNSgnGclWAzwDWbNQ70BpBvt0WF/kYLpEL9Rk2piyhQOstBwXc\nzM5zTlkWrB2KLQJCvAxEf3ZFv2699OU0FnEwGw8tCQCe4xe5R6ERn5gt+uKA\nv+R2czAeB6b+5SEr7qr4mWIzkBde5145ZWUe6PfgS8k4SeoB4EL7Ffvng0j1\nAUGcXELQg4EqGZZvJnk7o6hMVLmPXdwh5822DOTknRJH/C7qSGN4J2zwHGmB\nvo3jMRL0NUljVMwNthfaYTwNvAqrvspUEs0tCiP9dZRwJu6jQ06N6/jC9O/k\nQKIbgM/zhbUP8FS6oeYkDOeAYZMi41MQ/0QEmrhLzDn5BcTxehE/v9ODDTlx\nlPVTZPx5Fl9Gx8NwLOT8LJ2WeQiOJmup3IkS0N/dWd7c/ZuDrbcUg6inIL6N\nhAWzkE6tKhTOWDNjRyGaZ1fY9cV8WAy+BgyseMX1saUoXqBypn6X0lVmwByr\n2mp4tuKhfFADfWEfrxwtPwEMqSl4MoixxBdsBjaKT9/MRvTk5XuVDGRnBKOQ\nWCcb/qTRKdQXtGSp/TVXYCNnDwCZg1cVNEJn9r4Q5idU1rIvkIE66ytjyoJN\nU/fo\r\n=dKfG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.470bd34e8.0_1631210485736_0.017890011152190466","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/card","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f068843d9553cdcb0d8155562f99f7360980d1e","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.d48a01771.0.tgz","fileCount":19,"integrity":"sha512-RxrBU7NtR6HN48+VNmljyc0JI4pnPE5H3MyKCX2XljFntZn+3iDzpUB1U3IuTSaCVvy2P38yFD5LXyKUuV4MwQ==","signatures":[{"sig":"MEUCIQCmi0I61LnsRTZQrZ21sPq5dbz2eVngEZ56uxuFUa15pwIgWlqgdHTfA0ihwNfvL+Sy9f72ala6IgRYgiKf74H0H0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk4gCRA9TVsSAnZWagAA6C0P/RXYOloDSCxhB9IH+jnI\nCqNvFUyVbn/A7BE7776objabACb2eU5rbXECdY6mkmbWKB4WxTKuqCYfafEl\nGjGv2KgdyAVq7JW+NhzUf6nMZQg2lzZO7f7BrhQnvLnPeDkIgtvHkFgkQtkL\nevkIuhv8tvXZj8g7CNGfayOPEPTI3itvkb1teRJ1sHHn/DmrKsYVYSeXZVa7\n++e574GPtZpYC1itws2gkPvibxcMVsdAGq2tg0x97lPvoFk1pEzY5C2N3Qt8\nj3mtffdmdc/xv6jGdufCGwlW4hw8uR9rT+BxpSVAnj8JVIvKWtILzAgiKk4e\naVQoe6K8N03FNEBlR4HDHinAlh29sI4pJ9fpwjxxoDSjoGvt3gQ5egnOeIJL\n5v2p5IOavW0GTNzqH3djW5iY+EM2X1cyVOxxMbGX/TqY12fWXuMe7QpW87RU\n8Db6nDz1b86dln0BkOpzxCFEGQ9xKeX8bwqPKslo76jxHW9uoJwJTcr74h8Z\n4H6IV4+8jwn5Xe1dI2jBJ5ZXKPj4hW2mNmB1MA4HeBAEQoN0N/VvrLENyXxL\nwMI5OprA19W8fwObw55p2z3uUeARCe+cHFVdZlAuYF4YHRmQLtvsOMWAExul\ntPzyBNEYf+TQ6LKa+I6IH0fPToT3ISoXMI7XK7EKEOTPwfkEsMNfYMKb8cwD\nHjsI\r\n=UOjj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.d48a01771.0_1631211040301_0.6037995805108811","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/card","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cb2f77b002598130c2371236d07e2495c84c31c","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.13db34b34.0.tgz","fileCount":19,"integrity":"sha512-88yauz4HphtDEbgoEoa7EhlBhrUu0oiGbjfof8Ju8YMQVRSIybyP3blYefsTymd0x9W5LUvpoBHZ+EruuC6vQw==","signatures":[{"sig":"MEUCIG1xRslj0nKrrJX3vdTw9JNEjmlCYQU98SvTCRUVrgCFAiEAukNgWkWwZtLNZIiIZXOsGQ4wsrU6EUlIN2ff7n0MQ0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlGmCRA9TVsSAnZWagAA+XAP/0nJEidVKEHPbvz9bwQZ\n7P3ca9Jhs/7J8Mh39tvqrOz2NADxzEWtFnOs7AaQgeuKpJgVKB8Es+n9ldJQ\nQgkIzG5m3QBYl1zzkv8BSckEuoJM1PCZ5rKJLUqvO4rY2FNv/25V3dOan2OO\n0TMXehcWCNZNFbuY373CCr569MyS7UNxC6QgdI/83frnL1ttiJChRJju+5IY\n8MAcb+EEDkHVGl128LaVqMICE9w95CDAxCTKbkRjRB4xGKdM2EDiFpgySQMD\nOhA+2sqEKjkmgFIo7PIc6coZ6fgS0dMY0dhSErKIQDFaTC4tiKyWRygfg9AY\n7C1klAy9hYf9elkayYhAoL6x3v0SIxZmz8ctcz/r4ON1Xx7DX/xY2nA/tE5n\n2N7zCa1OWdAmjOv5uolWtmzDkj+wEC4J/TCu5mnhVxJzAzA4ycjf2gV9asGJ\n4b0rdcY9hWQC9ckde+3ecv70Uonipr7XJCXnJ80W0qZfHLVe1fCZ3YcCBsyu\nvU5sCWg2VIQzo9/JsdJJ4ZcITK5grTakMPcXCAEM4+OGr5u6pj4wk4zyxIsx\nkpi6mw7hcYD1/1SnG32xzEE8KGQ+0qWgPlZOIrIBXx39IX/MW5uOA0bSDU26\nQOnu8MYOs6kox6wkCVeMnAVFaMKXQ5pSmrQ9BlvHvsrRIOjoowM4x9s2+xf0\nYehG\r\n=EmSJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.13db34b34.0_1631211941875_0.8325765260402511","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/card","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e0586ce938f0c158e3ec08d509a7a1f9e24b433","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.864798678.0.tgz","fileCount":19,"integrity":"sha512-WXIML4s54pChEMqlJ1cOmdf1Z4d5im5IfpAzrS7BD7koNao/hTZ4//DV4ysVoXmd0s6Ashm61siKzToOKeE0Fw==","signatures":[{"sig":"MEQCIFiUaDYrCnT6qB4kMSTud4LXgeswOgpf4I9RjwpQNGjbAiAmvm3npeGSulc4p2oOUDrAUP1CaFTv5OZ4N06p7WtXtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlRUCRA9TVsSAnZWagAAGYAP/0DoEKkflh2t5C+JZVrw\nRMPatMZIjDXkuQH9jDtuR+Z25LDmlKVWpcE7Pj0dV5W1GnhBqolPtTnKeyD4\nw84cgGLret/EIfPMYi9O5JaILA+g/8VO07c/GDOWE7frBbU/Y6BGNqIPXmuB\nV4N+HfJkDksRo6eTnlWCUSQnsRG5yBBajaM9u0uR1bT7y04j+/xUUeOHNzY9\nBCut39gc0siDmkM3vzcbW/m9s43BKlXuptZbVLBtc2dzEpfIWJy1kabRXI/x\ndIMrrEo9DeroyBbegWjySIZcrUBEClrkf5NQD3/CC/73CjJbXurpnpzO6C1/\nOvnhaXNyr5qa/tmT762/DJv6Bn5Uo28vgtvzaFDEwk9laLkHJ6ynx7Fn3ABL\nX/K3RBkQnLOVmqpSNjTIQTaJdFE1SBzNcPXmdUHiGVQ9ibDQ3+9luOGOPwzO\niKcppVj4CINBFI4+o7NDpo/wu31syQr/pGB7RTmyYa+sCYaJwG9iRsQt4V27\n8a1DKSnJu/fWXchNjah/uJrqBnHdO/uagu6XnPnroq2lSyF3USzIFapvjQOW\nHmg7K2Kp70/8tzH7ysqqwNK8mxxArXKOM6+sZ2NOpO/do3ceQyJwwhIlp0/l\n0V/09hMcLysCz8BVNX4CvrmF4KwkVeu8lUCvhvV/ZRg9/mWS3I7X3vIhrKR2\noIye\r\n=+BRg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/rtl":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.864798678.0_1631212627844_0.6090224400587108","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/card","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"964a2f433b234209f77aa9b9502512e560a71168","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.d04bda3fb.0.tgz","fileCount":19,"integrity":"sha512-mhfzv+jrk0VeILB+DaTCrCPcfl/WjHjaVTKB6y5OJKKLwK5Pd+2d/ZejTwkC5iPWGw/oeiEU89+t0R9cWyn7Tg==","signatures":[{"sig":"MEUCIQCb+1rScHVuDnnR3Hh/jCcTYvlLTDsV7vmvut39e1tuowIgIqM5ZHSdzgnies+Q2t9XY4+m2UArwpWq9fSl94rZmrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3gTCRA9TVsSAnZWagAAWyYP/17KmN2q0j19+6z9NsYu\nnrjU6roPhWEQOsVhFajj4qtPN8C1Ezr7im3Dpet6gww4EoIlG0v6iYjzhVT/\n1uPqECgYY1hB0IbxBdKdx9G/542wye06mE1eD2NkaihAoEFk6s0dlRz/1xiG\nTAFfWJ9qdVkYscc2d9rDve4XMX4X+DIINm2kE8APzXOynyCb7NdlYd4uvtjD\n86S5/9gklk+aGkMh2QErYZMTN9QirIEBh4qIJeQ/8CJ6XeO0Ye0JNIbfxdFJ\n0IcddRIyrUvpkbYvzFNb4HqvgzguSKFtcVZJaJs3xFYw5dJS7G94U8N6S1qw\n+kGpO0m4UKIkaYVfbD7DREHZzQfdzrktVynCxV48ShfjGzhv1bG1sed0XbTP\nNTY70+dQb4q4NIorQRhmcJcDq173Grd9GmHZQJXBdAHTEwAEoAxTHdhG6kI5\nlzSA8ZonWlFDbO9pC+yuF5Fl999uI4kduvsZK5lhx8T8qH3pCoSFLfvM/5XJ\nBbtxa5g0ECESug1g34lhsUKLKRXB+BWGBMVHg685MXS8a0N6GDnp0z+nwOFr\nrRIyUKzLz02WZhuv/1jzR2J1kJ7Cbml3xZwn3XIoAkXixzUUZohfn/todw10\nl7ouho6CuvRvuYN2TX/QxZPGWpM9FqlGAO0PDLMV/2tmNEDHzZBMgT/R9+Rq\nfq2E\r\n=8A8/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.d04bda3fb.0_1631287315322_0.1563633331273948","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/card","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c5d36b616f8ed5f670cbbb53e4e9a359bd02e8","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.5533f73d3.0.tgz","fileCount":19,"integrity":"sha512-Uh41adz3D7Aji4FJSoSer3mUKUIXuZg6MKcwscti+KIhdxyq39DfjUllxGF4LWcXxA0HyN9zGlFLHlIAEXHsRg==","signatures":[{"sig":"MEUCIQCr5zBEhBhmkEthLCegfAXFDO7XT14NaOTdQ7xXJ1U+MgIgDhuCBMd/0yifo78E75MzWovXGF2FjzKKPhUMpnt2neA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9jdCRA9TVsSAnZWagAAAVYP/i/RYR8KClLI1Tlukglt\nMoBzvYIRhFDnrMvXjkD3+pj2fXqkCHgXOi3pCuM1nxJob9TnPSpxqQ+BHqSJ\nT2Po/MRjjzX9OXHuW1uQo1aRgZU9DOKivFHQlhbCAAtnupkGfEGKZDOaZ8O4\nFKZD1ssrgDalGD6IY3n3it0CHD2b1ixjJEphBfBkwNMJaUM56/FuLCNzHeU3\nG5iLoRsdG6v7kRWllZ9x+tmXQZNbCjmm4Qas1Vj6kCbDBefXdQN7lOhPUrCT\nO7laukktkj1Vs/9KcXJVBmYM+c/NCp8BWY1Xx4NPzQthyqIh6qSyUH2gqvya\nGXClUt5MttWisj3qg8+UYGKmPNZHxyOMBw8M2LgFy2p34kd4HcIu78YDo6Lk\n4YV+FDg0ti8DXPLXfz7gfc60fwR+2kmvonE/lCR3dt/X+2FwfAbvbWawxidu\n99KFMCj9yt6isMn1zJTkZQ0qMOH4U4oLVnmA0780+zTu1gS5x+lkvPmoC+3r\nIGd4KYqzlNpHhrIvwlDB5H3C4P3WLoz7tHBkQKCO/LpOV60sg4hNfUCA70/A\nqE6yyAhBzWYnElPDojMww09BMUSWYECxUbl0QnSdhycgrZXbt1fXXGYB2K0L\nQlw92pYNZ572duFo+YTqY1CJ+YztrFjAjQUM+6BfyPzY6v0sa3pmiqR5ZNvN\nuAVV\r\n=kNrJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.5533f73d3.0_1631574237599_0.5556864526833156","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/card","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"533b2d336eb78575a81029bbea530988ba87a2ae","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.08398f880.0.tgz","fileCount":19,"integrity":"sha512-lY7eNush/G44PMXJnfT5t60EV4kP4WQoDxrU309ZOQUTm2fuQev4cb/4n1itdsfCJhkk4GkLX0hRDdnGz3UqKQ==","signatures":[{"sig":"MEUCIQC2l/kLD24S/v89CF6j+VauXC0mCI/lHb29SQnfx95NxwIgQOdMQNfI4jCBgJ58Zq9MS3G6dwPZzs0qCew+ghWSPSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+ANCRA9TVsSAnZWagAAuAgQAJl5YVTXVUk5zrT8Vysv\n3WphpFA8w9NK/SwvfsJIyPJ59AJDWXMJw3SneYTJsmq6boWlqAi5YSXOa0xr\nvuJi+Rs9PBM1de4SURmnnowhxJo9egwC/HVCzGd8bfvJ3Y3iPmRKILGukJZ/\n///nWNYg/el7BPtBpXuFQqLoil8Gz6n0yOXVs5WKDt5ba4MdY4gNQpQZ250E\nt5nsDFq5MHmYLLHVxbcD+DFtIi71sk3RYsLL6Jp9/JM6bB+7ZMiOlYTtlwNo\nyMUq3b3hqPtMHmrVVYFUt7CTZd8uzG3kzQYCK2TebPlGiZ+TQJbwJoItmVhY\nkd9DwAIuI0UqQYOTOk2TnTHebIp2ka9wqpOHqGnCvKp4xw8UVCBA/fzxOHGH\nOvGirjDcRElWB93TuhTbXeDKr2EaS3BDQwKTk2gqFhrMtI7pc+pHfj/4vxAO\nJXF5oejMDUso28V7rn7u5U6RV/eo7cgppzTY8F4WKKk9e5caUTGvdbplnx/2\n3H9o4JVJy8Tjvsa/X/uqUKUPNqfVvomJOxHtEi7946BgnhpsmKk+FWFwiD4N\nZACJwyr6iiY2kM5904J1fZB9qpjEckRivIYF1gMw+HJWoJAMTEZmYYjUWsgQ\n/aAGyi3drqB7jXUO47Vo1gaCk76rpnKfZ5/wPtYDuDa5FwiicVKGRcO6XzBq\nbGjU\r\n=exli\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.08398f880.0_1631576077502_0.33061731299101327","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/card","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a89128e9af39e277397b756285efdc5edaab57b7","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.818f4ee93.0.tgz","fileCount":19,"integrity":"sha512-2vtaeVZa/gNCCTYVKaNRiVVtqVFWNY9MbpOy1Wa9EBrnJqKwatVOgcyjN0998wYQfs65cpBwuoOFlC9wEuRhnA==","signatures":[{"sig":"MEUCIFmtnUOlqLNDsLMQN0W4wabw45mSCfBBf6Y1/UEyFVEvAiEA9qg9TvLtDNuu/uRgUphBNvJoKqf/01aX4iK9dVcgD9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjJtCRA9TVsSAnZWagAABjIQAJQMnqjgEq99s2mP8pEo\nH5gb+Xji0c19/aZsKeHKhzW0Ebqa2WWHavRyhZlNXnBsAP892iDGF71dxOCy\nzkMm3SWGxn+524YbxliPFxBeG+P5hDhZ1iy4iwxJDwzw51n+/I1syNjj6n0/\nDgQ4kgUZuU6oIogECX3d5o4LvBmGscIUoI6Fc7/maPIkU40opaPzbx7e6GWC\nBxQghm8eSSssxWzNT2SklLKd2ysNPU8QC5Xs/f2+ybhQchFeVpuNrEQHqaL5\nRLcRkqM/i0OSWA8NUUoEJaxc8WOEDetjy4h52JJQoXSFABIRIHZMdp2HGre+\ngPYxg7f53s0benCo+q/GTnAfbP2bdpwznVYOgi/Wudwp0eZQiwZdJM75unbs\nfhKovHWJHnxCKRXElKZniIpZjp4M9aMXqQNI9iG1tHpSAMlupzJdBydXlhe+\nvtLF1tAd+UYZKDJee9SnRpAKLyuDEeoXzNvYH5OINzJn9F68pdiE5bEjSbfQ\nu2a9sxNuQU0RArYQdq5lfUTe0oMDGNG3ApLXuixqYAV465ms2YnR6lYXpfSv\naY/dfFZSfi4TEZIukTjpglMy0VwdWv9d1C9qy42fdBwQ0Ru9ZGX/8oFf+Vaq\nXbMve0Q2ezoM/5kyBS9saQDSjxSmT0+Y6ytwJnHXIbXvmu6APJ5Xs9bEb29Z\nocXU\r\n=DMlQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.818f4ee93.0_1631728237160_0.24097858297824826","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/card","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26a2838390fa7eada62db4a704c7d2501acf90ad","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.8355e14dc.0.tgz","fileCount":19,"integrity":"sha512-8iVw1LCwrSv7b3TQTGJYZsc1930lL5Q54gcqGamjy8zANOQm++b01/3rtdSAsC+yWvXvj1ntWHn80xNtYi//6Q==","signatures":[{"sig":"MEQCIEGAT0nS2L2OilA/GZwfEXQXWQZsQOUeeaLE/tbYrVOnAiBSw6Fnrde42f3lwu2a+GIcM/TltuSW5k89drDc2hoTTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":269979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkWkCRA9TVsSAnZWagAADt4P/2wtSdHwpEQxuMetwFPx\nQLrrrF0peHSx5fXeK5Ux9zCf9f07F7Gusv1ys9Q/eGgil9qwaUI3/iBAP1nT\nVZTc/fIaBgrEUJH96XeT163dsZpfjXbO7nR/fp/QxKdJ2UzYrIU6kNtmqpB7\nzmquWHQITOVayBZruZaZ86OnTkEjFj1l/O7r+07uX01zMCRwIzY9mP6MhBrd\ni9aJqZl8GOMZIxo2S8U2yjDtyWzQLQCAus//9ffk3ZBC9Rnh2hMiJ+8nXUCo\n9xSvq/qGHm/GMJXwqZSGCOpi0mS5bUTlY8xHXi8AJryub5o5QocgCluZIp28\ndQuIe+g+OVHbQzWrGwei6D9AepkbVEVGP+/mz5aBl9XXhcv0o2anz1Gl5MBt\neVE1qdtfh6uRAIePRIz89lc3y80h95E3ySUAeGJ0U2uH+U60QQbzUYMcAC2Z\nFgRezD4Pe9DC311DYK9qB/Jek3V6dMJfr1Bic+D1w6UvLcIlLZCz6im7DMDW\nEM+8oenPFwK/BkxRrkayiEfICvMN5vq/Klsl+RUwPN2AomZSKFqAjs3hnBK+\nMSKdI8thUYTVqhf3jQjqvXNBog5JwGXOhePUs2lhZoAq64eJcxravq0BRMJq\nWmPqzdHVGPQw5gulyagPKuCyURvkRMPYWUDSaTcHudGT4eQ1p6SkbC5dKclZ\nRZGm\r\n=v0E6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.8355e14dc.0_1631733155994_0.8848179754923937","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/card","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50b71cc8190d2c7154322d1f28c32b33a518fd45","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":19,"integrity":"sha512-l6/nTD8rb5IaMo/sZaaEVPFi3n9Ujn+JaQ3aS3ojyyuWrz/yim03gTGBXZ07aDvlalQvX9mJ/Xwv+o4a0PlN4g==","signatures":[{"sig":"MEQCIEqpGbO9+5Njg5h5YB60lvbgtgNixksJyntUpBgXjRtIAiBoYUjkY26Ftzn0GZ1ku+28a+yBIjQyQNVFpFdiAxhH2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmy3CRA9TVsSAnZWagAA3B0P/jxuyS/7E5aA5h2TwmSA\n3EsAR4v8fuuKhlpAwoFUBeW0ZtoEH8yUfaJ8QnIpJZOFM20V7h+xclkMMUUH\n4m8QeS9PIcaYDrVO4U4aGfROQquGk1tym8Y9cK/evFFoMSi3zqIw39a/4s75\ncxhBBFuNyMNscVvsXK7eBA+aP//sRn+aoSmE8jZVouHQ2KyP196SsSpJQm2b\nLkaRBQk9kVvds/xMxfdaggr8ECj9ERmidG/kx7el8zADf/xVXROp+Wx0vg8a\nRDgEEoh0+fKI9Ggc2/WTxfnCA2LJwBWKDvHE2XpO0JKTG3RqJRCrFtLJ6DLD\nGdGcoqwUEdqKxf0hT1JPtltR1xA1xzdRYCvzff7/xVod5nFRoQNr/lYPGvbb\np4fGNNvQj8bP1OjV/mOCA3QAlQ8vXqviQetzOWbyq4bjaYB/LhmYt4OHorVI\nvM8a2wo4n9QxyzvgGK3KRDSvDUjTweQIzqp7VN4hUd3WZ2Gf+/kL08ECM9d+\nm3Lz4ePIl4FXu4WL0LUOnnc6UfltwSjhqjcGPby1I+DKODTNeuLIw0mg4jso\naZLuO4dOFnTv+tq0VCEJpxGeo71q6beeSl+Gqy7atoGW10yrE+vmm1n4dPla\nYfjKPxGzPT9XfEHgJWWmiEp5CBLC/BHnLaj78jTTr7YTlsGUZ6brIK0yRW11\nP/nA\r\n=D3FV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.d4e16a6c4.0_1631743159155_0.742504744376608","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/card","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d534b282943c474a000ffd94f7ff8bfeeaef5599","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.65125b3a6.0.tgz","fileCount":19,"integrity":"sha512-ysCa4VYN5vjg0XyuZqVGALxe4/DLqxLF0HwestvkzsMeE+zI+3q9ytHQfhunQEuIBpPFgTPdIHaiSYDt/lq/mw==","signatures":[{"sig":"MEQCIF5Cj8udysggN63aMbwDOuhcxGf7ewOrkEFVVHK0Nq2bAiAzWXu0LScJz2EVA1NodyqnDknSrd92VoQkDXpVlmqhnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7RyCRA9TVsSAnZWagAArIEP/1VNwtZYUo8U/uFeIOAx\nOzVhaqd07vBmQxB+HZOrs7C7gwPq6njt9KO7LDhfwGy5pk7oGZfcOmVBlwWs\nH1Fd3O8SBKkqLkR+eb49i5qPe9s7y1tNjnH4ewUxtowRjkhiGZbiFAhfJPPB\n+XdZA4/iSqeYSd3cKSUGpyR+51GHexxDxLjFyuEXULVb85XiWoEDMTNgLgyP\np1gvlyRf6Gw1VYlKu0mpPd3us+gRldd3sP/WxIDBcVdsKEdcuEYnSi/uQO1y\nlha2dN4LUxjBBwodLZ/ZSQYA0sRmdBaMp0bKOr7m2BSE0oTxdl4nu/5gi1U1\n5YdrVov5iM27dLLVLEPaqWwKctbbiG01WCxypyaS85IO0agBJroU/PFe+oUC\ncttMkOMTbHH0+dNlmDLwe27Jue6ZziiOzhRW5KsEAUtMDfymCC5WNjeqf0NB\nzDoMPxmIePUD+PWNew4Bt0Vy8p8DskWl529/MjoyVI1w2FlzhWRyL0ji+YYO\nKElt3iGQjqYeScPW5DHkuyj+Zy+WF2jFp4T08OwmCLxBuCwYlehQdrCBDrEX\n6Jx+yUdxaLb683EWGTYbenOP7gcxsghou3/iHfWaUIYbKowyJrr3CDOQMhf0\nd5qnhr7tGHkyvUfg5lptOGR89L7RpnhMxBM3SVRIgTE/RivKV4LBtKP4oHBr\npfT3\r\n=nqo5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.65125b3a6.0_1631827058628_0.005924208957197141","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/card","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379cf819b235d4d4cf24316128ef497c6528c8f8","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.80a583365.0.tgz","fileCount":19,"integrity":"sha512-DPSBzY+zD1bAUhDF0mGXzRBWpIyE/oFtA+UnNKWahz4gph4tmoj8Es+eQjCFD+PC9ZZheULwcDm0vcEHJsTJ5w==","signatures":[{"sig":"MEUCICnuPIIza57aTKLmBmO8ibc+8FJ2Obx4yV3uyV9zg+IkAiEAo4SOrlvXI04hhSyaT0UvSr1+rim/BYdgAADyTi0b1zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.80a583365.0_1631910950845_0.8932146927827089","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/card","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94fcf170280ac20480625bda34bca52f51779230","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.83900936a.0.tgz","fileCount":19,"integrity":"sha512-4gUvhCOuQC7Uc1DouEElwEBZAYJxrvxFe0F7SHTWp6H/x96SYR+qz1UPsymca2JYvpwnvglGZ0tVUFUuyOjMWQ==","signatures":[{"sig":"MEUCIEh3zjxV5HUGDIXAoi93xeRuC3qn/t/mCSxkOYwrJgr7AiEAhaWgCsS+6swIr1W00RL/LLUg3WiwctZCPqEn5+Nm/nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.83900936a.0_1631921063844_0.17019256551094863","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/card","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e632ca0499b81bfbcb1056d4da32628de221a2c9","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.860ad06a1.0.tgz","fileCount":19,"integrity":"sha512-YlFGCqjeZJ8/ynaauWQtfLJrTg28eqWfaYC17ZbpulOvpAiPXIzi51IrG+ZPiR6PMypKMwBuuEB0/S+8nBuOrQ==","signatures":[{"sig":"MEUCIEVbjepIIVVMMPMfHiCNYlPmQLoiZyxm7bHsHjGUG6W2AiEA4PpRVTSylPpcXwe3NE2B+jcWgccZ5i/JfPSWkICL9eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.860ad06a1.0_1631921761616_0.751893116584299","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/card","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef6c40663ce0282c9b7ef3c8c900b6ce0ea5ad45","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.3b8d4429e.0.tgz","fileCount":19,"integrity":"sha512-WRxMSSiuzpqIcntur3Owfln/qQblc8g9+kya0qkwRne7qbyoTg6aIQlCbZkPw4bJvly98dLE27QD/qoNDx/V1A==","signatures":[{"sig":"MEUCIQCEp3ukWchzoQ76M5+PazsoChBtvhwp0m3ksVGTYGEcsgIgPSzrWiqYokNimytP/Mw5UcC5acSnQSELpmpzOlNdV54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.3b8d4429e.0_1632160059328_0.5158074253958049","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/card","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30537c4abb5aa8cdeefa3ac43d0f7725658eb183","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.2da3606b9.0.tgz","fileCount":19,"integrity":"sha512-cLp8dLhwp+C2p6PzmFwT1tUMTdua1djU71ATnlSM/yCbf4qt3K4irfNvmi6VG9amRB5SW1x0nHrmy3uq9V2xXg==","signatures":[{"sig":"MEQCIGrY0XGlv9D6i5a5fGFbHW5KyNLzSFa+jSYhX2P6QLtYAiAa/qsY3WZ/rWQ87rq5CtE1+zSzqe+B3H00Er9Y6HOeng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.2da3606b9.0_1632166666331_0.9637965541117175","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/card","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c62fd04497a1c148aee34fc6f3cb535122a8d66","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.e8c598d1e.0.tgz","fileCount":19,"integrity":"sha512-sEPMPznr6e5dz4SDbpRQa8Zaey9DLGa12cj4/NxUTPe7bXO5h7mApXx+iS36c4SrevggrmR/USmp3UB4vJ0pmg==","signatures":[{"sig":"MEYCIQD/0d5jsmF1g06af6IecghMVAOdElGxaTRJohQL8RM8+wIhAK2qWgozp87URVAp7I5AGC8loBcqWhbR+9j9boDsdZlR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271073},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.e8c598d1e.0_1632172317957_0.09327608951877919","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/card","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8c1c28c423d5167d7c2bc7ff74f2c9b1043868e","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.1340ee9f7.0.tgz","fileCount":19,"integrity":"sha512-x2LiSnlX677MftNCoVg5RwLhgGzViMa2ltGHtfj2cX6wP+Z2u2GfZnZSw0G2zugMP9uA8V/1qqMrQ5oSNS5JDQ==","signatures":[{"sig":"MEQCIE6wFg01F0tIB68OryJ8AoUzjKCiV6TOZ1RhQnM9H4YTAiBezmeNzef8VK88g7jFt19TEA8AEpj1weL9nCste3xPCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271105},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.1340ee9f7.0_1632333476417_0.7043811749470053","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/card","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2055b5c76fc96b41bd0bdaaf48f72ed1db973ee6","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.65084baff.0.tgz","fileCount":19,"integrity":"sha512-WAfo31B6c6dWzlrtzIpQhERuOL7vYCv4mnYvfM/GrJGt4FzwABdL7FxYsxFbDUw/SxJcFbuVaLjXUVhcRKB3ZA==","signatures":[{"sig":"MEUCICYrzat6QJ7UznhRIenPRt32RIgQKsjRwE5sQqJFmshzAiEAyw+yR/ThaM5h7384e4bAdnjNda7RCVX0pk6BQA8NmPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271105},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.65084baff.0_1632432331899_0.21609724278931197","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/card","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f1684d9e613e85c62c8cc2b71e2decfe409a280","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":19,"integrity":"sha512-xgH5q23+61m7pIMN83W21+/PymMn0Ov3jYQLbLXk9qTbULqGy6GPWn4WQS7p35ZXk96Jh1gYZDcoYjOZhLg1oQ==","signatures":[{"sig":"MEQCIAXODXQnRXJeY0T3/d6oNFEPm/MK/7cxgaJOad/fdg82AiBys69FSECEN0HpIC/JhRwSSSYNNXs3FO9ihGaiy/qMiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271105},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_13.0.0-canary.c79aa0cdd.0_1632490915958_0.33531744407006503","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/card","version":"13.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"875d60b398898b6f3a6ff115717f0c144b681bf3","tarball":"https://registry.npmjs.org/@material/card/-/card-13.0.0.tgz","fileCount":18,"integrity":"sha512-ooJUOt1Viv99Dyz4rhz9ZZbfa996eHh3RUuXkPRkT66Btd5TzpdqsQWKwOVc5bgbgWqzhDWQ6A/aQdYqH97ccg==","signatures":[{"sig":"MEUCIQCeG0NZWkZG7K2WVPHzLG3z5dZHf1i3MNaiI09kZCu52AIgR+bv8dztQ8y54FY/Jj515cOnuFwii62yAPNZBgk+Beo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":270585},"gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/elevation":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_13.0.0_1632512755598_0.4104371331569967","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/card","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7376248420cd5d88c80377caa8af9ff65fc38f16","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.198431fcd.0.tgz","fileCount":19,"integrity":"sha512-HWQSBVRa50XXbwrpbWFVOw9xhledL0zPKqZTH4+bhT41O9pdDleTVQHi+wG/vAFwgYBJtZmPIvDpckgNvwYYQg==","signatures":[{"sig":"MEUCIHBZN5vFbDM7Jqq1TeCj82Ab5fLgOXbRAI7WCD/ox17nAiEAk9+02/o7jeUo31iY8d7gaOUr2rEtYVh2/CX1cwXC1Q4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271105},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.198431fcd.0_1632512799718_0.8041370458142949","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/card","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d51b361ae6d9a17303637661c2d95c979d4e0f29","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":19,"integrity":"sha512-6PEnNToCztuX9bqUj4LCWpyBqNXheWl69QWOJOSYPzrYAlTgiRnEh3Zlj9ZCSSK0Ft/QDR/Hgfwlkv1zFoW41w==","signatures":[{"sig":"MEQCIHGeKmWie6Tm4OzyostZY/rC6Hzei9XYCc5LFnulEmE3AiA76clc3bgWTxO7/hw7u4QO/dN1Z9nuGQpKvVOcHi29mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271583},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.9a02b6ef8.0_1632575463317_0.5521616869855661","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/card","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"352df9e0ec3805af2f1080d3f424e93a482aa5c9","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.758ce31d9.0.tgz","fileCount":19,"integrity":"sha512-2aqLuqncYIuxe9qDMrPFkzj5C4j5D4N2fb7G96wah5jIfblf84P+yjEzHlNtie6biK4IiLW+WtwHMoqPnszddA==","signatures":[{"sig":"MEQCIClAQme0cfFjRqog31/r8elNEMlqn5vxeEEslqpn8KXbAiBiVHtai0+J0Y8ggOGM5oVDYIqnSO3sucLxJUn8aliANg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271583},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.758ce31d9.0_1632763756558_0.6233966453578852","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/card","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f26593900e96a637584e848d367e680a5b88d461","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.86b50ef74.0.tgz","fileCount":19,"integrity":"sha512-moPoHHkOkQv6ZqnXTbwjWy0hOhsHSlXj68TSAaoGQ5q3UBBznA7YwH9z3SbDFh60przu7M8Aotfpa0Hns531Cg==","signatures":[{"sig":"MEQCIFsI7abK0Dg+/lgk/Zp8bVKNBusVnd8AVs/IicBo16C9AiAPioZnNu9ocRn16jR12W4znrCTP7qWlsd9S7BPKhivpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271583},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.86b50ef74.0_1632850982621_0.6768823372712265","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/card","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8937bbe1badeda8be09bedc7ea5090acdfee7566","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.b2fe3528b.0.tgz","fileCount":19,"integrity":"sha512-tEZ1l14dIvucg9VZLnfyme9tLNp7DHqghCYWKRhYYPSI6pBWBTDefO2Y58m1243MJcIYZIQZslMnDHZhbhf+pg==","signatures":[{"sig":"MEUCIDrRMp8VtxZxdf+0KWsv+N+3GInKCpkC4qDqPA674togAiEAkmM7EjMu3Dn8PB+uM4YbA9MMaWduBbF3+VhlbZU/ZeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271583},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.b2fe3528b.0_1632956218428_0.7027697538449036","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/card","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ac0867bcf88e5f017160a21727b0cccb1933cf2","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.586e740dd.0.tgz","fileCount":19,"integrity":"sha512-+iAxVcDJ4FinBjIAfz6cQ1eID+6ocJY7Bzr6iwqLaclr+CoBVQqzgHPqhPlP9F79zyK6KnQWMN8wywoIcm8Ruw==","signatures":[{"sig":"MEYCIQD/3k3KaB/AKk4Dnz2U42IRiPu3mSzOHBPm+YV9UUvtSQIhAMBYB9rKAmbZf8Un3YIH6OHC3K1n1SrZnAVPqpvmkw6+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271583},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.586e740dd.0_1633019482512_0.25775705841203567","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/card","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d881c22255bcc0e9b2ee95331e3dfdd11445681a","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.2ac92d766.0.tgz","fileCount":19,"integrity":"sha512-lJPq5v4rY7+cfPB+YPvG9Qk+cjbYTTDNGjwSnM0sZwl/uG88GkzCZ/4u69McJ6vjSb22MrWeZO0O91/0/nRGLA==","signatures":[{"sig":"MEYCIQD9FVI2x0M9N9gIRPDcFwic/SNtreIU2HNOLWG65jp4+AIhAMhEvJy3m2u6GuCawQ7uugIPrIuL+toOfa7+9Qwlg5J6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271583},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.2ac92d766.0_1633462113674_0.6203565245728087","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/card","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bea779f307ee6f85cdb26f47cc84ae71c903c3b","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.353ca7e9f.0.tgz","fileCount":19,"integrity":"sha512-w7mYR3M7jRYrbSChBWci0TBsYS02m1Gbrpr95XZBYl3eXs+brbz1VUs76F0KNm3bueT4Tthd7TMf+Ur7ALq46g==","signatures":[{"sig":"MEUCIGgLFeO4ptkCBBh+gjKc1muRqLhrmhqrK1hKfbH4MfUjAiEAoDK6mDKFgSU4TBJG5+Tb7U/dDxRGOacmtk1l1RRAROI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271583},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.353ca7e9f.0_1633718819697_0.22200535897712736","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/card","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"061baba9a9b507dc9a207f1e577fab98fee49fe8","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.c78ff0429.0.tgz","fileCount":19,"integrity":"sha512-XyAUjraBgOs5SgN1prPcpeaNEAs9tQeQjAPAkma/A0ZDvj7o1D2hPUG/EJfRG5JUFwsDd8Xe7VBy90Ix+al17Q==","signatures":[{"sig":"MEUCIGlUi0rLTXlAixAMvTPeFSch27BkpW2ak8gWKZ7wctmkAiEAj4vmkXdguxVCGNKLL/xqllGYgh7I/dXb4yUZbwGIkgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.c78ff0429.0_1633972925859_0.36803104355209393","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/card","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"072a21d94d3a0ed4dc55371a76ad94171fcbbe8d","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.261f2db59.0.tgz","fileCount":19,"integrity":"sha512-3kRxVAyV5z+zoLHM7lO+HZyshNC+JEJ4z60sCfVWl1KjJB7kGDBE3sNK/x1PfA8W5QM07641z8RjQDpLrChUVw==","signatures":[{"sig":"MEUCIGhTgJCgCPPW7TXw3EnKQI6SegsMcOgAmAbFx7CdNxg8AiEAqKN+TxDrBPp8Hn6jLy22Eji3awnZcfWq4i9MKuiq3MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.261f2db59.0_1634749183325_0.12041351230047348","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/card","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"693571c6e45abe281e2e83e385ee4ad6fbffb229","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.9803d2dc1.0.tgz","fileCount":19,"integrity":"sha512-IxyBhKepdj57IPfelMXdYNBz6dQWYB86sAvbDf+cMZGHMKNIs77t55siIP+Ykkox5afi9ASdI/rsp3r29UK7SA==","signatures":[{"sig":"MEUCIBgia/0tDQGKzzEMuQF3TenwgMhLEas2dJ7ff/uHzukXAiEAoxQF2cEp7xV0L1s4wbtdJVUD821tCYq2WCHDxzMuztU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.9803d2dc1.0_1634757715517_0.554851377196798","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/card","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f03968e9006840da83a84f81bbb88037706ed43f","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.348665978.0.tgz","fileCount":19,"integrity":"sha512-Yi4Js+gZMLSti8mjyIeO9iZuVsilV7A8WQttfdm9uCC7TDt4z9b+coXXfCcbnPRlqcVOhBguHdQWyx+c8R+l+g==","signatures":[{"sig":"MEQCICUHBF1YLT4AT4pU3HPaiMvzPtyMLmSqrdkgZaRAb8qtAiBp6QWU6E5q9jDC9OcycTEl3YtUS9x8zCF2A27f41MdAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.348665978.0_1634827848927_0.6012117900784646","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/card","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2a36445e1e89a6f3f9837b8083c6b4ac7eeb9e3","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.b2b979a8a.0.tgz","fileCount":19,"integrity":"sha512-w+JFCcPSw0MpsUW6jmnlOQQ2EmtWzhyuX3lzHgQv5+lnTzz58P9q+Sk6hEtUj/kuQLYi0DPiIhi2RWmDqKWMFQ==","signatures":[{"sig":"MEQCIGi3BHEH/x2EtE2PFx+vR71sihY4DyBf1Qep+iO7pkX1AiBQAaP140ESPOdYPDrG1hK9m6PpDc/vZFo2QjQA9Rldzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.b2b979a8a.0_1635433941681_0.48807267985282965","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/card","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8876fe26f9b55b7a1e739e559bcb528bf8361618","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":19,"integrity":"sha512-vTbHjnzUfvOp9Wgk0NUcIbvH5rqROJff4kgx9tjLFAxPlemyaqzvJHTtMNEiaynmCIXs28agPSbt1z53m2qHEQ==","signatures":[{"sig":"MEYCIQCuq1JmSFAhAq2oVdLC9/i/pCp/JkR+G9qzVssCURCpOAIhAIGeMydF1t+Rj4KlD6ozSt08mXf4o9wM5vVCIuoulbHp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.1af7c1c4a.0_1635443572044_0.09582902199374121","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/card","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cbcac85a3852a9aba8f147ff907091962d4fa0c","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.4afd353cd.0.tgz","fileCount":19,"integrity":"sha512-RKPRbFJc7/hc9dYlizYPp0m96MKk8c2FlUioiRKzQ0czUbrscPt+PDbwTgpgZrQalGDWleExSUmb2BtdWaBpRA==","signatures":[{"sig":"MEUCIB4nR4Omn+cLckdq0HVFbztJz1fl7jFrdDLKCRMcC1F3AiEAtR0AAK9oQlMd56rX23fearDG9kBEgVCg5Kj1ss11UHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.4afd353cd.0_1635519695667_0.8809167341591553","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/card","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b24c40ca99739b14f2b30b1e3b9edd23a0c96180","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.a986df922.0.tgz","fileCount":19,"integrity":"sha512-va3QXaqMHVOJrnhWQmVnsPQ2bns6H4LQpAGpcNSgGz1L+355PiUHUVTugKSiRoGmrf9nZ1S2crmUjMa/ZPbggQ==","signatures":[{"sig":"MEUCIBRQOTVxRw5xxe3iZ1OlbBGLoNy4la2fyFEQGKzWJV18AiEA4fcZIUnCTRxre4AHjjMrMeUEoG/2szAGUnFwJlFtZjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.a986df922.0_1635543304482_0.996730039513273","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/card","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8ae6fba2d828a351a638141f3c9c02ddfd61239","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.c3cdff07b.0.tgz","fileCount":19,"integrity":"sha512-gHb7nYTCzya4OZB81Q+bfCUx/pX9UqIc0oBp7GG/B2w/K4oGUrikjr2QiU4+XOHrD8ZPj/ASEubuwaxdxjayEw==","signatures":[{"sig":"MEUCIFTMGPU43IlFm7ALkztLHm5jTvagne+vQSdTaBWbbcl5AiEAtJGy2aWrA5HbWgnQbYZIZraKv5iPIJ8btv/oxwZQ4So=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.c3cdff07b.0_1636484756367_0.30462760371322095","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/card","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a56683d60b2cb4daf3b536a9e48a1c0677306c93","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.468392606.0.tgz","fileCount":19,"integrity":"sha512-uy+tccgzXMQ/IwcPCuE+CjffV+5JXuoVX/nt39d9b6YejnbuCNCwxHFbH5tFQ2kJ8DLicowNtExTlQ/i29l9pg==","signatures":[{"sig":"MEYCIQDtlioDzIziOCR83OtpbadcZpHRSrlRDLvExE7V/CWWAwIhALoRoVqRzrGPBtD8DyQCtrng33G/Qj9KLHYc5Bqnf1Pb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.468392606.0_1636659612618_0.8460265195458314","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/card","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5fa3a5900082a0d7e49ccef9e0e91ea8b72b776","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.828f9803b.0.tgz","fileCount":19,"integrity":"sha512-yZrCGBm427Sh2OeF05m/wur1M46hbvJmDDgDCBouq9BW/wXhn2xiuknSRfjHih/Xyc3YCwENgJdPwcNcJLJOqw==","signatures":[{"sig":"MEYCIQC0NjNKaonKnWM+q64vekzkgPYYL+b/7Ju0lMlZ4RJyOwIhAIeSpozedob1qUDudduLDepnijLr5qQ1YlZiJhx/w3kj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.828f9803b.0_1636660254966_0.27402917788318537","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/card","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b09449cc5f15eb52572deaf16128f50bbc141a7","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.8795cba87.0.tgz","fileCount":19,"integrity":"sha512-nNuhQ1IhZrrQSAFmuVrqvxMydG4IdHg/8+h1AyJ7vHBKoW9BsyS9pVlkEfaP2kdbE2wlAC42FCcAuLj4/SX1yg==","signatures":[{"sig":"MEUCIQDH8mgQypTqmqa3pSXrHJnUifTbedibT3HwUTOQB/NGSwIgViTGk/H/c37fhwL0fkVgIjjbMowbJYj5+m6WLD1L9uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.8795cba87.0_1636660611130_0.3580858751550773","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/card","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393a0ca23d0c9cd6234e7eeec8c8fae8a5afcf6d","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.cd7f8cace.0.tgz","fileCount":19,"integrity":"sha512-+pGWeMUefzRBEoL/gxdTZnKI6FZakcmYDEp05/jW7Z34ESeXOSEdu44KPR/4SrakV8KtwKqITw2VAGBA1HYcXA==","signatures":[{"sig":"MEUCIGIwwpObykQxptJYW9q94urMxEhHY41j7gm/xshPH29+AiEAnSZtVVGqPapR5sCKvbwlXOIi67u0+SgKbt5yoel9DL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.cd7f8cace.0_1636660713672_0.3535323827273109","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/card","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5a0d64738a002c410d52a16082e32c3835efedb","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.207230eb8.0.tgz","fileCount":19,"integrity":"sha512-rTBw7ixF6rWaPUPXrtqBp3gk5hmxoMTmFRh4+aGE4gsRHRMHMI38fdz3edFUpzcrMWIY7gD5xarST+O3xmKjMg==","signatures":[{"sig":"MEUCIQCY+t1qG7XMcyIDuRjAytmLeJJC7ONUy0nSGP/kSJrICgIgRyxZeeDul88tztvu8DVkx9JrBIOawaq1+xQ+lTBdiDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.207230eb8.0_1636669470813_0.2636267701693118","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/card","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdbebfe1884a866ec1de2da32800ef12cfe9a51a","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.991fb99f7.0.tgz","fileCount":19,"integrity":"sha512-ADJdEpa+MjQUhJ9U3gGxedOJ0qDXhvcdEr4RHDfvRwqBQeRL+NJPXps548U1/OOAyf+LTkvyDAp+aOSeA9nDFQ==","signatures":[{"sig":"MEQCIHafCGgYoxgk653PU5xs9p5eea0ZlvpbvcYit2+Tl9r8AiAjcmSRxWn/t1R/Yey91QD72iepn1VI+XcotOyYqqbgtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.991fb99f7.0_1636670191232_0.001402566405181771","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/card","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e448d05f6251973da09944348808e579848a3431","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.15db4f164.0.tgz","fileCount":19,"integrity":"sha512-jPHD0PPDnjvyIEvzXm8bnXsG5Dxc8VEDiICdSgMBzBHW+L7lzYdrT2TRlmidYtd1IlyazCzCmUjWuYA0SOmlLg==","signatures":[{"sig":"MEUCIDuaMx2MONPt/eX0OWT6jt/asWwmgrvb05VOfUYjT0iCAiEA2dMsMJxXrXSYM7mtLPKBjIAggLUp8fdehCcZtTC8skY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.15db4f164.0_1636738192523_0.5947377256747031","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/card","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcfe4d8f1c139ff6bd270665b9a95918724c1115","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":19,"integrity":"sha512-qVsIFF66FPJslO8c1Z7Hu5qvz9a36U51XJkI3xz2cuo8CJQkLbT17neX1ka7n9DJqdXese2BnZGJlAr2es+lLA==","signatures":[{"sig":"MEUCIBdVS0ojDZc/vfwkH7kJALYsbdCi1YoI6Zo65RWPDSWBAiEA1WdaDJAI33Jvy2mc9eGuBSXjlKriSCKD4/c6XaJTpgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.8fcad5a3c.0_1636744431833_0.27813892770260185","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/card","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98cf7a89de12a1977e04e435d5d67526c5c2229a","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.f81fb1d23.0.tgz","fileCount":19,"integrity":"sha512-LWLfNu7c8dyirUnrnVl2qjD6NDu3OBnhAZr1jACxyTFLlCYeJb+YRT30CxrkJPWTm7sus1X/o7fGCue8JLqw/Q==","signatures":[{"sig":"MEQCIE3UidY4qwxs82EULbGDi/oqCIcWQ5DGCCSp0IW/PVRKAiBm+/UCDFyHk9t3w0eZ3fUQxzMmZFzhW+jXN43z4yfhcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.f81fb1d23.0_1636756821389_0.02327808920425678","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/card","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1779802d25b81764394a5ad577c73d6106553630","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.783f6fd5a.0.tgz","fileCount":19,"integrity":"sha512-dDKScz5rBw+412bi9g3djVc11yqI9odrAU8hliSH4arifaDslCzg6/Ni1unPGY545f7mqZkOSVng2RFs7QaivA==","signatures":[{"sig":"MEUCIHa09RyTz2MZRAT8OzG8U0m44/Abpad0N1ruSHk9QBseAiEAn6lUonZE30my1VhKL/q5eFaXMW6NMrDCr2Dm0q4DDRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0aSCRA9TVsSAnZWagAApK0QAKQdPeEtzvQFB4lcK0pi\nySdL2LpJ23A3BTsJmfaW+DdsYHcAf8+kMVcZO2K+fdULT1ZZNYC2/hFoF1eQ\n2rvM88eDhxyyE8LOyMgQpXnPQpoczxMzxT3PQeULaejk+NtypaytLyGEZGNV\n+2TBjk9wFir4cmy9dQpv47pbsS5n+E1cqsD8j7NTqAgwt9o5XlD0BOMCqTZA\nSLqInLCVdy/MNuHcbVuTLrU18PFME+h4hNoIoGcYj2VVBKMqmFgInpuaFwYn\nVitmjISNznvVKkgOXjl0NGH71qDP6R+7JxzRsAhzuU/kdxiNppRhYITwW74A\nMJ6RhQMsyqyVrOViunTfjQxzShpoxb3ukSXbtajSlQr0G6HmvKt9oBre0maA\njV4lJnar0bsOTDrTGUsq63DusgcNVcysNk0WRLeEdakj86wJ4wCHqB0HrICp\neVUrVPP9E0oDfKU9+tjADoJQd/E3pZZsLnsECjXCj3lewATcoKKkPLVO/dDZ\nNklSQhVjsZnJLltQMKQwTxSg3JMyGAQ2R2yePCLVgavJkwwXcrnc6mmwMkuF\njevYg/LG9vUVhb3dTZGlBqeVQxG/OOPDiy4JYY1WVWzzCUPIE+aoEGF18iaA\nIMbEoqTJ46TJ560qQytLck761Lux6yQkhTWu0RVQ538TUEhyKXAoVP5mOtcW\nX6eF\r\n=6VLC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.783f6fd5a.0_1637041810118_0.5738377159474044","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/card","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b71917104f992a48c118ee31b2123cdea22bd87","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.d57ec74c7.0.tgz","fileCount":19,"integrity":"sha512-LGrID+cymDugsCFB2ZSciRg1CtIKGzVHenBGi1xAC4aA9rPPZv5pGHQfutvvRGUDur3RRkEM6y0UOi5W5AqUuw==","signatures":[{"sig":"MEQCIFK5Ra/v4eu6ZzbYS6P8ZDevu2PPK7nnhvFttbFrZOv9AiAIo3ALr5Gk3KaGyC30fGW4W3geFEwNv7Lr1m+9LDsBTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9lmCRA9TVsSAnZWagAAfb4P/2Wfa3tnBGZCX6GvdMux\n5QK3q5uby2lST0y79KMFf8QlGDCByiWZunBLZ10TfiOLUlx0v82OCVhDy5tW\ntczWbgNYFifXkdgf8Q/n3A4FLysnWsHQdIxOxxvtLn8/Z3OSZjAjvObCDM9L\ndhCSvvuibAJbC4fEi8ggUf/T3zQP6aolQhbm1xJVASgXqmx8CQGQmMKmg+YC\nSOX+4SHJaQ+jldaKFSeNgHtKs3s6FfVofSwxgVuAgv6cjT0lXjraCzdK+pd6\nY1PrXipLzSWDL2Jx1zLZWAi9Q94WMnvpYsONBVNhmgQvbnLaBfsKRNpYPunP\nHlVZ5t4dCbmf8ZQAALO+7Gjvg+TUOH8tvHJQMzMCfeH6rrU3elzUAn1NdZOn\njFkz3XMlbRPpaZgbdNmZni2PHb/3L0UGVGYvsxRhFOV8jl/adE3yWJUs+F91\nrxjoqYXd/ULnpeggb8MbjYdYWTCxwQ+htRRUgq9Qe1MC8O4DU513IqzhlvPM\nD8maxapYLsJCap6ohDIrwpGBU5FXybrkGgsTfECLsfpnE+P7U71xK2hxjiPg\ngQuyxCbKtH23dcRox8nN5RMf1j4j0HHiE6Ipvyxa+vfOoRw0gcw52uOmSQwr\nRD5QaVtoXlzd4Ar2wZqbC/CnuXsOpXeYtMYC6Ph4mX0hQs/j35LuqrSc162j\nhQLL\r\n=HhU4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.d57ec74c7.0_1637079397910_0.4249318300868674","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/card","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e21cf53eaa64e8323337311dd5a89ee770bcbcb","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.554c71829.0.tgz","fileCount":19,"integrity":"sha512-vj7SugHLnDQYxIGPj7BpM45FZHt9TCI8zWMZX06KD2awVdBqMv81PisW6vFxZ3wKJZ+mny3qru31o4fajhrjJA==","signatures":[{"sig":"MEQCIGaNTqm5kPeIUo22gt6zLuJF0KzqCnIJMnuXg8kOYLrBAiB3Qem0J+/VU1Hlrd3RmHc0uH/eLHhSO148IQpWBhOo/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9oRCRA9TVsSAnZWagAAutoQAILRgeukzRhAYaxco1pC\npLDNL9G/vZeyJj+4Djb7zNwfgbQ05KmkFwQNSV8Dm2bv+CseyBm2rq/ALdU+\nNC0bzbeff+GbFsa9not83eQUVyArCjH35hR4z0hXAlbn8jkfqNI9/ajnDlPM\niTcPQOpULXmBd8pGyamu1qSBarft5ne+523NauAV0GLRS3z8Rg237xzo/Ac9\nJmJxO7kBlzvgjpcWlrmwoCCZoExL6SsO4oYewQFJRMAnw/MLs3iteTwj5m3Y\nqGfO8m+gc7dAsgH45ovMLy+7gG1suk1bNUpopznQ4zkSznTCghwCi8Q1ozen\nRAdrngaDedgrVKAjMiQIwmRaK1P/zyZJsKluZ5AP514EdzMWLRPipNVoD6H8\nyuItArYJmIt33NgdDbIYYFZjYS8ba/9zdiKYYCYEym+zEpTXNOAd9et/qmqF\nf800BbFAYMlk86kbNZ1XdmRvduL8Oeu2HEXcDJrseVQv83e5QHUQHyMdUeHD\nzEz4/N3s80IIQEem0QFD2J7OytRT8grEYcsj5wXZVgNF1GqT9XdcLAa/sQGW\nEdrd764+V5EKUUkEAdyC0CWg7SU3cvznkUZfv5FRY8D0yV0LJs6G5S6Duxes\n8bvuiXQ8SW3wBut4dOr2/welGWb1+GX82ykU9GX6X+HrXRTda7rA9fosNGWJ\n8/oT\r\n=KbyI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.554c71829.0_1637079569565_0.898750687164563","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/card","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"700e6b33933d126d0d5e186b99df767a319e86ab","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.3ef470efe.0.tgz","fileCount":19,"integrity":"sha512-0lvnXgwO+gQxaoxyfJNXme1eyfiH0mh8dJ8DSJPKdoyU6dnbKZLSWaazbd1qXCa9B1hgk/Ll78wt7FQcC7aeIQ==","signatures":[{"sig":"MEUCIQDdRfmuqQc+vlkA/t3squHdNzZj9Lw0H21zs+Ka6ejM2QIgB2xMH+S/UFROZ72E8VB6l3rftmNhG4srNCggCphOY1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9s0CRA9TVsSAnZWagAA4jsP/3mi/Ii0UBzBG+2uWUQp\n6HJr/L5eIjHJI65xg0SHNDM8rUxymubazAvqL4gEeR9ttoZKm2/CB2XiCa+8\nNhmLm/2LSk/O9uyrsy6+Zf0+ZN44dfl8krCIH2SFR1VC41kGUR5d+AAcl4f/\nIVtne83qILJwuOFBr0T1nq0+yKwYcHU4wxPbIRi+xUQ5fGtF41uBMAXmr6zA\nnNyVlCP844G4/g/+7MDDr72mspHTctyYDs27b91McNOOaUrsBZf6nG9PonBJ\nCJ6ty/1YYHkxu93HalIuQCsoOILYS5uiYSttR9T/K22gBNiDwz/d5aewXVCV\na8AoJBncuMaDBOM5q0xEa+f8rC5Q92RWJLEkbg7ZeQsmqDfxgO3SD+SrU0H5\nlilntSezBuo6kOxLJyvf1ItQdt7qsNReoFTyup5+KLrgL+UcGk9Z+cSQaTIX\nM1bIKVOx78ZkZMVmqQ2/Drc2Yol5RVULe9qdAJKje96RNe/O0m73PwhX+pMs\nLOqyPDNfwuFJHTPa6NpIE0rLcNUG6hpjerhtuX8Zb84QwCYGnr5mcoaJ9sNt\nPMcFo5LMipuenbRAVl4Qy+jgiLZZV78QudWwQFUt2TYEx85eOC6SHIIKHSv9\nsPZiUMQh8v2eCO5T+to80ULWq/PmmfY62Qh62+q+gLsKVcfBTVguqo1+fRwG\nEWBm\r\n=mV6S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.3ef470efe.0_1637079859943_0.5857563366980678","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/card","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11f1a9aad7afea1586f9e5a11eb25fa44b540c37","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.61a28b2b5.0.tgz","fileCount":19,"integrity":"sha512-BoGgxewmXmQIvX2G+I+ir/Nea9i5V951uxVjngf5bh4dtympliCOzC7QGJhRC0Gv4ZeK7IvzipKDsUyt0Nlsow==","signatures":[{"sig":"MEUCIQC1Cj7EYOmHmrLMP0Dail6fyt+1iFtVxRmVRH7+aBgL3QIgda0N49fdvtf3YcITe6t16MTUQb1VF+H+y9mNhOPQq2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVENCRA9TVsSAnZWagAAZkEP/RNP2gnwUO/Cr4mShfo9\n07x9fOkwOM1C+iWcx1uNwzsrP5auNO6/lBVK2VS5UckBDiHVYvzLtTEhszTe\nLIhG7WGg0+SrowUK8vUEPjeNSLiojxFATjKYKV2rLVofqCyuFP525RGffNLS\nXdHxhmtd42FPW92dfwIEpgzSjHeZbJwK521FHtMyd2y+zAIP9FrEZDZcmOIh\noE1pyzBAr+lSAsY0wafQ2jDHyKgZ0afGZYxT8IJlM/GFE8fjkO44ID/8vBPi\nh7PIFFtzoE0cw0QK7pUyzMl8peCiqblNv2zOJPJOyFMs0qOt0v/HfrqPNkot\n50cNdtDstbRi4VyF/GRvdrDZ4nb93+UF/KioAEdoDIdDgq3zQZ/RjSandg51\nfZ4uKFwZ47AboZBiN/gwVa3bePEaLzIlqPVGnOFt70ZbD07uzxnY5IoJGxn4\nxfw8gyiiPJMbHFWdRFcVfL7/+XMkLCie1KA+AleBWe/DoaUgnpd4XfwX2R1w\nlO7CwOeGaFJVRlESUT6A4wCHaEszNrlYltxJx6B5fJj4sjO//vrM+2ZoX55Y\nqgq/BbSQxiBr5+s/4HGD1ERmZoQs+tGPxB9F1ddx2EJOKJAkbNoMRw+tRyUT\nb1QlVQFL1iPFSdKADki3fP7qWIxEZi6pFrSYE0w81khh5DuY1WibZ0dzTxZl\nmpiC\r\n=sFxa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.61a28b2b5.0_1637175565703_0.8158817549406687","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/card","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e13eec82af9e80cc90ef843ce79235ed0b2a6aa","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.fae6c652d.0.tgz","fileCount":19,"integrity":"sha512-/3EQTm/6MSdUGN2qOrWFwd6stZikjTelkDxjRWFZB0VPtz6+AsZytaBhgCVQCNKIJveHjH5t4FPspUyGnstvEA==","signatures":[{"sig":"MEUCIQD7vvoRJGO76MmRtckAxuTyOpM5fkjxy158M6K5aJ8ruQIgcTL9/gmX9gnNCj95xIRv1774nT7Z8Nxhtc58/wAuNi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln5mCRA9TVsSAnZWagAA4dMQAJVdp4ZjKx2POOqi5T47\ncPMHUQbM3ttXzU8xJLyYOru1BE8UgQHyeq++9UaeRecnDD77ugSeZnhS8Kjh\nAnGCiP2/e58YHR3QIMa9pOMNTctZU/QO1C14ICAdHPEyc8KvrSnWJley6NwJ\nYY2zLMLYjAPY/KPsurIRg0ZdHNHoEGhyWSf9o0lTw9Xg2mLzwXwm2dXNhWoC\nRt9Kbn6v9bB6SfiFEaZaJQ3awHo9m9suoGMklyOcy/Uydk0mgJR/gSRR3qmk\nTRYIFz98oBdWFQfKNKlcxApQFg2dRbJhI9BL5P0j+7yCh4HKSj7kV2ZkZ8xJ\nzxLIBpzcmUU502BbvYPUMoExPwpGpyf/aOosilkIy4ck6JVLSpBD/CI8I5BI\n8FyO4/llBWbTHqx0x3v4/PqgsBYcm9Ezl/CiP1Cdut7XB3HuxHFRHOSm9ey9\nKs1u3vKVjlEmhWXb2dHee/8MZfb5x+he3e8joe+fgRVsEoyTKR+f0lnIm8gD\nO2G3yqsEXiThernJ4ESzjCtdkGDBZD1Z+ssYU9bqW+dMtX+3Ct8uxocLUNE9\nf7A4EXG2vNirQMTp43k+lAlcR9DU8UfJ8zLzpMBqFhYVBjwpn8zqCnbVxZHC\n3JtAEZMDT0PlbYEdvXO7c3ECT/AriQabiVdP0ACXjOH5+LNKE6doKUHkv2Mr\nSFW8\r\n=/R5I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.fae6c652d.0_1637252710010_0.37315090763546777","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/card","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c34f666db36d68922361608972cd90a48a7164e1","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.978a3b5bb.0.tgz","fileCount":19,"integrity":"sha512-bkF2KQekGkKaE8XR3EyYqkxrM2LXiSQbo3Kb3ffGXDCMO5cOLyqJnWm3//Gun0lEK52AUU+ZuRykHCgMhSVhyw==","signatures":[{"sig":"MEYCIQDkoGA/4QaFi2GFMrmIgmT5dlk8KJCTtfxPKTMCmP7eIAIhAMNx6TrNJnNgDHpag4TE0VGhD2z5xWo2P/3thmgZWvBl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/1vCRA9TVsSAnZWagAAitUP/2Ngo8DteCzH+i22I5Yn\nlo2dLMMlZeXhQp5XfR44cFsm5cIMcSKE1jQQAwbtqIugmM4HY+WXWluubau/\nwtaAblR9Pt+QZEKDG+22durPEr7tAOZse4ngrOwBH5FJ7cqjPUTwP+yF2LWX\nPolZ9VQu3BThE1dpCOz6QffP9lrh94hXmahx0FElkotnYZvKJ9Yxx47SrySO\njV7oFYlEjtpUSdtE3ehVTMN3nPHcDaqGx2NQ/NjAF8TXGTVWScDmkFo9lR3+\nULB27pSwD4BM3xA/o6uJO8sNnDJhGQyZcJ7lQVwLYyw+X1dSV8TNKQSUgyUq\nQzhDhB9vVV0BTklhq50q5OrpY5JPvIlabHNun+heIAPxNEyquH1ksalHwsi/\nzcKq/G47RD8oBLaKULfidoR/llgx9DNQV1fNIenyvRF27ax9x2fDYPkg4sm0\nE44fSyzSUiPaS74Z3jsEDSk+DANDFB5pfyK4k2rs5CgjqkYNK3iGkr0pOhJh\niQtAZzfHoOY3OGcsxea4zbz0WXMgOGteD8b3SRciALIYEBEt5C4b8/aZCHy3\nOM/IBJE3AxM/j+qiraAy0SA2dYSlB6GylA9zI8qpgdVs/yJkdGoPmX4C5H4a\n4m8/ipPjrmhacMPzruuRr8jpwdgwzC71iUE0PG3Nd8jQC3VvJ6OtoQ3TvWbN\nLpkN\r\n=caio\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.978a3b5bb.0_1637350767466_0.07667458849806352","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/card","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b33301f303beb2e54122674ba2e84fa07f0c618c","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.e6f43cf44.0.tgz","fileCount":19,"integrity":"sha512-JqIXFV8cy9hQ0Chiodr5uvxOP5ZtzXa1f9Ia5kROrcDzJ3aPhhHfa1ESrGyAYfs0Pwakuvb6lu/5wWurI98oWg==","signatures":[{"sig":"MEYCIQD3G56H6sv+JJ2hCFeIKgJGXfOwfc2N6+7cXzxrU4ZJJAIhAJVARN4+f5PrrZkRCKmhChGtnZNT6Rzd5VEfMCWnXYrI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9TXCRA9TVsSAnZWagAAtWYP/28a5tzhCK5dS1d9jsa+\n8/5EJYkqQpQCIqBxeLrLcvL+Z0tZqVlTIGxjieyY106ioJznwlzPxmgQpj5s\nMkV9Oo2yuduTZFsyat3qoqow3bmOjsMCF++fd/ETEIN7rCXWLLtM26CTthxs\nw0hPhFHovH8+W0kYRBds5hY7JhqUuxDMORZn+q+InSvkz4KKYiUorY7LbV7v\nMDVnxBVIF4WrYjhZRoGNjhQIXjzK2GoePNgZRToOG4jYiDZ19IsopnDDTx5B\nmsDjki1lTdzN1vUFhvkusj14pqmqZE+5M62sz83EiCxvDiMvII/qXR10tnpA\ndp48Ia2ZC2SqO4bLssdY8TP5qPhI0ezYSde3Yr0gBiDpTmZ+LqcOmb5u7STB\nnrk44oXfQLocboY6U3QYa2U+yUvXQl8qmIAdTqViMTlgzOZTrKG/X5XufNbn\n5/CWLfCo5hosHXbJU56GkIu1iV3frisISgQozvzDoO26qWhVjiZOeuYiyf7Y\nwlo8SWc5RfJI9iPubYy8rZVCEUHKuHy1MLsVPB+SezDVOh7Vvo0NkNvWeRSr\nKvFnlTCFejGfzhn7Q4xJenS4i2Ap8t89v1KyDUNDbFa5YdQ40rhDzhYhM7L/\nsWsgj70441s07hyZq4fuOSE7j+hRpA/q/gdq8dDyTl8LNFwsyExCgoOG+Hbi\n+AOP\r\n=54nI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.e6f43cf44.0_1637602518993_0.9694407859263803","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/card","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f2d890202b8d8514755203ff6266d9ab24266ca","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.39cf14bc3.0.tgz","fileCount":19,"integrity":"sha512-YfM8LL8Quu1QDgjJumtdmApbitjczrRLfvHPs5z8OU+Z+ASi03zyaigEm29kPdv5nvLYEOwsq9dxytt6yO2zZA==","signatures":[{"sig":"MEYCIQC5GDx1bcZT/DIejlkHjIsTbVM9jplZm1dBUHpigvf/CwIhAJ/dgnE9OSuM5P/gBFD0sF1I4vLsz1wVOXNvc4og6Cf2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCIKCRA9TVsSAnZWagAAeR0P/1aEipeHd7rYkr5X8pjw\nEkXfK8KorBCAEiGSTtEYwsvUYSE7c0PmcsmJeRIWoRmrZA8n3PmB7ydWwoIa\ntMslfYqwpFg5CN6+4mGO4aMRYWSWReoVjQxagtHQYuwzKjQEvimEPmFm7TZP\n8xOe0Jg9woIjqPBvckZ+kf34TW1nogXsNM6aoNbYvkXHNZY88CGLiKSU6TCR\nVYINzBXqsbYaDedmL1EEtSoxi14K/hfugYjfDqyhPMxOUIEPaZ+5pY7YwRI0\nT/xUYnU9fdEAKM5VV6zT1NWJvtEj58YW4vJ1U3vys1nyjoQ4xnAg6NHKm0r2\nyoQgXk//cCrxkJJr/3R+5cUyZWWs/jNOplgL/UEbpwguE6SHKDQAfb7vHttI\nKZaEpPWY0mhpoyR6i3Z7xRfcy6eJXglX+f3jon3YFyyreuVMYVL9SrcRgiQL\n0nz11nzzPSamH/tqLseYqaohlYKdCpvz29npNfXUFDIX+q37grgsPCIhKZmG\nWMpvPZhlHd2MGwHhhJbNMo66jDaenStYTKeCPYTjdZrb2amwPTHk8+q17LQQ\njBf+wJB8ZTvruC7QJDjk7JBCGTtrpPxMdn5rW8aI7vqN0ZBVBaknXhPmxuL3\nYbC9FxCO6JotGiqVHk1vPM+Dmv5ecHQlPTKgYR6OaAHJUQsOyo3hxIu1zkxG\nzuYB\r\n=zATu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.39cf14bc3.0_1637622282242_0.9564835159610021","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/card","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.93134d453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"248aedc5a275402a153cfee2c9b89203833d715f","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.93134d453.0.tgz","fileCount":19,"integrity":"sha512-OlOlv0hh87wOHBreGSujJVdtOTSAs6SVG1n95OuogUQgak9dAiNG6lo+DvbqkhTTdn5k8qygYoeWwyM29/69VA==","signatures":[{"sig":"MEYCIQCu8tT/A+4OVmiy2l/AqIHGQIFKAKZCXkbzELCq7AbfIAIhANvE38MF75WrRs4ZheB8z2GB+3KPJn4J9gYGwms1SzBj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQsoCRA9TVsSAnZWagAA4HMP+QEV5L1IjGytVGCYK0iT\nAjjzfK8ZiMi1ih9y9T/kR649vd51mW1GX+bhM32jce0H+oW0uPDa22dGw0Pg\nYanHZVF9X1PeKmKjO9urTnFMHJkbSkkf4MCRg75vutzEjJkKE3qp/phI5ZYK\nTWaNKA0ruX+/Shm39rTCUxtAWNLkem6QXovSNTxcs93mewRnat1Gs4P3sb6f\nv9wspdTPgOlw/w/rj8K+BulL4XG4bhQUW6YCxKEivAOHV8Wep3NzaN02sq+I\nae1A3ID7QpwntCK2pS70pCD0RuFDsIjWVeteq+Jxw/HK8qE4JrslPcrkIWN7\noEfOpmG/vnJD74Pzrebe1Zg3qj6DMLWAEkahJcaIA0lfRz/Ac6nAAKacZnW6\nSo7oq9ImBjWGAf9MlPjbBwXhuw3szWbQRjJdMWd+drCXxoM4bt6WZLk7wD75\njgc67HpqLoKtEmIEaXOBxN2QdzPZXTb1SApq/ve/G0eZE+1+J52nJmFNxiW7\nRdL5gXopthsCtz02SgNi0wvBwfS4RjCWylDxU8CDuydpYdUsWHf42EbqAYta\nWfPiJ22USxo8+FgfG9qkZuOiHfJthe/vvQeMwM2sHQ7E/5zF3O2JLCVDXGpc\ne5a5Mr9p09Vs9bpA2ZkEvoU7BdMnUUqXDJSeSz9qPItDGhm/7JxE+/wKXpmZ\nPbj5\r\n=WOxU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.93134d453.0_1637681959800_0.5691191596942269","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/card","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41fc1771cd60e196f490c25fc3d64c8517cac8de","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.bbd11268f.0.tgz","fileCount":19,"integrity":"sha512-cMaFQCx8r/2lkozeLFGhEuOrBubUn43ZB/bvlLQ4YLZICOEA8SwKHTHsmRI5X0arcIjST49UB+GOSQ2hl03rhg==","signatures":[{"sig":"MEQCIEX3NhCYGXpITkch7RwmECS9eiUvVwrjzRE8CNYomC/NAiBuC/tZyJOO7B2Wd5GXhCLULLoC9gvt/4D5v83zEN3aeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWv6CRA9TVsSAnZWagAAO8EP/Rz4qxZ/dK6ep6vHqr1N\njX4Ro7J5x1Ug7a7RV+y8aduIN2XXcYDq8dFv+PY5U1TMHFHlr/wbJGAfXZ0V\ntREfSSqxe5SsgHmIL+0rchFf/QttQMLVlSTn0Ykhv2MMg5hP9RhBri20O/t0\nedYRiJE+K4hf/zWheh2o+k6xW1+6u3OCHcd7D0OlEKfoFnUmq3k9Wcvhce4o\nkw5ABOkFP6h+4cI32iA18U8A59xUJkqNNvcVptnA4wtdfvo/j41wbZnYUDuo\nLLknBKKHotUsq7pzWIbeXnWZv5BfynsiurTpzIF2QZEp1ZzkgvIznfgHWGzz\nRA3rXTxTRSe16NNspQq7tsgy3BB4kIakuTYTNJtp5+JqmkyBbUeVCRlOGage\n1pXS4vBABC/tQMZUPVmJNpgU2tjT+1NlHQq4YuuOlChngvI7W9DXI6hrR2ZS\naBqFbQcCXTtjVYswOs9xuO/QPXHWFlJcNzuEofwXTyAIvBHoTPRisWnyN4wa\n+rCfbSoFSzYP7U+rzbbkYR4YIK3yy6wFe2WXiEZIs1penR0aKXPRPV4DJMM4\nu0m5WT63Cix1PWeYLP6IaKrazUhHp+Pw4JMg7onSkqdWms3sCy0FcxCK3LUA\nK3DXmRUdqkYeLgUEYydJazZ0L4cDX8UDNEVj41vgRDOBrntTqGhiG8JshhIz\nqFCF\r\n=ORJJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.bbd11268f.0_1637706746598_0.3547540305365726","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/card","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1d081d35218f246e6dc5855af99193f6c2929d0","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":19,"integrity":"sha512-4sZeSfRhx9KbcHUo23pajUBU/1N7CL3v1ckF69us3bkJJA+7md7q2PYN33C1l8PWZQl+Z176nV/VCOV/Vyc36g==","signatures":[{"sig":"MEQCIEef3BRq2cUw6WHAFbmaAtyF5koWETqPGZEeosgKzxtCAiASJQ/k7D64vZven8Z3bY8vDKAJtr7nWVowjUy+jumhWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlw/CRA9TVsSAnZWagAABSIQAIj0IJdqVDdq0awTr36E\nlzo5SGaqXJOZaJ9ZCQF3MWrhEA7c6OiyhE7vNnZ/IxZwMa4CHK7btdUIc0GQ\nGdj5InjzTgS2liRCPH+CWBX+XrDB3ArRwR8LMrJJpJ8AxgYBHkuPjEmU+u0/\nO5lxGTcq9ppPagIlYpfo5LVAFzEJ2Qur13bhhpMisgqtMxnFZp46yEFFDnCp\n69No0StoSszscKtzCPsC2WlAZ/KoxC0C0W0hfiXeFoxWR9pCMRVy8jjjAjOz\n52gOlvqFRyaPGE0Vv7sdYOeo1ZEG40cmfAKY6ZtEhHh9H/6WomIXmmwcnmye\nxjrOgE2YJsly3Y3VvhpXFS3ortEgu/902iQQnjC7cjBsmlaxEX+nqnxi7rSQ\nVIMR66RxmZUJy1hDS+TBK7nEAwNv2zSTGgoIwn60FyoUQFAGr9z46tnaHcxq\n7QLr7xVmdkPI73KcmnMpS7Hisn4bVWES8CYjOckQvmg35lcrZdR0F2J3fqVu\n05A1w7s61fHCdHMwubs2SeAQfx/8vxSPlDpB4ZmLhv8Ohw7Eqt+R1LJ7YHk/\nLD5I0u/WQLbd+eOn43iOh2DcbZpoFeIhZCtD9AoRdjsgYi+1rncE6uI9YBEJ\n9i166dBD74z7LpoCm/XuqDg65db1KSyWHp9xdkzvYcUqS3NwwmB35gbm0MIm\n6DPI\r\n=x3Hp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.3db9c4d3d.0_1637768255233_0.38471391467958593","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/card","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7513aca213ca21311f622e28afeb3689b7215adc","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.78305b6d5.0.tgz","fileCount":19,"integrity":"sha512-fwsvDQNsYRS87egdyAr9GAbShXI+G+9hfwL3By+Ar7bSLOiL9Pv44rMQHj0PEMIy/433bwNANAU1bEzznMt/xw==","signatures":[{"sig":"MEUCIQCmgaGiWU9X+VkoierCrUYR7ZYkK3xo2msrzWF1cYbIfAIgE569Eo7CSDWYcYdCwestQeGzWmOPSSDchAH6+5k7AL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpeZCRA9TVsSAnZWagAAM7IQAJmLAnNEZxQbDN4D10nx\nxsRR8glXD/Qi+pV6/6PA4Ch/vyHZIuXxqjvQvRmfr4yBFJA35JDjG6zKEtEb\n6dD46UdOifkPfORTwngJL7THQcFKb32w37+JPydUcd+5t+XrGYQBQgIQiCd+\ncQBw1fkVj9GqcHlicbfHyIxey4Z/xd+X+eCABhVZZDW6l0CADG9nGJcsKLvl\n9/xTAOmAe3nfsW7gtqWL55vqPpH2c/J995bBTvvTtXEp44bD2Og3WhC32RtQ\nCRwnjJhGEQEziGZfkbN5irAxkj3HbXmi6umVMtmN9YDMzakFx4SNe6D1UUDt\nf/wQKn1RCBHxmScv/sTND9qwme/UlmzqdzKS1aAZ1c4AODBMTpnO54lVd0Ru\nkoUgnJbjqn9eicDnaRivZYsRkVqBb+F3YEeX+J7f99zJevtulI/lNJqyN6J+\ngB/GAKAUUJpVYIjDCUUhW0hMs2+vePoTuUo3QPzv5yYO29f/+s0rMgxXgtjS\n8BwDi/I9+hcJaiW97O/a0tYeOjH6FYrG8LpcEti+MtT0bjJrUwxwYe2v+kto\ni43x5oQJPRt29ITJowKFLSsViy7jAqHgdHq1D++e5aQPhzNStDK4OhECPyLU\nqsqwF3jEHLwi5ZJtJON/HSDPwFZh2/k4++0t7RdOnvTr1ElZ763fpAFQ8DVn\nke3B\r\n=WuZu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.78305b6d5.0_1637783449437_0.1611476239566214","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/card","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f11f2ff49bb4ea5de3b53518106ed19b9e6d730","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.43d08ba77.0.tgz","fileCount":19,"integrity":"sha512-caHbpVgCp0w6T7UdBuEOfNAhk4AVcNrRY9UhmhgmDT0D5EULTGLpNvJ5mHYzPZZQYaBPgrd7zTpL/hsuKFUb+g==","signatures":[{"sig":"MEUCIBxj5LJ/DZ4Lic8mmu8f2z74rQmh/BvSlueV3yPVeapAAiEAmYgV7l0SnPAHcsXI5w+X2+9ZjCyGTiQMdcwN4PVde5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqwNCRA9TVsSAnZWagAAFRAQAJi+gU2IjCe9zVkbMTiU\nwLqL/ymbapRcKsVfp5Rq3+RQXx0fM9kkagC1HJraGbdhKyOsEOWt//6PiMn6\n9aDNh9XbLN/FjIwnDH1z3y1K0QaK3e/O5TOnxMMoBvfZtVHzL0m3V3gg22uN\nmkknFLX89OlAUx9P1/fWFgVY/KcXxRbB0r9DFdWpkK055+paaUtAMAxcHMUr\nGfSaSt7DdCj0c96WExxkfh/E6dmosPiO2Zl12A8Dq6JJgNcT5Cb92ktMLqZy\nnFIZOC6mZGPlFztaxrf5Dkoa7vQrWZgLSVfovfa3el0YOm/3HcNRxp1FVE48\nYk3dSAJYd+uqTdNOMNT+AI3uOodm6m6ukGMAspsFSL/73+GEcRYBvVszUE2x\nsvC/EdKamjTinFibJ+o7nMNAfWPPIU+KlkRUKcYjMpQ0vkODl5O8eKllBcKm\nKuj1g/sivbQUBUXzumFPI1MTy85/pI6FuxwEzrbNNuEXF6XYhUOYxrnw4bQr\nIGa/bApDAUbD/NSfE3EsRS1fmzuOdXSRkQ4qEw43IQ7MH2w/r0igKaOu3aeN\n9KnB1IUbhiNfAMSVR3e43yFwa9mycMM3aqTDvbBchqjXGqY1hpkBmjsmu6nD\nHdEjNljH/ZJutuEtg1HHn6aGwgCrSqm2QxAONDrdhF1fMFofwM5MWKf1oD7j\nw9zT\r\n=YSFa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.43d08ba77.0_1638312973793_0.5316932771540948","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/card","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.17a072535.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9433f40abc0bbdbccb58876bc0b19b304077c5e4","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.17a072535.0.tgz","fileCount":19,"integrity":"sha512-FHkJz/xvRVd+nIPvD60aKXq+0FGSUNbzwzuMq443pz2drnKgukUiSz1VxypTN/aBVyknb+EXK0QKB6RAF5aRdQ==","signatures":[{"sig":"MEYCIQDn76vXzNxr+VVW5eeeDg327i7DmPVKybHFFiuDNmnaPAIhAJHca9OM/hLFIbdoJrL9D1u8KSD07/buSyt0qaK5PZJh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQrnCRA9TVsSAnZWagAABoMQAIxrT4974a+PqpQzeraZ\nYdk+VDJMIweuMbD/Xprhfs1esSzJ7usf4+WNJUW38+rMuUjGyOd1dDNn7wID\nM35/NGcp9yUr1nV6NzlMqs87igAIJVCh9v8tBdlsVDHRFxwmsk0go+OjFV5S\nU4L4xLK7bmrCXQAzD2LW3xafdqCygwhocI3eL3r29dKMe6HDawinJoY0iVwO\nvq5keikuY0csa5nSUNyhf/GQge5kPSsjoTpQNYZpLlNCzQE5MZdTM/cQHJYs\nMogSrJx7GGOATAmx/jT/yjJ0UYIJvES1Fuwy8t5WnzFTx5Zp0dlgJu46q6Ff\nFSFiozF0vDNqalPwarB8L2kn30s8W3XwooyJmtN2UMB5MU1Pg45RAt56z0a8\nHqTwjeHxE4ZLczkqeFMOl9ExHlMwjBdPpAL7bod/XGay2R2bq/ykc6U4HrTV\n0A5cywCxIvt/o71gQ7s+ha1/Dn+pW33kn6+1B2plnXazK4d3J7NtKs4vEfC+\n5ci2G42ABBRTWUwJgocMhqL54ZeQMelHvlZHaDgewxuizituCeByMxcFs4u7\n+P/j9N9E0yEV/Wo5q4K0GEq/fbVnE3vMOQZwDoNSr3HU9SsEvczJwfxoKZpP\nPZlcL1Z0htY8lKi2r/j6HbnzzP6E+o8gOvXYxiWKnoMgG+4iBobuW9i9TELh\nuxHj\r\n=TrLh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.17a072535.0_1638468327033_0.4702938447297593","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/card","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.5d809696c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35c9e78340c6a49ffe548cdae6c6a55559ec7ddd","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.5d809696c.0.tgz","fileCount":19,"integrity":"sha512-sDOzU9TNIetoCqa8E7reqdMROsOYMIS/Y8JQFY7m9/IvWqiuXp7um40JPs3++zpjgKnQZKCTiYcIuC0UZFdZEQ==","signatures":[{"sig":"MEUCIQCgzG5Q4eDgXipuUklVKK65IIXwrw+rI+9W8dB1uhb7cQIgLeuWYGIKISTH5jxcvJZEwpdz1gXq9g/JVUEGYSYV/P4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8FCRA9TVsSAnZWagAAoXIP/0J0LlBiOyq5HkDmt+An\n4DxMRBp4oQuy6mogGSaCetvg5fM0RipUkzpRT6iXFZEdWM6+EfK+gb6aMv2Y\nZuPVWQuNGu/traH8CTB6v0VXzSXnw3bH6n9gtF8gi0668C7DiBl/tjKp8KZU\nxUJi/UofEZr//8BA9+YfE1N2yA3HkW1epxCdm/K8eVEdec7DOYn6vAuPcLs3\nEnzvqrD05Chlt++H/qgwk9B46orAvagFTWluQm3y+K80QLA2AFEgmEHqz0Ti\nb7T+mvs4/b+vJ9sbvCT+0fsgYOPnOgX9FNghGo/g/FWoTAH0mVoD6m2wuGLC\nFJ1BtfqxZ8riPPqllRGGfXjpyPLGLM4XInv0MqExpwwjxxhAl6ldKJ7rtfav\nAPg7GazpqRIuVgMoXUslXnl7ZiMFtYxZfQz1xtCHzd4dLzujvExv8fdXv9ZX\ntKNdbFOlTRvP05/ewgbVQdAZPunwauWPG0DFboz/+6Zh8sY8brlII09wEiT0\nIcMMcCgY5ZuOAfaVT/tF3jb4L6TXULn8zJgZxmp1C+Fdl6HOnHRw1t6lmA6W\nbEbFLEhf0oZqFTanySHKVf9gQ4ybUCGN0hOTii6xWowc24zCwbPO9JYmquRy\n09KLreFC2gkWBpGZpa/kN9XnQI8nQivfBslsl0fEEC3lMVR6mGrqczjRinJk\nMEfC\r\n=IHrZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.5d809696c.0_1638985477481_0.9363183460174811","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/card","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"895ce2c919ffc3caf5bb8f5294893b4f7a739988","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.b6510c8c1.0.tgz","fileCount":19,"integrity":"sha512-vDj4OCV0y+cXlnHSA29kXrXAQSLl8TYb9VZg35AYalM9ovAUm9ZYY7u7/JnCNI1cIrcsRx786vx7vUht71FbaA==","signatures":[{"sig":"MEYCIQD8Zl2pjWa2GqhmzDQTlcJVajYZzTxLAnNM0c1x6KyK3QIhAJSPiCaO8NETJKwLEcpQqBzDsqP/Ue1k0rdUCwefRNSn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPQzCRA9TVsSAnZWagAAR8wP+QGHU/veuMo+A82ojSIC\nynHGWcL490sY3bpwG6uhxArzjLnKulSth2KS7qZsMevDk8ST3DO1osv1SdzD\nfgo/yN3+uTYJPbzzgXbAUylvo8BTFJAbic5UCE/ZkjVhhviM7AmVSEISttow\nUwgX4GRegsH74tYqzgwQ9elT6RSv+5tWmcGQWS+nMAAQhY/wegzCsB2feSgK\nUbCD5IEryweYCXR80mBYSrbDOnEFt8UEoW/qH3jkGdmhYsfmLaB1yUhTgd4+\n0mydq3LXaPoZg6nRNXU3uAYX8UPVHUgG2BZZhMA9IN8QQSH72JRyvp4wJxao\nhiCyttOmoU5XAlycvzUsQg6oYiw0VE7v8ebdbIF11JV0Q3hPMYJrqVIe8bnu\nXPUfmM+9STNUICX44aAK4sO+6+lFhr6PnV3lk3OkloF/MsOPHgKLqe1W8goS\nzFbEE8DqiA/ZM/rKcPfAxEKb31LDUT0m3EF+i/B6wLTFsLOoyvVNWd82DPTY\nYSKhUYh1u3N32TtZ/e2pHIaJpw4XX46cavtyFZquPEC2vqwBXhFuZQroY8Ir\n0lV1u83b9vh3vL7Udez91alRtjo8BZsHCCFlIoHuL+p0atw0YlxRuj0D95Az\nk9VNvYeTLhDBoxCYtL6+amtr/LlqRKlelxB1yVmwwKja2CY0GKqjTHoBalXM\nECDD\r\n=JrH5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.b6510c8c1.0_1638986803323_0.7064719465797555","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/card","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.f460e23da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e9ac5798aaf6d0a8e76c612b54c11e44a0dd8c9","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.f460e23da.0.tgz","fileCount":19,"integrity":"sha512-P9WIOliqRTlfQaiFt2Jl3OpBHh6sMgLjp4PN9uRz/hQxBfwnWmUB3xMCCQP/QiF2k85OIfyEz7CxSVlcqXV6ig==","signatures":[{"sig":"MEUCIFOgNiveZTto5k5sQ5XvfYYKPoOWWnJC6AAKQEvp+CRmAiEAuGviljv3RpFbRlF0wb6VzclWo0s6e3WEogACJ2pdHZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3FtCRA9TVsSAnZWagAAZNQP/3OVCD9eCY8PyPmGKVlL\nK8M0xPNA/G8AnuZqBXrqPyVjWWfIdAwTKLnTvljJjblGTjLC6Cn6v0EqbqYv\ngwc1fCLlRLLkXRmF5Lmw8eueAusdIauPS0IcrmZWLLkM9dbu6uPQ/l6JKOCd\nKAU3BjhByekEo/smIZ7S1zRgKxQtb4QrK834TmqA1i+/vmG+hcquE5kXiGK5\ns28ep6X5sRhzP40aFFuCHeK11d9Gvr0oMcaM73TUwqhLTRBqZW/ZPlUN0pO0\nGFe3eeqQvRJG3Gr7AGv1t5miw95FfFmEw+1DLodJRTzUQSkxA88kKDtgjiJZ\n/tdWrIKx2Vg4mib2vGnI3jhtA0YVa/t3kBmOSdluDf2jhOFfWiyvo4IFsCZO\ny/y3/iEn6deWsg96FDoBV3yR52FFDLqPXULKpexWAh/L2bXxUY8z/0Q7XG9o\nu7aalGaXKlvGEadt6Jpb5wI8U94KzVtUU2FVMs0ZeyWYxNggKi5TaByH9R0R\ng63xhiHIAf1Oh2puKFtYr+irUuc3C5vmjZMxqpk2Q18iP6yOtznUNms3mPtv\nKwP5HQVaya69RAhVGfbvVZv7gg3S5N3ldvCCWaahNL6MfQ4ZIMkURixIqtpI\ntwy4/7NEf7expdm540YknamMGNzw7wwkRRIh9IxDSzeLlJEBjAv6FEWj2ikN\nRLyz\r\n=stIE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.f460e23da.0_1639149933274_0.654858814956526","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/card","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"766fc9b98a4bef8e9eba21b2b1a28c406f9ba957","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.7d8ea4624.0.tgz","fileCount":19,"integrity":"sha512-WatP+Ie2PsX0M0CaOyM4bR0jYwF6NIJAUIfk+dm1Tqy4eoHXk4RXbhbKYFNlN5TXXiIPgu6bfQrFou6B+LHDoA==","signatures":[{"sig":"MEUCIQDa3HabdFq8rPtpi66/jgMy07cF2FIan+rE4IhvLC9TPAIgdAV5qq9M60VmfbShIRsVyf3XUpvqodsVh4aUjo8vug0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6qUCRA9TVsSAnZWagAA7jcP+QBpoJi2/H/Ml0JkHOiX\nWZYzCnjCzfGr9Uj8hnK2GCtSsSvZTgJoRDuhyZlV4aT0xDh6Iotw+qOGkaps\neTxXB8vr2vY+rSlVGLAZWTvOzjpsyEYYp/ZCn67oFU8HbHGKadUQTKKyzBiU\nCah2YQ5XKR6/F7qAZSQISaGU/mGLFwa3H7TlDlL++lrOBfZR7l3ZM5g6y3Vz\nyefILdbBoj29hsCmTTFepzS6H562Llj4FngOj/DnByfZOaeYJ6L7d3Dc92y+\nk0tXn+vC09LqiNhiNMT7FXpWJZpSC/ZgcJ96sXAm4aYo79JBCYk2ab8B43lR\n0rEEZKC0nwshnIaWHnUf7JvnnKoxfjNh/r94oNNcSeoUk5ECrrG4f/lnr4k2\nkvE/H9sN0fMWPkDK3ChQ9QtnjdD4AkgSd+W+oIMCym2Zv5dSHJJB0O9EwVHc\nS1RK8pIlWGH47p1qyjTNPCZAZte9PG9UG0CeGW+F2fciNMd2qymdzXFIWC3U\nbilkOO7CQWYAOvp/v6pGDg7cikU8q0+jF8SlW57dwPVS5WKGiIZZvWypoaHW\nmM0mkc+E1YMb5sQVkBGvDa1CroAJ/n5VOZ0bbgSHNvRvCmrGiEL4AgwY3NTQ\nc3+7trfgUvqM7YCi0q42NXqvGatTOm14d4bd6+snE5aM0yTQatT8OtPVjEfF\nmWqt\r\n=h0yA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.7d8ea4624.0_1639164564341_0.25805229024629384","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/card","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc8d0a2647a3788418b6a133598d02b796f75276","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":19,"integrity":"sha512-XyG3PHh5BHry4tpwC3SHD/WCM98NMW8QUppTPGBtQ/f/1n6+pSyZJzUWHjJ5VLwS4rd2rLFA4ehQv8X1u6WfDg==","signatures":[{"sig":"MEUCIQDrMp7ZBR2PopARXdcYdkHxTxaZD9r0hj31JqETozILygIgDHUgeff9APXjUMmlUAKv4wAvK/lsKTmj1O5Sts2cSE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFv2CRA9TVsSAnZWagAAlUsP/jdZn0xu/5LrUq3AhdMQ\nBcHWL59wAh/o73rqPnF7ej4f/AViskhXBxYGBbrSQPprR6LvBCGh1McIDuhx\nWGKvaV4qrLHW2FpW++kJBUK0I+Jbq/BOUpLE0cR2Xq0308VYLu9Kwo8BTK08\nul69cLf5SB7qYYLjWIfYM5ro+7fHgZaJ45+3FEnraj44Qrmd25T0Vvtsttvy\nZbmgw5whb3m+OPySbbsPs3hMNyVNJTJ+SQiSxiVT5WWHkWf14g70DXt511Lq\ngJ6Mlp0Ta6TPbGg59l/aoWTll47lSfiwZrW9aHR4LPzN/o/XFfcRiwRVyXIn\nNHq4MVoFVf3A8pJMSEjn+StdgjoCL1k1QtMw7x05LWeSIuvOE0i8e1o0rA+5\n/uW7fpt5ETB48ay+Dq1rbUtn4RyrmEBnWB7XMcNvWnYWEmhhR5R8dfT5Hfwv\n2WcHMHOEC00+swpiHNPcIGdLecIoQe+EnXRUNHMiwhb2b31pC1RcjeoRxdDY\nZHX47i7m2WY8z4AMUdxvxRCXZTQsEW+AtTlJGVXkktuO2FwdVnGDUZspQkbc\nID00uDxw8MqKmAFXath9WimwpzISjgCFFKM7z7frEJztxoIciraiuhjwkUu/\nmcXUX5rTj4K6tgLlEEEkw8qmJQCXjVpjWU0592wC7hGi5VVjEMt53b6ib+2b\nJkgn\r\n=W1p4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.8fffcb5dd.0_1639472118677_0.39293752208166244","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/card","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f152c368d821d0363741b64279445f4e5dc7db61","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.21e1cb9be.0.tgz","fileCount":19,"integrity":"sha512-KOyGmG53KDhnqrwQAy6N88Hbit2ZNOOLYZAevytEPiR+wK2/4SnoJ2kxqsufHZ+FadG4iyBeXnqzdgNNKod6lQ==","signatures":[{"sig":"MEUCIQCIXhrGkaSp5DHt4ZeOuy33SS4c0ZFpuygw2pEeF/YMuwIgPBiLP6QY8wdLMyzWPTyRkUqfBTCTLU3YBhTaOVJ3Ung=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPMSCRA9TVsSAnZWagAAXN4P/0aheiyNL/2ezXhgHlq2\nUQTfo6LddIKf/x7jfzhI+GC95oMHS4TqeqzCStK39GwA6sWtJea5DNtV48pg\nkT48v1Ql2PHDqiZHDStw4IDra8UFAS24MLc7kJCul+Ku0Q1zzhcYEYKM+Iq3\noa8STp/d+6oOUKlx4LfMF/2aCRedeb323tbYj8Kro9jPS+x8QQoVcKjaZU3H\nnFrCIhvtghEvZ9YJPJ0bcR47+c87qhJTGf8Q7FECyvAcfiHEf4/KLPkt30nz\nYzJUg48E3ffGgvvxN+FAbyxMoSyelWSABflorWWTSFya2UuhRf2i2GIrZ6tU\n6otioQuMHzscsoEFvlCsT6/mtJpaX//EwYS3izeqau7mynjbZa8y/B2DmRTD\niC7xkb5yi/Vah+SwTYdwvxbxOeELbjcGETWdu6JTja9ejr42ST3/4WnaAQoP\nzmfeT1qTW8qMsV5rB2TW2teKk2km0rk0NMjvfPzCdMEcIBFwLBPiq+UEAd+8\n2yCm5UNkpQvx7KZ8ExnNG3BW9FCf40lsvvymBjuwkwdQGtIsO0ZTXSzNrhMd\nPkiPVb54HT7pccPticfsRdMpv7xo27oMWgGj7gprR6w26MqcZxd+VHnxZHOr\nnD/7ZSZQHEpknNnOvJk/+7gdG/equ8kd6bwFTCDTjFtd/iNpckaOkyh+Ezqf\nKts3\r\n=E/aF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.21e1cb9be.0_1639510801862_0.5686750254882988","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/card","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f764a721e003538236331ac025bb1120c35f52d9","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.ba78e8724.0.tgz","fileCount":19,"integrity":"sha512-VMUK29t1ChR84Gw5EiiqFJ4hcmxfW1rTBSvKQAkBSekRnj5hO4QZ3/A+tJahzxWUFJY90d623o/C/ThqiGE6Qw==","signatures":[{"sig":"MEQCIH7Uw1P2fT1cx8HHkOWl7JuXyHLcEmLu7ofyDZtpxWzyAiA5f3mKe8J/P6k2eIh3NuCjj4JSLSMVLnTogUmuXpxLIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumh1CRA9TVsSAnZWagAAylYP/3lEAbQ/bd7BNgaY+bPr\nSSQ+O4ziNp2dyBPEiXqrDpf7AZJVD1wBMpgNTj/GcO7Whh5T3rUWue3K9FJg\n72+5dlGdlcEge7QTcqyCKhbGvePER0FcfjQJ6iYAcYAYuRZgzAp0SiTAl7ku\nonVNJZf/66OSD76JdRZamPnA6ja680OmgnKAmSECENKYTS+3CluDNATe7Bsv\nyVTsFwv2GwSlinMRKSy7P7cMnpPWEtrJVKRQevJPfXPAn5oaqIUHChKS90Nl\nl0kxoJn4jGxUTRWtK7T3+hQapP7dvIaeFbO6475VTBhHy/sYRLHyNAcrohfZ\n30V6B0b4hplzzkUpTFN+NhEIrM8ox1VgF42lsYtaW3i6zJaZhidyDWwOwlxz\nOyPfxfkHMsXX2i5bHH5yg58BOZ5H10KQ7x11sGDnrfiI9+3K7waDM0Wo9tdr\nWvpT4sus2de3P4jaUy6fWIjugOXefBe47IING5J0Tiqy50TJtGHKB95lFYd0\nVfPSy+gjBzDg2MXYzPeSdlatTPCmpIv1tlJEMbHasgpYrMEcCa8Yi5rO9Y+D\nf3Y8g25SEbCfQbddLbR2bteZSu551hmetjNwIpjkjrFLIgfmZVXfaeJxp6R0\nyeQWC8O4t3Rb3ZEYPCII8xe956HTuGQlhmjUeiJYsFLBYw6auJXOvOXgqhf6\nnUdI\r\n=cmT7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.ba78e8724.0_1639606389619_0.4848066084870426","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/card","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e83766de5bc19cc76e196334433d88bd46c20ef","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.e3e073c00.0.tgz","fileCount":19,"integrity":"sha512-JT1WhS0yfQ8nxKAvK6yHTwawY41I3uL3LwHKk8ZniJhFbtzUJ6PDd+Ytro06ZJts1AKHsPxToeA/ydnrCvR/jQ==","signatures":[{"sig":"MEUCIQDi70+tBAJq2mirenG3nwU8FgpimjBxBlkUQM6N7uOmJgIgJ0BGA4hNUi10/XjAgvXZCYzsYB0c3fFJ2tDqW3FqBYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPEjCRA9TVsSAnZWagAA3KkP/2Rq0qA17bBiD3Tv8Bu+\n8Nix/XMSfvdGy3eH1qCZc967iOseL5DW/W8V+rfXcVpTgw3yHiMXwq7cu3xk\nICgn+u2CIaFffaDsRZHc8DvUTG1BhrruZGNlw1IiIqsh6MOnA7+i6zqPahJ6\nGf1G6/JmEpb1zTRrOfdhHhzGsNiRvU6OSH0aY8MItkF/Yg8iXvZKcTF+LeDb\np6pv0T0n2FG6Jsyy6FZSKLWnxHQ6Xh9I5/SWs/abZifPRrqmYuCnng/dsUMB\nSsfxlR64mTcsQlqf4mSNWzXWY31Ky2Q3U80k833ZC3U7GAaFJwjL5MYfFnQF\nK7m0eYxkQlb81wmFdcI8pki1NXpB03C7YyF6iGmiqPnhWmBrBUOvIyp7rL+X\nzYpSrGm0b72vh2wt5fsTRGOj4F1cRU4F7eys8Gi0L/vayo3QvbP2aZdQoKCp\n+h7VvGQ36erPhtxEyT2Jtnl1hwlovsHE0dx3jPh2B8UgQodfouC2WpzVqwSO\nFZ3mO2+XfYYPeTThKIXhRMPf/99dcr4pNIp3MKKxEk5T03VzUGwTvMC9KmzF\nNBXpvCTzahg87DAe0JhqvFm69b5FWEvjX+4gaUilsceIlC2Y0Q92PMLRxYht\noooktD+s+Hu3H2cHK8PfTM3YQZlewq3xNWp6dgNmP+g7e0PxMezyw+Z3TsHi\nuBWl\r\n=oXL8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.e3e073c00.0_1640034595420_0.7385052400077929","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/card","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a187321b5723becc4898dbbc992a42b8f41a2697","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.3366a71d7.0.tgz","fileCount":19,"integrity":"sha512-p/ljoonY9KkOemPcbzN8ySil+XZ3/D1IdRW6xzAKuZrbZOaXlZDCreLBol/9yewtUhXbhqAlmhLj3ZQNfTlmPQ==","signatures":[{"sig":"MEUCIQD+8Gu9/ibatMvehoPli8JLvFlb8r8b7AwYi5vLB4zgBgIgC4EWh/ZPWNKJbLV708ok2GZFu5HvCIMY5RqEAjAldmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxrkCRA9TVsSAnZWagAAtMUQAKLhmRsdNpnk5UUhnQ05\nYOajIWKSjWUtsfRaYEXtY6xwualVHiplq+J1gVAFNvwSY0rJiR2fFcKtFBIx\nQ0zOO+yX37a4yFbosO3/HuptZ+jDm6hON2avbSTStHfvzObBq0kxFBVjhrvO\n1LcOrCgSsR6bBkK8KtwOj7ASko2D0H2F45qy04Wrgio+Pyng2HGXXe/Xssei\nKkSZvFvgt5iJovEWEzADmx4bpjl/gr4l95f+Gde+IV4JmqURiNBFSFcsxLSF\ntP2x4QtdQM7puTZZ5UuZmsabvaaWh3ZCfIDL3C+Yt8F5wYJZ/bcRQs8+78be\nlfV5cfW9C2Sgp0kQ80i6EdUj+Whe2DMPea8DX97CJ/xVj4+qLheV5kSVFlcu\nE2uz7w27UFD3GZMI7+OwqXZEmubvf+exduEYW/rDCBFXCBsyQXX5yYNDI+/J\niF1vzIrtqdUUzoSLpqPaNCyGlM7zEQ2KSBkg6s/NfmKxToD0BxwPSpNAB8a4\ndtCRns+55kI9PXsetDZNTvFG6SqXQQXQ9xMA9xz76hvEwmPzvcq1UZ5slQQp\nKc5LhtUQisTnuwKHcKzUhP1t0zn/EHanP7y8lFG97RJ0ATeWZxbHjDrg0HJA\nlW5g/H89TbEDaCDFe8n0CLNBA08LC5EKDMCF/ysXuI3XWmsV1McEOjBlLyWR\nieAl\r\n=SIpn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.3366a71d7.0_1640176356557_0.8599577710757336","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/card","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1966d8483193f60c448efb890f893c13f7cf5826","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.c047f7c19.0.tgz","fileCount":19,"integrity":"sha512-dqFgCO+DZU8sj/7l6ZboNVjosbJU27tBQ0Y0SqQZPDwzTmZDoa0P6YrsMP95EZQJ4Xlr7Q8oN7RVWdV9eSUVqQ==","signatures":[{"sig":"MEUCIHwEeqd0XbmwNjjlkkzK2FuT/qKUAkK1ity1kF+DHYQlAiEAmUiDh2yQUfEmh8JgaHNla7Glj/vCJzdfKKLRFflmqiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ctMCRA9TVsSAnZWagAAVwIP/1zHYApKn7RnhiJc39jk\nY4hN9A1ey/jLn6KlWQqXWkqgG0SoVdk/u0OLeznUxhQCtHPbiolRGui32llf\nos2EwRG8vFcKpltaPXVqQl/PNrlXvjDj42jTRe6/f+OidSJWSI/lgUkTSsQF\nNeD0tQpc56PitTc1FDytPnysykw1tB1oJRg7I2EByCbvslfAUgI8KEwoz+mR\nC1BbLPTyMMFY3ADINmF6EMCo19gC042yxMd+/vGLCEq5BB+qk6fAC2Bz5+3A\n6O9dPzAJo0g/916OFjW9FdqEZqPwjXSxZoGAMM8Zpd73Up2K24CgpmvQoVqE\naLQ9mzsnY29G2ogq4XmAkjKy/yKKT/QyclsTN6vA8ueZr2m3gb4WeCoUcS8e\nzgAkfYDYHVR1ZWlyG8Q0+hMiixPhpaJGEbxZ02kvBlj2SpJmlfNUpkMtWUeW\nGcpyZ8AC/GrGmenjfPtZBu+R5S7V2qJUij5MYZKVopF9qFkhUh2pIhC8FccP\nncu2aEBGJ2/Ek9LHUzBoKj6FEz7Rlu+tW80gz7MqPOTN8tENef4XKQcHWp66\nubHZdFzDeVGn2fLIQhkQQHUvzW4zC7N6mrmv5YtxMYbfHYAeiQ0G6hYeELRB\n1nhbLoz3bqRxEknsl4UXngUJX+qxew4WpxSj41h63ZjDsD+8I9aw14J7o3Sb\nsbWu\r\n=LU6k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.c047f7c19.0_1641401164502_0.3730428991821335","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/card","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"213a81c45aad8d33ce380446f5de836f072e4248","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.05db65ec0.0.tgz","fileCount":19,"integrity":"sha512-9qp3f0j7RLD5DkwPiloxtuH4f+ImRIzJ7ExIQ00zkwaxwxT/Pid4IVYiXQ6AgEQpFheu2xPXy56B3HAcRfRF1g==","signatures":[{"sig":"MEUCIQDEHwDL+4Ii+BjU1E7BHybeXSGvuiGHro3pLORYpidsCAIgaIWmGfKrgXL8UB6ezy+gbY9LdzcYGe7oxqdDSo8B2nc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yNxCRA9TVsSAnZWagAA17kQAJW1N6L3OrfozjHSoB+v\n2unc2ekp6iouyzpHFrww0NkhRrBuqNjAMXxM91nZqBEnVySO6+/RDmFgPZqt\nI5AOvJjXK5HxZpZ1irbe590WzA5KQ6AxWj7j+a/nh0cT3wAk5tf/0XgwBPmh\n81zZnj/TwZUQ6lx1bCXwSZelEHslz52u63CT3w0ueGfIBVndC524bnQgg2mY\nqsuAiJIFMdprm977a2liDsJ1zuvc8o0N00wE6ZCSlcaH6S+jvLk0doBiAUB5\nJ9N6GPXcwhN/cvAhsMj7qIxyQxKMULwtTJ36L6AWopMIBaodXsZ7vuctkMp3\nxriqvp1yH56RlhmJceI7sIPIc1Rs13SLhIN7afv5xTU1z8ebzxNWp3GDaEhE\nr4EznXLcRebl3qfqF2PssZyTQ0O8NisSCpOBF1uezW2Yd1M4101L1NE8KTS6\n4nA0kOjCkBSLyvTx0Q+jT83D6YOAJGBa6xT/ZBuhweNZ9WPOw1Kf5U1z6nM4\nTFB95Se6kKlXL8q7iUsHJ1Mancvb1t62lzkcHn0ufsAPBTh7/0XmCzO/usWD\nU9QZu7M70CpYqlmuul6hUtFhUZJIXRoIUlYhQcSVLGwejvpeaAlG0R64JqCr\nDWS23N3GkhNF+AuwK2ldLKRvdiy+tdwB8773yGiyY5BCU+2IEd5xGpA+B4cR\nzEaT\r\n=qhax\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.05db65ec0.0_1641489265581_0.46904885482520564","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/card","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf9251694b86a3bd6441b0e6526fdd5ed879625a","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":19,"integrity":"sha512-4jf76m4DEYiI6ITaCfZ3MA+x5drVIz6NEKgjKLSd+eVpG/k4cK1hiv1WVwd5T6spBkEZsI4B9uKU6y/0yTZfeA==","signatures":[{"sig":"MEQCIDPwA/kwK+j1Zy9Uolyot4okgvlETIXo5CfetVmo7vQvAiArU6k/6/nTMiQKRGi2PN0Eul+ueEeqBwsey1v25khV2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GPPCRA9TVsSAnZWagAAAssP/jVwm/Wg25m1ERxQtk8b\nXqA+cxymQeB8T+lja/8JzTpBqDC4/C6v8Z/kNXnE93sTeeT5wwCCouLDkG5n\nknYt3Pxk99f8zSN6utohlKeJzzZGbgisTB8No+yrseA8nRrPmh/bLLZ+2Mf9\nRzJh0diZ84kuCL9VVgTvPsf/dy8MqamjMvH8TM37Kp9uNPmL+5kLhnq4q6Gd\nlgPS7ZCAy6A/4sAqOqYMkX7Aw1oeMmQxasgdwaDH6t7jAulFl3++ZM3YOFib\n9uFEd7PfHBYU8BuYtHQ62B7echZVDo5WlR9HtjNXrY3rjeh8Q5OAwbchJ+al\n1+gOF7AatXMS2iTRi4kGlObm7pnlTyf97zhh/hMuuTW/A4Fm+3TVmeeLEzX6\n0UkmtRbUzPchQjvhvlq+uA3RgUO2+pPzDk6C9MzmaBp41d6cBNnC3WFke6Ue\nkhF0SRHFTo8ezq4xObq7TjkFMsqHBTO+Tyfh6ZhpeTPyellXzyjA1FPSbjrM\nTF40fsOCGAThniMxx+F6oasPrs2l4Is44mQPQlD/WeJlLIZkrhTHToDBYjH0\n4yOTYozNpYMs9mi8ZqRKCQcub81oO5+WvcTrvGLXjYsqhJggQGqQv1rUGFxi\n3ccIdwyQmoANB/LcMCpd2k0kBQw9m4Q8CX+L4as6183aQ+/JFzp8uBAOWtwo\nSpOO\r\n=3Yg3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.6ca8b8f85.0_1641571279515_0.280669491389967","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/card","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f4d9d962291f70e386df903bc6dc4a3e9f205f1","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.173ee7a7a.0.tgz","fileCount":19,"integrity":"sha512-kpLI7/f1ZorV4KOlv7Zq0rW0e3DM3tjw0st7QXDg/szt3YJrpLUu1ZerVxakLrOZ4dT1XVoF3eutdFt7ONTCLw==","signatures":[{"sig":"MEUCIQDmjxMxiBiWgtb7CGwUdNJ3RU3DfMjDCH7YXLe/fWnEPwIgENN6F3pW9nZ5tyPHm6AYY3ejD1nei6nw5MGBlJI0tJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GTECRA9TVsSAnZWagAAAc0QAIWKpac/hs3BXvn60n3r\n/ZlANs4p1LR2kDiHjL/qPO6UTGr+UV9uLwtogH80KQ2uF2BrpyCl/oBdKJ7O\ndanhbxFMjjKB961UhydefsrElVy9T26D4vcVarnfFFGvGNNv7PN2m+mMq0gA\ng1UD3FpRqMO4qdvxW+ty6p5xan6fU/g4VF6kumyvB81aRqRtdN+BzVyaV7Xk\nk8XfBy0+WzZojsIEggDpARRGFuhvNMoVBO1t0bmH9RUGV5xLEtkiZL9bEzvK\n5WVeAe7wanpC7j3S7LSXL0STpjRZrdu8PgG61Bap1bTa39xlDZEfaPUIjQ7c\nvmg6kJ8EhoY/IgpQXeJSKHeDS5HOoMNDKJ4ZDRUCWb9vDN+fNbvdZMDoSi4T\nnLg6725BewXMbWwtr4ysxWm98xK66Palhw+bxHI2JCJ0rdQWF5hFaKlrT7EJ\nhM6qtL7h50jFuUvjmecrXE88ExyUd2Jbws60z1MKiBBHGxW9aWPELPX0FqkC\ngDsVxZOYg7VqsVpf9/tw39xk2HVxR/BemYqSQI0isPWXxHmyIsadmI+VHsH7\nQe4DjayFewryzUBbPTDqTPwwfY/Z9cGFeuT9Q7i7UWMdQoLrYqnEcY8Q2tme\n9A75nkGpd7YLxC+HvP0DcY8xNVuF0LupAOqyj42k4vdK+XwJHNTUjqcwx+SE\nI0oQ\r\n=7rGY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.173ee7a7a.0_1641833667781_0.43795853338373214","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/card","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70a849bde3459ab1e1347234af01f0262e07e035","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.b704e4dfc.0.tgz","fileCount":19,"integrity":"sha512-HxRjzjRJjHmNUi5c3bH/6ymwCra48ylzVt0gg/LEb9TLWYqSPscbI+yoXf2X+OzjQW40IvrrRI05KJfcE0xukw==","signatures":[{"sig":"MEYCIQCtxJWjdbLmpXoN2SEsQZiO+qkPM0fa9wV77QiXUeCwbAIhAMdWl63lQZ/zrxItSYgN2V0YaZ03C/CQ1cnpxecprdup","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HvqCRA9TVsSAnZWagAA8TMQAItZtE26Nly9cEXLotyu\nyjS87Gs+WFD0TVtZTMCgCeFTk/1ay4VnxhVF97NmF0tjPshtwh45I7hGFwB7\nyOeCIry35BUha5PMd4qfru5/pHz6MJFwhKp0tqOC+vivXMSzcKh/HC7cZgnr\nesIyImJG7CdW8Bx9PtA3fDeLFOFGoXKB9yVz6ndVrtFqVEcWlndaKNUrFieh\nrVOJJBU0zCd+AcW2Qkr+bPvOyHna2YrAoZVz5wPA40GP8x8rDvFc9F4b/Gxv\nQ2SPtDr4uxUQdUKZA6AOLJje3G21QdpSZ7tgVkhRs8t2Q5wZQZxNu7joJ/6a\nm0wbhHWpLplbcmzBtBEjZxg8tA3V41JhuwtEvRRY7YtDrFNZRalz0dxdE8uD\nBaJrO1Q4G1KoCyX8b4PLUFjcS7IGHTLRTVJvSg7HfMSI560l+GDOlwXkcMMG\n6MFoqPF9ykiBpF9nkDx+Xv4nEwIE7tMeYn5qKO/YYt0kW+Tr7n5J8m+ahuDW\nndQWMKfeVwHoK/e1y/Tw+jazOdKheE6APKfP/XK/rO2w3NnHSrAEPY2XeugM\nWvzdm+HoDrqMIgBtuP/Z2Wq0sl/cBWc0o4HqAjhwhxSRs7ds0gMqhsIBe/6O\nIk2+nDyOzx7r2SNnhC4GbB8dxIAAKskPRJiCsv3JT4yJt/MQRZmFVQM8C0IA\n0l1u\r\n=Dpw4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.b704e4dfc.0_1641839594175_0.8814253723236289","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/card","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65823e9cf1936ad20cea1518d3b6bbda9436d69e","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.c14e977ee.0.tgz","fileCount":19,"integrity":"sha512-KM81luVXFgTcmtFNUJpRI9A5+xWGkP4l6HJLRMWXUb+S33/siaBy2n42jTyWynWo5K89bzpo0X02GDFx+6aaOw==","signatures":[{"sig":"MEYCIQD8n30DIDghqIQaQB04oVNbq1bQ4KcIYIQP6LwDG8yzGAIhAIPhkwufuHiRYS91H2GwItPKQouXBVbskUGZW5Mwh0q3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3accCRA9TVsSAnZWagAA/CIP/iTQvtUubKpyFE74x8I0\nIG0djvdgXOEvdSPPp6X0JBk3obZhPk0EERBCN1Fn/0KgkXMkPOpXqwqAa771\nfhM7qcKoPlL7f+KxuqARXhvM0Ml2NC/R77xUjUvfUB6rJn2XVhhkJOaq1VmR\nVz/Zkkn3eqpvBDZ34B4AazYHwOm5kAcDitJ6iCRHSBcOFjNCYZfG2qLcpAyM\ns0SCxotMsIm0XlOFaE/TdMu801ZRK7TAQupkFQoYBS7OfPZjO7yTqHa686tl\nKxBCGNFGFgaaq78NWuFGIyl4L8t7Uyv2jcUSd/Q9zZ93eCm/4c/e6b641QXe\ntlRt8HQLsKV907+RaMzVJ24xe5AsgwO+v5awuof4/7N/Gt5qsgMYLNZ0Jzwn\npJzGF18MB9uaCJ7NcsW/uVGHIhEZ580LUbzqmu9Nb4ID6PFm9kdEj66LVIkN\nFNxGEA/jmboZKY2RbP75GdaP9x2Ci699TC/GQCbxkuApsv35iVFADcPGSKPx\nkR+mVyNdU0BBb5aMqtW3sb+hOSNg22+TrVeoe1N7g/ACBYF7iw6QdK7OPxBq\ni0c5KlMuoBPzx7SP0FlocnIXgs5uY41wFdITVhrErnnGJg05cR1PWjN5AJgk\nnf1bxsSFGFQ1EQoNObqG7+gi80j/ZrbDr5k82dq4hy7BnKz0Ji0b1UXq8vBy\nGZvU\r\n=sxIR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.c14e977ee.0_1641916188817_0.4648790577192614","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/card","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e013d77be25538db381d97b5d06ecae3f45f6440","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.b094eaa4e.0.tgz","fileCount":19,"integrity":"sha512-58N/0L2lUD96it6h66URXZpxqJHz9XIMaHsKtMgSxCKkLLGLieOrsphRPMga2kBWEUgZKJXAyNonRY0NFN+3rA==","signatures":[{"sig":"MEQCIBwb7w86U701HMf/uZFbLXtlqgK4/W2FUvoufK3bYptvAiAUzt2QQBuO3IFt+uOd9k1v/SD6PIec1cAjCsqEPmstBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cQZCRA9TVsSAnZWagAAo5EQAJDp1I4KeDu7dSCbvKKZ\nQv+wb8pkE9k4/4OTmoFgvlVkzJ92XA9p70WTSDiYFkltd++oYdoJqLQvvwIR\ngifDztJIfhho+mx5xx4kus11eAQjeTKDOhi0HVtjnYQ+LQl+jqE74HpUHIha\nH4icXp8RB74RU5JM0BoSjXCzBWj5tmkofzwglupby8fidm/a9XetgXBr9IfV\n0aLuFf4JvhDCRR0U3tDcSIi39M4B79gKoj7r1Kj5ztNxSGr5xKWPAJiaLhEd\nEzAgP73i/l+NxqjXdIYkkAsRztp8z8NB3o29a4LZvudu9tSjdn+c9TDKov6h\n3FgchSrjvm/8Y9K78H8aAaICb/AO9TFd9tyE52EAe/5Hpd71bEudFjbOeCPD\nx70/0G/KRwYQHr5fvsYtiPvWTfGb4285bM/li5gsN8wwhg3U5vEAwPttgKZ/\nYwQM0hnjACxpzNKCkV4tqnMdYmfwE9svC4XeH9iAmXEds4OKVx7SyHQRFz+Q\nG59755Eq2hwWr/NhkwpWnZHj7wEVvVtMskQmwZImnI+39kaq64EYTtdulx1i\nPmILU5HeB3zLvntbCR21zQ3O2iSpLrKs0j4Amvzw3VqMl7soIYeKcSKxL18s\nvzyFqRz5QdLNRR7PT6XpHg9ebgKZ0qfcZRBWyqztftTlHbuK5EzzTmKNLd5N\n1Mvq\r\n=w1uA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.b094eaa4e.0_1642185753457_0.6996789089181112","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/card","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.390220e42.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad4b23c35dc183ab6926bd00925cf41796f7cc42","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.390220e42.0.tgz","fileCount":19,"integrity":"sha512-3p+r5Z95Zf65JFh2TZriYhp5aprTEMFdiZRlX3hKSt81XLOzFJZdm8MFwh85k6ekEczd0EiuzH8MGNzjthGoMQ==","signatures":[{"sig":"MEUCIHdTHe/de20l+UnOi46fWXlDduL8UlUs2gAnIHd9V+ZUAiEA0OYmFtg4IaMeHqciz1zQASjN1i4JlxiJ4Zxk7KJrzO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z1fCRA9TVsSAnZWagAAQ9kP/2jEivhbs6IjkznJDoSz\nS6lsgw08Ui7RZVKaXGg2ALkbvJiQmFHwdV06IjKyJZFbPvh0KvMMNy4r9pHc\nBAPCWcponuKnFViCQE8nUlJLvxKLmmfOg1IDDulFZ/1XWdqgHnAZc8NKZs6O\nFLP2rWb45JxfdE9EUIdHIVoMFLTBqa0FAwYcn8dgsGxZGdcBei3aLMvYTmRA\nTmxtHU2RXl+b33DtRJbe9tSCLpjXnQr40F199lQDtGCFi9fmWpGfqJh/735C\nUaJ6+ePOf/rfvNuKpiDvqEIljszte9LA3OcabNUfO/gcgfG7L06T3uhTq0Hh\nW2Sg7tjH4f2AE2Ycxlc3TFIqBl8/Wf+5ei+KgYNLMXoSS9lmVSlaYJbnOSWy\nUyvmLNUhbPz2/EBpu6x1XYYmJ+/T0nxDPMY95pnOdrANafgZgbem47rsoYqX\nHB2Gatlva8V3Jq8qErRNVssMyLMlt7av2FuoN6E23IdoHZbiCglQBSpJBE7S\nONsMP+FqtMr6hWivVbckSAWBdyqTykce1VUrb5p/XTeGU9cULpLf2Fo7/3Aw\nR9lazBJ2t/eSdw0PuP7FE3C28cU7ws+GQPGuEkxhFXlcOdAlELwAqvLOW/kr\nS3EBVWS9lyBg1Hh8nF1v+gTG290lawtzdN0yMUDkTsiEHyI/AG1CN7X6+jDK\nEDup\r\n=zgdj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.390220e42.0_1642437983597_0.5246492507512053","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/card","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb31275617b04677247ade9048a22e4f5a11f481","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.4b5391f8b.0.tgz","fileCount":19,"integrity":"sha512-eoKKtbYCdMj0bOa+bdvmf+zPA285IOS5PkC8m4PcfT9rZHBIK96csTrrjKpKFCbOLYYYSsDMkt0qrWKIIlpWMA==","signatures":[{"sig":"MEYCIQCLQKBAb51MckEE0X7MTHh7kkHJlua6OLxdit4I4SBMzgIhAJxO6mtldFvk9TZeNV0wmjQqD/ZCZkwOg+ymMiu8b3eW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KRZCRA9TVsSAnZWagAAuhIQAIPqCDCt8WAbLdT0MV5C\nj4e1LBS2JkdBeXRUXWX5qLIYiWVLRxp6rp9iQlztSzG0K4dBFBG0Hq5L8SAa\n7JiMumsnN6sPy1vFWbjCiB2NduZQiRXTY10qwqVFgHrtgPbqblWWkI8aePqO\noOO5qXHvQf7fyFRQtK3gR00GLTFastf/9GQ34NH0qlF/T3SV5HMaUP2ceBx4\nZUzar8GRmIkh/7S9qeP103EKpjorRsOUSc5fY4/nGt3m4RBC3/aJDA5S4ZwL\nAJOlx2SANF/XvgHFNcyY2GcYOoDd0fnpxzroA0XfWs69Q4Zani4RE7vCc2cM\nhEFMWtCX23G1hf65i+izfxr0Dxuyhf4aiE7dXTTz5/zjF3gOtjBrGmfVuAYy\ntw3kaZer4b1XRtzBWF4Qm0Eej7fREgf/A4RHEY6qgYW+Y1cyJKm2m8WrZ56Y\nnklez94cX4n2JGx4xb90e6cwUCyuxtoviCnmhqTNP1Yx48oGEO+usWXpKg44\nijXl7juJvZBE9X1ku2UJACkhDZR04SqMmZ4ZCmAwwxKwbc9F2WMfr6gnTyYl\ngJKNzVGqF9tY2w1/N81iZMTaBoK+UCMxVNWhL9D5ZAdYfzjV0PZJsJOUm7Ee\nh3shjF5f4jyESUIGLgfCpKRvYOXOfiL7+oXf5rjQFTwFH+GGEd2kUeuhfbw8\nxTrr\r\n=C2/A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.4b5391f8b.0_1642636377657_0.29057616739404546","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/card","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bfba0dcc61cfa37e63c89de90917bd782986f65","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.cef6bc623.0.tgz","fileCount":19,"integrity":"sha512-lyWrLbYoEuaOaMWEWEonvNRSGUtgjAYCs1yDR5YDG8+sUsBLFkqF6eOLKUGtRlADw5eyfuBobKDpmbcEfIVJOw==","signatures":[{"sig":"MEUCIQCoFJivKsL8DWy5k8/IxSGkwUWf35wBt4+btq0L16bjBAIgLN7cW8I+W9eFveeZg2bJdb70r+zQ2wuBB1+6eYf61wI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KomCRA9TVsSAnZWagAAb3wP+QBF/GxU8v4TqynzAAYD\n+ppOKhY1/MwS1+AuhEWq/GTrEw4jnR+0N5Y+jbVPCnotKWyZYFnUV5M0sm4L\np4hZ8fN6YgsQEPzX+pV3ShFP3d0ShZSZvPh8aLDim9xhQxDQSL9pCpZXVGID\necnckguezYi5G3WqHt+YWYTyidxuiB23M8Al0BNuX3VCmPN3fZbHAqXUY4hE\nKIOpRrjlfcmRnqCE6XRY4VCmL0BQVu1/ww7RxnDxtcotEdxnjS1gb2mIV+A9\nFkghLKcnP/cHi8f/6m4jEsR0AemSNcc21q68vHqz7+Q1OrZUSo2E+dE5xqrI\n/hHUttMITMByxIUS8lzxRIMIK4Ew0fS58btHF8RF3GvbCcOYkz35LUzNksjE\najyYrj0llym7fsWRV7Vu3GfG03T5KNm8C2kjJhQWsgctEvKZsFEMR98iK9QU\nyYqKaEMY4/6uQ6lu64+bYCubc/+b5CDzqh2LyVVv8c/vHUvJpah1LI9whhH0\ns+8l/mYRdKXydW74Wp345MX2MWrSlI1j+NFm525Y+xNUpPx1tlJImhBvPrGK\nBI6M2c8weeYC3TI+HFBLKR23foxOiKpEQDAJTCu/MeJcEtiZRHbFonkZazYf\n2eZ0+H5d3+qeP3kxKkvHD+TcKKjyMr+E27CMM8cE9/nJ5O4dqiECQCrFVocn\nIn/X\r\n=bYuq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.cef6bc623.0_1642637862723_0.105245091768007","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/card","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.0379179c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fab3aa96fc77df19e7b70273fc7ed8788f5b828","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.0379179c4.0.tgz","fileCount":19,"integrity":"sha512-LbIa4a+T6d05j4toAWyYFTmqIYMv/+xKzSevZuyDCvOUFg633M8d6MIj4QYDNNts33F0Hnu5qo7M7YsCKPu2Uw==","signatures":[{"sig":"MEQCIFvZLG3eQDtgbI/LqNBUWB1GZDdBPEae927Jx4ZwTku/AiBv6q57eiEWpQoNNturMEHf2+jehY84caxOYZ48/VVu/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a/rCRA9TVsSAnZWagAAP58P/ikxW74tnY+SDxiSOpv0\naYPQF7PP18PF7fLHRsiid09HvUuXtML5z+4ij9phSuBv+s1GZk47seAyQYFr\nY/9CBc8wOuAnvvxh1c57BB7L9VL3oY5auBbmtTgraEzSekX1xoyxDgQMOFU4\ni4LWUIjqjJ2muXI/0tEneCtdBCJpklfM4WlIYHolZFheofTdnZAxPDwWKskN\nY2oL/MsI0jCYn7OCleYBNE7V0Ocu+bpjOHtFYZPYIYe5rcij5+CO3e/0M1Dq\ntTrS9o5jiO5sWnuEjmSvoMvdpH2P3+1eyfZebP8tdVElpxq5THKIoOsU4L9U\n7SvtpKSQ4bmoklkLm0oehISQb7vpmf7+yKnq1uWwDmDpkqCx8aNg7ANjpZpX\nmS3Z/kU4OkmwMykxrAuWIJYxkmNcit95Ezu3mPUpmF3cW1/hXBfe/wFvJW9Y\nzX6efjd+7JtB896zsMYorExKjZ9ePPx+ifvq7uqbX8qVmLHpIddyS0ge8UMq\nZRV11xLVbdofLWLr3Wynq+0xzyH6SiM3Dnts8JxkHYremhRKTTIM7ZfwKmvK\nHCgV8YlztmSPtyuMGYB36rSiCc/9/uN6OGsnHyIxQOc5qTVLrkzaaRzYWqR+\nhYmKpMk+X6TpcKb4VSA+Tlj2AxRkpPlK4W+P+Cx1yDvSYs+WHivRIvsVOr7D\nlyoU\r\n=HKxN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.0379179c4.0_1642704875459_0.43431044841125344","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/card","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01bdc18f5dcb2235b10cac3fa25248d52589c3a3","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.e62f3dabf.0.tgz","fileCount":19,"integrity":"sha512-+53mOQK6cZhJ5SzrC41RS0B+laoxnnpAx5DBN383/4x4LcgC4zmIgJ2Wx+kJIbd0r/L2Z7jNtSV/o6ojVWKaRQ==","signatures":[{"sig":"MEYCIQDjWtlDl2+HwQjrCJnk4Zk1/tCZPmLiZa4h7oB5hLw0egIhAIkSIswsuywC9c5BYy96YT5rw2LTvQsOWRYxSL1AQrGq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zvGCRA9TVsSAnZWagAANJwP/1xUPjqYhLKoVfm3Fa14\nTsr/oMYpbNZA5nQDON0dwF3/TexV4isYomyt6dUYeLk9wdVrSmive3baQbjr\nWMJx+f9CRvBvjkiLpirbZDVFrEs2Xso6UcgI2ldna5JtU7OU35Z2r1D61RHF\ngoSjJqLxejJdbm/WxYlKSzBt8EJkSdE7IhYRPxM+TO6F2piQHYcTNyTDZ7XP\nQ/pqcs6wr370ROlpskiYfTL1IADZMvKZ+UCJh1BjjnmYAdCJgrzuIeYhixhw\nG1hOavy2WrGmA5Z6o7iGYKMUzq1fdMZlVP2impKJLQt0hrGS8j5WwBQ8P6cm\nhqidS2hvqfwTR2kvvoupLGD1Tg5qJ1Txkh5yS+DIBDuii5nBKpm6vopv+0YP\nb2H0L7Almj9XKTJPf8ZYe8mzm4yhgZEMtleMwiVEKTpvkGTBLQhjEy0Bui8K\ndJbXALorCpAM4vK7GVNCxuXedHNztW8gnITMcPt8vvlmxsdU++CU+Nhkmv+Y\nsrovxjcy6q39J3Q7W0VF9y93Lx8dovXbPM7vetGJktXV9+z0yERHkCria00J\nefy7cBUNedPnTU1r2r3tZZgOnvgdvNwHd8IGyRuSDU3Ci0LO1w0/gjYhgVSr\noCPfGuNgfm/kU9SgutI6yXSTZOJr2KT9/U13If+mfcmhxg1y5103LEkRyzeN\nxu5b\r\n=BxMD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.e62f3dabf.0_1642806214134_0.5440424737563367","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/card","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4998089bcf8717101caf43e63d5e1c1dd3209a34","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.3e20c1de8.0.tgz","fileCount":19,"integrity":"sha512-67kzNui4QoFEUk9N0R7/rKXMN/mgkluXKki92igGNX4MlxFC0PtMx4NK6d2mxNr6LMqRmIrkV0Kl1gNOE936+w==","signatures":[{"sig":"MEUCIQD5yLFb0PkiEN+lhQXNUMv//K3TVmSnUS8RVFQwOiTJpQIgTn4EmbVVSpq/CUWy/oyBiuBrRpks/0tRFAtswT/poPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Bf4CRA9TVsSAnZWagAAUT4P/2aOLKv07ivH2p2mtfpd\n4KCFnd/qS2prPrdq4PNd6bAl6hz4eD7f+0CjiDF1o0mV19LaoAXbMxP4UYSf\nV6aVfUT4stkDKQCZSXajxdfVfmeDQoYFmREDV5JCMCJZ4ve12Hl2JLZIuGhN\nUAICo0Fr0eni1ayOLR9BiWEmttYHew0htWDqdkP1fX6MPxooI5LqRGbOdb74\nRf62Q57cPpuSZQCHolaqsGBGOvKP7EiBVBmNtmqOH6ERcfIQY3K2+v1lptPZ\nxluZPlyStfLS3pwQNXisIOT41Fdl6FD+2F4+l5szPh74cNttrcphWBCgD6bm\ndKC+qk28mSQQzA/uNJFPAl4kFHnEKm3T6IdZEAlJwlNXtBhAgkAKywXmNlPc\nSqYDy/LoKjzR6VufoDbXYnAmTWo4CcWLsYNPnIo+glHBpG/QcGrwNiBo9wY6\nH+6We2vEykgEb9B7fOWKZZ0pzxYljM5kd5e/btbPef0jLnFJqFpORLBGea3P\nMhO3YTnFQ8JpMNFLBjZEHuD0UVwqKo6sKNkkF06YvI/4P1vub9unRfhPmwgT\nhCompgUQAuje6bR9PY9z2Umw+nLafJvF91bB0KbD3aS84COji6fawyyMeYsy\nFZnT/dxtC4QfIPopkYIAnbAFvaILdU4R32tepUX2I5UmECxqI4pcsJ6Oef5P\ndq9c\r\n=cxqr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.3e20c1de8.0_1643124728230_0.338417809866562","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/card","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abdcb342ce9338d33a02e4727b2f901ff724e377","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.9f9d928b2.0.tgz","fileCount":19,"integrity":"sha512-CJsmjs+finTC3UR8/tFbq4i+JFXmwTXc9jXln3t1tDixhKALr82PI+rbuIo7lNayDK4GtEVVasI2ZHyyt+GqSA==","signatures":[{"sig":"MEUCIQCo8R6xUe4+3b7P4sUWI631JWttFqFJFiyse8UorS0jQAIgGQBABZx0wsLz7xcNJ+97HGAaEAHhgc9HTM9whMhtrsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDECRA9TVsSAnZWagAAwGYP+wb2qhsrii1FmCI5ANLQ\nM0lL2V9aHo7BX7LysFVBcfKaoQFMzYiEj1W5XHJY95ZNh+bTtnlxEHWCeAv2\nmGGNIk5sXnpNrKV4oyZEQ20l/AO6a3hOqpfeQK4kBxjh0GywjHG+BXF8mNGM\nYFcijE8BvadtOtV0tndNnW1SnBPMW7YrO+A+1Ag85y5B+dP26JPV+j2obO2O\nZb7IbddWvAEjPM+mM0x8p5Iv0cQB4G2/vAgp49zd/P9lGKVenjanL3ui4Qo5\nngIfyBTuRT7ZIJHbrx6tOIkNZ6NK/g10mtNdoNEB9cQ5xDnfZgvUCYQTtTui\nR9nhbDQy0XAgehZVwYbbMc2VZG1qRqoPMPnMDzS/Zet6mVBQHlaRxZEVscx8\nf7m81XN6AYFQcXw92HZJaPOndXIKrkbEgtqXxHKZ2iAf65W7C3I1W2WeM7gQ\njZMYPITkfB9uaLva7mzIj34iZFHVjjNHXSePXTxl6AL8BM9WxrMROCb0aoUO\nIeCuIFaCC0ojgu7rMsejbOS9/1pOqMDlPBxZSuaQc9YUjzvHQ+0VMVS9LJQa\nYUHDDiJrpvv3c7iQoh9kpsubOv5ZUIGEMeypxqLQ2emMz1z8tHsU1WG8Hx2B\npCh2UwgMtMM2VyPtmOAeEsOOIDyypm65U3dLzc2jVFTz5PeQJw2uO/mZ0jew\nChBS\r\n=QZ7/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.9f9d928b2.0_1643307204732_0.7259857329169146","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/card","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d325bc3dd4c98c13e856ce25fc6ed4508bbc514c","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.a2bcb065c.0.tgz","fileCount":19,"integrity":"sha512-FTLeOK5t97Tv3mfxyq1Kt4iss41UBqkd+uTVRzeACWmkbomltrTloxZmVWOQpX7y6zDUFmBO6dpKvmLTgrtvtA==","signatures":[{"sig":"MEUCIBH74yydoKE8gJjpMOzECG6Zzx5xgZN0i+GB/O/PJQNrAiEAzDZzNT8Tv2IkPiRwAFYubQKAu147tsJLMzD3ztAM8KM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EXrCRA9TVsSAnZWagAAV3gQAICyJo9urQSOh4l7FKNL\nlfMA63FdPRuBiOvvx8ge1DtmcFhYk8tFXFYiVTo6eiLDHirhWOaCwXZj6cbM\nd5a9fj92s/r/hf0MmfaRoRGXp2snBrXEamfkXMUUe7N1DUQzdFTvNLNXNXgA\nPSwJ+3FqkvmhhAK5LuL8ObEke7UlJdyZxJOzgRN8/tAxU+h9Nt3yDC/4+pHa\nbRfFi2ectBXaGc/m3SL8sj1qpgSz6DLwyNgoLSNHag65+QRqYkm3fQEoGyN5\nC4ZCpI4U3nBD1z8dGYuIjaoPKNydlEs5EV6vzxko2hu+7Zf9WTxoOt6Odjk7\n3mOe0gJd00nBAwMLXOpqWfvWiBgPYWqHiU0+6UFelJjpnRHKAxb+qvCKdi/v\nVsJP7J79h96FJJhTitAhRQBvJDuhyNxtn0gHZTM7Og3+GpNOJ0XdUBq1ijiw\nz+/1PEIJznrnU6JleyETCzJBeWTmmRIA6R81uCAMjs+NwQiMMqJXj/RgtEpI\nGKL6zS0v/WPIO8r5YyQFK86pYkHBuYN8mh3ksB9eVTu6iwB/tJgqNM+/QqKC\nr5YVpQBKx4tGPwDYDWgyKljVRBAggY84OwTTwAdDSH1iQWz04s1zkFoR7jWe\n6s9QfkmiO9SDRXEPfckhRdCZXgjE9EeLbPPRPTn7zYQAaUp3VjmtrhKLNGMe\nOfWF\r\n=uZMU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.a2bcb065c.0_1643398635789_0.48075952688767787","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/card","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db72693007246f6bf3047e8f09ad4273a4e0e90e","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":19,"integrity":"sha512-Vbmx1GFP1WkyluVoBpXCtQFYoh1AUavAudKK2YttnJ9as1R2c/EutO3Xaoza0gQXDUZHtP00InfgiFiNOEWCWA==","signatures":[{"sig":"MEUCIQCjB3Cgn9L9SYsYsV4Ay1Qww/RuhHLLV4ThURWedh86WQIgEy0FpW6rD4bau5hIUCX1MtTz2Z6TP/s3EbWq6uAAlsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EbyCRA9TVsSAnZWagAAhj8QAIDXFXxJPlwOhR5Tukrq\noyCTRQ9cmoBgawtDfmIpNPnouAcvKCUlAjZS9R5tqhNToFr8kJpszmDefwcK\nIWCaUz8uFfcPZQizgmM2H/mmOiItbsao/9VdMP4br4wVsdswvZ6pA4Z3UW1l\nWYABm1KImv3Xt/ZNpa2LYI4hz4fFgRcUPAdIfOvTlJ2nVlZYsJO6KZ4Y2LDB\nMad8tD8q7ugksJ3TKgF1kmA81V9CVPDybTKQDiyw/exoKneShgmW1ullugYT\n6QwOrboKfssS59kS5vaL7eN2Rw016+NtKYMn6X8Z8i0gVyNcdBPr3bCoYOlA\nI/H8mjOMEa6OMxXN8CNUNSPdPNeY4bKK1iu6SbdEDqTlU0B0AHha8/aMZB1N\nQZkZ7kfdzoFJ/7HjWkopks3Kkwfnno6N/kDAHc6hxHPR7HCwRWHkXM5fmYSg\nIkl7eZEWLwBvAHz0DxPTVODdR2KdFdjAZcEhsM7/h6H0FXWzpzNBaOkf4Sxh\nebZem1zjdZ/j+ocVqpxp7ecHTkcMqbWQImji0BPGkeLGQM77n3C4VaYxcnFm\n4TGvFjyxvopdiyCrH+oVVgnKrTqHgru7pVejSSA6IYP757Th+tpT2CFD9goy\n4NE81CKiekbAVl67DTu9eyougDMS0fqlVQvs1npmUFMc/fSfHBd6HsolD8Qi\nXbFv\r\n=bymB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.4e66fb2e1.0_1643398898657_0.8069267333970374","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/card","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce564a6688b11ec4553d95e48cb2bb54779f4d53","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.9736ddce9.0.tgz","fileCount":19,"integrity":"sha512-PLHPn700986aFpomOFOPbItiZJEnTjOhtHIZs0vhRiu6uHV5qce8S/MIroPUYHMA7ZrMdoo3M027W3r4SyEGiQ==","signatures":[{"sig":"MEQCIAPTWx3r79KhTHQswqCLsDAJTfmFsAB2ryziQTErnv8eAiA2PqifJiMECaAzkswdeYvImRW4ynsXIyRZjcE9dIAFOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3NCRA9TVsSAnZWagAAq7QQAJmCoy1MybZcPaNjXkJQ\nSl8q2VPC2zg+brQW9fFIWHwicDUSMJT6iXTp/B1mDedJf5bZr3ZwmFTc+sXJ\n95taQqk1vL6g02QSRMbzjf2PJ26ZkrfVNpMgCzQV84DuBDIhlO+KsTDVAFVC\nZ/0d6xBA+b58qtZWsMm7q6D/C5uHkDU4q0QHXGzKY1Qx8LbYMBwVpQgvF0y8\n+dGBo2224twh7wyDcYbgDDqrt8tLPhWu0yM9Ivsn1dP7zlKOe+qAw5p/fXhB\nuL/hG1Dwj9tEjSjzx7GJ/0DuDodadMBw9TDSQvUsFyKUTGAdNINwD1gmhR0w\nEVxss8H/JlUb4YZcLsOmZcGbunUjK0FB1z+zE67iHynTnwFshuqWEFEt7zJP\ntYAqZbjDDe6fJ1WwkDzsi+DqiWgSH0lS7SPYKTnU8QUtBGo5OAJmrc1sUowk\npOHuFBjkHRtw54eMA7oTXR/teaisqi7lQShgHyMQGbtiOSK2bxlnp9KT8/hm\n2pu4zEhVaJJwSLIu6KpL1Lmgkd7y8NufvxX2CK4HqCGWXv1CLKFavkzKZgGy\n6tMWOkxWj/o3fCsWzELNcD9P84lvg3oNZFLSbRyoWvDFqkVJN3RBVxB8saIQ\nCDimEJM17S6Eu1vcMWaOcIaPUZeRQmjyYJ4AO6ljGEA51YObPAoR+IK9K0TO\n0bLV\r\n=m/NP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.9736ddce9.0_1643449805279_0.4143156020285712","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/card","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0211a4329154d5cbcdabc6c33e01d8e566318bff","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":19,"integrity":"sha512-Fw+IR+IZQlcUnnFflBt1feXFweZKvRbi3Hi2JeTzVJd59w7efxPZnuMDZDC4EIf2vr2wyRezHzX2JqLXwKLRpg==","signatures":[{"sig":"MEUCIHZHJNUI1zXWA2jEcDslr48wNtAnsHXEE3zLA2unblljAiEA82gju0fDIhvEDg04Eh6/sHZQYzBGCJnTOwuZcSO9+YU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8ACRA9TVsSAnZWagAA4P4P/jKbAc1az4CSdgU6yw9s\nmMu6eO2lZWKKN7q4OhnF6r16jRZuOcbcc5TK3x4KzN2BwD3BCs07QXqUKphs\n8cMQD5KbHD8Wb55z6HNOnOddkv5Ye3Jy1F+bugDSRxwPwwE5i4hKhp1R68Fh\njR+BAlxkvmlD1cv/t4YnX61mPTgIxTJAML9u0nMIf2D0rzipUiKNnPZYzwDj\n6V5JUf974fMjG9nwavMDLLaNZYTtBG3BvOPlKNn6bNyDNKmnRjaRGjClyY1o\n2Huned17it98ddyfAcbKhLR4Z8aTCc9vMitSD1MKpd+QPQSdHbp9fNfO2ZSd\nTQE8C5S/bnnYgRDgmYg8MpgoTfrDkQd8YtZkdWWpG0rVEnV18b4aSuWTw5t7\naw95fuBHm0cWZg3ZnUNdT3EBWX+wofh8qRNnj2StK3zkK97IY4vHyTc/+IeL\nmkMKxB+vnv2+FrLdJzfjPPGF9aqS/W4Qcb3cxQ3KPzQCQAS7Euo26k8eHOBG\ndL6ERV8RH03fpvUWvzmEptswaHQzA64iMsVXdeSxTZWSEOYOo42gFLZy4L62\nVP5lQM8lWdplbb6ZPsRKnnUl77e9TcOmjV5urxTR+VNbaBiro2/j2D+Wl4sq\nuaFALi0nRd9GcotvCPFNQ49sMa4sokCSHzAOZbaFZidaidQQqWYUWbogpr8m\n2hbK\r\n=4Nbc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.cc4ed13cc.0_1643998975855_0.31625921192555184","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/card","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ae0b03e04f814c144adf42b9a5bb62cc1f10036","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.dcba26fe1.0.tgz","fileCount":19,"integrity":"sha512-/aL/A6wD9MZEXA8f/WCbhxxqQMq7F9h82Z6fOwm7tFWhXR8VITuFanwG3yxHzh3BMcUuy7b7NvQw9xlkVHUhiw==","signatures":[{"sig":"MEQCIGRIWqBm0jDfnNIfdfsk8DFb14sE0IE4MKzifIwvwNp3AiBwHnghrhv4wGYA7VpmN7J3fJ5tEJPkLiVWBCG/jGfhkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aFECRA9TVsSAnZWagAAUosP/2vSHoF0elKHbZl/1Kc9\nieo8wWG6tRsfAEEawy/pHsaa4N9NfH932yWjJ96c8a5gmScgGsLZZmWPLQNJ\nff8QVDH4CyFqFGeQ5a6R2w3baFfDe6wk6yTXj87yNdHuZ5v8vrso1pg6fo16\no2lWKIvH7ez1YpRr2j6ItH1onVYLss6twoDPV8VNtlpXc9udgCnbHjC60/9c\nS7dr9oYg0v/fJNnWflrrlXtlNkuVqWqMI3e5d8jLAQXBc5sqD3mXcArNpJlO\nkyhCYKhs8CGivRsSq6SoocNj3D6wZLthYXARSZmm8YHTgCSySebCzoooKING\n7qewD4TzvEvHb5ezDgELn1rfWecuymxvRZlLWHaaz7ejscPmGU5bQyIMr4bV\nJTwHbuyNQKR97EZRC1SwJ+H/DZEYbGGE624ZQXUmNPKwTpG1SywJ4Syhbt3+\nGo5H7PZ413lVlRu6IcEp+0muLEbdxcLLqHWs1i9w1eWXxdd29jq4TQSc18UN\nSNmguidL/anokKN1NPjvwLxYPo57WXHbDyQNeNeexDYvLdl7Rr2A9H4j6gso\nqYPapm4kt36yrLOKNaua5r+Uc62p1FSw8/pw/5nmzdbfrPgkbXT3krhpfn+h\nfA2P1qCBq49cOhN1hHhlvfmlYvsaGGN+McJ4DbBNJyKGDBVaoD0BUXMIaj3Q\nZLRM\r\n=Jm2E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.dcba26fe1.0_1644011844016_0.25556425954725226","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/card","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e37526e1f0915ba9e3c755f79feaa8a22a803b1","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.ec54d9046.0.tgz","fileCount":19,"integrity":"sha512-CugE87pSrliDSCxo1XG/AcdEb4Pe+KvLQxfWwkzZgcJibw7/P0a4JiyXoqD7TSdnFSjnON6ULzxXDcseEEZaXQ==","signatures":[{"sig":"MEQCIBRAGIn29AT0fNRiVcnmvCgQknnsqeErOnTJ+s9KvMLXAiBIT8I9/I6uoD7iqfoLz2/cDljxFvG3r1bugRMvQxpR8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT7pCRA9TVsSAnZWagAAgXgP/j2HhvKAuAHJCjS0amsa\nN3hYP7ZYsp99WSsBb4k0aOXERYImQR1XjhKs33mOz/vRbnZYOs9o0vcK0Ox5\nuVDp3AIFf9IpXqAWunm5fTqqRLquFc2vvMc04i3jX9UTFXD1sFwrofqhFenv\ni5i/F20aDoxui5pBN1hx3ti2sYTlTSg5GG7Zs6pFeNHogUIjCJIDFqh8zZ61\n5Drf9tu57nuJJm5hgHG/9OkXMHMkfvHDn5pPDJQhPTi4ELezB5bR4fSksR5S\nf9wRpHaeZP+EJdzWCXghqMkYAXPsxN451WGkL6dOnYJevVyFYdNhotNVy4kK\n3lZUYggwXusuZdNbDTJGdsjA8ZqUCr6cJgL2/6iaaeYCqhfp3xsFoaSkrfeW\nrEfhdQ0twarf3Ha00ecpaQ+Ol6TNSUaCxq53lfy9ouRAZbSUSlZElyYngtbd\n/VXeFT0M+m3u5qkuyqUKYEfaKyz1zPoCBhuIyxmCc4uMYgUAm0m6qSTDSzNZ\nrFN+3UTCJ7D7y7N6Epdst0kPui+54XQHr9RXKYrhovYDV1IL17la0LMDfVxZ\nykA9uWI0A3x8V/o7w7HJMFqvx7fpWS8imbTmj8de3QRmeWjDWRZEhPaq9ZxM\n8p7Vkh+1+AKfNURPP0CC88GQ5+S7wbonX7Z/UBnQOqO/7KLo5DAuJdhfXX/a\n0Mi1\r\n=e0+q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.ec54d9046.0_1644248809643_0.07365315875402367","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/card","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c7abde79df0e99aab54a790f7fac5f163597cd","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.ea9b5b463.0.tgz","fileCount":19,"integrity":"sha512-sToetRfUAPm2SQakUPbOG+77hgY98xfU1iRKCnUa/TJXVZLjv1sltLo/c8HaN8vZaMJ5iic64ZSyLEgoQ9UGzg==","signatures":[{"sig":"MEYCIQCQdy/ApNo8eRU0bcxbUrVc8Fzu1FBlZZ0eW2B0Uff/LwIhAOWzt5eC7MQTVGpWSLfPdZ8h+zbLTXhwvVGP/qKLJeJk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/+yCRA9TVsSAnZWagAAxd4P/R+qaYU6/BK0MkPtCdMO\nChqL41VPfq8cEay9PCrUxymV8WH2Zmvn9f969PdZScgoQ7lQgw7weWero14k\nk/D3tSiGYftbUQV86tD6G7Jp97NNQMVzaWtXyj5/uQhYRb8ywpR+NCU8/4Jq\nVYsMBKXtVTB0C2ubE2TL7WTLJ/PSGV7QMsY8+DyWwOFzemWjVnhtNPqeXNyv\nZJY3rCsRt4v3CD4CQwnNvm5a+RQnU1EoNxjScxqMsJLdWxAdDCIxCCiLhcPs\ndNlccWny4c1U3lSz5RelUe+1ivUhv9UYdKbwFBvRnEC3oWbEohm8ro5BL1JE\nYIV9t0Fq7jYpGRYcGlKJLDhvZy5Gmne7cP/TRYShjsa7HOL4y0/SYeeUbteR\nhpRZN4u3W3Mbq4EpNJFAGvfyVtKDbqVWpRghqm9O3nMP8NXpUyBfTTDQ0Bxy\naiFwgQATReqtrBrC2wtMQ5ZR+hi1OYy/I1mp8N8FbamcPbZlMcyA6SVdzFka\nVbGSJXO8WNjrTETrLPtMsPFA0dQwDNIHYejJo2eWPTwnJnqyNyYBcoPb4Lxu\n7cx+n6YZpbQJlU1Crqa8KFJDk4GbP0fJFs0Pzteyq5PcAUSkRoi2a/xGty0C\n7/mFVdbbHQkXYC3QaKddtD63I3coDDgouJ6JVAh10kX1iXF3jJiTYMfvlQi+\nDNKF\r\n=AeaJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.ea9b5b463.0_1644429234591_0.6358898851798642","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/card","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a1f675859ccefde81eefdc749b4a1d71aed9ac4","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.96ea061c1.0.tgz","fileCount":19,"integrity":"sha512-+tNtGfwZ/t2AyAPDlRyWv+cSALQ4p2neq71I49b83BmhfXnTzHIKIn9GCmQ6xUc4dd5vHNZ8oLhStxLqKBB8vA==","signatures":[{"sig":"MEQCIGHqP1q9IjSf+Nqbx8Tn+SqqxBUPYRJXzL1IDS50VeNKAiBpPHDebVkSSR8LrYDVRpH2X0guGZ+qR2h1NYhi8NZTaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA8LCRA9TVsSAnZWagAAGqAP/RoiYOYh1FA8ZBDRuCbJ\noXua54E+72iqEksjZoqRWYQfxneknrikEktZlsLrgWqq2MB/g6MrrhulZ7ox\nB1hBkR6OUD4wosAHCVU5oMl8xobONuFpp1Ld2BCwCNzdo+OCvS33gMj1QAbT\n6tyCeRzaorq7X8xJrm3qz+B2mMgHsqZfBi2aqKIBlOhBSRwi+aTj+hzuGB9x\n55z8DEkv8v4lb9w6I1bMuF9PZCG86/uDZUlV0vywDMNLHqWIGoDhB9eumrC0\nsd9pClhULBNoX1GLn1mpF5L9CowE00gNU8q+NjzGp+abIoEY8LUB/JuxD8xU\ntYSELzHpU5vucGY4bNNQ5s206D6J0/O99Cizv7qDalpFf0aYH4sKixq9UrIo\ndKOEmt0WMtJfhzmLUTK7NgYT52SJhNgHoT4UI+2Kiesj9ZcBX6iQPBq10S+B\nuhI5V/2ScZAP6ggsyZptkMVoFRX3gh2qC5WpMoSx/fx13SHcjRrsa44dXZXv\nIqgxJ0nxOAXwjaEfcoaKI94uD7cb6WchpCTkinm+Eb2yd1PwGo228Mm8ugpR\nQnGeHxsixK90UmWV3+rSWo+HgFJSusizoSwiM+FjwbAIuQiUBT1UoF0NSb8+\nPbFap0NfPAPqI36/qnq9CeozbC07oAKaGzQmI0lhrl+PxBt/cDwZGtIqnbOA\nn+g8\r\n=QSCM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.96ea061c1.0_1644433163541_0.36851743574734086","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/card","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.e00181e59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b09e333b13a62784869a399c4df35d8666969e2","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.e00181e59.0.tgz","fileCount":19,"integrity":"sha512-NnPn5WWefC+OpQjPZHP3ascatXjlRiok247l4HcJ8jf7zpDyiBoM26F06iN8InxdQCYmdY7YoH4WHtZYL1rCpA==","signatures":[{"sig":"MEYCIQClavtxat7NYGzLR7yLuQvAyC5zGdmV0TN6EiJRIrX20AIhANrjWQlDLpZHP+Wju+fYwrVTkUkebEFfn61KpaZlIcPK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXBUCRA9TVsSAnZWagAARwEQAJvT1rBVzATKj+VSBXjU\nCREqDBL8Lm7ofWXpkKY/9mrD9etznIgWQ8J3g0hcU/oLAgMp5hwZaGNgkhRg\nuQ/AkWxjnXgnlc5z6ZOCsxKao9K/rXKLs3zh85yyiPFxR7uH9KWTMWTKqrZe\nTcD1qTGGvuoXinkYoUxl+9WZBTLylXX7iMNGmw41ba2t5R+XKlqSw8irsIV9\nSMRJcEbT80Gkw8blO/qmBgMHU95jerX3Bsz5P6bH6U+FkKOEAvhbeppyV3NX\nNIB7Cwz4/zl0DPnagHSJO3Htp165ZWgFUiPkFeRKR7S6s+AZypeHJcAMPkpU\n3dLRLW3+f8t8okgs0Slg0Rc2Ilt6u9laBh1/h6ajaEnurs/FVfswPjy2Vi6Y\n5Rn93j4xNQ5jIyP4u+IE1toYEyhru9xSjidYmKYVAsBxyosybfLY1T8tWWiG\npSj9h9M0N2QBwIO6G4cBIfrmExXoo79V1PvWfuTuyZu1Kdiu971sqolsvzWl\nByl0zk+OYYrPxL5PM8wMjNCdJJCjIFH8OLoc0arPSBp2F2vhW29DE0T2UOaB\ndhLBg6ycDbXv2acgs1EHqR6JwHCoMp6Ex14+mPmMOMEfFpBRYoOcjaVim3W0\nIprI/gjTOGONrF1AAO7v/dpjrd+YLGwCwJfN8ffMIM+X0YIDU6vsJTqv92yA\nW1je\r\n=yg1+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.e00181e59.0_1644523604460_0.15559043679995033","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/card","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.037285f9b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c41181872e451ace1d199b4cc1fd3f8980265414","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.037285f9b.0.tgz","fileCount":19,"integrity":"sha512-HXFQRTElfjEATZePEDcv3qvOtB80ZoFXSVMLAWaJdsLHd1/rpBOsizWXglBG2bdingu2DCkkzESot+pDJuUYQA==","signatures":[{"sig":"MEUCIQCJRLrj8jlTDZymMoqwJfHIvsupX+GJjxVoIwlMFII5ywIgU2W4c79kvOneCuCP43w+9+qEe9ZPvQlkijQPMZX6x18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqsWCRA9TVsSAnZWagAAGyAP/jRnDXtQz1NRXWXrDVLB\neItrw85l9Ncia6B1EXqf4+TkbGhKCbreYOY4/C2VOv9QUALCqI6D17R54XkX\nxEUJMi77fXXi2WsIU1r5VCkxIanFK2pAGS1Iuovg7MOO9gdO3mFONc5mU5zY\nRiRpX7RQie6Em2MguNodh77GnnULwSJ8MuCHt98KTB3NZHXKL5sz2kZi4D8R\nuHyQUPD002ZF1tAhjmTz5iB4ku0URD9KWP7x61OPQJzQgSnfS6y/p+fb+Cey\npR12uF71VRgXmBT2oYW+877WMyQErSFjr3W3SwihmkGOw+5oFRnnWNac71EK\nP4V3TVUZ4+1CizPA3OsU2Fp5SHjvrowyV83WXlhNzwyjeLj40QswfhQQAD8Z\nJTi/Cm0HY18G3WzEdfwY2b8Hv82WkHa3kV1yoRLZ5LTJwW9QO7s5spEti5ZD\nnCh/rEEaG/EgXqkjqJ5d1tk9sZKBj5gWF15xYcev8ZkxADL3oM9hnJprXQ75\n9geSiRWlaPusmFyniYePu3Grkz7/TnD8ZNi/swPziLi9CSBN5Qzi0klpLbeu\nV+RltvktI6vPGnP7RRC9GV4PSNt6oC2x2039/gA+h3+FJSGoc5ypZ4wUEF4Y\nu8PT8TtX+d609/YdQMiktj3tTiJM0St1RSFgqKIIIDpH5etGhZagIj5jCpFz\nVhok\r\n=BifF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.037285f9b.0_1644604182263_0.9736686515066291","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/card","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99c553e124407b56b5f4440264fcd173c73b45f6","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.1aaa68dda.0.tgz","fileCount":19,"integrity":"sha512-4nnV7xevqcWNB4BYd+SMUCZbBjhjn5/P94L6nTPk1QaSGlSKA9sA6LIdY0j0tjiybrjrrTIPcQjNZiYj5+MRgw==","signatures":[{"sig":"MEUCIG7T/FC5eBf3Htc1zHZLooh52PB+LTamZL4ogYnm9EmQAiEApiqBUrmVdQRjr30jGvd24ev5XuqrLM01ij+Wg8REHlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVU3CRA9TVsSAnZWagAAUB8P/2KtdSZsssAj+zf762iQ\nz7JOWYg/E9Wp68nREJcWBgg3uFysmmwtSHUeKbh3j/G1Cn9qiFd6ZKCnaFNO\n6XEBu9uL69qx28G8VPlFOspfIiw28Vxz6hbxX62qDa6h+xegwqjmnZxKX5kQ\nDd051VUCATvn3LJQEjARCsdjWnPMwBEArSDMTRg8QnXxi6tWQ5t71E0uOKXL\n/WZkWaL2NSE9FJPTnjYl/Y0fhla+schxdUJHjZLQkh2CLQIzSOSo+E0Q4ljq\nPZB3/addjsrcpFzT0UFNfrJXgbyvbPavuJOlEEpGTZoHSDr64ixvv7BDfGVQ\nSiplQl94WfhvIwO4mkI26+KOv5xpFvCk8i10L6QAy5512yVd/V2IC5cHU2GG\nBydCLkcOCLs4a3OWOz8I6GvrbF7XoGBHiMmzFuuhdqEGRTt6xLoz+ewLTb3B\nKkvSanpuNgqO5e/nrOM6AOf7T3uPNPk2EBdnKowJOyBAx2ZrAu7xuK76wqZ8\nC2kkKW8vKolsYwnLYpHr3gw7+b+Qq14qeLsR6ia/8O2c+lYvjJNxwHAO5qek\n+YxXkauJCGTPEJyONPlzeftTSteQlFC1jCPIIG+I8RICmZMXBAWSJeO5Sujc\nZYTt6WEjPRIF6m6O4chGcddKGh0pzbgC970p5uHfuLAFN2ZR5DUf0GArHFDA\nWtxK\r\n=oSfA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.1aaa68dda.0_1645040951168_0.946575286515305","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/card","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d71762de58f6b2ea64bde7867c59a21c3e616334","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.ab4aba1af.0.tgz","fileCount":19,"integrity":"sha512-HFwPnFFY5J0NjQ0IINUPjZ7ixrgHsboetvr4mZ0v2Dfee/l+FSpwGwtqrRdd/QZDKrLG1pOtoStF2bFlhTxMuw==","signatures":[{"sig":"MEQCIF3nfBmPYpD0c+DhgoIr+bZJdfjmKXICenGv/pHqVkG1AiAC7bQBS8UTTOSTEzUi/eVUcOEuIwhCBEwwvi+dbNX30Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpD/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqww//V3xmR4L0U0FoiPSHimuTZF8qkUOw17vezBV7b4XSsY13pbhF\r\n2Mso2chZvGUbnaNcpXHmCTpjjLju9MeXVc8WtWqDO3Xwu+SCeIHxQRNbBC8u\r\n7VdsDHGwS4KdUUx5TD//HT9CNp75HX7dzHzDBR73uGflfsQHiemuaf//j12F\r\noVcnoLXbsbcg6AOjpObQr39635Pj8ToGXJtR3U6UArgZ9L4BOl0UbVEL6fHP\r\nQX6sxQUcm2YZ5OEwdD8L2q+X675qoSiVHNJJWQLvZY764xfpHt7ttwpAID++\r\nKmLIEtkWtMEA0q01ac18tvf36CSpm3kTuQqlTIZJq82U562qEimUv/42AklI\r\n1L5UrZOfHsoY8RbSBbXb/CpX6BpafH1j+VjcqSz2vGc3hUSYUPx49NP6h/N/\r\n+7DAVmqqzAxoQ2xFIhX29hYP0hCIzVVw1qAJqfaFTP6s/o12tS/Le23t8ofg\r\nReDtdx8ZsR+v3adD78kvtj1uFoN7C+EU7T1KU86cO5PuSFb/oReI3zn5DqI5\r\nLWNReaEpq6jAZabmYpBZVCiRL0lbymOqK/xnSBvJXmU7UsgmBKgTKDlRmAZG\r\naVseCV76ytAXzF86Fv/kSJZBd2NeQyXGrvgoJOJI527TAU97xK/pOZvP3CxG\r\nkeVGu+SIPXcCQoQaefi9rmT3z9O/TWWOGeU=\r\n=4aMK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.ab4aba1af.0_1645121790893_0.38823787506625007","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/card","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"045785ffb6df6a88b008803082d4be448837abf2","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.e58552c6e.0.tgz","fileCount":19,"integrity":"sha512-TCtw2I1ZdR3NFvCs9wShff24doI0fRLwQbZC50CQ6nqxq1pw7G7Q82SGtXn3f1ODQs9ZViSlgdNesPDmeb4Ifg==","signatures":[{"sig":"MEYCIQCJCmDgflvCr2I4SJHEjgBReuBwewmd0ttTh4Lpj/dsEAIhAP0WeesP0EilyvElQ17GtaqhugE2+GVhVtFObbBXNhAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9+iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqgRAAho2hP4HlNNKJ8+Rd7R4sv9Wpr4aC4D4CEZl0x28ClY4B3Jb1\r\nUT+xVb7IS/yUnZiPfaVctTdbRwhfG6Pmi20+xRomcjBO0eyQ9bVcq8wDaAFw\r\nAZVWOo/gn0vjE7H/BzGQW4xJAIvtKtpjS2mesuPXNHP03ivWJ9uXJNR0RT53\r\naKZ5cblosPiZimOUhCu+LwcnizxK6HxyB0o+M0cz2lQJi1BJnA9hA31EDJ33\r\nLbX06HdBw0X1PembcQycMRMqj/++5xDkxgrh48ISvtk6QUMVuvS588KkUo6Q\r\nXT5ADziCx5MqBufbe5h7XPh9SLPICk5Kf8S3vm6ruCaBuyb7ncmmMLh7x0G0\r\nxvWl/WXq8yOsVCS765sRKRiGW/mgGqXzHO30uG1zcXY9K4v4akU5UiMxHe6l\r\n5FWcEqY5H311tpHIJqtzYSYJRCqWqd4JQDVXt5n3ebp+jr0fUjpXY/ebEVMH\r\nZejrTzjYFlk6G1HhHx+/5LMKET4zP8+mct16NYFIs4YzxOAyN2UxOgLUuUn6\r\nc3+OGz0FS+zXAVkkino8lj3SLFQBfz4vkEuj9tK1YVSPWlJ/mhKKKFLowiew\r\n/rLmgo1eseVNWtyRT6LDL/U9ughFEVs/LXVp/7rYnTlgjPNjzAqH3sNGsGIe\r\nUlGQn2jID7vRCwbXvW5FrxsC6+j2YofC0+k=\r\n=acfX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.e58552c6e.0_1645207458406_0.8080576690819081","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/card","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.868793776.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a67b746ad030fe890ab50ec622b4fd0d4ae13718","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.868793776.0.tgz","fileCount":19,"integrity":"sha512-6ZOWpeQZeio0QQDWiIv7ZAK1/6t+oqGkSxu+LvP4LR2Ufufo5eZ+MSP7AqE50pFJP3K0vHk3dILNltO0jbJE1w==","signatures":[{"sig":"MEUCIBsbJy/LZjabTrLahGoBgxkzvXrlspaYdpX40o41QpU1AiEA4BMXMWtNZXOLVUGb4OjZOpXCkJaRLAfEp/94hpDdkwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTsGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLcBAAlZ1Do8xuFFmrNiauINNIt1/cpsCMcYIPw94MXBX0A5eWcvuY\r\n14Gnb1KlOlzZEPUJHkI/wOQvq7Nmew8SD1haePHQPowNAR1TI+2eF+1P6vTZ\r\nU23DMxiNJYeeivToSluWXCTwe0pEBb5BEKPs6oRfBQTpQg/xID89mSVkRazt\r\nS9l/38yQ7ycOUqf2F46pFmfSahtAAL+mTwp2A/ueDg80PUtf1KjKWZFH7vuh\r\nMvt74JGAR55iGq+d10cXiAKNvuQ18LUlmlXECd80DLdIGOvaESdURIh9HL73\r\namN3fNLK5C10ewU5tyU8WyZYof68yT0Dps1mbPMQ4AW+RYamAfbg1jNyr/By\r\nudfg6tWWj5Wl7enWurUEaI1oxoj1jzUiFVaWcULvF5x68d3yhS7APTz+z7R2\r\nBd+hcOcpND86JjdYdPbzRo5iLBlWKeiGZ3sHVuxeKjb2kJWICM2frJg/MHqu\r\nDxYYf0ZRQxXZSiII/VcmYaFlsxFVTDTbd6u3c43zJKNBJKuGZYlojTswYCHp\r\nUldTaKLLyb/qrJMcMC1HxS1nWk9AD/f0rRDPXpLK51vvL9xx14f06RPmUVY1\r\nKhefB/V3WV1rpAoDgmb9TagPNQfdA/38z5FLkK0AB8kRi2myO8lrjiwxG79Y\r\n+pwRcRcVROYfQ87hvyZmktkVuUPosXr9q34=\r\n=h4zs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.868793776.0_1645558534503_0.7213108382751428","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/card","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"841598a9bb6dd0601b7f1577e46318105a5ecbd8","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.fdc37a445.0.tgz","fileCount":19,"integrity":"sha512-d8QeY0K5XEQpgUtbyjjwwvbKncQotq4cr/74Aeh38IOWtuLYmDEewo+LNUoPQuRd+uSAIci/R7kzSMMgV0bUCA==","signatures":[{"sig":"MEUCIQDQCsTyaz1n2PbpdFYrNh8NipmGOwXDyurc066Im+Q92AIgPOC2b1iAXI7enyt98m1CATSkcVv1n6DGbnywSk5+xbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRh7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYAA//biIp49piN8CDPuVbUho0cVCFFZ2yw/VwtmcGPvW/1K6YQorn\r\nSMITYvX9QPlwyB8XBkoDBG6Gg/KATEFOayxQyOrJL4xTLrc0HjhpM6vUwAPo\r\njHVBs8RLH1y6Mm51X6X6nXlU7s9dA9UJTD129VVcGma7FLMT/LjcZzXpBMa9\r\nkQ2J2FhzicH/nwskTmfXpF7acqSeVFx3BL68SIUN+HG0Wx+cifyO1nTuTSLW\r\noveniIchn9goCSrznJ1TyWnmPebyB1VderzsMo5dwpdEfinaboKgkxupkbJj\r\nnab0gmcsADLwGpmFdPZds+w3roNziIvG0EBO4ISqVPdE2IaUgrMpXZo7cuWx\r\nCpvsy2U8zzzboDvL8zZgjaj9HhO5vU11Elvl2zGxQeylInivQBBrSGRpSXTx\r\n9dSnCPx8BPAfq8RzpQp8jI7clkgPrOc7s9dMVGCuPv2mzzAxGi76VxCym3Rn\r\ndbVS13WPJcHVtszKB214wly1RayZ8BFUadHMOwys5u2AbgeOUyUwqQ9POUUF\r\nz47Iov7MGbZrfawwOmvIBuMNO4X6dwyLmRVjY295y/t6VER/PfhMyS0NouHZ\r\nyX2tTkrLCH+cDkJdLLUvaM5tkF9zsQFMrt+zZiMcOYoCv77r0nBdvGYMECze\r\n+kktxiK72uwGo9c7Z59lVIeYdGrKS8aBGcI=\r\n=3Ujb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.fdc37a445.0_1646073979133_0.06071330900926375","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/card","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fecd2de6ad26b92ab402583ba3c7e713a10ddf3f","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.43c7d87dc.0.tgz","fileCount":19,"integrity":"sha512-2SOoUY5pDDfOBnjw2JY3EYHNAbZotVuc/lsKetmwQOu+7gy17pXRKB1UuhKgTCzhMwBGZ9QgIHLJSZT+MYz6Ow==","signatures":[{"sig":"MEUCIDKDASP+mC/rOTDxOHmVr+qxg34OwdCUcHcsj4xA1xl0AiEAyVWZ3v7NSI0IJImHOD8AHtpxeIHYwv4wvCO94cJOEXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjy/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp/hAAg7njfA0Hg/qRxG8WjuvxaCtzpp7ktLThsegYAMxG3pQeHEeo\r\n5bdGVYhD/na0uI7SsZI8LuoEzyB+djhsgAeZWVAfCXOYj0SOVlwuIZrUHxY0\r\njKOM3FXEe9SfHiEeoWm5PcFEjX5KPaMS4uRkXYL+ssfsUWjBDOVkqzsXUb9Z\r\no3xfD99Vb2POPBxVjT78Owo2ADq2501Us2Rci0GCI64p18z1J60PgEStElLC\r\nFSwHmgF6PGbcACveBKewryjltJ75rliUXyzikAQaz45QrnXsGha/HGC6fmXu\r\ne5P3om6JmkMWO16R37LF2z7uqew+TrT9+XKH6Ks9Zr9E0ik+ksRH2uPNxS7U\r\npyALRJlMkgTHx4Cex2iV7BrwoOgzWVPpVWLrjVuAYT9nMV2iDAIH9DDIshPS\r\nWww/0MRU9p2lPMK8CaD2VVL0kJN/4AXc4HVsauSg/2L9+TOjA6jtvRHLy3+t\r\n2s9LV2pD513clMEdVQ4duyPzuw+hd3/UwKxuxhXvLKf6YbSZVT9fpWlSk91B\r\nO9iFbiXsT+EQvaNdrx4lX402FqoL5VBTdp0yOkfBAO1YxI7RdBxMjj7Xj+S5\r\nFDj/clzcytMbbD5qXp1WOIlUV1kfCZ/XHfI4pggoUtoi+WfZY7Uy0S2rDiq2\r\nBE+hMo3wa523Fcv9/IW0pKQuj1C5WbK/iA0=\r\n=5LHF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.43c7d87dc.0_1646148798813_0.059846956304466126","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/card","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.23043acd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ac1a2f1b93a4cf85e4584ffd54c348f433888da","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.23043acd0.0.tgz","fileCount":19,"integrity":"sha512-QzfOYGHk/82JAhBzi5ihIKkyQlDcD+VuN2ArLIlszldcPNgxbDq6P6jO0s6LkOK+fJCsnRSL1x661pOW5IjxGA==","signatures":[{"sig":"MEUCIDy5rf+DyYgeN3pqo6vm1W5Ee1ubmPDhRxSE/juILsVSAiEA6ag/gFLSQy6Nvke/a7Ld7PCPgsXIAuNvi5P3TLMbG1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9M2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ9g/8CJ+ZpBz8cruvhA1XxvcpMe2kvNxSmuKf0Vz+Bi1Ug2teiUnl\r\nRNfgI5tv9xfYeFpXHxAOp1Z6tOwwnPyO55ayYqtHAcnDjq/kRSm+1CZLzSe7\r\nCT6ww4yxzGLrLa08yW/ZMY28Q09UlLPNuyWnn5/Igorwy8ogoXEtqajd2MKy\r\nf5RhUw+Bt6S01288zdY8IzlXuIEAR2qv12RsQjZZv/fFeQ9nKJYWun+acgpi\r\nuf+eR6YPrdl2LkDVjcqch3qKcxzoyNJ0NH5iU3ESH4pJdwzZvDd0wY6g2n/W\r\n7GaSWaPY+33c9U+ErMeFvQNdbAyKIuBZ3uWQ4upyjipq7ij3thLpGcPA4y5W\r\nOaAzFkbGrnhqay7qflgQFOptBrDqOHTs4QNwfN3F3I+ikrkdJQW40wgcNwTq\r\n/+66I0PzZ8h5RNWk3LeWxxwRF6itMEg6ahkxbXRvqowKds+6GnpegYYWUktP\r\nF4q13V+ij6ayNSysC3PSsFVEpO37kRIFfJblEnokD/NLCi37nHm8WKHX28oI\r\nAyXrJ+8rv4qOXoIuYiRfHFhf3x4grHcut9LwpqJftFEcSawNkSfrF+Ww739t\r\nMLw9VVj4VUGFDDrCgRHHXIlPhDkHM4nT/P6MFKiJzsLeNmkzJMEFKk3Glgs7\r\nCgZa0df8XzghU92pA9eikd2fMz1CqA0YX7U=\r\n=eRJO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.23043acd0.0_1646252854287_0.07306833300992","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/card","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90855be31469862795d35e189506a02f297ec35b","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.6505e61c5.0.tgz","fileCount":19,"integrity":"sha512-PbixGFgNn51fHdLYMcvRJ36BkmG37Ac7fauanz/3RyOjI68/vyUoyuRfNNVMDDx+zkXPOpomFwlHur5kuDLP0Q==","signatures":[{"sig":"MEQCICsYzi32hmIIaJkU0lEYkE6vR8EwMTgwPjIDhfurvUN/AiBX4Z+XMvw7oqYbCg8MUopBCI1B2h/qubwlf0kSb/fdVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR5pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouMhAAosX/z92gRcWcicJZB2UZaLWTDkA+arLRBfyRSkM7A0YZ4tmP\r\nTWLULxgECYUClRcXofu3Qv0khdj0Gt3BpJXGle+OswtPuq/gRAhmkG6gFpBT\r\ntv8NcHW1wrfGdCbd88HBKkLNM2Hn2GT+hsWa/RsS3QjDAyu0Lf2OZNbghc0T\r\nQAIyG58VS8tocwguMfOyziGacN/C731T+7PgB2kQVNI/ame61h12sZtBjmqf\r\nUUO5U8S5HfABWuo+V4o6MrMmHzhgj7yU7GrZtn6qRU3YDusrM8K7ctrc+emd\r\nP69vB4m+n3VXDatEodZ1Z9Yo1GGIyRFr1KjAgswuhoPmrtU3r00BBdxEgUEZ\r\n7Cu6EVPvf1ENrI2J/oISAg1+k+Cd8tyrtcI/7ECpCFb8rPDlY8i7CrN6QUap\r\nfWTU2qoxfw3zGMdbxWenNUbBnBW+Hr3/oC6pNP65jzf523Fd+/6fXqgjxuB6\r\nTbhtPef54Q7XMUCr6Ccx4US8fWaEfXKIORyhkatcBHjMtY9Qq/owl6yS6X0N\r\nbM0tduwhHnQkTesL2yerle+EiuB1LY2SqaXesPp1EixRsSfPWkzaL2HmrIXW\r\n2KPDtd7V3t/SAdIm5jmYuFlZvEyFDj6jkwkzD0QPTjG1XCE55uTl26ccpgYG\r\nl3tfvoT89fVJomvME0L/ULdsJ86qEBUoYbE=\r\n=HALN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.6505e61c5.0_1646337640980_0.6465270711470892","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/card","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.16c166154.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"768a7bd914c072d87df5470ec98c06976c3e7c3e","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.16c166154.0.tgz","fileCount":19,"integrity":"sha512-piuoyY0fV1CUMPZLI3PYgVDVjBY5bYISd2x5McndwUwQLibp0w+BOnW0KyVG86pLtar2fSk1QInCCWoiMN2hGA==","signatures":[{"sig":"MEQCIGRMnqGfSI3vlbD/ty5Nu5i8jKaSKJ+mGiq2dkkm8ffbAiAb5NkgNT39oNQxIbj8leHoBKTzCFThrsdKeA4aqYdlkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+U3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD0A//VDP57Vq22ybBci5Hsz5a4luzQvux9FEWUt7gNdN1MIRs+A2+\r\nys1m/lK0/5JFpGPPn68u3NJ5dOsjV3Z1dF7gNIDeSip9Zrzb/Qzfh3nDo+LD\r\n8bIbWDtbc8lL0TQz0PXViPPOXNnl5zvKX993fTd15PQiYZ7MfGtIZ5RiOK5N\r\nanH5jVlEiZkvR2T4j7ljhvmW2RNE/lSMagTzQessSGs+bB4piQt98dTQmMSv\r\n9MSvFbetSzYiSoNH9gWxUjlDLNFE/3ihB1wtPrQVs1f+nBnKxP1YJN/eb9tr\r\n+TZ3ZxQ/CUjADEaifXMI3+CljaUu0nuLDq/P+5KjpQx1MXzMehTpmdcpE5L0\r\nrW3tdt0/ze6iWx14BT/8Y4Fu5FUMovpYqGPgnpizg/p0htQQizL059neqrhE\r\n4mh5ZPfzqX8c8KAgpZ/W0A1FCEMhr+Sf07lLoapK9iHEmpM7gMbCscB0DueD\r\n23p8A9LbXvVhd4U1r/XnfwilYmLFoKH5mqCjaUffyjZeOEz1j5hbZcHioiXZ\r\nQ3fo4GOdjX9N8F8ArsztQHkGhZWWNASGfD/UEiq7QIzH4bQt0Fy7OmeWOMOV\r\nPPN6/vnolCiSI23b5hORB72gAf7uT9eQLS0Jy9BJCCX0QLxSOs0HXqoZudFE\r\nhL8lErHW/64qKFN33sSFzsPZkdmZlVFJtwY=\r\n=VLMs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.16c166154.0_1646781751197_0.21211901775947806","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/card","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31968732ad16fe1d17f8b510925f93d81db37c9f","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.bdf1d3771.0.tgz","fileCount":19,"integrity":"sha512-vgv51HNRmGZtifNOCWxA1qAEbpwmeUb2dZ1k0NnTwtFfOCUaKhJf85MnI3LoT4yuteLfJjFBiKwiAXC0058T5g==","signatures":[{"sig":"MEYCIQDutqpIwrrtGmQW1FVnJ+Euo2dXEGDzwViGkxrdQ0JNQAIhAJLdYaRrPoZ5tnkPoEES25LXEpNZBk/5gWEFgoBh2ZCi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1EbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8vw//TeI7fHps7p7DlAcO04TZ+HZM1CvMv8On4O2NygYzSEVD/l0m\r\niuWUf4OksX5hZD/LaviOH0sC9wW15lj2dzeFGaA9cbaMmIBX12d38KL0ivEE\r\n41i7VjT7CxIK2RtbVirYULTeD7IxW/vJX+xS7e31036AOUkWpl/hDHj+iE9a\r\ntDS4RjnaazfPb+eYMtUo17Uc55/b4jJbberq5IHfgQzokyGFBW8qnt4Spd89\r\n84e2fjvc5IFL7MUDO4XCDdJKxEtxb6YtbnC4AukuCuCHd1bUIjajTCXK4394\r\nM5AtnvRhyd21Rs+uNjYGoiqVZKOrW+b9teS0sbmw4vWuM4CqPK6rjzI/ix+g\r\nkqfqyvaTQXCBLYv61r9F+kUqv6Qtlu4RNd/zCWcfRx8zwMwSSmm8y6uOEhpA\r\nw58/+PQ64I+/MCqFMlSSfuNwgDZntsmFqNdbLM04aiUXUyplFUtr67/Zfrji\r\nlcVIBavBxQ7FR/3zP0N5QCrgfVfAsKCBHDtGO0M/6xeQTfYc9RKb49K5dXjF\r\nGN/3HhWyalcN8GilqhuE+uMx++3FFCnGxEu5kSwU3HBQ9PACeXgMNxtGxFsS\r\nzmxl01NRvi86xBduDNoicdpEU4m0zGjVPYBHMLvl/Z61tRXWotr0klGe0OGu\r\nPvh0MG/sc6ZoPyN+6Tj7/1V89M7SbsbI5VY=\r\n=I09u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.bdf1d3771.0_1647268123732_0.5625472194511176","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/card","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.cf4292778.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a74cbdfe0bc6472330e77322ad6949136b56d704","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.cf4292778.0.tgz","fileCount":19,"integrity":"sha512-bxHVxdNP1/dlj3vp+wkOm0nI8OnOntIRSC/dC7k3Lrlhd/fCEl5g7sOBuJhOll88HrP5AndGvmKjLXoSN2an0g==","signatures":[{"sig":"MEUCIQDSZnlkJ4ogC0G6Z/q0Ulx+pPpaognZVALsIS8YMl2p/wIgMvu0NPmrn0xpgqOF0TUBW6ljlrZ2uzvQE+ibi3XgLcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL934ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBzA/9GIdOFivVptTs6D5pwM//vs1lGGlhWqfntDm1GJ5syoJCV7b7\r\nB6AwLY1/flJig5PTt6WmfsYAIRb1zrW/I9e5/RpNWd0z0pvKMG8glD0XOFE9\r\nf+km6whzjUvxylbiZtk0RqcHpqjOTqGTVAo7rTXE/DIKsAKoA96K5JiJQyTK\r\n3RLvBS1IFHjBOt4Oz524LP3NzIFgTnBreqLnIAaFuOdPMWmXZ3s2HAn8O0ZH\r\ncPvspwXf0mkYkiokZALkWu9AQdTIXXbn669aoTa6wDZAhQlV1q1FKU3mgYNW\r\nLysMFQoDOGgy4prh9ctHj6yPhX9YJVTPBxeB6fDlAKNkLvcdMTubrscPeO43\r\n+I5qvh/1H982D1aurPLMG3qfZR1yq4fTSCXaGM43w7lJ9op8yCKfKl9ctvCB\r\ndikKo8KxmVqmVGuVtpSXYbwiY6NdaFAINmO0jYyMXO/3knwngokm3m8SiS9U\r\nanFLHkA3exCED6/7pgqQdyNukrvhgExCIGuBJq/UQ2w2dbpmRhY4adXqKfZY\r\nlIEApPN6/Gel8michqSGSaISn+lGlS5hX9Y1tjg/bz0ceyyYilTAl7ELzNIo\r\nJpKkcKi11c0D0ILu0qHJM+bxVPJNvCbyt03pCaPtcSNlLb8ynFjPLxQuZTrg\r\nKXk4A39JwfqNYsK30snppuMYNsvSrD89Etc=\r\n=Fw5N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.cf4292778.0_1647304184355_0.12800831795224088","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/card","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddf6f56f17697a231f45c7b7f65db1facf7677b6","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":19,"integrity":"sha512-MKA8ohLhbo+F10O4Pzf78Z3ZW6WNFTaIf8OjYUiyaNxAdPeV+JyOuTt4OIkYzdBsHJ5KROo98sqeRaoCTbVpmw==","signatures":[{"sig":"MEQCIE+FA5mJmKgGs6zfqeyuJXilw1w7dkG1PTGR+JwaESp2AiAi8VfBQM7Ppjg3ApJdEOtVjkulDBGqPBWNDUXouaXbeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtwA//ZMM6eEVlivB5ptvRlxIGsKENKuD6RILZnjHDTp8e2kzrwL8V\r\nyARVUxS/7doqoP+PUAOt0oWRHWfKBkDtdMRHC8JZBtl4kENgfh98k42RPVjU\r\nmOS2xGITFUp4BZiqFEF4FxGrXCbUJ0s6bP+zvhU3qSddMn2p0OYb6jtWAwAU\r\nxO21r2w7K17Xky6GulbfQwOChwTDNTMYAbXknIdl+11mFZEjfG7EC7cUTB54\r\npAozY3Pgb3qGgCtz8vh42KWvh3xEi25GeMMY1vqYv5lxzKHTZTTe0KDgZp+D\r\n3AqhroWfFMCVa2Kn0pS0NiTlZqa0h7RqHB/sGXO2kP2L1nw8FFzEIAAnhx0N\r\nJdT6IdLlsZrI7SS3QUei/+k99ZDC2O4PUixDpDWPMEwQm8xqkFf/FKecUyOF\r\nzA31Z2o6C7LKZLstCG96VhYnWkjtyRBy0nn5INUZg6vbQmNhhuKqkdBJd1GS\r\n5bhRU36MXliDV77kDTpx9aWWJG5kaCwQtHmumVNFWaHaEEVBNV9O3GbUjrE8\r\nxtLpVG7M9IYPDgwxhIxSa3uQ9pMEDsxi9CmKSZDvltsHKM64wt0p3NWp7TQK\r\nTcSVDLuTpvQdaW2selZjDDaFrMIulIRshXyk3GqHAHfU1G83pEK3eRWbpWoF\r\nvlXM6xmFnUvEDZxRE2BOEIpb8J/2U7x5t8I=\r\n=7ENh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.bbd43e0e0.0_1647463812402_0.06065565280012741","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/card","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aac0e894384de1804a03c953f1192d7a7419c052","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.1b6afad86.0.tgz","fileCount":19,"integrity":"sha512-4Jjp3RsoTg3xpy1YmG3Kqx8NGqBhlfjznXjB6pr272bFT+jxpOFNSotGyplWOKHbZU39oxjOCHlL3cHUBRylVg==","signatures":[{"sig":"MEUCIQD1P9RV0psWzgoXXBAntdT+pqaKKrlD+9YaNdNkgzjJTAIgW5P7/IKI2/4xjYV/7ikz2TR1WflpxX9shmlFMtkSw6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlCvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSphAAmOw63gMli8PhOgn2NxbP77xDq0qFu01iFESFdoIjpBKIyGIP\r\nlU9EusEXcy8+e//dPA6kJnHDnswhxawai72mlttDtBbIIWaBfgPBn6SdOfRV\r\nJlmbKAYha57JNVOl19AZoZVcn3nvWBFTUZax1y0E1+NXgx+5ymsNu/sJjXpQ\r\nZ1qr+C6mn+GTiq9mFjQ5Zfs+a7pNRx8YeYAd6G/C6gtTHRE1/DTB3ua9x+kS\r\nAQwbiuwUlpBf1K7cVCHx85ToubiGCMmXPUCDEEEIz5DidI/2hxCVKxAz+KTf\r\nfO/EkTwE4LRB1WfOdv00vJMWZCsRM6KTQqYjjY/pu0YmPF3T2xaQcDOJWmHW\r\n81CbmYY8gGkrZLOnnvrkmUY43vDBy59RjTl6+6YQzxUE11aynZ28AR4YMwu1\r\nf5z9HxsABjU4Sf/EMO4IwaYRsaf5z+KyseQhCv1XMZ/I4D/Y5WU1g1gv7/CV\r\nV8EzlK3IDBEfHocO7d0rNB+azB9zrM4vDeO6drzMM1tYAKVXFLmFKOhAbA6J\r\nghv0ACEYyV2kHP/M1/YAYUXVVnnc3uutaIKUgowzQ8k9E4u1aiQ2U4QejAQI\r\nqWWC6m6v/RXKchC4nAjQM93ckIMH+Pcx6e/eGuXuKpL9BA7ViLbMl1JBstEj\r\neSRI057iMAJy9OlwXnp4wFNTy/7Ja62YysU=\r\n=WPOk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.1b6afad86.0_1647464623727_0.9496367374635895","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/card","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38619ea42056aec225595be186c79b70e59a2971","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":19,"integrity":"sha512-AlKTCZz8KoYU4urqzEBXLP7zG/lGWdNxWrVfMP+my+Sy4Zc92XTfd4FSKiGvH5qWuaQNfP/r9e9M9pGRwr6Gng==","signatures":[{"sig":"MEYCIQDSOufiJblzA1cEjGCOnDxK8eD6DYYJcKAmssuacPn7WgIhAP2ydiCJ+Lz9B2ne32LwDAA7yS88QoIB3ApGKzYiWSPo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Uw/+L4yBzWQlQLptG9Y142DZQePRFfzww7LE4TljivQxfQqCubY1\r\njkJMl8R80pbqXOAhE9h/+Yob8MvbZ1WNgnQhxFVguQrQpkm7G/uZORoa+sgL\r\ngA4hV7NutdH5JQKCR52oWJwXSX70PFVNHneqffgjNn5RBc/3e16MCgz27Rmc\r\nMHiEj3SR0/jfO8kYgrEn6r7LY9UJ8Yx4K2zrqaA7b9TBg42IR4h+6y84n7ti\r\neDClGA50ovThLQ3HFnokb5/LBEYHJUKLSwzqEPCo+U9LIe1RjLTi/ydlkBch\r\nK6wE6HrM3SPs6ooQUoMYh1X4Y/RCtpxPJ6CDJEBusPFXpeH1K8sAhCGzwZa6\r\nIPCNI6mua49MGwSI49n+gRkiwzIBhkBxmsPiz+dWFeFFq3IsZMcsO9fjSJbS\r\nDRzon+xR6axvddqTgcC7bfq1Uf7I+06kyXNyl1iKpnblQxZ+gg7TRXti+P9d\r\nxkYHUi1Bpm55kioXLHyD+rhWJPAvZo6IfsH5kXKdEbZute0wKg6SaEZ/RQSc\r\n8gOyl98wbctQdedrNn3hCVpAJviQPH7AA4f0Jc83a3FOtfPuJQhiX0XCzzy/\r\nT3FWlsmCj788lHvB3rH3uybRz+475+gKoG5A04ad+4gGzyF01svVfp5lpVCM\r\n4vbNb3n1ExQgE3a6gTPPE3K3bREa1y/NNME=\r\n=7T+j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.bdf9d4af9.0_1647465479939_0.5623563223386538","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/card","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.32b391398.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eff2de7024e6d4010b977358a1be2b7e62715615","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.32b391398.0.tgz","fileCount":19,"integrity":"sha512-j4EAY/HMHbVvp+qtnCH/RfPd6erBWVjKRbqqDInrMj6nGAT5UeDOD499MFGpkHjoY1NfyftCBhOKyhZFxZtVrw==","signatures":[{"sig":"MEYCIQCvosJwCk9J25ozw3FgCDaYYB2c+sPQ5zteqjWU9HIhugIhAJK1NcNUSrsmNtN+MRKQ2D854LeiBfn9I1u2NiunO0lR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3b6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaKxAAlJEmgYzVcE9aWXFeKgqwxFtCjwSsvYcjASBrPpOXMMyAu6Jq\r\nCjj5usEoFVDNtzasAsGrF541RdRczljxNmXGItwHAlO8yNYwT535xIAIQiwX\r\ncc5yT5uNER9xTO9oFjAC0ehyXsYaZa7l3MGtQphwoHQO2jFbKJdotpwnPcwN\r\n+5f5PzDBio18raidm99auiqLB4R64cOi9vqZj7ZpXhs3gLwQdVgyrrvzZTsX\r\nT3LS5+eMVWD/O0PAy68jjalhW0QClwrGgDn0JZ70RwLCQKRZBuXxFZHe9wX4\r\nZO1gGgn+Ug5AbUV6aAWfjRUnHVS7wi/LtAmNIumSep1//TcIDVghHKmDO02x\r\nB6ChhA0qDBZh9cEqxZKoIRF30Q1gHWW8BWfmP8ZSnCVaqXB/L5iCXzAVFKeE\r\n38loy20Qk25A5YJc4/KWuzbwCefgcvGLtCzyN6sKzj1KE0lBzBgAk9rB5U0A\r\nqkluderCArLcDWR+32f7HhwrFQmNXP4W6Gg4Kt9k41VN7BMLzV4PibsA6LWZ\r\nI6NNdCJV7XGeBB3rBBvuSBrMpcvH2eqPhEhY0/9tHxhHVhqJoQKfnmVtT9RR\r\nLS7PVsldbv/NNsL6uBxcqmF7z+bq4kju2gumm49QWZ1Uh0ELTlB6tG1oNG6P\r\nnmAvcCd36g9OH1XQONr3ZB4BMA60XtvXzMM=\r\n=da5V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.32b391398.0_1647539962422_0.8828952103937255","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/card","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f21a2b759af80f028c77c733733623f59c7e1026","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":19,"integrity":"sha512-Dwvo1p5/8B5aaeQL1LD+hIfit/MDHT5en1st/oboc2lb6+vg1SuDqTjPxZhD3SbZiTSBUHiMRcBbXTZM1+V2Aw==","signatures":[{"sig":"MEUCIQDaFi1S3GtGblQ3ZKqzVk1O1JY8g7h6Yd8rGo4Adyo9oAIgM/7K05UYLQaN8V6Oxg45aqrbEwv9bXYkE6q8UeyyokQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLW6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnVxAAmQMrjkT3I4gVhMMa4GxjEeBnvlZvx9LN+J33a3tMqQ7qfGMI\r\n5KKmp+ybn8ZRmz0v18NpzBD03qXH3QB7W4xf4Ct7Oh3u4xnCj6QyXNoATQHl\r\nvv1CN4YEQxjTz66IIu93ZVUpbi5LGBG+fI7DO3ZrIWCqkTddXtN+GnO9IjWt\r\nzZWDLBnpkevaY1A17rd7TUmf2iFHBUr6Kgp3Sy/nTjO59pbotMOVjb/2fLQ3\r\nO2sKjvKfBJtMDN7xfQyMv+9Dsee53kkDEro0SRBRcxc+t2/MergWlubRlxQu\r\nApb+1jnpPP3W/bo8YlvQ97gzjNLe3/3xZS5Ml7owxvH4f2Zdu6XDhm4z0jxR\r\n7U5yCFC7NEfkvDs+6xlTbfQ5hqi7eg0FvR1sew7HrlKJ8SatW4vWxY3gZ59t\r\nVLD1O8jswSj7b2rjKLgGhR3HlWQVYmd5Bh1pj2rEnavEISG2HdNOO/AhcCHd\r\nYxDA2MQNib/o9WRjluBV8siZ7gYSm1jYMPTohhaMPthM6G9vCMxE2wNg5K1a\r\nrfNS7vkF6+1CcXV7wsftUqtjfSNiJBFrxb5X8V2Co6ex3LVEZ4ykAVnZFRN/\r\nHovyLxOhGcWb2Vn8TNnIiLCYcmZW3YqMIVpp27N+2ZM6Ita3d6SPrjP31wyc\r\nZdM6XDVTPtt5GU51K6qvLT8ZZJkBUkQaw8g=\r\n=J46K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.ae8a6a3a3.0_1647621562573_0.49797916404348763","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/card","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7142dbe3057c2d1e45d46e526b056bf51622106","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.cbd9358a6.0.tgz","fileCount":19,"integrity":"sha512-H2aSE4pMogmhQZ5TvkdCQKVNVqTUoYUJAmLN+mpnsOQ1rVRIDFqZdWIsTFpDahTXtRN+5oE0VHBKHuTEvjaOoA==","signatures":[{"sig":"MEUCIQDFBGHJcRlm5gFTcDaQP0Unqz20yZw3W1yRy5ZTyzvctQIgY9ekwKoy3JjQWMyxO1AwE3ddm88ipy/EDifos6pXu38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ0ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPEg//YZxfoEpoDBnnjJ70ux3yulfTgNaoBvcgDecgpTZjkaYxk3o4\r\n0IofC1eHm/C5rvKuouswyJOQFV0H5ZsuVdc3K8ecbxo2GlwjGy01vKri4U1Q\r\nFRN1M7nJNSDb+wds5JdZSASx5SWrME2X5M6A/DPGGp8LSrYWe0kNVHCWh7qJ\r\n/32WHYetbYtbQpqTY1whTsTF9zwsvPW+9zaOCaAIlY3Jcgsvc5McwCYOPezT\r\nzpgGLM3L/GK6+fi7SPZVbgX6KGLgIbMg/VWkZYtGLSvsSJ8+Amtqje/8Rq5A\r\nF35PPHi9A/ckQAKk4T189fl6k77A4yN30//tKYkLMwyNZa5+6Qizh3HS1VEu\r\nfgq7IOJMAtExOMY5rTGs+QG6k1g7MujJR+49kSMuDMIjM2nAvS8gG8kc3h2M\r\nQKdkbxBleEy2ym5ygSSzPWAk0W2VnUyMYhwLpOwuLNHbzI14YSadWKbepRTt\r\nxpEuhSchkjKDhpRB0PswQldOLrVeZEEdArp69LHWEC5qpHGgZkX01mYMlR+/\r\nDA1XaIOT+8pdhPVTM9RcWBPw+qoHNHWMtuMoSoA1TrUKk/4nl5zNY1C+vipV\r\nAe5Zjd6F8RLuXB6D8EAxICKPSNQV+VvwA/OKF0AD8gdUdBr2zDmLOcOEMdOF\r\nGk8GUQT+dZfZvbRsVqNTWHMVaAGFGIHPdj4=\r\n=bd/s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.cbd9358a6.0_1647643928897_0.7145197230892664","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/card","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef75d0971d86ad6513ce1c5e349aedb679d7851b","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.dcfe49c98.0.tgz","fileCount":19,"integrity":"sha512-v0XkwFtH5NaBNGuAmdcGFuQQ/zhMkW5TwayyaZQ1wj4+LJzGqirl7POFETMZ8pNsLSASEhTig3UDAor0cfOJrg==","signatures":[{"sig":"MEQCIA0k/wAWWT3lgwZ/jTng5W+FMhsf0zKPmO6S2Q9LKBQ1AiB0Ni7nOLHfvC5mC8iTq/z1LkVmZ//2nDtoJywzNY+tuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMd8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQfhAAhyTgmqE6MD2IumVCNaKjfkWAA1z7nBGiwK9OQMa1oIeaVBNA\r\nERpKHlaa+MTpzmWDM1I++ufIVFM1XvahuIzSrvKwagwTPvQKG/Rcc4n1ZfYu\r\nnjSShVgKil/LlaYuTm3KrMUZ6Y8oiTwZr2eWQsSIqYiBCLe1C6ve0LwKPvMm\r\nxrIXhl9YhrrSxmmGJAovTQdrKfIm0n8KSYTZ/YmexKQpickykD2wG6D+7oYq\r\nXuT2QqDt+1LN1i37JYetzP7CVpTrl+ozx6ja+5ZU3so6xvTvJzjRuk1C0t9C\r\njmihl3INO+iYbFC+soZ7beygJ1wFQuCHaKS0qbJpfSY1/C853AU2/3642ITa\r\nh8jzyvUml0oOEO8RUIBUdVDJIfN/e4d884X/72gA4mf0vxRs3t+UMOg05NUp\r\nCbtCrmerwMrGCUL7RmSwKP2uvSdIFJUY8uOglfb2MVER63XpQjcQ7OtxCuvb\r\ncyeDSIy8+fuGUZNpMsu9LQ2+f/NeO4XrsxLtYM9+LnC+cDO/OELA7tK+NJLd\r\n1ebFViPkKTvtqh677YDdcSn2BaP0ySkkc6ynYOftg9MhQMIljx7C1Gy5e/zG\r\nk444JUZcshVq7i7Bsnk6gaVw6twPaItQ5OkEFC1anDtyiZj0R0GV/WFR0BMR\r\ndzJxgrQf8dufVk2POVzzuYZ/qlKRp1TI6Y0=\r\n=JsLk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.dcfe49c98.0_1647888252250_0.21995185466479672","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/card","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fae5295b275fa1cbbc97ffbdd77468eea05141d3","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.f31a833fa.0.tgz","fileCount":19,"integrity":"sha512-Acgh83gz1YfrSL2d5iniiUMt1UFCGXfB0jnaiWZzFXWxHddK3+Z8jnvGL/Hk8HRbI+TqmJGhlbfBQtsZEJEbFg==","signatures":[{"sig":"MEQCIDO8Cns6BC5jLcj2BJ6Z3JidK5DCyw9BXLZGQOJn2gu+AiA64eIOXc/Pfu6zZaSwh2ZVydDBkOJJrpPT6Ud9gSR8XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm7uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpovQ/+Mwq9bZrjcdFxG0IsHiWcH6j4ndJqYNRLwGxc2XB7o0OE5zpK\r\nmNrd6gUnvSEKy/wZyBGb4qJeplaW/LHkA74Bz7KOpqtBYy7RrUCvHkiYSvze\r\nxYC66La07/n9S4S3y9Cq/uidAjnvMect+/2D2z3Xrg56Lq/R7S3+bcnvv753\r\nv+bgVMRWZlZ0Wy+dSwMw8ZSCXGevEOmfPV9HGGB9GSeft9JGyIKF73Xwg25v\r\n6v3QdyszSEUZr8KvNLezJttGIc/I5kFFWCneJJuFvykpAYsTMGj67QvSmDEL\r\nyffYb5Yh9C3VQz240ZE4E19AH1eI52ETSt7fnB1CP7qOCwYUGk35+pyiHHJ8\r\nZ+9VNP2UHXvImR8fHnphWgvENEbRImC5k/P0pWLECBQ4zti0edLHOg4pA85c\r\n8JbLBUwk/HueK6VwZSn56MwPIIYUKsBLxDJf2IwwJ1UP2qbfvHzHJjvyJF2J\r\nGPpAVUw3VOA6RbqpBUmNqNNYt8UWv2fY/NilSQzYoX+3/yuZeWod2jevO0yB\r\nckOoiB0w9InEEvqjiB2XAaLpspOp0OfibX6BAppq6+L7hr9EKka9ArLrXbBe\r\nSIKysx0IGfZBTt0R4P91zZQsB3W0fW8SvaOaiJ3UUagkxL+z92NdHHAKiaOk\r\nJNuhA2/foEqiMAzO2jP8MttnJ9KvfSkjFIw=\r\n=KqlR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.f31a833fa.0_1647996654550_0.8941645112338095","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/card","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"115e3378ce328937f475616ef6b243c544f19b81","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.4b92e210a.0.tgz","fileCount":19,"integrity":"sha512-+9LKXbFXaNJFqywuedKur9f/fBE/T+OIRTKUgjK2ZBwdFpR6euoT5U0peH5vaFX+KlVrPmcPwN4mpVIOS8SA2g==","signatures":[{"sig":"MEUCIQCZhbf2UANZXmYLp6kZ4WmgCer6HTiCAJRMQkBRbLFhYAIgDIDYL9+w9jLvD1b3OFW402yn5i+xHSZPzHELOD3iIuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNIiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcCQ//btofx2T5xC+4iEi5DynS+SKLgHJLoUUQPkM2rv62kLyaYt9N\r\n+P9MGLTJJj+Evn45tPpi1S4MXFUH8yI2oqdKwprNEqgRvv8GLeFeIRf/G7ob\r\nFOJ6GaQ5J8ixkcBODfswEWkD4ogf0hW0i+RYAsOC8dysEX7gSbKpn/PMRCFi\r\n4y9D9V1f6vLCr0MCOzj+x/eQnTYgqGEltf5qEWyeuU87lV0zUfowfyaXqTys\r\nquQNqYtQ1GeB6+BXrN+4GyDeu+R6lgsjP9gdTR4f8JWb64rXhRyPNB7ZEwxL\r\nQtpDHPG5UXwQBOVa/TSzAE7g0C6SiPu0HxwrfiAtLa3bsEdwV+QurPc0wNZw\r\nccC1W8HLYU0lj2AMaMfli+4Jo9kV16HXbfV0jMndzL+agqggeSYKXFFiHPJq\r\nE0tbNuaC/RFFsM03QGFTceZfnDeAdQOuMjTEIPSR1N6uNi6reAljDyIO99+2\r\n9fo0pRvjNZbS+H1p+U1kzYTbDR7aI48rAnIRXECRaa0J9ar26yeEN267cKNn\r\n2P5JvzGYlgKDE54/f1py5kN21jVLJKVz8X+oEleoPQ2rbDZtGuigwTbZsOFq\r\nziIRSQ6CG8A+eYGHPxC/uF0xqixysxJpFGf3EIYzFCT8KVOBei4r2Kji/q8x\r\nvZFOdiron99JULnqPkQPmzfjG01hAc5sEs0=\r\n=6vD/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.4b92e210a.0_1648153122097_0.05927278295192018","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/card","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.a657abb61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c1bc2e46d78783b04542113049fbe40bf75be2","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.a657abb61.0.tgz","fileCount":19,"integrity":"sha512-6IsAeb1GuLL3OfHHy+c56hdByleH2Z/9NecAKcoGl21PDRT0REyW68SFarUJtSzaIi2muDSMPkqKIik1VVUZwQ==","signatures":[{"sig":"MEUCIQDqiZX4oYdiWrmTjt5xM8vnrdY5no4oM0w2Xl9nbZeAkwIgToiFsBeHgU89Y7Sf73uTaOm8k9D4Ivb5tPIh+cANx/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNckACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolbw//asy4jVIPPWBML3VgXF8rWrNs7D1F/b/c6RlP5xJtTQAJVyUw\r\nAMRYCO2kmpJ9QlQPonpU6AGwRe6Zk5H6jzwjXHJcCTPLKfS8IRi8Xpx67kji\r\n6sAh3ZgU2xzcKEV3KiisIdnye/caPeWUoAunwLa5DnBA8nXeV+3LrQ5A8kli\r\ns9BGO0zwpdwv3a9VBM9ocyn0EXM1hawth2Wacb8rrHoZ64pQ8RaeDm9icLXm\r\nFga1ceP9W4RSQ/CVM7d/pxGV0PtuzT9wKX8QveLnc5IjnQadnob91yv4Lovr\r\nCMIrBS7tmy4urgrEEmMYFdbO/b7TvDfbI1w8+bY9fPzeX+1cATvLPjolJGbW\r\nVTS23s7D8jB6J0bxN9KCoUhGt75w9oeGtJy3JLLxPIc8bh0MDEdpnaz2Oiy9\r\nPRe7kQ2OVkObYsSwboOwBG9l/w0YQcmO3J09ckA+JpGrMbgKpxrerPjB9frA\r\nfHkHu/13yVLMSptLXsfPebXBTgh6ekKQScBNd+1+4mUOKlTt48CHwXP5ACu5\r\n0ZxlN6r1pLJKkHdZ0RjQHkv52zbu2f/QWRlmT6u3bgQrX0vzQ0i46Pdm6bNr\r\n1jp3GOBT90Br/puFk/8eDidj/mUNW5BlbqLWwip/1P+Qrs5D2aDpfnwuXt8A\r\nzURdd9LPmhicu/aCny65LiKvwTgVpQysqxU=\r\n=SPtX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.a657abb61.0_1648154404368_0.1560050817804466","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/card","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.443f63f50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c112f25c5ce1ca8308be0834e25bb1fd9b597780","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.443f63f50.0.tgz","fileCount":19,"integrity":"sha512-hRvdJNEreMLfdfkkvH7cyH4+8UjxqfXWxZRuMsBxff2VDSkAmTw5ixmovGRMPTpJ+kwoAnNl1M1zUAsjurm4Kg==","signatures":[{"sig":"MEYCIQCIssbKDBo6DqH/u4cIsrWHrkQogrYfVmJkRsgNqeWOhgIhAN628HCuf3C6iZd2nnlW6wT3veUFc+1iK2KHc1WfbPOW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqL8w/+LD2P2UDMVX3S+0fQ+ie0Nr9zrd7OiS+uX3DLFa0IHA59YPAj\r\ne9NLoDFNlbEN3MO8l6faF1E2SluHp5uTZaQnrnCk84B+0gR7KooColr9iqHu\r\nu0mWWQ/Ybq2FK8iGaQ/kZ73458UA8Qv6s1vSgr/z6JhyzUpEBZV0OQVUa+6L\r\npzX1QzbxtrUzsOv3zheh9VfEUX8LGbS1ZTVzvDtiFIik2VSPFwlVoNGovZAb\r\n2L8fQhmqillk/BLuKB0gbaTOWm4aiXptIwUi24cddztr6plPqbEaTtJrjrds\r\nzqw7Fi/ixT8D81IT9hq4SeSM37v7GrUdnTHA1F5CCBi269wSYRRcWtCydPSx\r\nkvCZr7YCeeQT9H/wur8duStsjnucNsapgNemnwVgifKvpz+KDjt94ma2+lJG\r\nQc62HgqlyQ1xEdoBRFcRWA4lZYUVxcNZmr4XOrU24jSphjilC08GMCL72ft3\r\nzXaU14QQaeg8nLmmylGKZ8Xl8cD/BRqEsvV/hVMbKpQ4BveO0dcCBTenxCEV\r\n+M/jByB+bxZZNNkPZqU+P3s3o8TP9u40o93kky/6iLAI/0ULT8SNo5LolvD9\r\nVqsKjV9wfZ4zWTlqjTNC5pzpyM+YurFSyd9hvYlA0Z+kp4eF9wkH52S2vPQm\r\nf0z7JGhu9ubHGMXoATuioTSkhryf2mfEcjU=\r\n=mf1Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.443f63f50.0_1648249484595_0.6380844207587264","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/card","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.eb382f318.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0345e892ac75594d9f8612c35553edc48f61d94c","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.eb382f318.0.tgz","fileCount":19,"integrity":"sha512-hr3hTRg6U5vZhAMgnLKuGCPMTA7XA1qKAZe2soNQc4DJf+A3gNdm17610/Hy3qKNX9OLQZrF8L0MH8ZEMsq6jw==","signatures":[{"sig":"MEQCICa4IX1lvQaGBVBZUs0/P3wyUI9H3cPMRHwW6mYG4ZxoAiAv1K+mwcsnzdFxvR9jZAvgY4VDaUJYyQYiQXPRNFgIJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoeeg/+Kt3Kcz1qTCILoB4srl0Mb0dBL3OtQP2qd/pcateIoiVQTvI3\r\njAgnm9E2ssssG/O+GHzvjdTmijL4ta3irk2K+JMldedRPaIEZTPujdQQ53fq\r\nl/skvumh6G/Anu3nWu+SYZTuHX5dgQRJNkRjaVf8+WW2wTZBYl+0/45dWfxJ\r\ntBI5vfGwY/US9I6dLKx3C6OQD9/TeAi3JE46cQidDnSiw28j1BKxE9DPwJY4\r\nfR6hZlSoIQET78bUl1WdLO4JWF1Gokml4wkb+NZhqe0aXYvdqx4FQO81H1sH\r\n6I1hexKlbl02ve+sgqz9DgaBfyb6SCXBYH9AsHjCEPV5zDZstzcv2sqSLzmE\r\nm5hNrDGKyOY/MT2VW+8WW82dWv4RThziZukFXzIMEzNisOMXhP1zQlspj9T3\r\nkW2mBTihWLP2vx2kzKb9RO1Sf7PN1jDBy6D5h+b7gBrVZHZKK2AKRZQ5EeoO\r\nPU7jz0fGouEPCbYhFm9jO4uz9RovRo2brTzWbFDTPfKmDHrfAsBUgvbyoHMl\r\nUzVZQZFVP5lq4r/HJzuvcNmTfK0hwS+eRrPDiHKsVvdG2z5VjX0prI+H8WDQ\r\nb/yTmFvisCelpDkKQGb15WAMbRR60G2TZyvkIPMahRVzmYwcnmLM/+Bg6M+8\r\nOiDHR9fYdLlBSLgkZ8b3WCyy+Ku2yctROHM=\r\n=Y539\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.eb382f318.0_1648575304059_0.5456906944813604","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/card","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.344d52823.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a44421325914f07063817eabefe4895b351944f","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.344d52823.0.tgz","fileCount":19,"integrity":"sha512-OGZBhbI06xNf9ZDbs+scKQFMCwABvOYqtpSQh56yGvijW2ub2CTn9uY54YnknHAyEOpiOyCwY0XiVPmVrtttow==","signatures":[{"sig":"MEYCIQDBQjQnjDObmBnVZUufmxSTB9oru7DeyH+kl6zpRpuhYQIhAL7GaL+bjVfZhGwFj8FpBUIis0j0my2PrfbocOa6jIqe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosJw/9Gy/K0As+wn3LJaewD7gqonuXQ2oJCgZFznBUJ0msVC0C1zIS\r\nFw1aIF09gXxBaobjsTeA1rvop7eOubei12H8NXpWYgsUUw7X+P0G01o2m/dU\r\nQ+mGRSq2P0vyD0K0r0w4avWqF7qlgpYdkriOZqX53ElQQ4lNG3bEF+fxXMx5\r\nIjlTTT1HMaWOglTCEYgW5sSR70y0e4S9VrTjL5SknAiDNCKDlF88DP3lhMUV\r\nGfxCO6y/Q0tEgBAratAtUGvhz9+lnPhzN9bURLYSNCzJJadMSn9jzILFT2ya\r\nXJN15VTb1tRMwp8lkhcjhlk0xMSy/I9Oqdqyg3TxmEZDWo39WwpEe6Q2PtB0\r\nyrknhfXZ5OdXA9e7mpCjMocW7xCza2kfkVE9Jyynw6I8fyMd2jwmEObayXzF\r\nfXOF3eWIzHRa3IcEcSiCXa+WWO2qVXht7pGpSDrT0mNEm+bjIK4LTXoupJ9I\r\n9WL5N3HFtgvUmNIuCpR4WSNC/ab60JBFw42MqMxPnhjTuJ/1uXAsueQmK+Ge\r\n+0RlM60HGw26nBYjxnh6hcAtlj5ms717NQ6GVREjhdWyPzYVq/H20GQnaxgX\r\nTKe7a38N72ExGoPGSDkKJRAeM7Ov5raX/BZY1QmUSwlyxzeO3Na19zRNszsE\r\nBquwDEfBoYVn5xKfOUWBFzcyx6V0X1KEf38=\r\n=MdS5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.344d52823.0_1648579404190_0.14696126924810482","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/card","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3204cda6d6113f58290209ffdebb0815ab71ede3","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.4e372fb49.0.tgz","fileCount":19,"integrity":"sha512-7VEOWDjmLI3jSccIv0eMXwyqypypZ8nfoksRoH6lEvX47Wj2F7+W0qZfFLIN7JEacpFTP8bDQiZ/K9Yvqt9fDw==","signatures":[{"sig":"MEUCIFiXjbvLO2i1F/N/95YJJf4KTWiFnLhz2MGe1cLD21xiAiEA6wr53kcV9VEax5s3TLKE13CqCgvBd/Twge6ZOcdvprg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+2A//UKfUeMuQc1Kensoq0hyIM2QAbaH2xm08K97QD09VZNYnLNzY\r\noeLGFL0TFWbToin/Lg03FaLuw33si0A0GCXjbZ6G1WtTLkwQ1T0H0T8eUN/V\r\nfeTmyMA87Wz5ZHwhJXe2os3h35rBJg0dJGvDqgsFw+/K/Ka3vFR2P5OVVto+\r\ngp7qSt2xLYHoEPhaWz5lkOyrRSauszSP2t97LVNB/piYoT3r/Tn0HXmdeS+0\r\nbMNFOMhnFPZBxT5obVMiUbSLhB1Muc2ZWpT7zXy2D7ZNgHZeyIxU7nlYW+8J\r\nY+WFYveI1heMhtnuHKS71ntAHYqVYzE73o2/iAlPeEUbTTawHM2p6HwMVh7x\r\nd7HGM+BMOAcQK0SC6VbLt7RPLFrC/4duuUVgLqWS8TvqXjWhWPPQWao7xNQN\r\nkUMXwN+6KBpJ8jIkLFSbS0BMJIWCr1gZHUlZW3HOSKuT1bFtR5UAeBCQICAO\r\nXG0CVgSl2jxx9msThUK/qDpFCYJzvVrAljY4LQ2GveJvn0EpNWfvEdN4YHH8\r\ntBbMJTV3qmrF75gt48Rafzu/N/xRPQfNfZ4sZ9muZP0seGW9ln2hbNchC3Gv\r\niJHOutuASwUDN6g0zDeyWduzvsVHZvmhxRJ8CV1+REVl0LDtbADFOz2pT0WU\r\n7dP6SLfGqwD70qTR9J33yD1PdHjrK5rOcKw=\r\n=wUp9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.4e372fb49.0_1649363584265_0.9617486550259715","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/card","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af1c5443068c2285e5a09af717f645f8a6353e16","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.3e30054fb.0.tgz","fileCount":19,"integrity":"sha512-IH0Oj2ZiNOcAbKqYzjquGhsfip0qRoixQUoUEMBC/+MVBLcS56Tqhvd6ycWH9kfZDB5M0LrAzhq1vhURWsMrGg==","signatures":[{"sig":"MEUCIQCmyPLCvBoFPGGQHdEi5A0bJkoFCTlGRwIrrvfdqBRt4AIgeQNajSLxa+UVCbJ6LqVOf1pITC18C9NImNMOc76VfQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0s/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFnA/+N960MQ+r7Wf/Lz+4xQBePDeyaIdg2r4J24Tu2ziaPBK3Kxp8\r\nAr01QWGVgNaD18ycM4xVH6uvJeQ1MEKsL8R9glZkSrGJ5sUH2mkTXSQWAuCe\r\n3sKrPQ+zQS35RNEiS4+Rpx+2181Xjp20NT8pARiDhvSo/FybUnyFNXEWgmoN\r\n1ksr3u2OkxAAnhmh9xc42bNY+BTHLeRNJ9olBYv/9bcxJQOp5TLQDvpIE7gz\r\nhlsrVM9i6PBKbs79PICQ1AULLycu9d4KCHdTO5l2evCv7QPQXmdjJBgSkh+x\r\nEN+pUD2uJWT99KJHv/j/tYSMyGFKJAdc028dikqx+NtOaaK5eGmEwGqAOcvB\r\n2RepuLONQiqnAMX4xcXKNKKfPtFckW8P2fjify44+nFrjRmDGCYc/cfVAUlm\r\nit9U//KUWSEd1mIPOUoVQ7q/Q5jyjgSU4HMCSUs+fudmH6iC++IfEi6OHP0o\r\np0y1m5K+87r4k/YYItaHHOIj1HHBghl8gdZdUZqeia63dpYiJQewduoWghYf\r\nwl8yu3ydGqHArWMU0MS5eatClsJS9hbE5E3fQq01spBuXLX85dYgX6xdGdzU\r\nBZ2E0l41SQj4K4/nbZ62nnu456JeVzht7vg7CQ7b4YYt3gId45GHG6YYjwEd\r\nNU/tYvLpxtZ8/EK76ew3Yd5OFX0Ja9h7kr0=\r\n=YHzy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.3e30054fb.0_1649888063320_0.6964908882897396","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/card","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30f544ce3f89c2b5506761d349996d09ce0cc5b7","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.8c4da223a.0.tgz","fileCount":19,"integrity":"sha512-6d6oDM7L497k/+70Xe+bLdmfz+7fO8UdRJAiZM04LhL4m9F0lk+2B9QZyOzN1XwGUp8E4DT5BVO1AUgAosgiNA==","signatures":[{"sig":"MEYCIQDABQ8/I7YI6oUP4GN5fdiln+CM68TvuxPJncOHVpXqOQIhAN9baeBEC2HagbPO2PsYrGSJQih9jMtFLSQShUMWycG2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtQkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYlQ//QotvA6/Om+y5P6kgfGsQv71zFSPmmy4pJV9zqWDKDS7LdXWB\r\nc8ld0u5oZoWn87+Ig9sBoGqE9d4ud9gBZskMFEN7BhntjFd0dQJquTB0aWZI\r\n26jtKnXlr973ZiK4NKDCWpu3v3KoaDxblHT1dpbHHOgXOx7EEz14diLhzOkJ\r\njSQ1/lTjBNYpkQNloa1Koc79bE7Siw0vj23ucK1WtovIISSt1HzLgrnPP4kI\r\nyEWLOpjygqlXQwXpbgsxKVQUcbI3SwNb6GbNJi7Wg7sBcsNG/PBn0lQzIR14\r\nzcJES9qF7Mf0GgOYRhC7861p750dOZ/Ts8GPxEcTeLEMOYMG8CMNmZb75i/C\r\n5G3l5OwdbmIW9RXxbirnh1j6iVbUKGKCdyxQM8jmli47u6+Bxs6eCRCo8VIP\r\n/v4bTE2pVqmhMgUwtXYJxm9q2CR1O1EWO+ophv0bYzgf5/rAaPjSHm/rae2w\r\nrTEPUclCMf6rWWraKM6Z+25XW/6P1rJt1g4egFVuBF7R1sCPM9FgxHlt5VlI\r\nWpZCW3xx/8mM12yJCjCnitBtm/JzyOIuCdMsnIdkMT/Bsd8je5lhQ8O4+God\r\n72/8PGfMvmIC+774byWfwVvOLYv0fm4a5aIZC3v+AiUxo5UfX/oXPDwhd5O6\r\nWYzvh/w2OR9+Nyhx7lYm8B38d/B/cSdB2n4=\r\n=px3w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.8c4da223a.0_1650381860493_0.3361080303036945","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/card","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85869609446565b00dd1e23e21371088b9f4eef8","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.7de8965cc.0.tgz","fileCount":19,"integrity":"sha512-2bHa6XJj1tC6HUUSuid7sE5minfmX0KIoPnp4ln/F3iDYJeatrOgSZG2ZuijzGEBhlCaqT6pz8gHRiJhAQIDOw==","signatures":[{"sig":"MEUCIBTzWHDFWVQBxJfRmTtB23/01J5Cmjm3lqWyUK62tYHJAiEAyZlHWfWZ8FdVkAwwp69ZC4P9F8gUG/HmA/Go16ySNEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohRQ//W0lwSPAdZmFsFajkq6hXMSxIOPc1fZuRMXwKG7t56JBqev4X\r\nsvhXqvnq8mZDYJwTOF9pWO2mfXsQ5owOE9z357TzoL1k1ppToOS7vwTp/Mmq\r\nRsBMvieY3/ZhZ00eq2tnpxj9kfpuiLYLNf7UpWOAor5ZXyCEsL6mfaG9ZpAF\r\n22Akl2zYX04Xx5j7NIQ39TQeufKp0xmI1BHTi72VvjUDKwYI350uFw0vhRaE\r\nN5cMUw8zRcI7kOcgw6QLImKRhdlwDvzBcu3HPAB9zr+TNkl+kqxk+UrZGniQ\r\naUWtVMLXCR1efZXcSH7/1jQWPK+RHW3tUHe+MM5140yc/hxsVrU0zfyrjyyF\r\nd/t+qmlutePUpH9Mumv/QChn5yf4F9X8y2gqm8Rwsxmuz5eOXIK31CIvkhje\r\nXdfwhnisxrrjLsL9GtNCkjR0BunLVlHCi6+iQKPrv5vrcRT3ewLyfbqymBLR\r\n4cMLnjmgXElj+ERwC+QO0Md8ODdLKksMPvqMkOzV9ihDkmU0dmjJq5RHG14A\r\nzBWK00pt7W/ATb0j5nr6+B6OzNvYBFjcSEZUtJ47Y5hZT8V4WZ4AWO6kj0zV\r\n7SdHE7tXtPWx3HZmRrjektY85MNH0paQ/w7rnQ+2iUGoOXeQ+1TNOBiusdqG\r\nkcYNn7C3A8Xg2EW4ppXMGmXvNVx7kmkjvgc=\r\n=FQ1H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.7de8965cc.0_1650399812000_0.24081128084893444","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/card","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.641ed0851.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"505199a42b2dfba24da69718b05bedeb848a3122","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.641ed0851.0.tgz","fileCount":19,"integrity":"sha512-3P1NqUa7+PIXecoUZB5wxFviRzmASvjEeDkIXkFTlOkorLeadPFUs+XgvqUTslctvUnwAIJRPAYZvkqDQK3ZxA==","signatures":[{"sig":"MEYCIQD7q/ijH/xVcnIZ5f57dy6m8Pa/MDc2BUdL2JwrymLAzwIhAOwJIlxYXtHZD/42VQ4cwd9NXhmbHj8rDsrMvVYjCrqj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC9fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvOw//ZTXk/BKGdhDq1RZ37IjOSTtvFuWHMNe3Fvop0A8MHX2P94bz\r\nbomM8lxRPDndPgAvw/+02VVoQ6wOdoCEWXxUTDDSnzQg2VWeXXoknwaxpmYI\r\nz32HYTPo8BxHmGxtr8LjPHqsW0FJXnC7wqMTQiPIK7YY0PjcOC+s9bHZ6X1F\r\nGZzaiqnCxd+fv9PdtkKBxAov9ER4cJsNmOr02KcihpBCjh5vKbgddcyObHiu\r\naHkl1DZ/zTv1B3RRQtlPn+bw4V55Y7T7//5VLNP4Rf/ueVJQZpnKZ4IEqdpB\r\n5kCf2dMCycnrXvjCN/zqsgwaoHmpEd6/Kc1waJT/7soe6uyV0y8Tw4TMnYuM\r\nFc1p+VKzK56T80Br173tJgWV9PIANIuMEzR4LNHtAnJVpKNOJq7+h8FM0W89\r\nqmFZDe89glOBaSwZSpfCL4/fwEcHLw1S/dPuKwt68abUVdY4G3rxrtKyxF2v\r\nfjc975MlCOT+yLsHs+bnEkKqNWOP3AibfSPzrsuipp/O1GLDru49QlCcABOF\r\n2mnHls2Lu/xe1RLrDNHX0aqZlwhvb/SR7cSZ8tEKXx/lemLNlrPonJR5w9GT\r\nAfDyWGFZPU6NWv96Rw7L9RShflA7SlLhV4fwvgajhFqmw/ssZe34OdEFbGSR\r\nt35XKveWQfFNJk4k6RFG8cozmoc9MV141N8=\r\n=hjfo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.641ed0851.0_1650470751093_0.8464306749890589","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/card","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.e88f83024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93cea5dc699cbbfee15f96b1dfbb9443eae52cb4","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.e88f83024.0.tgz","fileCount":19,"integrity":"sha512-H6cwOIbeokpjit1/v+tnpnC2+kyq+ZbzhHttCeb3hjalRx24Ttw4lXgRL0GJ4PxLd2c7W142z/3Pgg7GRHw2Fg==","signatures":[{"sig":"MEUCIHkP9ys/i2pMz1oGkBbdQS1zltzHtFIOLzq+EMP+qcdyAiEA+2Dh4urNDGqJSkD+SsEWDW3bV63TSYjVC1+gW0iAd/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEdGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9ng//Vr9jZ8Y+jfMX3mddVERGaPFiaEVFEX9oGVeYAiY4XygzzVtP\r\nIDWDnt7FQHgVdNIHfKiHF4t0PofKAaIyQ4rcx548zedxhBfG1uXQUzVWvHdH\r\nBNuovUCbr8oEivSuUZHXUYkEV4dV9R9B+eMfBheTIqYStFCvISEUiygWrFYO\r\n/amPUm5Jp7PLhablOF1gJP83g6qwJC33QXp0Y399LBXhr+sL/4fX8//idJ5p\r\nqoSA5tYrRCXadRo9IPlRVfvzCTtm8PGgXn9ukHiw/YM0N0Z252Hy6drz6LdM\r\nIPEabLss6y9aAK+FDgiwvlc1+Dc9F1XEZTjF3fW3BJsCaP6N6DKVmALKDICW\r\ncT+08bt27uSeWl6w2Pn/Hez//PpM+D0ZP7GBtVQRQoLR34wA/Yc8AN/wiIpS\r\nU16QUaWhV2qe7RXnyEUhi8nzqz+XF4aafjx5WMnM1FTuvR/f9Z/djEyAI5g/\r\nmphmmJTJiUWasmu7VbJAGoRvJHqNjsGoP/gXFyki3xz6fOryrG8b3IrboKrh\r\nVlbw7uq93Cfh/82nnUkqUd8L5HfFknt/h9YA1JxOH3+Mzs48E3MYQLlu3xX6\r\nwkMYtzBzVGtMuBK1o9c6NS4L7ykm8pOck+aMiNX+vu9igouPa+TMOrwBFgD4\r\nEpN/SwJsbXhnaSIwFunreNYxD6DXc5DURR4=\r\n=2Ql4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.e88f83024.0_1650476870536_0.8505582367470137","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/card","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.7321d6254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fae9a8e629a62381f3f0e81a0412fe331b04e13f","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.7321d6254.0.tgz","fileCount":19,"integrity":"sha512-J9a4HWaX3cThZiVD/mK6rIU1MWgDiAUfXvXB1+/M6xqdt6K3Jn7x88IClMhJmktsllJHcqytKqNhSBciPerNJQ==","signatures":[{"sig":"MEQCIGXHKCrP78/f4ps0DjYhYd8UMzHyRvP0tNSJMk2jWGFNAiAoxjTB4RVW+n2D5qBeR8hzjDDztP/chozm8yVTNXu7Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGjqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1phAAmgZYMoNwbn87k/QWhPd8/Rb6M0GPUdksgI/XOO6olJdJYbxE\r\nqfPybtm9eyPM/1NJkAMtS4aj7Y/2mq5uXfauFrnXOjCMkz72i5i7xoCS9wHf\r\niZ5vtkUhrGpojov8EOmGvvoaTe2K+TXDX1DGm2AGRNt2voK+YOtL3jnlKP2q\r\nv78WOzR3ZJ0jhsV3J1hy8wBzsFzJFhKcKZGb9IG/WOYIalNf8mHaJDoSHcbn\r\nqHvSCtyOG/GoR9tebMeeC4YCeX2ZxSR17sJAggTbyfb5yt+Jy88n8lrygizy\r\nLC2J0uYZCX7eRz8qw6ak2otJ4zvHYo0OQFc5oZDK5z5ykUu+IgCjOMlbrMMh\r\nAPjX6ga+0i3B0NZ3XdRAha9lw5tiVavC5tVjgvV8fKsfy7qqy35LWvqe7DSL\r\nHxKoihl90EJ6qkpV3ujDnP4MPfMnGlkmVK8bbCGIsInZ5zOMXILpncbYosbz\r\nummhgj2O8JcgjUVBtMfUUer1bi2VbSHfkbuBjCqCCROd2kV+K266xXpZbpUV\r\nGuQns2JCg0uWE30ocuYj9sp6cfIMC4ZguuoxWqpgYg2oI0XE3bKiwpCng5hX\r\n2jTLn0PEgSLdVok2MmELC+1H53DmyZUpV44ADCEhE6Ox2u5BaHmYNBQw8Vqw\r\noyZ0gBC9/Whb2lHpmiM1UaIPrgXLc1Us7Ow=\r\n=5Zd4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.7321d6254.0_1650485482275_0.27963046179818973","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/card","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.3ab956515.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"894a88a75d959001884855a149ee546911582577","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.3ab956515.0.tgz","fileCount":19,"integrity":"sha512-zf8SH/Q9LxsZC6S+JhVZG4wlryqRo6Y9D2YNZIKaVKjFyHEUeLMmzk9VGzUG4W8BpCf/Yk0NqOQP6I3o4wSklA==","signatures":[{"sig":"MEUCIQCRw0FAGPOPEM1q2FSZGaWcGsigmx2NX/UjlXhDg91SOgIgUoDxCPp5E2JeVTG5GaBnPS1FDkIYZR5/LcJFFSc8/+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrfpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTIA//aXk4HXn3iffR5GDyPHtG/8+ucClTxW6AuSDrdXAa0iJ4CXt5\r\nyn+v26SDb/KdlyXXELP3zHv8Ph87IThv5pUDT6zTeXalfGuDrv+XKoG4VNtQ\r\n4fpH7dAcwu2HUUfhWzdqBvKiUa7+eQkVHuTm9WP2ycFLNJ7WlvbqqGPox/Mb\r\nJAFWF/WtucABFQZrv4fBxakmTDaJ2TdBgckHAnnoIMZNPuiQUA7PX+FK+IS9\r\nCKO3mPwpP2HQm1Tyht9ZOU6LmwMhkZUqYLn7mdF3/s92sxKZc7zJ9gmd3/Ep\r\nR3OPtG+q5ObQSusu9yvTH6kWB+4fCVNTHDgILo/pgLSjjAjS38j42JVXK8dw\r\nSRjuSG7ChkHoGnOzlSadyovevhD2v+8zFTD568OsDIpsNlW3e+e4q+miiLkA\r\n7e+SiGib4/tgEgV0DnJqlpFsiZUlyjxWKHv4b4N2jDkjKOJyVvdP8Iur8JqM\r\nhWl7eEjtrQY1QurGjEcEW/U5M+JMiYYg2ji0zog/lIleniwvp2REpXvG2lqC\r\nw7nUJXyaoWtzm21KS0jzFNnj6Kkf1gl9DFGR5RdIUvSysdr8qBXnKuJTsY23\r\nZejEfEjmIXw/0EICFnTAHjp2BYhWtOP0zxbx3fcfyiSU2yBxwdwa2lc97fFN\r\n5+wKrl30X5BLSAVXraPuBSlhQ+xkf96Vwxs=\r\n=vMw3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.3ab956515.0_1650898921300_0.5310948541232263","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/card","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bbd29c79589e6f07a1085908bbd9f402182c5d3","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0-canary.53b3cad2f.0.tgz","fileCount":19,"integrity":"sha512-OtOBiUxl4mW7/To2Dswn3fl1u7c8Nwraka0TmSZfkQ8AalqRIbD9XfZDpLJegFzIm1tSOlJbjd9/lcshLYA4KQ==","signatures":[{"sig":"MEQCIHYACcFyaQWMvHh04Vw2b6pHcivrrKdWTz7OcE23wyXaAiAwxOEmR1mVfpc88CYwTp8KaoIMkvvqZk2ovaABNKl7qQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTrrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyaA/+IcuoxTiTVkDVUhRfusYfk6dTz93HvnLBU+eBNLl+wAi8O+87\r\nK3+s0pwShLqLcnOhrHEskgWAlHDVJj/xX/FaHieRa3ztqOYWZAn6lZRnNHE5\r\nxBGmm++IHTxC5ZI21xJVU5CI9GCZVIhkh0HdgSm062WTRc1VfjUIHPeO/LTK\r\nvE11GKo9AsspVia0FHWXD3cVhdgV87qX3onwRDaDB2y0Zno8EhwLkwY/ARsP\r\nvRkqiCn90LauGRq5jbdA4ofomdG5kuQEkK6/g7/8yTJTXSFUYslzBrST7dym\r\nyZyx2hA842qM8aMBxjDak2taNHS8WwtjFi+Hyo6/V1QHJX3d1YV8dStad1FR\r\nP9JRVzV8f9Iu1vkNszTXaqWZGKP9nvkFFcsR2WRs9RH5GYPQT6Rx6VOciSJE\r\nDeSgVo5AFJ1PEnmHK0tKD6HIpex/aRjS7TSdSYSd6r/8tZQVXiaVsv5G/Aex\r\nztVtlRBLGlUrmOBBj/z80FD8DjzXPjpWmF4nOWF1DsjOu/CHlDzP0XKtij46\r\nY7xo3KUGgRy226cUjTyCXMLDFiiMvaZkyrBQ1B6Jg/K6/gRAhadW3lRQBl/G\r\nJzqLm7gWjlCoTYk//VNPwWSgAK2Qn7xILLqGHUC8TRaRfWDJIBnekCLhgIms\r\nuvcyqBtdjxIg8Qrh+f11SgUck3rsXwy9yag=\r\n=nDIU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_14.0.0-canary.53b3cad2f.0_1651063530838_0.7646972466433839","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/card","version":"14.0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@14.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81a8d201bbfb37cbb4d0b738cb55f23da787c643","tarball":"https://registry.npmjs.org/@material/card/-/card-14.0.0.tgz","fileCount":18,"integrity":"sha512-SnpYWUrCb92meGYLXV7qa/k40gnHR6rPki6A1wz0OAyG2twY48f0HLscAqxBLvbbm1LuRaqjz0RLKGH3VzxZHw==","signatures":[{"sig":"MEUCIQCN+kSG6JpDRWD/M6Yb9V8n63j3oicpAdlu1FEIjkKUPQIgCzQ5/3Boj5WkvNNXmew9/fot2c0Nn11/IH8rCGXijFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiascjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxdw//W3UxUW1kpJcAcL7YcqThSFkLdFlFV3qgj5gyn6Lwonn9iYj0\r\n5VYc2BPzWHR9UJCzuno8ddnE7dItVtA5bvIoA29rWtg/REm6SWqTVrdKkviv\r\npAc6Vrb/qxVqQ0Ue8OgWHbNBsxmTjyBseg/4ZgUyINj+bxOhX48KnZJwWEyz\r\njiQjRjvy4KVyp25agRmZvtv8womW4TAm2Lh2MB/gviCWw6LUIOBh8KvnOoqu\r\n3tp7idAYtY1M8G4e90dlMlFCFNEzdOeXJzLITD/yWjjHMe32XFnns1qBT3im\r\ngNisoBAbFl0kb7Q28ErqebarWo2MTEWl66aU92c5cB3IePUWEOj4doS26lDF\r\nwO5LDw1k1EcLxtMDQyMIDfUDnZ024MKC2dfG59QFofFCtH4ZH7+0TS/+jTzF\r\nN9mQXyYMD1CXddAM2E6KSDtWDYw6mkDzBT3VWtkSUHzEMGOJwbLqP7HTFW8t\r\nxXotlOkFwu1EPW1F2WvmcT/gzSBGY4uh36l+CkDDnqkz0WvAyPmXW2D8Ppop\r\nz5PqRmwbBuk69XsB1d6GvMbitJ5zM6EaMUv6Eud1i55W1A+D+uIOpXBJ+Bht\r\nMZse+uqxsdgUvVWis4JmiBVhROv/+mB+DyGXxA1CvaE1nb6dG/Uyk46O/Xzr\r\n3yWJfij0P0RPx0TG3guiKHdihGE9vK7AhoA=\r\n=VPhu\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/elevation":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/card_14.0.0_1651164963568_0.7872210555411896","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/card","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.432c815e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"defefa26dcf6a37a2a85f18905f299c5187d75c1","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.432c815e5.0.tgz","fileCount":19,"integrity":"sha512-Oseqm46XZMIMOu2jKmR/4dWNIUN7FdR3OVwlfGrw2GBYqyrTbH8/Magh5USfz1VtbbqO2JyPiaK/V8+nnTOhig==","signatures":[{"sig":"MEUCIQDE5wspvhJ/GZqHpN1yhfXJHifeP5yPRi4T1mTYfcphEgIgD3sMP4GT2CSNlaB8eLou+W+NXpIU48udSdQr2Jas0N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopPg/+OuhVC010Mf5yEzc4aRAfaYc9mATELditzg5Xm4Skalw37ls6\r\nA6xEqzFgqfKQ4F/IdvYMZgcH/nAeHgTlu3dmv9Vh+QFDo8xOVuDLGs+D0XE4\r\nPXe9/Nqt0MC0pwgRSuKGctu4AyCxaNBD0ODog1s2FbDYc2xSGSSNrX2gD0j4\r\nJ3JRQooPMLSwwXaoyS9AuPWHBcMBQFUG2QsvU+vftaOzyVRbMxnN0yJ5741z\r\nfCqE2ScvqTJLI33mJpsWvUnK5pGPVfmcp/BbC1+zpgTfdExS7d5nVEGUVtR0\r\n30kmL/bYV7Yr+u6TXPzrGS9dZ3aOny0Utur7gF8kFrFxso2iwQsT3vDN2IDB\r\n1lO+RD78vXCl9xsTFBYC5g5bewTy+Zwe7KE4jYj50MvASD5fq/R4W9akxcL5\r\na1LSLV0IO+XIxPMluEfQw2TXcFb0yDYso2Q+gxkZVMhXV323yaXgSZwU5Nwc\r\nAHZzI+kMJTTdhJebHElZhLrR8jr40+w6lfdxCSkiTxHJfnQZGk+HEaXxSQtd\r\nxcWKENKdBKqaATzdsavdAbw3+pHc/8zn/TYWPte6SgZ5pK1wwwUZVeskLt8a\r\nhlK7Tz4SzWniM45X8KlsAo9j6w9el9ClINfvp0S41/zdefMGhhL0WOuJp4LN\r\neaE9ZXCnP1639nmYVRjkSmSngednZkWVb5o=\r\n=7TCJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.432c815e5.0_1651165030575_0.41931294629837135","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/card","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc7fcc99c0ed468df307cd898052e9e412e09af9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a0f01f669.0.tgz","fileCount":19,"integrity":"sha512-X17K6hrLui/GcqvYxiNm0MQwd6lhl3c2fpmad+OHlxc7ChDVoQnsH9JIi4UZq24WsdoE+OOfYyJnABgMp6mHIA==","signatures":[{"sig":"MEYCIQDs5KuY+Ryo5SpyfW9SqT+IVNzlDP7x8vXivhbqLNRw3gIhAMd4Wa/DNvOeEwpp6dl5vr3dySmUOjFnXbK/qT4CGS6w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYG4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocMg/9HWs1EogTBYwqSMaw7IUmZ5ZgygjAugv4MdzGyCjvCzjg4TO/\r\nezx3OmuzvAxaaLO+/iFXQu+uvTGDaFncc/d5R5NX8zY2fABZn0FzNWsU7H7i\r\nX2wcULMW/2TwEP2C6PtwZ0qc7bxaLLXcyJ7fBxN0+aLzm+bxdMBKUvKS8Ctx\r\nFwxDk3v9s11hrLKUY2fqXFe4LtUqyJM/zMO6av0QImfijGE9DIKBSvygFOpP\r\nPI60EzPhJMRgVLspIrv8wYjP1i8yRMLa3tEmdD+O+YCFGDxF3fXvh2ERHALm\r\nwRzfNe1d8+5/YsyxGcSZ4Mflw1sYQ5UoNuaTfV9/FyKktM4tnTVSzBK3JtdX\r\niSnblJQPPSn00nRlW7ykYsiuSN+UHlFXzE48yxhZgTC1aD8NB6rOfUJ1bNKq\r\nlp6gYG3pvynyn/4/bj4MZ1NBVQIKoNXHEkwWTt06J2g7XsQdv+CfKzCuU9UX\r\nZF0zSQRAY9q0O82GxQewcgCZadnMfNni1KgIOcxTbrad8ofTm8VR9OI6yJCn\r\nAjPvvsdBnQH2c6iznqYTGvLQbj20OyCJZvq3KeRH9Q1JOH3iQjZWS+fFdmWP\r\nOPfRjeZaVFRhij8KACVzvsbhbIfVmX1ESghxbqwRSjsV/PBYH5ZsoIcPKf0J\r\n6vVXYUJ+j12LYY+EooxON7MVRSoIiHo9gKk=\r\n=36QD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a0f01f669.0_1651868088231_0.8999765291000592","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/card","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e0ef9bb743bb52f70c305408d08d3c87636c4cf","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.276cb39a4.0.tgz","fileCount":19,"integrity":"sha512-uFGGHzbRi+7MOTLgzcjOdeWJX9ahedD2XLeI+pgoIi3RPeTRTfl4dhsXb5dzNYZVM2yW6w8T/VHTRvPUNXSF+Q==","signatures":[{"sig":"MEQCIAIKq8JFq9x2SJhx7cJGwbfp2AWBLCP1Jt0d4oLr6Jc7AiAzwhfopQwt/O6oMc40vVoo2B9uKz9eRWJMDzDx60nTjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZO7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVYg/+KSxnnEZKVHoHJ1xKpJtDcuhcuOrX5f+ISc9m9WqBLRe2tFrG\r\nt1jw3z3O1vXMNkRBuZRqmluHwC+PZtmAS/7ZYXbAGhPm3qQcHVpcNie9WeNs\r\nuIc2699m0DWnwBMWKoY7KtAoDzYTTE32qfpWRXSc2v8hjaIhfXafaL9BaPTx\r\njBu7fb3MPU9iIENTKIYvSHc36ZKtXDI6554ekPVDLaWUgrPMWL5ejbXQlKtl\r\nOKwle+MDVzYTwxconc0hzOkARyIkRuhgqA/2P9ihMlIOclMaLeGGO8HOBmOE\r\nPj8EQxZhlrCIi1j4PWs0wefM6wvZiJyrI1y4TltbPrJAo4EFrtSJs5U1Ums0\r\nrsik5Hs5SqJLMBBzNxLmotxdl1TVhKY4fEUjeLQ3Il4WQlxuBbZnBbDU9tIO\r\n4gmcXLTk8EiBK/lXDKEhTjBZ2dmTXJI/BRJjBdBjvHW0mMRi9vs1cIYMrv8s\r\nRbDDlwegmYuj5iniY2BVmgS+TVb94UD/7ls6f7X2x5w1LQX39omqYe6tZH8G\r\nBPmcmlKjy89MbLRvbY3ApS71B98Luxp9+Vom+MejrrMvt5ocRlELykf7XfPp\r\nn2dl+OLuDF+h9C+l6qEyUSxnLZV58T6+e5NW+U2QxAjDgCAwJmBNRcpQojKj\r\n6mJHwtyMgyEIQUbrAgPZRQcAKg+/8EAbRfQ=\r\n=vdrJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.276cb39a4.0_1651872699660_0.46215245233353763","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/card","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0151029640105d2715ee294dc9bb18c86420b598","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4fe98ed70.0.tgz","fileCount":19,"integrity":"sha512-GLFmsc3GUnhSRpUOAmFkR5rpDSx0qPy9lAT6bD+W6+aADjW2FoRkS0lB4fuZmT4fXe1mlIwYhBA/bLm+iz6pqA==","signatures":[{"sig":"MEYCIQCP9zP4XEmJ7/W/tuZ2ZPhAKGy6YPHq7UZlC5ITruCFagIhAKKw0GvFC5ThuiHQOp+9eVWDHyGfFKFXU8sxpPZUgBst","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZl6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouwQ//XCihMWl4YFIxTDUOxUvO9BV0A2bEjG3DStY79blfX/nEL5UP\r\nRhGImnnpeZFi3RuNUcnycM4aqWn049yBpMIxmem9hVC0BP4ay8WnsMTYzvnF\r\nk74rWc4SYeG04+vDHddotmQprDrr3oIZyOIN48IUMa2Un0yetZ2FXUXkx3hx\r\nvxodiQEhaBuKDh9mB7CMzDH6aey/pMYMSlDXkSYQv+bE6Pzm5ET12qcEF9FZ\r\nRxeOZXc3BF5AQ2ZecW9SiMvcqooN5hyCTgrBPnipURmWm7Nnqq3ytoM/vsEQ\r\nPkVOFdm51Sc6N4sgN35EU53W2j+ZqgA822vZig/I3FyFk0BRZOYbqovafiMj\r\nFHfqctvevEXuoiKWhFfCeF02d39MScB/UgUYYWWqnMGzkykLhGkiWUWadsyA\r\nDRCNQBJLtJnEzDFXH1bXcsZwb9hzEqguin5QYXeLdspOl6banosmGcmpq/p7\r\nAqrYjl9kxIhRMODtgJBDcG70Ui3Eeci5RbfA2gtRjDqAJg7Cc749+re/DHSU\r\nJp5H5/oagf3ZPt4QKTKMnDjspJ1LT8nAo3E2tDnIS3GAXFL1QAbZ4W4xv4AH\r\ntTuxB3sOHAdboVmnUQNS+imI8XfLeNnhE4CICkQiuusrKnhR3uVkoaHMHRza\r\npM238CbPkQTPJZsGzfKSUD62rEQH0JdnI0s=\r\n=EpTu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4fe98ed70.0_1651874170781_0.5142631964289508","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/card","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"873b49cce651bbed2283fcff728bd028c1de68fa","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.58b130a3d.0.tgz","fileCount":19,"integrity":"sha512-256T222oBZ3bw0ZYwZA7FJwjM6ZR0SdCQ72i6RidN+5vn1PIF97Uvh+pvg3uH7rBYjNHnurAte/nZnTl0xQk6A==","signatures":[{"sig":"MEYCIQCrnNNOC+PaCEmUFGIFu5iCPxLuFBIhX280g/GJsYDHpQIhAORUiB4/sgYPz+taSxXxH+bB+N0Z85sRqmUaFlswG0xt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZoGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaMQ/8CQaU1iEwKH2zovPI2KWAXzGyckd6Y5LdGGMdI2lf+zsyVIpn\r\n8WiFuK9PkCiyeU/lwCIymZZxn/NTSfyFgBCdH1xlSlMVLn5FZkCR61DQdLay\r\nJb+1BkicUiyxMiwhLubA2fhvrUwPX7Ikx7Bf+ZRdt/ihaKM2S/YtuXdYTTBc\r\nCwX6YT83UEmewMbi04S5F+A65wY0TsGZT6GSpj+U6za2H1qHUyddR79FlZRz\r\nVMys36In6aFyT7BwRvI0gsfctA2GF7oMZxSC7zhANjuwmRIDyMSRSWeBqcVx\r\n+HiCFu9g3qPjS48/a7rxYFlDRD94+RUIX/h3E2A9gL2ozUymgW9QnJYxk08l\r\njwNPzm/wQrNQ97Upq/c+o2M7pXkC+dubKVmPktmVOwFZBHXmM6Flde9pOACa\r\nzZ2QWI0Yf22Sd6nJuWVgpxH+JFO8q/Hbsr2a2zDWTiSutyjV5QVKmDcppJtT\r\ntuU5AJzww3/BBF2WjreB+3eWhhybvVi72fTv/wmD0eJt6e1OI3s+ZlXLeZ2w\r\n6FBcKgzM9ZhdEw8s6fjjmIOhAQAKnaekhMS61LRdityDlQWopyKGMR8XlvIC\r\nME8kRzNMO59n0cXb+CimY8gbHvb3+2GoOq3wu4FbiSrHCpWxBzm3Rkq7kNaJ\r\nZ/WiWXZhiA3qeMRDcomAvcUZFStqJqM8Hek=\r\n=KaU+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.58b130a3d.0_1651874310543_0.44004663306358394","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/card","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb05e64d84bd8c713d555bd94be12f3166c99fe9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ae278a2fe.0.tgz","fileCount":19,"integrity":"sha512-g5X8KNEBENGqBoTDKF1foOmNWT3uISJ9l0+ab1pO0k/Y84qt6FgP0icUfiNbM4BAlXZNBQsbpwTgEh6yeDgTlA==","signatures":[{"sig":"MEUCIAliL2PKNOnV76EynJFPFCOhTj6HeXYGdvDvnt6EgiJTAiEA5qjIPEYFUo+Tzc6b7i8UcrVe2QwXkMBEZGHUnJJKd4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCRg/8CeLUZ6U+UiE7Eo+5HcQk1tDbRt9Nf4GYKSnSitqkYKnPC48u\r\nF51XT8AY0Zs1t7kaVMnKm+0zZZX2JYW6iM455FGS8J5t7cTqFAHK33Hlwt4c\r\nYQ5+GCVFbDdS3CUmb+ZQm7PUop4IXji/Er8pzSD+2qFAMeXtBo1cqvplM6qY\r\nibV5g0dHHKpJE6hYf78pSH1nBTbGdSJP35PktKpAigBq4ECgFYF2MvKN67Z8\r\nfMytEGNe9qvmQazDaZsmNmA3FJ/FuAU0t8Bh4naOfAlu3Ua2eFVd+J1NoDPq\r\nMYuo0RhcFC2+9luubwFKsAwMT4cflCU4+jc4kAQckg3qBL7J0ItizspNK0ly\r\nMzEOTGH2UBkdYT+VeDjhzbI9UDm0iB/P3lDOr6oZLiKeOMx9rixlcwiZyCvP\r\n9v9Xbk35vHY8ZgcuDCTJn0dBL0F5UG5MbXDL6CSfzHT0emOppLOcCA+liRu/\r\n+z3YkGaKMEMLOEJbWnSDxJs73/IZ46p1Hmjisqo1nL++++uc+mbYsAK8TN1a\r\n8YcDxn9hKizz4Aiscv4iSOpAO9gZ3ADnWDqDr5mlZUmP9sdVI9ybCaXWyvdB\r\n+RBCz0sTBnq2lJTr+RVuTnG9CF6rClLIF0cWUBTQx4D81oqdlk1alZtZdtQ/\r\nehI3hnvrwKBet3J9M1XbxmNheSzqpgk65ic=\r\n=H1bo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ae278a2fe.0_1652109896759_0.06721940266502258","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/card","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41ba9a59a8b18c0dc854b4f0ab6cf35501303dbf","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":19,"integrity":"sha512-svmiaAkQhEOqECuHfSGhC8Rh07fBmSZ4TVg6fMCeN/qIAY/wLh1WB6cVLLnf/KBdzqBmxigtHO0cSMZ92NmzBw==","signatures":[{"sig":"MEQCIHrk8ZYAms168tgeWSHmo82lcWczIMjU+E9NH96p+ydAAiAD99HKPUCSswqkV29FQb4q6C/8muXHgN7ncdv4N9Ldfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyIdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyXA/+JYv1iP2A8NU0YZkYb427KlQn4oMTDZMk2cw0bRu1Pj6sqKAp\r\nhH8Rqxcc6GaWiFbJ3Z8VUd3hEjn0sVlxLhFuguv0YJXRqy65cdVhpJ1+nWFz\r\n6DlW49BZhCcTDjJqokjhQ/FbCTEAAFq2Cawu2LKKhu67SuzdCZ0HFYavcHqP\r\nUZE+Xut2mZp0ZfPEvl6tas+9qYLWYut195kFnNOGcs6H6dJfb2V56qjtfK9I\r\nlxiLLIQXb5XhG1dDMeoQSLcZabrZU/0ftQ0fwmE+SLzavsAhemmla1/nck87\r\nppbPeyvCYiMD/A9NPHwDkhWqEP/cfv6rOXytLcadi8hadByPFsS0hgEJ1mrM\r\naUvvmNXYYMBzUN8gAJ7plPVT0tOu1Wsv4uismzefW5WTFJiDJn/imqHmnOj0\r\ncl2vzdP+mxpSzgu+rlF2XPJll/M6mEt0a/0vvHmEXwOBE22QGIFXUc4/jwGt\r\nBTua7dHFS99oaZ1LF4VXEG1xGqv0B7dh9Pb97+Vt3d4zzoliDeAhaoxI4hDY\r\nHZvZf7pFIVJGdVjcj6JiHT61SCQo2sTizaYyZsBnKvr5QwKYsdTmyBDiGakK\r\nvQlOPJAod7AnbMqSBIngiVwFixkP0uJBKg1N1FmUyFbN4QIVoKZx4e+4Uz20\r\nHElZH+r6GmvTnRc8q5p3A+B7ay9YU3fRS5Y=\r\n=iiOp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.bebf5bfdf.0_1652236829078_0.9837482615465363","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/card","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbb765a2e8aec2d9c17c5021c6044b844e76030e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e6072cd6a.0.tgz","fileCount":19,"integrity":"sha512-xXj0Vd79jKMyq5DCegfDjxzrLdqG21lK5XUcPhpBNjfP0K/QjFN5ZgZ62gBCSWwpkWSMcdflp9hr0/in71XS2w==","signatures":[{"sig":"MEYCIQDjUl28060G42AgK+li5eAW2gEeHjk1UVEFO9tCgwWm1wIhALk9eNKY8A9QKHX5aeE4zfDqyAfrhIJCpoTmzaCVry9O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBocACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+7A/+KyJsDRH/2HweKS5j4b4Vcsr38+7RLb7F03sJaNLF312DxzmG\r\nMK/A2gX4tCMUb/hLHuLHd+Oh7uc2HWmZJlATDh8DBjM2/+XgG2aqdQOOmlKb\r\nKy9lyWJGf6YukXtKNV7NnWP0MXPkyDivYjmJpf80HAxyjqYOUlE6Zlw58ocK\r\n/4U56XkFHxjuxpMSwFxT9HJ+nmvSAqKldaN2iE9pEMzfFnNGJeWeiR7KJOjj\r\n6GqRlPc0dORK3pbtP/5QLUgl7fomrIM8S3z6kYF/pFT3y3SD5wSryqcAmH+B\r\nZFW453s5/cDKRESPurJtYLWHqWYJONOLWzw+Eow8F5I8fBsqnMV8ntiY2U2F\r\nz4QxtMoI2z+ro/ZkQCdi0F6zxT3ihyPFFoj8w3EUJiQg0+gsh4VQqjvuvUOb\r\n+AyMLp7D635dbZmT64EIV6UErrplfH8yAq93UM1nutZE/FjRevJCKoWc9klZ\r\nQEQv4ovruICa8HGdJ5SLSdfGbqaBKOUOazwfGaIrXib79By7EsZyHaH84WIq\r\nEj3Zl4rMgbjVl+s9/fjRtHaiGu+2iW8YY7zAz+9NV2Sfzi8UsB9C0fgeDeCH\r\nZ/4Iiu2Kaz5r/29eBF2q+fNEwLEWXwuu5p0aM9XFkCd85hah7ebCjY1A00LU\r\nzeIH8iKiRFd5+A0bgTOE/EQZh6s3r0zYmT8=\r\n=duBQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e6072cd6a.0_1652300316041_0.3402262022842184","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/card","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b5edaba92e093ca06ec938279f396d3005eab8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5b40eb988.0.tgz","fileCount":19,"integrity":"sha512-eOlU5LTwb/sBDeG0mg55NLpXyheq8AiJe3iwSEVpni6Qq4NDrL6uhWpz60J8gPQTrB6SDB9/M6AkBmmVxFppJQ==","signatures":[{"sig":"MEYCIQDC3/I+8JBZmz8gn0C3b3nef9U5zUJ2vQScZxKR1ULrYQIhAKBmmmfIMdjjNbXyQVbA7iRvoloRZPkkDuGidtyn0eCF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0iBAAkKAXbAc5k6pyFiJfjWHjicGBd7sth0KPFCLw4n5nuCMyUZYG\r\nTHKKjG8lKICpA4ETPVhdXS1LEAADLHycFpwtG8dYpowoN4j/efbS+JoVcmNU\r\nEGTXJr+eKuvkcL3GpCF6yvap82laT5dXgwHiiFY3qShmcTLF/RJh83RyjPjg\r\nLKzxuDCSEFpSlj69N0pkvyi3TIuziQIH08b3uv1rTnKbz9nSPDGD21twmXbZ\r\nXZpcss60dKlyWjSh8Q2PGV0N3OjREKvx+ZfbhT6Z9kjh2gKUMdVqti5KARuO\r\nSLArUZnZl+6kQ9cbB5f9Gz7nbWBguGzTQjpxHJ91Vu5IagRWpxUt+iEBjXKN\r\nxZJzpJBFvSxDFmM0Swl0P9LlObM1nSwrlEd+M5j1akD0BzT4YU8JcWfMkJVP\r\na42v9PSXaokR9NJTY5x+OhEadLDbEvp7Q883rwNqWqpWoMUY5714+rd25pzG\r\nFo+lk1F1gBlhaZsaOQh7dCCGlGS0dS+vAxWrtmFvkoSVX8gBlx5qAtySJib0\r\nsXhOy4/3ofpUOtJkF1BuL7qdO/gIEuYTb1PCSDQmB8tDFOavuueaHOpC/d82\r\nfb2OHkA6djtJqfp8RQ8W6dejVFGLve+uAtude19WNZ3lp6tuRXwFAIaaeXf9\r\nNEdoanjmCcd+Fyyk7SKxxRam9x4yskDQevg=\r\n=rfR2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5b40eb988.0_1652323463012_0.7887957407874722","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/card","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbdded94584bb030a285c3bbf10cc987a00dcd78","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6a61d62f6.0.tgz","fileCount":19,"integrity":"sha512-OGOmmQCAxe8TgFIQridUctozShG12DJmlHFNibXSoNFQJ/jMbCz8vz0l9ACh1Q3VChX7chu2CAhKW9WKVuuHWQ==","signatures":[{"sig":"MEUCIQCuhY1DyD3rUpQumKjhM6/ZwzXqVQ9KJfiMGC4LOvW6xQIgY3RzBsT1AtW6+k0qUMF3qiGK7LVDj6vY1rXSZrL0SvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW2UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWQA//c0/hoDfaYVCjKSd57uNZq5ms+yJQ+QEkJ/RHjj+z2rPwHOJE\r\nurwL5QY0sVfYV270RfHOpDlUGuKnTN2hBbh4zp9DbkszLhJITMHpSelu7E58\r\nAjdxtvxkks+tsge046QzM6f8YymYUFlNqOGVI7haHcJ2pf/5+Gl3wZT2M/bU\r\nMa0RiTV5qNGe/v8uVSdaVSMX9Bsnf9WQz/c7HsWL+XlexpmEYktdaHB0EV2B\r\nU4LdCxaHkduptSJStyXt0SisVHj2clkikx2PNLVTiSyqWP+5Obdaw33dQiRd\r\nK07lBJC5XHAqUxXCDdxiqhhbduiHlIYasHwbyaFi1V+mlUNBBgoFbOzwbOKB\r\n7QPgQxDPoVzZAjQkBWm3LLHyBnUI5lhwjQVYlUJDkjYRtzV0OJ+ZjDdSV2KF\r\nVfmuWNihFUwo/fMOiMUun2N6Gn5OVtexGkgFeNnKpxUK1DlDQ/3LA+g987xp\r\n/aR2mDFpXGAePOKWVj8pEJidhIRUB+NGHoeJX+KGJhnJfDGYKp4wucoKfr9M\r\nO0dLzXbOuzAXtd3zzjDEcgfbTn2cyUQ1fLlrmF9k1kkK+Ci26yF52+amS+WS\r\neZholHIH104IyGP/oV2mmlgckJPax6U7HW4Ndjps1vILJ1ogNpOjwRlEsQZP\r\nCDQbFcP7bqn2oF/IoDPaIrxKmTI/xscDxYI=\r\n=Jyvi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6a61d62f6.0_1652387220215_0.1372720574545152","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/card","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.05930a453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab98d98060ed7f959c1793acb07e1707c14e7ca7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.05930a453.0.tgz","fileCount":19,"integrity":"sha512-Ib28bG0SJeZO+zk/YVvbxJLcu0RXmkg0Z7Bpz0j1DhJGhJOXBYF+32dVjgjTvlvWHFX1G+W5P8hJC/XLxzWUGg==","signatures":[{"sig":"MEYCIQDiNG0Pu48C37XDlOxQAem9BNHCPN6G1CSwc+xnvmXTrwIhAOarYcLG7P+JyJdFF+q5yS+9OGwLchB+KntxGYsyitOR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokUQ//SKErGCqHUjj2/5G1TnwpJc+YBZzFUayoP13M4F/xXfY4odMd\r\n2NhQ5ZjoZqLPFrrEXMtCAffbBswd5/SS3f67qADOx3Q59o7f94cvfxQa6TQB\r\nTY+PUrCvSrM9e8s3eJTZ+W6qBJ1xJY+WQLFXKpMxEBtc+weGBQuHeBzKfboF\r\nsNrAP51S+pqtLFzXNm/6d69sJKjtc/5fMwc6Tdmj+lpeoNz8yOsSLEpsti7S\r\nlVC7LTumnXGBQ1PCxtGw9cOqsXHfuoCcxQlgij1kMLAAEyaAjTiMooDGUKRh\r\nvpASfhfmQlttxVE1X/IokafhLd34xLBa97KO4kOUXnmO8fRmi+6DGQ/3etNs\r\nuv/+6t8CdCE3LiaeAeJQLW/WgZnOpAOKpn1PGaNaOC0z+bB3XPY2QMSgWoz3\r\nAt3tpkKDf78Gd5/sYsuKRUXnDRzofyDv/OlLEaaEMtYQzonLt+6txQbiHK0E\r\nNwfsuaT6yc2wj52nlurz13qaE60o0vo1oYQFiG284CpzxUzp8SHOybg/DKQ8\r\n3J6//bpq2T1OJNnCNwPffBksLp6ShlDEPygtxeTOL8QD6qsyfvIvagCeX8SD\r\ncRzRGBGZw9xFTfWnGtRCBve6G/pEQ7Jdp5iBA5ZSGW4Rwmd+KNbrTch5wwOX\r\nGCea3DMBGlPb316EexxOkyvd0qZyBXgQBgI=\r\n=ZpBz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.05930a453.0_1652467656385_0.30084322327319457","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/card","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7e84a397d1e2f0eccf44922904d0540b6bd07e9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":19,"integrity":"sha512-RSBOIP98kf1SPS0QuWUj+ZgSpgLk+2Rmw8yKTtKvxicAJ1hHHbiY4ZUcZkUJ+3x6Xpmd7hGZw7ktazI1cNzDsA==","signatures":[{"sig":"MEUCIQCn3njnNdsRfOa3CpqNc60skuhci6AKkIhjjmXkJQFsAAIgNMoFnbujvZGuhFT51FP19r6gdVB0XjBQY9yht+xWbFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWymACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+1Q/+PIAYWvdiIT8PgDaNBGWkMtzEmkgYsKfnB1HR6dp8fHSxLbZj\r\npkkW2hmcr4S2gpdU2et/HIKgZhy5Fg2JLSLfszKEGWiGJkgz+R6zvTZjyCUA\r\nIUhnLTyXVjIrZyV4I/e2mn8vf9EWMvMDgcRW5bgUQBK5vmxGt1OFzT6Mk+9U\r\nD9HgWFDZ9Z2MXcby0Nq9/Av6wgamyNzBA+u/YN3uIEl8dUzBIdIwXZj/WkOS\r\ner1L1czY9HWv1LLWysG4Iy6SESiZZXsqkyYEyRhYbLfM9aCAwyLg6g9eujmS\r\n8d6ckaggdBL2G4KVd7ATCkYGJOqo3zLCkjn5GQDctqb39Y3szOO+RfvPhsI2\r\ndSJDg8bVnQ1NcerOkI/P/pz3hl6M4LoCo8ElOSocE3yj7guz71jubr+4ePep\r\nJA6akkdOPU2kEsbB1jT2C6rirK2n02lLySeGhUX0FOhnLKh0sQ033cGlgP7w\r\na3A0lAzYkTiWIxSaFekSlfDi4ROCJkJ+QNP7b5kEKv7j6G7bEXDd2kvFKZG3\r\nWOukqhi1pWo/lI85MDG+OL/JANE8f4neZ8uCw4zulNZbCt+JJpO079Z/6WgD\r\nl1IM3JNzStsDk5WogMZrQ7s4Y0zST7BoizCaOfbMC3T+YFQ67JabKi4nky2w\r\nwnqEA28A+AFxqyCtmYofUJ3JvP4Wi7UjomM=\r\n=1P/7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c0a11ef0d.0_1652911270712_0.7240930968873664","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/card","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb65d57539bd790f6baea748591654f1f1db35f3","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2f9b268c0.0.tgz","fileCount":19,"integrity":"sha512-X5XmNt7X7P02/Eg5V8hGyU3UPn0+qtjwaFm4i0vLIUUe3oHG3H0Io/LUP/Wlyp7VQX3Q/PR377fODOUNIUnJ4w==","signatures":[{"sig":"MEQCICr4V+XKTpEczTvJKsInD4cIdzLsl0r6c/e155k1pUX+AiBv6KUykIGWoSg5QNbAuk3lfeF4zUOrKT9FPDV+29bL8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+zhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMjg//c4by3gW7rySx98I9jkYTgCJZSYFyDIzzav5ICuiP88jy9a3z\r\nAX3pSRbD8YGYen8KhpI2QlQ9Zo3FZ+W9APID/qNy1GeRbaDtFYQYQI35AO7X\r\nP7o2Ev/MgONluHZSmm/et6aOM58GjTzzP01FmNKKB26YcUI9GJeXYkHvN4tb\r\nnq9sCFUi067i0VJ2wyMpu9LLRGKJgOHSxkAr1LA/YhNduapPjD52Pi9kB1QA\r\nAh+PSs8qRVcnWDs03XLQZZ15KP0uyRNjXx4mjCnzAAld/CBNh4eqS8pTMS32\r\nW3EoWR2AoqgKKUg95se5bRx7bMjjfthj8iLucPL0nMe4FqhIBdiv0NmXMGbP\r\nzow+6nes5iJgV4yBggduZn8VP2v0LSeOgRRJt2P7xFxAOC0E9HzYAAmvkrld\r\n3BVg3bdUzDcrE5tzr/bsck4K2mvxz9Q2Scqj137j9gB0HIydqy2KW2XeMO68\r\nnmwdKn/jirDF686ECa6J/D/5MQ8caPOdq2VJvtQrgyMg32Lw5XyKVRPCZeLO\r\n8VgQCgxe8mLaYMFALgiF7/ZYfTAsgMZBpP62LYDYk4w+uPifeRZfEpcd833D\r\nwl6PF02YrLMJEsKpwYbKtnJa6W0/w9Tql75hRdTnOVWecJ6IzEWKd3pSNBR2\r\nmZGLwgkg/q66u0A0jiGDx2Nyrv8prQEN6GI=\r\n=qyg7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2f9b268c0.0_1653075169630_0.6345959683753126","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/card","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7741345b8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a994383449f71c1ad8b7c3c21de5e2fbda408f1e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7741345b8.0.tgz","fileCount":19,"integrity":"sha512-CIkGq5jmDsTsTDwHpIgo/FsIRQ93f6hiI1fLKcBa/+j2rI2K91JEzWsNoy3EDaJD23Gn5M0q44cwq0fu1bTylw==","signatures":[{"sig":"MEUCIDqcbrecgXzAFo1ulosbiONtthWSvac22ANmszQib7AKAiEA+wI8qycY4Sn6TlNc1LeKIv8/fYqg/xh1sOzlz4pEfvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/PwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO5g/+Khnw7yBvKW2StPqVopcrT1tPAlL0kGWNG4Zf6w2xIXievdXT\r\n8p7P8/Jme2ZZ9V0aqYtYOGdCUMR+h2XNhxhRfrEkeNLUgeOHKcjqO3xkIcqz\r\nx7rcgtlNqq6L9fUIOGBxy9rkJEfc6Ew/gC/ZFdUXPwMmiZav3Yn5UY1/VsO6\r\nL4pkMbEsB43hCCISeiKZOangTlO4mRyEsbbI2f0pWYl8Yms++9ajWaq2A309\r\nQFQb8KaKJkdWe+Dhf7z+o8qJCM7VDmAqfohA8Ng1JpI3RCpCRiK23n9L8uGu\r\n2NiWx0SnypbLNxp6txiZrNFopIVaLUs489vuGuusAlXV7NTuWapZGfHENxaB\r\nl1UQDe6H9pKiNyr0LEjFRmpLKVIO20JdzRWpnWmVKljERItIJP0IVeZ2Hpj+\r\nd5Z1wb46HFz7PH0BiA9j08ricjn77b4uGNgeUSW1ZoEsKJVhy0Iy+Fbd4TBQ\r\n5GgL3uPXNUrQ1SQSm36vWNeoGLuM0O/w3ckXRROYot827lnprQZzT+lKD3dt\r\nhmpajzti+DCpK9yvaK7tsNZD3uPSfgSFrgDMUhuFaztK5XN3qIBdQ/wBg4P4\r\ncHKSr7SETLNTEwtE2gxKEJmryxzG1O83MziNPb3PpZcrR+hmNMmWiRB4KOap\r\nYfv4om/UTFo9+CnG2u7ZnRMad/QklUoKRJA=\r\n=VcxX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7741345b8.0_1653076975848_0.1960172430788869","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/card","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f807e793f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40bce83f881741a6ed02812812091c13e478bbf6","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f807e793f.0.tgz","fileCount":19,"integrity":"sha512-I5sVzC8+o9FyJF5kjixrZL/bjZr+f0N2nUA7mKO+in+dPJO/MPvsmRbYrgrlvNmxRo18MZDTKyfh2eWsqt9B3A==","signatures":[{"sig":"MEUCIFMlzcYP0nndzTR2RmAEvuOkf2VFV7OeIm5mjaz8hVoLAiEAjerR+I50OKKi4c1bbwrUKmDTznwFw6RZvVjlzzJsNXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7IA//VmKTuQ/FUKyDS4g3Z8ICW1IvT1HGKZXru386KtxnKxivP60F\r\ngivGOzt+klxA8hOlyZOvCbY+HAWLDPWc0Pur0AcLQ6TQQwByThjbb9jsJz4s\r\n8F+g4queavmqSGlWSIR3pUHKrbl5jlvEuJP6FM+feVN49o+DuBv9sH+fvv4H\r\n7qpxCzIl08OIJ30z6oBe4sDYQMF3pkhFB7n384pD9Kkp/2q/TxOTXCRFjiyy\r\n9uVOaqnouWPG4O7S31dJde6hOp5gtB5D2V/+sbqFoiqKV8kaC5sG0H6AmKQJ\r\nVKlGwoKT1PZVyvuwgLyqfPW7N+O7ioqdb942pEQQr+4Ss0wzj3ZTA9mBdB1D\r\nrMq6d1gf/pqfPMzZKY1lci+FGCeS0ZRO3djR5aqQwnjQtgrplOR6jC9qYX2R\r\n6gMGMRFm1S+WA+PgMbwL40RoJemrIN4/Fk+DEWfw4T+XMVA5DyzeAP9v8Edo\r\ncn8FZnsUQyAdOk4MXyX3gSly7S6SdjllRWUmwAqkp8rxkXPPDxhwEPHmHNoA\r\nK1YEA5xahOJwNAVXU2XkA4NI87fo9Wnav6YILbZ3KZhezY1NCVtoU2EVY8xF\r\nQRM0kLR0T8PpdOx9XQYJf8U5fj/twJ5amGPrN1ONorVzlgNXsgYps53T16p6\r\nm/D+LmAvGGP1cQTFB/pr+vBN6L8MsFUkA3A=\r\n=MKXD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f807e793f.0_1653085317249_0.33548539818641654","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/card","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d17714a0596a623e9232b944156bb72dc1b8219b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":19,"integrity":"sha512-1nMkP7dVeaMe9kOhn21Vg6tMLEafJs4dAFLfZRXw7H058OnNXqJOHqQVMQ2ireJDGPF/Tz2Dd+p0zEQCuvFEiw==","signatures":[{"sig":"MEYCIQCEBYH/5m6FUtmOTKNtoT4b8zQgwE91+9BYFwPhkF0magIhAMBhLa4MqT9mKCZhlB4dwlygrCoLVMKiHmrkoOjtIzsZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6DwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ0hAAoDpTLjsiLDEsfJipncIZh6Vok3MgD92c5DJZKKhURx5TgeHr\r\n7gfLD+bFdaWIPKVabSDZDVT7UelIWwQYW/MFCr6iIaqaMIfbdjDGgHjvJ/ab\r\nxNJViVZzKrKOtxySNmqsw9DVLbISmBzbzaT42vlzYzpTSOZuGJ1kWZCSOncc\r\n52+SOJmDzAdGFEdmC/SpG8RemPDgASvvFUAih5gHmswchGjF8/34NhkY8g4Y\r\nESXk3G1cbZmY5o4mr2KO8h8NZ0Ylo/mMTm+2UyA+TvhYS5ayamk/V86WcjjL\r\nTxHr8zyxLckaWIQQ9KGtV/mdSh28bHuS4dczR4ID34LIUSneWeMiVbJZl7j4\r\nGqnQScmv3yHrIVMDpNA6ygsKBnHffdjpC8xskfZmZ2QoW9zqEiAxSPxVCxsq\r\nffUd3l9JRMylmvxf3nQbvwsphtCvXRprgWzqUFJ1+Opm+7nQgyuVcLj1RHDd\r\nTvBqDzAFo3y2YOw/z+DqlMgly+lC5m5qWy4zusX4GsMRiI4sXWiEH43rdMc2\r\nyCczdbma5HYHkOzyED3/pxwaxwpdYy7HeQVxHDAbHaDpuskFVkjfV/CDn11D\r\nVB/ZerlslVgBp+08GKElyAK4LLzppsv1QF1FvAnLKkXLORyu9kdcJ4yXdoUs\r\nUQpil/IVvawMC02hyYmhfOo7MND0dN6/9Qc=\r\n=Bplz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.9f53d4a8a.0_1653317872591_0.2575266433304728","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/card","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39850285fa9a42fb9df3cc8adfbca7fb3d73fda7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.77cf00e37.0.tgz","fileCount":19,"integrity":"sha512-1Gx1c7CGFFLu92h3/Z3l1Fd+KXBYKDdaxWlvh7xV1aG82TS8TY/hMf6uxtLLB0HBpKkxCt1Kc5n8VomiU7x8IA==","signatures":[{"sig":"MEYCIQDeMHBuSpbGwfL2ys9Lpb5fzBoPoNsSwEgDCkmdyuaPFAIhAOmSpI0Oc1Mh7HyVcc+RKlGR8iV5aR+GkuIBZx0Fmlrl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillL2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH5A//fwT7xzM61mCUb3J4VADDJc+jYUw4x3mvtS4miy3LNs1DFqJb\r\naGWyTLT7M35mSLJbwburH4mw9BF4USCGMEpYiiDDmg8O1thd/sS4im4WFgkv\r\nclSaKo5MaI2rAbEdz1pa92EUuTml7h40wAuuTVsFKxU3zfPB+KzX7p8MLEeO\r\nsMy2Tc6CHs7rbnF6/mQv6oIPAJmwtoW1vswxKsxeKXhZxzZWHSOTmjS3mV7c\r\nf+gYBkuDrGXnAH79iJPHbUXKGrlsC0d8Xzp22v7peFa7XKR126DV7FdusOff\r\nmvDSDNbkxY1Hp1cthtSRhXGbofnH1d4oHAR5aW0edRcUNxX0JK5C8MvIuyEL\r\nH+pL4RjR3IZ/ObGEQDk9Xvxxh3rnoLf9zA4zx973e5bWRn0MUbjslUGKGr3m\r\ntlrTpOkwWavxqaLkZ14PDuhLfQRisRgYybtqdT8JUA3w9rKS40qZpqqWjZOZ\r\nV8NZOgrL9MSRUUOj0EulFHl+PmaWE++KQDpIiq0AHsBm8d/HMSPKz6JiSFy8\r\nPuMB0vtrE+SV//CO434KV4XiNrca7l9YzXvYJPnzbxqclbqqXYTOjAblw1Ny\r\nQHIgDSQXNa/ilYQO09fE4xx8ReOdONR0eUNDCotXDT0KUNSl7LHsYtsIc0ab\r\nSPb7UkwVxq9trNGYnuUnvf1gZUt4WXydu4Y=\r\n=+b0h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.77cf00e37.0_1654018806304_0.4307403170600621","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/card","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb05a75501d756c5028d5fe78f46d92cca9ed64","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3c7b844c2.0.tgz","fileCount":19,"integrity":"sha512-v8VcvVcZO6udkFcO6IWW1N+anmrBdbKeiLq1RmAfMe9AjypOOOmTGA5WyYMYf/TaI9+s7QQBlfjj3mdL+ZYqmg==","signatures":[{"sig":"MEUCIQDhjlowhET2k5i+9GpzP2AnnnU3E0etGXr22HkUXLdH6QIgCiGg7NHqt9KdRpvxhhm9JW8Jr9quBSwBvAtTXaAelZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin89TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5IQ//QG5AF+dRrd3yx9PGu28+Ji5YmmBX2n/GOsqtCA3Me5J92bsg\r\niARlvhhcAcMkWqIzw8m1CUH8Bt7zu5DRO5R8iLtdRsWo84fJyc8Gq6kzl0+H\r\nXWSlT4Lr9cBDlfHqpEn7EJpk8TACtEzOurEunN3urCEG6MgnsMPEuYZ9atwY\r\nibHy8jKvqpncAkcYg5O9C3QURX2QhQZlzGerhojq8axt57Mt+fw71XnlUIgI\r\nvuEurDO89lCmZn8Dornn3nGAWVV58MhV+LxIuPxhafau3toDZpCfk35hJLMz\r\nrwSHqrm4ZZw/5owJPTuLOT75770GpEUurjg2UbHeRw6C2Y5cOzi0LNO/mSdu\r\n+r6gNoa8p7Rhz1l11CQGHNfI4CrX5W2o3/98UeOYpvjIKS0vS9fB1R71C7Et\r\nE/1dEarC9/NNBMydMQXkcximq3nwyTPwx/WKUJVxGUHmm32kwY0XJYZBP8Rs\r\nj4t04Enx+AJfx7rvIHtdiJYdvKKZ2hMboO59HKgJMPYrWXdZR2o4cSp8TPKP\r\n2ihMQa4DyEioUOa78i17FnGNRbTua7fMDnLkMyU9ziRXdvhTQ0CUBKItXDNW\r\nEarnvqsE9I4E+tiF7X/6Nr9LQFA9te6F0gRzGT3MZrrnXZJ+3fH1mzvtK+GL\r\nt3UWtNRs9LmiLF+s/J5XWnZHms8iEfFkL1U=\r\n=MqLe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3c7b844c2.0_1654640466857_0.3095603337286936","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/card","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.df47894db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d0cbb6d201d3da7d0c9df068653a57d105565bf","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.df47894db.0.tgz","fileCount":19,"integrity":"sha512-kTmc2C+H2WuWSbqoDiP/h2FdYHruECarr+Ek1n57jXjg6m1eu1NPiWLp89foHmngQNPM62tJi8ct2oFnQo2COg==","signatures":[{"sig":"MEUCIQDvpUm0qE/oQ2f2ZAaotEyD1DgCgKBU6kMQ4IjZ6Sdy+QIgdBGSX3FscacYeueQ2H7ayQqr576N6fif/NNuzSIJgRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip28hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLPQ/+M2HcR4opuc10kpncaKWO5bEoFtl32b3E8ZzyC7OgZzFUVwco\r\n+KSpbfEmkgGuLeOV26LyMfZ0EEXxZYV7nrG2RpZTa2Y8gz/pqnAM5oXiekCv\r\n/WAkiCn19+OkY0T2J8PthrZXvftlR2KXz0Mf9hx0jyD5GDc3GV8hwQ1EVBpj\r\n9dVcAmF3PCVTR9fNbwZmqi0TA1uBdJ24zpGEta8tT7yB1RbhbfKX/jBwrAjQ\r\nV5lQQU8FrFe3y3G+gnq0ZnqBXrpbFf6CExPr7VRRsn7o9sXDbYgNP5/yBHoD\r\nkr0FGbYcwpM5GU1QIu3oL+CbQD8UIYS1FDgQblMVKzmhg3vV9fJYyMiFscep\r\ns/WU2Fum33/eNEkYiXWpPMUDMTqIBmCgv6MTvzx/b8W1U1oJtTvlm63qNk/e\r\nPzHV/xYj5eZDGWSqSGkbTPVJYcR9yL6ndf764GvpeT2PdXVwM1hTEl+dd1KK\r\n8yxz2N7oqKTrBcdKwVlOHXy/PwjNoAtmbgsZW2HNZkSd6ChM8r6cWVRl16rV\r\nX1kEQRfaO0hbNWM09X+YoOQ0PdBOdl9F220DRl5MNXp3UulrQuSJFhrwRpjt\r\nOU3rMgQ4BRI3ZbCTTKbST+0P9+uKzOkoC9V/B3vZE+uI2Fc6yVlqz5jTyukp\r\ntd/p6mhU4l/sNUbQ6aOAwDOjGLOqqpCMKyI=\r\n=cnhI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.df47894db.0_1655140128871_0.6008176428449896","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/card","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dfd355bed28cb71ded79a0edb7fa91f86d8df37","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b18a873dc.0.tgz","fileCount":19,"integrity":"sha512-1CoW1CywEk9Lcf2ODonhV45FJLCd5bjSxcAglT4ZaerrRsoSWf1RuAnb3SJ6cYrPZupQY/MaYNr9a28H0zdjAw==","signatures":[{"sig":"MEUCIQC6sbMpZBoXXCjTWn51xwXke3EZ5N9aZwAZX4jlJ6eL9gIgZE5vsYee/hCY3zjbVlu8JQL4aci5qT8mhX26AqlJOME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCroACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraoQ//X5gGnDu/BVpVcBjddTiyZ7nWZNpm8lGhNJlTdHC/UcGoLpF0\r\np46SXnxTqUDuttrfdF8rde9uQhsIMNBehJh09gkr3AFTgbrb3pT0LFp6wUwz\r\n2uhzHSQsH7sEQpjOJZIAfzefYQcja7DyHH566Ri7zQ2/AWXXRdHI1omWAzm9\r\navIgQIKi3gDqSYqGhTmG8D4wHGi45kQVY+jkhhh1YG13J2gtuUegdkfB/U/K\r\nyCEKfQXjzafmhvHmRpeBYufrEUmGolTSxtSY4pyjg9svOqOLq4CQcQfhu5f3\r\notGoPTe/It0My5j3EqmZhE+ffMF1ydDsYVanW5QwxTfG3Qjqg5P+jbiyt30R\r\n8WlHdWlrbqLjR9MssHFXxPMd5UUAGPBemzWFQ1kV8wlvZUDCCEfD8IWTyPzV\r\nJJyZC538MzNLJpFZIYuozCj0pmU0+cmvBEzFGYeTMJeLaJUlvAdFhZ3aigi8\r\no5ozeYxVxxOu5ZM2/O/SS4F/vMzZDTGcqZJ0g0RbEk/m5nmy+qHFcFQN+t8O\r\nlBQ9APO/1sKdPmyOCnkjuVk6DU/1qUro7ZenV18hRRwQii2Pa+kwdAlhNKav\r\nBpFKx3T1dJggdThEkIqMLWx+xrS5m5YoIyU7qnd33YiDAOkGi5gHepAtjufG\r\nNgtc84Rt5SYBU9qEld9dqm+jx+zamREwfFg=\r\n=TU8u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b18a873dc.0_1655188200722_0.8290388103250184","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/card","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb688f7babe16e0332af8cc7d11f279ce205737b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ba9c29637.0.tgz","fileCount":19,"integrity":"sha512-rULrRxevrmyoOz0z52b26Mg7Qjv9c3Y4TJS+Iz8AXPll2o1bxU3tV/n2H3J0cxwhonQFhSybP5j+b8lOg0YNnQ==","signatures":[{"sig":"MEUCIQDFVBqS/OaaN+jQYg2mXHtQ3nUHSu6vg58X/IRSGvGSZgIgAu0PebSZQ6qsJ96SNgoCsAzxyopuyRVR2eDdCT/PN5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNojACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqQQ/8CuLYv9y/LZhDOO/vhk81uPxFBgaQwVeOEj18pRAxeCwwyex9\r\nufHoOxuDv2h1pEO23bQ4oYU5Na6EUEChv6TXfglHdFrN/iO+z7bN/gyxubeb\r\nQZIkgRxRQl36LOFX2CD7m85kC0WCAJTjTU7+gjg9TtaEtibiS0Cg0lRp9mHC\r\nnRpKuKMP6txIHydKDA8iCxm8PeCOi3qP+ONc8QuCTRY7oYTMg5g/j1raeUl2\r\nd03WLVeW45uWttw3pb8C1etXpkFaN5onVN4nQ2r3oCBZ5+Lxhkd6uyEyzp4q\r\nz6emO0gXhiVCzeGTgWbW4Gfy0X9x2IIMS4qEnqw+W1C5jxaopj/A589Dm9fu\r\nzdjLmUo3sAaUVrxkzOUMxlOSqLUSOZbSBFw0Z04iJVh7lTtLX8Su3TLgzlpw\r\nScE5pFCQOj/mPjnfYRxKn1Qs248j0Na6nkk3T2qt5cQ94+KH50gHHRL4PMuR\r\nHIWKvGZmZiykSVMdglyL3i5u6iwnaDHikFQEtxM3vS69s7nXRHZvvhYXflJ2\r\n/aE3Hv1idUxVpamO4VgjGLWsPA0zZxH+GlFaUNp1O64F/zwtVhJteKIU1fBM\r\nNy5Anh3a2LlY5fO+CgeWsZ134wnabjQOojEhjtYcmI+5/6j8LDjrrWPrN2Na\r\npaQS4jsEy7hmug/gdw3QCtSK6AtAHX8Zahg=\r\n=+WCK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ba9c29637.0_1655233058967_0.96671153081506","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/card","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69a739aa8cf09aa713701b4bd56831f8bd2ae7c6","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.9bfd12f01.0.tgz","fileCount":19,"integrity":"sha512-EvddK70ZeXnfEk7CtBnzEFh9JJXwPTvW5KBQ3Vz15IGOM+eW02HtnZ7QQkk5F6RdqGdUxHjGp0nbBOYdefESOQ==","signatures":[{"sig":"MEUCICQaDM4T4iX842p8plp0lO/5XN39wwNORsSSFso2BHOtAiEA7p6IiwhDhSQ25a8ZnTUM1XZEYnL3dxMq43yHugHz/+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2wHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr4Q//TNKLDlA2s59CkyObEiF71PHpo8/D7M2GKSuLM6JhML5eGMZZ\r\nHgaLju9zb7oDPqSW3XEeEXVDQcdjFLx5fZjgEghQAMKS+SBAtc/ywTBLY1+G\r\nT8yLX2zxqm74Q1X/tqiPY+LSHbX3u5Hji7KURLIuZh3GkvTE39TNY7lNnx0O\r\nNmc7jJ4QwrtHxqTe5jGt/YKDPZPyjVqQNrgnu9GOItui+yNBQimh11RVeD8m\r\na3LrKn4bIGtEOqktmpDnxrcK8gHVnYmdgjTJPuvs7umLmeall6TYKUNE8Ahx\r\nSC/WyKLT/diRiu9SxLnyxkVksns8LFAtHLA/6tdql+hThnG31189sFhB9ZfS\r\nmE/3CuOQx5Dkj62K6i8a2VY45v2ldAoZab3JF2QnJzkT/lIWiH8jBmCZBOGP\r\nft4uplrE0FuKhJ4QGxKpBKsIJnIH4pNGrB1vl1y+4M9wWf4aJ1DLoWCI4BgS\r\nPbPuH7v/bZh1cd8qqdnvIqOjyjkILocG3s8Q5BkIBCzbGFjlwTowGfukgr3i\r\nMEjUGcZvgtiooz2quzDDJrdpcBPQGyq1fwbn5FsPZ965oHhSA3mG9V5cbrvD\r\nN4NS0XJfBoWmRcfVQB7KXWz5E/wcO9yxAYYUNhVWex7T7aQuoirI9dHcGTkP\r\nnHjj9Ew1WT6GOwYJ9Z2TkFvX8X41ooD+87o=\r\n=eXm/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.9bfd12f01.0_1655925767457_0.3149166910146357","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/card","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.764de225d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d806d67d6ab1b1b0188be703cf9947a4c2a0bdc7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.764de225d.0.tgz","fileCount":19,"integrity":"sha512-b6qucqWEQ3IqZXoERBFTak5hIiWNWZITcpLzEKL45Zw9Id/R10iTePgKFIxrS/QU/EhvJ/4Fs5+av8dIEdulpw==","signatures":[{"sig":"MEUCIG+tylkCQsCm+ok9bE4uTjmD7gRg/h9TLsGKvQO7KvQwAiEA62gk5SoYM3vjeV1UNW2fYl6q6wvYex5FWbbVs+9AcMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH1mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpc1RAAkUGlaREc0lHh/Nv8x82asXDXmkoRQx7yguR/eurfy6Vxckyk\r\nC4pxJfBXOs7VkmnzsQji/YHk8dbi7HMvdoR60Ihtxh7JqAD5gwaoMCrFryAI\r\nDYkrgBwICm6N33aNqaopkPjF4M8bfC/2g8gB8arX7E6Xbo+stKIkCbGnOjST\r\nc6ko9Clbj7vVX6U+i9SNfRyLvDAz6l+saE+Cm6PqbKnUTaq0ww8UUkFYt7IZ\r\nyjMT+HwpEjjzIalUEtiYLUUBZiBFeFLSPYre1u9uMqxl6cRXxO+d1DLOdgZq\r\nDil7SHj02WfE2u95vJDMgxQvMAwweYHY45fz03ldu8oBCu2hffKMa0nqvNtr\r\nkGRmzsOrU6NC2ibs05og/BEWZg1PhDq8fOUFYIEcOcB6spQn1MXq91tNFV6T\r\nW0MiUU3zshBLSGWobYwF3kaZh7w33hhFLBSRFh4jd4mDsu3Zdxj+dwhJs+BG\r\njbAzGxp0Z7oq3gYo2xRnWQmQigcRNoJHVaRY5+79AMKUFBcFUwucIa4FGARm\r\nOjROdxQvRACHCw3ShVr/rn9eINMb7P6PZVrzo0/9fSV5AGDKshu5iJMgjqPG\r\nLHA559scBv0MnH+RnxFtaceyCRTh6+y0tiP2uBRqd8HDOgyznYf8FpMjZ3On\r\n8GeiaS9M5DAw7tB4qv9DCnijWPqmtph1lcA=\r\n=rwoX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.764de225d.0_1656520038548_0.2757635812005643","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/card","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.31e517cea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb88383260a1d2cb75e3dbd8bfa15c48c9ef71ae","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.31e517cea.0.tgz","fileCount":19,"integrity":"sha512-UDic4Y1Ol0ME+01kt6UwvedM5NNyRYuCK9ppGNW3PC8wOj/f5ZhS6vxYVareW1EFz0qviIYJ6EfIgqFkkzITiA==","signatures":[{"sig":"MEUCIHruYHJmjCnywS1aliCnP0Yp1PEKyxVOMpeexWPQsX/KAiEApx+rOMRQLZyJmfDHZiEFR7ymQ+oQ1dugdOH/3vU+26k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC5Q//SPPhPs30yIgaAjJr8P/Ijfu6EyJxfYSZ0x3HOyLACIUfNIss\r\nacQd02gBwK1eiMmDkdGqU7NrKfTzFvgZkLo9vJmOi70f5iPj1pxb7jnRzH2n\r\nLrR9vrgJYOETrmwC8+o1rgGI+Z7JtFkyn75EGjT1Jbhsh4NWntGBolJ2dHY1\r\nC20jMxE9wOl5LkIdNg1BReiuOnMrH6DH1AKaf6s6U0o2elVphmc5N5yt4gPw\r\nzYHkJ9smSdp+a8bhNYzZJmEhMkY0nI6oiV5YdsXP7J4+E16CwDhAehPaKw1q\r\n5NYVs7NCfBqv5sTsrcppB9Y8hHfEjgzMPIaSoT3gBrohGKUvz4psCxQNKZFT\r\nI5KqXNP2BIbomIm4yWFMnUAQSAuaeUTNoJfbID4sbSTmLRp5Fmii/Lh/RkQn\r\nvWx9wpBrKVqpx1w2Bsv1DbaNqFy34l3W6rjvID6x2IMC2bt+l84u4pue6JHh\r\nifTO192CL0CGTHipCGf0iednvguFQ4aqBQ44yDO5C+6GJl1Udd7xsigBnDXm\r\nKn0FAE7ORKExzJZsHpMx5R2ABB0ctIwVr7m/RxlPO+G9eerRJwgssfswmSuJ\r\n1Ry7JkGspecBG4D/IL5gUbjZew9ndmopWpcUk5NBc3q1L1upyMqUYWgexu9B\r\nn2VEfdvAUXwoPc4pEk0R8VUfexAdVHpDuZo=\r\n=BjKi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.31e517cea.0_1656700118219_0.5671688553810077","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/card","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01774c91b937cac53ca809686f6d9ec02947c27b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":19,"integrity":"sha512-HlNwgJcX2wYfARsiAZwTUkEFGR1QU4u0aDTlMgKf6At6W3pOZopOrrue70lPQHizOp8ir7uyptwKZ4CmEHELJQ==","signatures":[{"sig":"MEUCIQC6kCJuDpDuPQCH7Pg+Uk/8GoSdmW6v51UdBcGDzX8Q4gIgfDkC6fH5aOypE4LL9DqBML0ZXvSkAtB92+71PKICkIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkZw//SZTnBq4b3hlTne01u/JoTekT9VzX/CNlkw3F9NDZwB3jTkRi\r\nB8CWEPlurRo2gULnq0w9Y67XShvoDf6I9g7NMzVGrmefnYlS11g/YFtoANHc\r\nvxc0D4bjrw3WchbYi1zoROCQ9EcJP7VZWwP33NBQ+jVzN6T4rs3/nahdLYse\r\nHbNmbGoKDHSzl9n/4qPPbZOj/+HgjQmKWFwJbhrdv7L6Ob/JEK9OBve2ItJq\r\nAloou7XCw3X9etEv3mT/lYATPTDcgu+3IPCYJs1kwNvLUgtPPKpe68Md9GPE\r\nCm7CzKAurPQe3FRxkKOHgvtiSVG75zwlnUfzF26F5D7fqnjxByBSaUsJn+IH\r\nW+JAh0gKYk6nmZxYXgR2CIqme0/adKON4LbA6ztsY34puj7LzWPFgdQkpuzI\r\nTXjbEncAOEp8yTNunn/ABlxtaPl2otu0xxYxUsGRn4g1W1hp3AYj7osHXT8Z\r\nQAfAiFiWEX8pXk184LDsB/t26DUTVN/hWIF75vL9mQVVix3mQPpSZOsAoT3p\r\nMYXIDvV7tZOshNNCkTL8RRlLJR4EvsgFny5bTJfBewcW/pbSGFq+gsMISwLp\r\nTYS4u93rOoTptMdjp7+IQA2oDESydfBX8rG60oWki+XpJEGN4X0rFJo0qq6U\r\nKyLnHkV9tjB57cKfWdAbwqVvP5dSBAgvmaM=\r\n=NZal\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.9ea4e8e9c.0_1656716114278_0.5070381789897562","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/card","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72372542c2084cba93a73ebb4f93d3edcca73efe","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cd5bafabb.0.tgz","fileCount":19,"integrity":"sha512-EkxBWrAm66qFJpMT0eX3FDvZcy4Er9E7wbSLGyxTsM08VtA1vPkMXH4vG+b40htdllI9lmqhw8/Hp8eds5F0Bw==","signatures":[{"sig":"MEQCID/VMGgnJHmAmcD7X9yYORAQVylwsbUeTtbVEakL5EMPAiBup9KtnriNVXcXKcqo4V4M5AcxzSTuoDypWJIJdY7Opw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcxeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPkQ/8Dj2JysiaP8nogZOb7yHTkQkUPg8HWpINS8NbZ62OXF63L1dh\r\nvtkTr1QK3OEdd6PdKJLm2kS+VUbr5BKR50WZ7SQ4LmPxu0n13AUt+XT3txxh\r\nfeiLcXymSslKZS+C2YBeFInYdFbXyzXCF3f1F8xC0O5y1neEsjDw4bx8yltl\r\nzrBzVwXEywJWU5L3tW0jo39WxFHpq2HSV1uzt3mgE+BTwGMXEuUnrLZJX76D\r\nfMTil9zWfGOY0jEzahExN0hHffBaI+p8eRWDKIJ8y3KEQzTn6cGUceZjgX4z\r\nSd0d+N2OmFacgSvL2RuWKOyZ5kxTWPAXqYAH5ThjgqSc9VZTMLVaXr5FDGFK\r\n7SlUxnqom9sQ+Hc/oslPMzJZ8cs+WquR2E17pQuXSSJ3TEbUzLW3/yGg6O9b\r\ntSqSLiZmLaZqHUrRzhfYG2ykboMPUPA+fmYYc9tTqbLrgklBxYH2Ytf7/meG\r\nlkl65o3HEMaKcpytp/9Vk8QK0TkeQG4HLHNvHP/OLvZMf9ZuTxgclQrTEc9M\r\n/rF3PExTBa0HASJ8l6Yn/XoHCH3fHnUj+z6v8hBmV6TCBfwbruFLHfbp86Ei\r\negMrFZ9LVBiqoWFY0CykJu3YiFgs+b1LQi+lJ39PlWxQMw2LyPjsuEAJ2tuU\r\nHAt7gHZl73pErn0NYuWr0IvJxUJNZYXZC88=\r\n=uk/l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cd5bafabb.0_1657130078734_0.2925268281572766","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/card","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cd1fe4b33db0592448c0d4ef888952f92ab9bcb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a02fe49d3.0.tgz","fileCount":19,"integrity":"sha512-qYLxFifHl0Y30jUHwILV13sxafTMdTMnQyYFN6vSsKgMNw5fTpaLoru3Xz+Nzr8m01YPOlUjpc8gJ4Jwz4EhIA==","signatures":[{"sig":"MEUCIQDwSksoyGf01lEcKMzREfUlP90hsDKY5B5j2qBaBrlEwgIgaCFFcXwL3BqPPll4TbpI59yi4FEsN9hfgb0njcTq/M8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdmnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqUg/+NaGyl8ZZloUZ7saLgfo/W23cXwf4rQw44TIhSEKeuBp13ExD\r\najjmQTD3Ejfo6hkCNsh4axI2CnSeXitKlQY3zQGcE0aKRf7ObsJkZzc6Ydch\r\nR1SV954/z2PdYWxwaf8gqbSjZ3ZmAD4CQFNro6gQoZPPdz6u5howqx9+1pd2\r\n9SzBtE68VXiO24u7m0PUYiCRvR1Jfo+Q6fE2r1j9VN7fFiM/zEBFg5WENVmA\r\nmKpHgArixnzdjgMV/2m+4iYw6+hSSfwnjaKdrzpeJkfcd3EsVF94uLEO/KBP\r\neUUQh9+AgiZn3OqyC4x1g0S1lGY3djwq10kRAUfIfxGYtdkUfNnFix532auI\r\nR69a4P3jmkVbM+0bTkbQ2JVjKBUsgLWj6CPNMZdQ1JR2LMKCCuBFVT8+YUdK\r\nusJ8tdiVtPUr9daAk10J/0DIuOM38orcUAHiC0IJwia4AdZuaK4/1GdBVm3d\r\nOk4Xw1ogAnTOD0KV0AsfastEbleYkMlf4g0mS3ZlC2riHLJD1GhkuORbfJ43\r\nUiyXU2vB6HRjd+ZNDIGkNnN+kQIWecJWoNuYO5XjJFIIuxs8L1LbDq7ElsSZ\r\nITTYkPEzvR5Q6tQN1s2Vy/T4vhgdJjumPfk5RNHMZOeSSOCkK7rhKVl4BxQs\r\nHFIw3lkyCFg9i0TDTqzieQpsjZyL2yvPRHc=\r\n=Uxoy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a02fe49d3.0_1657133479654_0.8652297835642464","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/card","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cfd0b672bf41ebdac6015f26b1ba221043cc063","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.826a3d8be.0.tgz","fileCount":19,"integrity":"sha512-EtfzGf2Rb0uUHkGLjxoKh66xMyNeQ2wSC6XlWv5Tc1M9PDs5dWpsmAq4O4sxll0K4Qe6B2l0MzZhcpPU0I2kDg==","signatures":[{"sig":"MEQCIDOEaYmM583M+JYqpLheW5FPloPmHE+iONymBwONbA0CAiBivN5Nes3lhk4+5Flr+bJkJWge8lsU9tyoiD5Q+kSFmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcEw//Y110IpBWUTzIk7/5sIovGrIK+lM3bv/uQNfny0rj3KQ07DAp\r\nc1meU7kxnvVRZ+yFEvRAgg0pA2E/FAIvPhZ15m6wxdZXHKEEJGou9E/8Azhr\r\nn+kxe1UoxTmM6kTxhIh865kKNTiZBYsPWo1M9twRWw+y9EebunXiAu/4pz7a\r\nBtcnrBMz05P6CTETykeLUdRO5F17PQkQOFfzTEliXl+a+AJSZmcjs8ZmvIZ/\r\nLiMIOynvN7Zp5c8qiz9iV886sxcYgJADwLSx59Fm7sFyn08/jtOezp7SMVXo\r\nFVYecxcOqoBXnigX7kV4kmSJeYLFgLnethtd5HuEFmP7ECzZAxoAo2ROdIb+\r\ndXxiUdaCOoCigi+BOI728ygz2ey88T6rZXxgKZOga2mEZrO9SARKMTAAkH84\r\npHipvqs/7TqCuKX7Xbp/Y+nmUHzP5zi1dpWCgRL7gNZBxnl7AlNVAuXAVTRa\r\nzDUg/mDDjmah44L9Z84GCZJH/4vhPGUWXmHA3QRFhM+ge06HcQZpCgsbXVg6\r\ndEP+TZHEQlCgdf0UiJhYt9idQj85PU4QZPK91iee0+T/W8d5fogWM0rQtWs5\r\nSMGKnP8Mxuxpab96QxZtg8XQepqi03HgDKkrFHerVTXbrRvdWZuTC8Vd8Vmg\r\nwsZHbpnot7u39cIG+4P4VuuuTiSKLt2Z2rI=\r\n=3/xP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.826a3d8be.0_1657135877884_0.3087440608216099","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/card","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8609683cca65ad797b9d6780ebb4a8e3615840b4","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ef276aa93.0.tgz","fileCount":19,"integrity":"sha512-OwtTkIymw1iOa42L6XDPlu5D7NSWHghKXVQbhSPv6ca5hZLHtvmOMOHFtbBbgGdfc+0fhxOmItuT0aXU3033jg==","signatures":[{"sig":"MEYCIQD1xptu5XcCpJzTY+ZrnGMEtQqhWOHFP3eO/lsIEnkAxgIhAK6Aoo5Vmqqzym8fd7xfjzBev85J48X6VkDrgLOmtD9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxG+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorHxAAo3sRbtR5LFQRnvDq++YX3PKAo6gzShZ2iFX98B663JHbl7Cr\r\nrqjBjaMgZx8Qs4Cm7qc4niruopZOvRgb8nlC0l91QwmO+KplmuxWCvIjbSGK\r\nvLeiKqpjawLdqOa3LW1Ji5tWQ+LJqq8prO2wAyXlhsP5PLxHDQ+2KtPxz7o1\r\nhpZB0VlBvLdMzV1LQB2iF3V+TAs7FSkx0uRtpcjdgFYCGgoXiJ+MKEUvKTYf\r\nJ5GksLqaNG5oKrvtIEZhrvuc4DK0Rgq1H86sF9ispTRXstF26FY2C+5wiEA0\r\nvWAi4ym4CFcGmdqfQs85AID9nSPL48TTDa7Clbl5OR+oSRZdNXU6k749Sxrb\r\nMq7aI4SR4QQvDsODrMwhrU3cG3G+oS4D3++Wf3N0dK1cfhU4jWK+3m6gmN7x\r\nQgzEpByboRLk/80UdP31Tvd4fysoRisOuScTbJMsg1lhO+M11k3//DEPsCz9\r\ngX9uyKRTlkKYgIKGwEEnRhekJaq0XGngLIq+EXLM58kysBjFOgX01ZzTwhK4\r\nXF7v0pQCC2bf/oB+n29LtgfEmdGkRnZJYoMX/WSgo1/ZbCXRaJxr5kCHlEVZ\r\nB60DQyBeiwgsVfnuML0QNkXso2Y2LHhAklUfoRuM5uPuLeU2/oiaRxzcyw7B\r\niCJ02Y3T7M2A3iu+KybNTNhNWi2QI/CH8B8=\r\n=mPmW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ef276aa93.0_1657213373846_0.7367845004537532","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/card","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcbb09b8929310a69c524264a9b346ef32dd4352","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.59cf61d6b.0.tgz","fileCount":19,"integrity":"sha512-wz6wPKQgO3AGmCdv7ikOhExRLC1DCJY4qlunGfAQOiI58/s/DEAe1p7IIpM0M4gUlJPji5wdytJSHNF0EeNuHA==","signatures":[{"sig":"MEUCIHK62hum21msKGgTKk1ol23cM7jP6kViqATVn4yZFqnsAiEAu3NJrpbNjJt2Wy0hPV35y+davtTI2LKRJgKLMtYAzCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxh7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxLw/+OeQ327UxR0q7LXvhoudxaLjqiMLJndU42sKhCqLUPfvsa3Cj\r\nd3O3KEfFGauOzdFK2X2f31v1ll3mCRS7VSQC1ZICqCWlJZfcz3dZJc8XbuRM\r\nrm6GIkR0vgFqtstYXid96dNmQFF64vOsKmYeWcgcI2xdpBPaobFxJagkcnMx\r\ni6r/5FD25zcYRmyVx30+PBd2ciK5SewHWLWPEgB7R+Z2d+NqmyNFadV7MEVx\r\nsjZuaqvS8b5vd1qA/fr/LZkiq57BYDdw2bJi4iRT14Q3bPrSpP3CWYA34ROK\r\nmzlis+OHSywuBS+pteS0ItBvNwqFZNpV74bm+um1TC1YBnobcZfBOlV64SCO\r\nLmBChrRFEJ4yV7TMLgRRzBzzsxrLQbxd1EQmBt1zOlNcIqOQ8N1buzEpD5BQ\r\nRG3n78CJRTWzhGhxF8zO7spzp4J9ajMFBdzJqrn0H5L46bQ6Tx3UUebCTJue\r\nDJObCcyf86ma42ntaKVJKV9VzxnoHdcarJEa5xFVR7gWERIOeaTdL1bNraKX\r\n45yuaKZebCA0aDDqMgXjHwlzR2St079BcIzb8BpG1FqtUQYvYWtcaZ7Yfclu\r\n4t+Q2vsz2qloCB7cexJmvE+TubbYjJ62zaP08nUus/mudPgq/KMMU1fFhWw7\r\nDZiAaXfkTGo8KMQx2TtIRVEidXnCoWzc5l0=\r\n=+VWK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.59cf61d6b.0_1657215099442_0.9224758795691277","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/card","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8647092f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09fb91b0ca9a4fcb174059bb2fa1745717e51eeb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8647092f7.0.tgz","fileCount":19,"integrity":"sha512-MTWK+qgJqx4vzBS9Lh1VsFjf6PEeWgZ+Y9p+CtWPrBJxPJWPTqCJxFgOmuXlPfZCHOu5coJsL4ZQYCjdkaGyRw==","signatures":[{"sig":"MEQCIEfEha2itPdres5bdNnvcid+X/+vMLxYI2lq/aVpmb4lAiAVssodi4tmXHElu5MBbP7ldgS08sOGcZOM01EV/9e6+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0ReACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNlw//cKhnVnPz5yQS1MPafwWbm0ejB5suLNqu7DUrYLmJJOppeE6U\r\n/tbe1jX5GuRVGeMbXJKSyO9Gsmn2ftXxWtMdjeE1c68HunbitSfdi1O8tLa0\r\nUmxoY1mK+o71jZXCNYFt55ol/MvRn533qRXfJySm3vSSj7PLBxFdYx01V/OR\r\nkvNx6Nc1Lf84CTblBF1fs+BVvLbmLwsknjlXaMLlkEqhiogp092yrgm08ds+\r\nmU9w0b2hK2hJ/GNYFOu8imz/T7QB4cQJiljho1l1yb2m+CNqairiaDOAY15T\r\nn6EEI0Lqs+ogtStyfcIOJKBK/9lgHDpem2sqKZL6H+o2j+fuCZOJyenomnbJ\r\ntwx13Y4NdlS0z5VIHX3hytYUNc9ssOedPyT+iusmYqxbgdyPhPg1hzBeMETE\r\nhFgpa8Ef2jWEYuDjCPVukrdl14RT28e4ceuSWQ6czCVflMCS1vF4MUYUw672\r\nm80ZHCWOXXCh7/VdnW5aKog4XfXgg7GsDpB66wAD2xMNmtCdQwfUaTVVNVjK\r\noPGOR2LRfXnjM/8onmQsD0Q1ILiHflc2AD4hl+XoaqHeelptTaz50rMr2zXZ\r\nxEOQEPAJ372pjvxq8eWooPwpwfKQdqC/8U0o0AwqwO3ok38o2G7nROEJI4/W\r\nJ46EkHHlQOQuK40zRPatPDnZ+VgapSxJJCU=\r\n=mMCC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8647092f7.0_1657226334740_0.0005986129911244031","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/card","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9904b02dd1f1a21952b9dff49876eac70baa575c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.02ecd4d85.0.tgz","fileCount":19,"integrity":"sha512-CPT9Kk6E3/sTBWwtcMoEk2S3FbjBo8hwM1DLzolOFNZlAp9YQsth393MM/SRDDWvVdaMc0veX2fIOqeBwMsDJg==","signatures":[{"sig":"MEQCIDQTz3T7C/pUrWrnwnCg9V6X0zSBYO6OwTejuMdTpwRkAiBpm/HVIu31iMl7rRi+b/pUDEtvG54ClnsoVuZpIcVVUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1dg//b30ch8Hs2lrpGjTAbmZ7jLKA6nWGqnKFVaNGYO0G7HuzUogU\r\nGBpTeoBOiRWKmSBBY+ZPKkzjbK0s+TjCo6QuqXhy9P7096q/iglfZoslZYKO\r\nqSFBRbsrIsfcOzEhkgp264YfqxepE74rv4SabfAq7LGLzMpAXTAuQthJjLkY\r\nqcynxK13PUjs024nRNXVkE5JUaV0IX72my7Lr0jH5wtmDLN9PCRGGxYX6ABJ\r\nDTNkH7/DO8dsUoDmgj0D1hdYAvUXwV1GPVx+edNnzrGDbtQo4qCQbj6qqid4\r\nnwh2/YFOkKBdWBzFa2Msfj+v9O7rMv4STBZexCTYJH9gOJ7sOVMknYSIWhcw\r\nJbH7N6YhsMPShV/GOsrRpHMJqTWboJ5t5B7i4hQBv49qsxaSbnoMMP8iEqUV\r\ndXCdB98tZKxUIUHG4nIyKh3BDynT5OyyRna7ax8I3VtyGYERbQ8ScfbajvlZ\r\n6TcxGrezSVHabHLKO/bDrqtuqJTwcx15mopxn0ElhAAjSYDowKePzT/PjnSP\r\nfR0JENepogouwnUkBA2htLqBo7y5p1vNGCWuCc76cr60GEioflT1VDj+/jMv\r\nHUfM3X2UiNb5JSHgqACdaJbEfOScwUa8SzoLaIr2dM6ICyY47yN8uuU0jcnI\r\nHBbVtUWeIZgtiRCAkIik91gPBhOOkFgwLfc=\r\n=UpzN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.02ecd4d85.0_1657557572549_0.8435547806750947","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/card","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43183ff433719ea73136e0fa2efea2ea3e425875","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.63d3a146e.0.tgz","fileCount":19,"integrity":"sha512-2AKeuEhrZXJ2oMMRoTPbi0cG0uBpA1VjpTIc6i6zvilEOfEhB8gUykRMwBZgAdspuTqthKBLBMsdCK3Twy/ZAA==","signatures":[{"sig":"MEQCIGuyUbo/vm2jdipkrCoFpa7hd7vw0alU5mOP8ELKvKhfAiBwTMA7IwL8JfoJv6N8oowa4jtH6s2yZJzH2M9cOu6v5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSgBAAlgIripd8OMHaPAqI05ciZLccfv2sCFK8JzSeix7q+yc/Sh0Q\r\nJPzahOupxlx3IXmrR8bbD1pCQ/KjIirhioYIgZ8s9JRg/NLi6rI7V1pbk1hE\r\nMqf1oGQyFFqQSJJMJTGyStU8iOgeJw+NF1RZSnBBOD0bk8kExuKczgzn5BEy\r\nk82x/xKd+aF3iWcw6zTaW/W6C6CK46Axp9l4BZ0Yd0eVjLzDWaXu7cV0KTAh\r\nvqBWzEJCsET/XGv7xUFXKNmdcq+St6ORgacL0sEAEAK9hFNxWKNsK+Tyzn+D\r\nNNEabugVcPcfx3/yXLZWvJrFfzwROZrxOM70nFn159gq52s5R4LNqoU1aA2i\r\nX497FmQpftNYpSyoCP8xoNrVIJvf6W/WOXMy0a19IsZEMA9CboFtxLagbg/l\r\nOp1u6EnnhnL71A1ZXAUeJEbRJ5Ku8eIJVMBDiz9BBqC7of6/shzNrACSobh5\r\n6SA810h+fPRa1N4Q+gAgUSA9CjWQk12eQVqgOXXylYBfrfpQzq1bNyaWX0Lr\r\ngkO0j3pERZdFNMj5/5vOYrrTqEZB2zx4Pyt+/fh0GHOcES3XAzDEQ3x6/q+1\r\n/z1jhNiNrb27Xr48drE7b4C+NRuTgV8rTdQWi7tbZjYYUM53vEvmP7Y9Pk+j\r\nnPgUhSKSlozucnlPDswRjjFQmK5ishZbeaw=\r\n=2ktF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.63d3a146e.0_1657625837157_0.7827059689610139","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/card","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.88db01990.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36248e2cf45aac7bb00fb7bd82e7dbeb517e4dfc","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.88db01990.0.tgz","fileCount":19,"integrity":"sha512-GeqzDxrZ3hCPjsxTmQDVxNVFRpuSXqUIA4xt0rxAXdVqyjj6sFjeOf07ZacHjqD0DJbtjI+ou5vtnSTm7QbC4Q==","signatures":[{"sig":"MEYCIQDbCaFKHNK1JaVldTP0dWLCFv0PDvMy37Om1GUsd32V5gIhAJkIsLVrIuKWpyBVplPxDZrbtHYgDtO/1bUy7BCVLrYn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV2iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpwew//ZuOMEljZU0OxGEs17ET1KITDgFEZnIRG+DTeiHIBiX0iCzy/\r\ntOZRHTMxjPoB5RVILOVuvCfLwjzQcN/m2wNmByNkXkeZb0BNBQ5OVajzQhDZ\r\nGGQevddZeotEt7LXcnyM3+0HwHSME14lNjLVljlVm4HhuRlHXil3G3pXLefY\r\nvwvtjz8QEmgEXFR9m9+ut9OM3aMuDzMHbjzqifgNO1HtWQMy5APYzPT91NDV\r\nDdKX3RJgkVPdaNO7+NyqcN4I5W+pj1DRg1SPaPO9f7rofuYX8IHwgYyW7XmA\r\nmolh9CHQ/vbVd4SikBFckgcLLCKZ8B1Yqnn2gHgMLCV4BuOMwYhAVMya1exj\r\nWgzl79fWaAdFITqJ/VYYKWLkZogbBRJsyOCt9PvZA78Lh4FlbEQwh991N/f9\r\n/R6EKYK2sHKy06fmBSNnSaYCprvKdpTuuZ/XOeZArUmtgyKc98FxAbXpKLS2\r\nqC7uB8tjqQQHH+pvi+dw7pa5VrDV5py3jFzOOYPuwg/iDMB49ytPMJjh2sEv\r\ntP369Er3S24SGso9viNs3vi7dF3jaUQSRLWKPC3gEBpwRTA/P+FRsbGAOCYl\r\n5+RfM1MFJRUeemmyaYVzyHbXZHO4QmLZAyi70IQMJ/f94SmHYn7Ny4wA07tv\r\nDK/RCgkJnndxbAP/uWOgM0IaUBNWlI//76w=\r\n=YWgT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.88db01990.0_1657626018017_0.28966530794421463","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/card","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86444d41a2e4db43b613dcb6a12ca323d59ff8fd","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6432d8fd7.0.tgz","fileCount":19,"integrity":"sha512-kaT6hWnnJrR4aBG3gI/PrqNDgxVNlqroj/sjFy66Kis+IjQXXruCM8W+aRPhlnrLuJJHvsw53ptyALr1o1NQuw==","signatures":[{"sig":"MEUCIQC57KfB3A4FlFcoG5mE4SHkHNqv/Nj+zZQLbbvSohGbbwIgALV+aTytEUSwp2jDapNZE7z3FYTsb/44ByD2yhBaR+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":272177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprkA/+J9V2yKeTppuUAeCWtM8jt2d0ub52JXr+62dPrSp8CcfvWtVy\r\nfAZXKLyvoJD993dR1UoujgPnzu8HOxJ4bn2hc2TgenkzrMypIjNwKJcumw/d\r\nUNA8RQmwXfJ7qqdj2x0h0RZEl7dsWkpo4xSJ4Ezo7ylAD15ZP0W44wwkn0gM\r\n6cV9oYfXD/G4tmPEoM84fpJ44EX/KsONVEIUgCzWYr1Ruq/ZHqmbVwnROHUb\r\nNcfNaak5+HkkT99CUVlBL0B+3L/ahOmaSKIt8uZbG1qIsitqRD42mSqcbGda\r\nmiw/8fa5ZY0UGfFu7sbC3mDVfidJd1eKCngc531TgHOUpxjV4+mKTGrkJu3m\r\nh9msPnsp9OWuzNN8Tgxlv/jKEQ4Te+Tto76Ixyw2zxB09V6IzSXeJk51Nh5p\r\nqrzSgYvGCFijGp7YUbb/1qQVqq1CjQDd/5nrSvlJ9ILFL2qPnrQZRI8Nzsa0\r\nVTfyJlPLr5K95LNJm7ysnkl1UUDv2iNVwyD7mnDa/jZDK7cS71zmPfPYbYJY\r\nGwqZuMNH/7ZhRkyhFm9MrVwzAEr+wvvOJdTAUa2AHC4DrlVzkSIK6eqcZP3k\r\n1lDZ4zZaC+z1BAYVrl/cW+jm++DK+xIMeigsYpFrX4pbwUDcLBYEnb4/OgEH\r\n9AofK+WaL00Hme725fiF/cWGrw2qx9MX98Q=\r\n=8SNB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6432d8fd7.0_1657783751507_0.6508683360379561","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/card","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"647cc8dd676605f357f0e37da2f8f36f517404c6","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.085f9b25c.0.tgz","fileCount":19,"integrity":"sha512-uwItDfgEXV+bfViwHV1lWcrfz/i7R4agF1h/uLp83t/gdtmqIjECk+jOYEO8nH3fRK9k3PuuPzYjVOBj9L8YQg==","signatures":[{"sig":"MEYCIQCghTPTkgBKyFQGRvRFBAZO2DQVTtcK1wn8e7epF52khwIhAOtc0bh8uEY/bqSzblwJVuOscRrE8xa9Ut4aulz1Kpyy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtgg/6Ak0Kym810uMF6riIHmAIWeNSNI3ldkEFhGcVBkUAb9r7EXam\r\nc5I/YTh5ZJQKtGq3LOAUjGch64zAvoIPhZIXGKYnWcezyoiOW7qRvhir7NLz\r\nwCGsdQPoabI6WLaOvXAy1yPce0FkkYR92ymFi+/F8jAhkDAqUCQED3vVdPb0\r\noZsWHVaRGPeLWgN3DHtX5K9LxQD+eqxs/WPa27OabZW2rToQkLMALpqGzkDk\r\nYRr94uaBsHV8sn2ZtIvZmG/gns0wmehHK4StXBevsZcpdZjJrQcBv7yp9IZL\r\nWNzn5LamR3FSxiNuBRRhZfqKNHpGT9FBIwHks7riwfqhlI0cK7/e47r7p2Tb\r\nmI/PDy4Rm/OGbcXsEvHQ/qNR2Z4gWr+cMOMUPXDQFp8TubHFvyzUf9Gh2jT7\r\nxcbHOUmFlcsrZM/qIOAklnDBYjxKnfS7+8Nwz3SPzoou+ARKdZGe+Lx2CHOm\r\nk8WPekrI5Bj7+DX27/EY5nLS4smQiuFgFkIKbosJ5l4AHR4aw7ioaszf38NW\r\nis69ahjZ1gS6X7qoHWFsryYWwj1V69yH6HZJhxRa8CJnaVxmWvvR9SagXSEb\r\nBS62jtJyey8XM411tgHWeynbuPfI/TpO5aU0PtIf8ZmQ9q9vB0mYts/35wPM\r\nB3zKzpjclkajDhUCxOHDhTKfi1WDmE29rVQ=\r\n=JAl+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.085f9b25c.0_1657816514002_0.20984953216623303","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/card","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ce83fc9f5785d0629cd1b2b3909ed9cb442a075","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.39f9424b3.0.tgz","fileCount":19,"integrity":"sha512-1s+UVOcFC4VtpBHC4q6b0PO5/eSxMUL1NjjTXhJpJ6CXMxwWrbNcna5cQLi6caTfUspQ5vj7bYMo9FSpBF8dAQ==","signatures":[{"sig":"MEUCIDylg3edX7YANglc5fYj8q0ZDYdeVZukqgKwqFEJwhNMAiEA/JFP7MQBdQmYi0KbFy455nv25bQ5SHn01kDb44M6usU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EzbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdERAAlc6po1By5DnPk63Bd6Dga9/UjiwjA4Pvz+lfY4u7dbEeXPcv\r\nZ74vkpNNCGsOkjup96mvkT5Est9zWApeBD1FKFJdo0sYK5JsdZR/HHEdPZgQ\r\nF60AQ2XI0xCZb3pey/wFl2x+g5NMUc4YlxOQ9HY38x1w2TWHn6HIy2NhG6GE\r\nHZTMecyV6hO1mMnVTlOO2v//tNyEcFjEv7rVjEDd4JFXU9JWbcwG6JKLjjL/\r\nYjvZregZdMYDbti5Qg5b4Gy/O5uFYnKi9s4BDyNrz4GKIHuLVa/EYGiwky0X\r\newMVLO4VdW4DNmbNnT/JEDkQGkMz8LR+wijRP5pzUmqEwvipkZ/5Xtfd8YaX\r\n/YLJBDvf6kxULtrvD840fFY2TebYNC8//DpKHIrbeWrchzV3uAo59SS2fxy8\r\nnCThIJyl59fKrKYsypb5mR5wST/RjX1VYezONYlEHEM3FEldrGJ803NVg/wI\r\nLS2mhcLd77fA/y9l1kvYmlFD3PvjCVwcnxArUuoGNKo28f7p5L6PrsAwbj5x\r\nx0MabHwy8tOGZIJxuLDPhWcnbU3p7KmwpBqG5076J5GCg32ELDeqAYDGSgoe\r\nxGbBYDmX/v/UYlH7d8Ez/CurmF2ywuJsUJQ3Ys/tkSdfzRlkEzmlT0I8fhg6\r\n9aEe4+YuFzZQJNvqqfT8C+Xx+MYecFTf5MM=\r\n=umfg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.39f9424b3.0_1657818331258_0.7750024480930804","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/card","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1893252052ba17a6e1c3fb5beddc902aa4f787e2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ae9fce587.0.tgz","fileCount":23,"integrity":"sha512-DOi+89WL9AmDE8CmndTPWoePZoefy+jcQJo22UmEMRwuyB+ry08j2iRqweMLHM9D5m4C5alXaZSLQHcCMRoOHw==","signatures":[{"sig":"MEYCIQCiKYeqk/r0FDjNbg1i+Ayghv5uA8XdxS1a0rLaLDGK+QIhAN4cMGvT1k012k+TcpGMuRQPgCksXdLlmynHwG0pdE4l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Fu2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD8A/+LeOrgs8FwdE7BfEOD78vIJZWFemMgBS3OF8DbhvCNxcf8v/A\r\n8/mdMouP9RN75/7qGRqrDxs/lqA+TtrDFSuoPS4PNW4fuWMdxYkyahfZr7Aq\r\noyN+tEnekzqLsgVaj6/hOMw/KvpmVIlHgP2qXbJa/UZF+I5eJjwKmOWqtP6I\r\neTmk97D38LRgSnT4i6L2Ac86EVez4A0QYX28hgfDvuLvGNpEAf0fFgQrc9Zr\r\nWqG2xpDlzef5YStgdb014KZJmJpE7LaXElQbYzFvs5/0UWQXyfFDbxl3a8Yi\r\neXgA2s/sVSWPZWlVpbHrqqTsJZK8zH+MeSaJ9whkg8IFAKmfk0eApIabHivq\r\nlJ/vzdvpnfcWMDeZHOPMVqKgPAGq8RqIeYOw83CIOy2b7/PD+Yxheg7C/J3J\r\n8YUtrUHOUgueWe1bJMoDZFOd+GreSHcv0ebet0AmuJYgqLstI2zbRRHV0fE3\r\nbp/0R97PApR/uftEvNpsToY0ItrSOXJgjaHs7U3SYRh8VjgyhLmeA/G9xfw9\r\nC5fqXdLds9KvFzbJkkt8+2+ZUbx3etOhHL0UrUl4EiPqJfy7W2e8oWC3RgYT\r\nSEaHib2SydvjAo5gfCOz9ZuC7sxu6QuevvyEQ9kUuKCjYeWpB6yJVx8TiAMt\r\nRnS4ek9VXkE7WJPSFkbSKY5Sokvnfk8lQGE=\r\n=yERy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/tokens":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ae9fce587.0_1657822134707_0.5136782948286205","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/card","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"633274f5b3fe8c727b3e116aab75a9ba73c7c67f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1ebddc343.0.tgz","fileCount":23,"integrity":"sha512-4wHvP0/GRkg9qqxB+sAlQqhZRZQFAXGMiy8ukyjWAwHUvobizISOkdMq2qGPfnHVe6ayNeNQDMtQ0HfwCW5zXg==","signatures":[{"sig":"MEUCICNxFouZArEtVgtbDr0ApO6UHkRuiS1AtKbVJ5L0eMN1AiEAmFkG8lD4s8twizMiNeC5zf+4rqPbeuFGpGe7GgDEWQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpzmg/8C0sFVvrsR7Svws0N9bHn3P1QMlScY7MJumvDY5k8jXSTAG5B\r\nZ6q07329f8NghX2HgyKBsEes1kVOcZcKqj17iZtLl/kZvxuEo0gSYmEWSxqY\r\nehG82hGGElMmd89qm+gCvLPqPxBeYJtQeA8eg85SGT+5wwD4ovCwmEfpD/WJ\r\nexi5VSkLKZCmHHjVSs6QKFZk1wTHf0E+6i/sbDcYBJv/0dKb0vmpNZFTBWRn\r\nV+pPGxg7kAUHFavH90D6+xgTDxwWyw+WJ/RRsf/Li/MlBjGBaX+PmrNslElG\r\nB1xvVVOsO1QTcyiPTxfHsewd7ZelvvTwWAY+9aV47VEz9C9QhTGY5iYijkfv\r\nHyh6VUkqzpgGDqtblENsvfkwJIfOqPGJzjVtY7bXtxqoW+QMJbDOJKqkWhX9\r\njnCS3dVcFFJh5IDVUzpCbrQc/NEhVX56IoEiKG7bX73wLOLxDAciL0qPr1XI\r\n7OKY9r25l/74+P8q4a9yScBFlIVvVb8gs72vd/nOtdpYOsTJim4rWIn/Lcdx\r\nrwbsVbjtJNThISBe4u57XVWPP2vMOpOuWSSq9pCV2LrJAocIM0yCPWHObvaS\r\nrdXZY3VwGsv937RbUvDgTGr72BtdIpRk90XI3/5BTCl8jzPXwJihNxMSOaTZ\r\nDnOTAsrt4eOJi5K6sstskkLJzZ0/d4hpGv8=\r\n=mAXf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/tokens":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1ebddc343.0_1657875010607_0.6918680040956646","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/card","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c5018840c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a9e9b5e4545d9e3a0c64e55d06aa55a2c627167","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c5018840c.0.tgz","fileCount":23,"integrity":"sha512-OkLOyzAplyURpwWO52xgPpoJrXkQtubroyoR/nOwpep5Qa0aUhxWxLzBwy2rZ7T9HkADUYiqa7upPS7jqUARfQ==","signatures":[{"sig":"MEUCIQDN9Jmu7KgW2g+4YZtSnwMqn6kwIoBV1W+UfVli2o4X4wIgF5+7p+N9Pd/VUYC42ta7vRG8fwZhCpr/VOi16Ly8X8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SteACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCnRAAjUFupWN++h8jzmKomuLY1IveNPgIHVX+J2UFWHEohksAFwQq\r\nICsA4gbKHOqFtbIslqmq4qGnkPAMt8sX/mlijNH86UYMMSRxWdiP0hwL2/u1\r\nOpYSYeEmcXNnn5eEVkQOInZa+FQe2reZpxt9E8AW+t5k8Z25QgUyD9fwhGTv\r\nscByxRd98Tj6zw038eEFAlFtl3SxBZCcENI+222rnh64l3FEbq5Jl83xURKt\r\nPe8OZW+EYhnHFlSltp+6qU9q6tqsHo2YBRQsr8hDH30q93Su/Y3ZFrgMv1y9\r\n3Rg6ieIzNmzS8nXYj+OM45/NxlbqlL+6pEveVHArjbciKHT6J49Gypnh99Fd\r\nUO6YXEOts9XkVG+MM8d6N4fdYPyRHomwLepMMoar/r4k3LaWYjXJjV6k/h+p\r\nSvzy/NKr3lggWrupslIKLvFADTjQAcJ8xgx7KHdwfdzEI5C1pHRRYB+xHI1H\r\n20x7jMu/agh6vAvgAVcLGSlW58XxZuuzI1wOpBMvh0kbzrJ79hWDhoElDG+z\r\nAPnwqRKHTUdstdK/xmRneqYXThdktNqTZOoXrN38UGEZzQ3PXzGmPtoUsDzc\r\nvQoc2N25dVeyIZVQW8R+l3OSjVV6/Mk2cl9a+qDID4l7axzGEFt/b5r0mipr\r\npLHHEXOV+dS3W174dA0i3nGh4++o+Rn5NNc=\r\n=fbyG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/tokens":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c5018840c.0_1658137438254_0.2976168634700318","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/card","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.551b40d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93a66d9f413cf122b1755fc4b3937b81dc5755a2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.551b40d18.0.tgz","fileCount":23,"integrity":"sha512-qZty9RnVafNWwz7JZSoum/ldLJYV9s4whl+O01Q8jqzhl80DnvtufXcpFyY68lh9F+E7Vxc0hMPFefqrjg4oWA==","signatures":[{"sig":"MEQCIDe+Euy1I3DwGetipak+csR+lTOIltio/Ccbf3t3I7J+AiBBGkeyhg0tYSTzTbhcWaSyaRkDnc8OZH9kb5wMapRTCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRLQ//cfEGT5mjiqQskEV5Bf0oqwBOQ2dIo38g9alUjkvxoWzpSB0p\r\n+nAbb3+FOpEY+dCRDaU0zdt1x1tHS94WCrXEQckY4GrqclAF1WAjfMtBFku9\r\n7W8efbDFdX5iYmt74aWZS69+zR/uIC/RhbeyZknapI1jAPFZhu6lNJSJJojZ\r\ngCxCEcuKvmzcGdUgHFw816FRpA11HxbOsASnlEvw7OuRCVyQ0lE0YJpTryHh\r\nnK6BSz6DhNnW2q908mzZwhvcqafMHftpgumQtmj+U93Jc+p62BI6/RgAYdJh\r\nxC9XnOewwNJ//9zTY+mthh7XqshTNm3XETVcBOypme3MQK8DiUcwqKpCL8j6\r\n73+BXqd/A7k6JSstQSfBuLnu5urwF6HkXre0ikUKSa7HAWna26loJDJGErM2\r\nMY+t/mVQ5bu4kQKDhnDsb69zXUUUOvhaIJ0nEeup7YuW+TckNUxck5Kht3/y\r\nrbPOwRFSPLl7rjw49hHesjqQJNKuTzaOP4p4+hIb6whagK49wbddUJ1KrdiA\r\ntPFwXSj1fDWqhFPXOmYJSU05hB3qoppUxTVsmUUfO/xPduUscqtLkybEEYez\r\nPqyGY72TbYNhAjws4uTz/v0zyIQcgPX62GdHNCJ/T2cXtqMkNpSL8ZHVet/6\r\nenDLKCftss59KlLiUk//riGnS9mplkh9o0c=\r\n=KVxN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/tokens":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.551b40d18.0_1658138516863_0.2935069933946306","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/card","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d674b5ac2477bbc78da1e4864a34a706e9aac039","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cf9f12371.0.tgz","fileCount":23,"integrity":"sha512-wofnUmp9HZwSzMv5JPnMp1yQEdlD46vPtG/1Ss6iXnqcH+jwy3T1U+wJ1jGRnUi6c+uG5kn6wt9aqsyZlQN+rQ==","signatures":[{"sig":"MEYCIQCYRlOXXnyzz8rmNlftcdHf/kJjwzb8CEMrf0R6IpQ7TQIhALrD/odIFF4l5pkb3k+IJDOO17yZXiZS5jGrry/lfzEE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZFw//WKFtSgyntpiaOag/RJ7MLd5n4Ol6apHC7dC4ctkYMkuqi7MO\r\nxPcuwEF52je+scgreBl/8Sq1b9Eb3aWVJdVGKAXNVmKfnuGBC/hCRaRIaoHr\r\nx+M8YGaRulnNdGKVkhRYkgC8yeTMGNGijTGRp8KMTj5wNx5wEo3cnZpB0Dt1\r\n9Nba1o3+/mAyn89IaCifOhmHzfe8R4YxXs+E0TyyyUqZljwC8YGLfBAVGt0P\r\nexYOhvprCaINTROl/9N4V6lrN8unCw7fAE+bA2STHunyW3iznyere1ESkx9N\r\nesu62P24j8Du6EmprNdU2r8Yo+ipjaoG/Wc6oIUEY4wIhfafH7D8R/nsQwqi\r\njTYzGZBoKsHpzKJly7b6+RJDuKS5h6SCTxWKFiT+TgnGyE6zz3olqfZ4uazp\r\nhbsnruM8fbPPwVqlpMPqe0NglY3n1ItGCATToUhYXESFB9ZPDZCwpS/0z5L5\r\nag8piAc4CSr364rpF6Yq7JEWw9hZER6vGrti4OYuhyyRQTSQo/Udw4v7gTi/\r\nVQoZhyzgNvdUB+84tLJA46h/wGBFZzZKgYDzQc9mhVuqxSodxHS6yJE9vIXl\r\nQHIQQWJoGZa3KuzikN1Jg6cI+T2WgiCVwuzmoB5fisvuVX7mfaml7pXLofN/\r\nPI/3WIU1hxkWjpkB1RPLaKlyxl58SXJ52os=\r\n=mtOX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/tokens":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cf9f12371.0_1658138756269_0.27280155180947196","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/card","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e3bc365f85727c667947465c62e427db31a9c72","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2797ff8b6.0.tgz","fileCount":23,"integrity":"sha512-agM80EW5XsPHfVrozDI6zSi2KgUK85P43JfSdyGd6eY38r4Km6Daw9RJSFs59QSVgrzL7Yxqmtnc+Nuf71WItA==","signatures":[{"sig":"MEYCIQC/rTU1lVEmemgEpPPwLE7nGiIDXv5qcHhS+Yw2qGCIiwIhAPSKQkIdtk9KO4zfK5vTxegFyTyKDycfaNQKYOSeo/Qo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWgQ/+KtuXPCnTtelFzalJFSyWRNL8wdTm2LAiuFNAt9yPDOab8veJ\r\nJ7igM0sZuBIt6qQviaNT/IczCHMyvF/+kKm4mQJTnT+MrTsk6qODMla7r3bi\r\nUI2fSkONaAPU5UbGnnfFT3nWmw5IyJqm2ggYpvFG3ciZ3rXxanGhmA/enQBk\r\nOsugyin94R5sGuUM3+OovBvrmhp0IM0hgG9WmccDCCXMvCniKng77UaPMWaf\r\nGJXfU0vYfZPEg3gX3rue8PduSV9o94xsJrzue6p98wZ2vLn+xJEYfFFjX0y/\r\nPNDkRIAffKgAB+Vg8pb+mzg28nD0uyuKqbY081/y8UEA6lGEaFdxSlaussRT\r\nD/lwTtBPjq6yaTs7i36o4ZEIomVWj1ooMAWNmfJt0CsASH9/h9CLkMZ/0+Fh\r\nlN6nYba1TmVfAYvajyyZLd5I4Qm3P0z0E9nJTliIQCimIFmNiBgRwPEnqFDg\r\nwhSmQy5sQoZtMqfEJzmmhZMzts8gCc9dBAifFxbbFB7NyYyLFBlxU89bXEFu\r\nY2nDeEBtGFmDJz4/2FXMsHxpcpWwwepxZVB1s2/R04aopw+ezJYR/MGSoQCF\r\nR8Sa/La302DXot8NzSrHbHeqB+h+gbcekhEvcvNfDOoaWE/buqFnPOu7xsQE\r\nlsHsxwzhkUuO6gkb+n70FJkK1AQI835/ltg=\r\n=E3Oj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/tokens":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2797ff8b6.0_1658190299523_0.03027228344713717","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/card","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.110fafa17.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a87b0371bda38d78ec2207ff426d2ef4b78329","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.110fafa17.0.tgz","fileCount":23,"integrity":"sha512-GPHpok+vLsAm0MO4zdaG4Vcv2b1Uc2H3lbZfgmC423jA38cRQnPQg3TiLjJmzs8ptw2EfyrUP2pVb0EawkWgGA==","signatures":[{"sig":"MEYCIQDkc4ESK0g0Lh4Kvn78wSxOZhf/N9BBC6AEgRcTyF+cSQIhAKBkgpuGUidJrvz8/fnJ+ShdoLFWAfzKjkG3oMJRyMJH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDZRAAnDfRvCYKYSUYfsEh1W6nGtlvmfIZHDXVCcRfc/Lej00u5vSO\r\nKH/jtZxMpOUx6PSTAmNzW6KTvqU1BydRs1V7SmLT9KqSwnVrOHRByvoopwC+\r\nP4I5hhP/IFbZKPSJs9R2viYEoFnCoQq/Rxwv/V8wPPlZ+mq9yAG9uSka3+0b\r\nwXQRXCivtQN9YMvo/RFyKw9pqaRejmsE2lKFNPaiWAcs1MY8+ZRqVwzdACFV\r\n+VTdJquImZvFPnBthM2sW8EfcU7uUIV4U/ARr7CNq6OPrGnhgyiF/xRt8rWT\r\niivoLNkCLsRp7t68Dfi/GZ2caYT8D86k99kCCy1vMAJaFC3jnmAaeZEWEuvM\r\nR23g4Kwm2nim1G9kNPpWR/SOHS05T2qsflNNkdKi2+3fDJRPMKISfTLf8jFY\r\npevrv27EDXWie2Q3et1Jdtur8mINwOsKLPliFgR4KXES8xPnMtNs05qw3MFf\r\nMm+UFt8hvUprmJ+tP5WLM3WA0KF0KdBWyQ8RkIMav/wijonc445AyJKnoXLU\r\nrq+bQvAJMmGBpGQjrcPnd3XqwvztdgMphyMroh06MqqD2lx5Pxn+3tVMoqPG\r\nWAl3HvPn5IMvqw9cLTBhgQ/65+msfaT3oOd21j8R3TSeTxYCkMZ5dc4pcFDk\r\n7bGU8e/9K88a3DNc+xjkykTx5WvaXN5EBic=\r\n=8ow7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/tokens":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.110fafa17.0_1658303251669_0.6553353467149128","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/card","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d133b1d8004a41f6c44b214fa0939da30276195","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.386ef1d2f.0.tgz","fileCount":23,"integrity":"sha512-YUZ6LhqK02MbbF6uFInPdgclliiN5aeDj1dThpL2Ss80gv13e+PSQ6X3e6GRgxlQ08EX001nIfnDExDnDgUe0w==","signatures":[{"sig":"MEUCIEbhngbV5pdlEn6H20A1mScIJ3O+ig34hqUxhT/LEptWAiEA7/GoXBoSrsm2/qV69f0zt/EVc/Sp+ugzL+8oldGBaB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Ed+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCqQ/7BtMGCn8XCxVSfzKLEGQ3H+YVTvLu3t8GknLsc5NF3sha+aAO\r\ngbL5kb7OFEQZwcsFGEq7JmG2Dj69dOHXzovPFzp4c2b/e0k79MycxzE8rtG/\r\n2AKUB+51GV9jVYav9lsWjxD9C5X/jr/CPyhkOLYz6hW3Zo7SFVAxMwZy5qGW\r\nFw9BVhhVuB4wkbxyagqlmkMnrzVkRc8W+E0UqvTLPoZBMamoDwzW1uCelvX7\r\nADY3LWiObr2K+m5m8XdT1jjWuyMu3bzs4cLcl/gxHxc+390YcZj1V4n26Uwo\r\ncLUjfncqJBqFBbgWP1SlzQ2JeF8IbpHVnmElXzslsvIfmEdKbZYbcwXudP5z\r\nzi2ozkNDeZzF6UgK1ZvZJ8l3eb8DYLEJlsC3NwLkTT9v0zmqC//fF2tLKOus\r\nXbGY8J71AoToJW6lFaDWpmVC0vNxJefoMtW8vkZXr+zSUyRcj8qspiSh47rI\r\nRNcfRirEZL5z39IyJaoA8KKgUefMZe7TWsM3q+6DOxI+Uq/Qytqwmk7c5bNB\r\n1I6narUp4gjPG2m7bUsFPRkOMT4Ct5JhAjRA1EJh8RVvEOHByhDZAISocq7E\r\n7odYcUeFXz4+gNCQstApQGfWYFhoS0e2BbCRfxNnrqoaiuRc9KvnWOQSEPeW\r\nt6nARo+bHNYgcO1P4qqCMIRLAKX+h76LhMU=\r\n=8phm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/tokens":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.386ef1d2f.0_1658341245782_0.6891777366823695","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/card","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c3924efef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27306efd44e951589f3d92df2d6e90f91fab6ca","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c3924efef.0.tgz","fileCount":23,"integrity":"sha512-avU0VF+svuV4P3cEYWE2tXAlT3whqiVjKFQqFXAWCOEaeCDVJHdnDrwLksTQBYyyEGY9m3EkiC+a0qfDj+Lawg==","signatures":[{"sig":"MEUCIQDYf4wMwhxCuP6fP2wyrFZ3xN9znJCrlSkTFnt95nPU9QIgVK2P6Npm8mrh37piGK6d7AClklX61f/auvsVVNQXsRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNJhAAmgpKkv1J9zciqcgv+1RF2/eaA4a3IOQqEhjN/DffjktciStw\r\nv9jvSPYzISyrH1JOkxqP2QKB31NN7WohPiCrC2D3+uKHPBNgCZta0qBdfKDY\r\nsYPSbxXjptp58tLac37K3Jq1gYrYehqOZWg7LNgMC0c3lHpCbLVBMhDy3AqF\r\nFDjVB47PLI01bOHAiinUY7OIzKa7/M0pgcl7qToKqIxyow0Lh3urXfs9nEUx\r\n5yHLfea86VRE/nSTiLC7oaY4syyHn3gPZz9kK2LwXCiT5UzVR4eiuVM4E9Zo\r\nIJzeVo1UMWxQCiCDYuZ4ysGl4AqZqBkBlB9HpmlVJkFofWHPWp1ox8x3SD5m\r\ns8386JM8ulVQ2UghEcNvaF/6sV59Y6abKV7UfVZq5UGb/QmUsI5D+1VZcn9Z\r\nUNRSePrlRpi27X48aUg81cT9b+qGC0PUQ/Op+aZJ5T6tLEeLI6eZoU/kHYhU\r\nrpKKRF4sUHY/yZvWk40CuNYNSA0YJ/dX9j2LZMVqNuvyXbf3SAK8/yong2cp\r\nVk8iW7hz9kz+f7+Ytr8F0qxyFEIWV4lRdowMZwfq3IftaBwXmB/rzTk1Wl0U\r\nWYXyOJ4eJyS9rIfaWYRTrQ2OFGcLlxWNCLmh2CX/5hQ7HZmJj9zEQ/LHmRxd\r\nIdS4YKaDO7r8ybxFuPJATQFAcm+tgTZ3xyY=\r\n=zTPA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/tokens":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c3924efef.0_1658341830570_0.20478006100075397","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/card","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f797d8d34ff770406913769ed413b9ed770e74","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cf5c5907c.0.tgz","fileCount":23,"integrity":"sha512-7hBvtSoten2jSmzTqnY0V99EbKV21bPnPZrT8c89w5fNBuSMPCkx6RT2Sy1UKk/gMY2KWAwDWlBNWVfGUhEdUg==","signatures":[{"sig":"MEUCIHPfDGdDVELObUPFdNugQ0X3yMK6odMFCV1vruIzSpC9AiEAnsbUYJ1N50bAmGDbM7xt18feF1l5NrXN2otn3CF57vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBMQ//d1PfrgQohF8dWef1wBuBJRJdcbMplsD8lY6pMBbzW0cO0B6k\r\n0ki0aMIJdFK+27g1ujmeUMyO9SCv1ez+nXB6fMJaZTIpso56xWPQ6AYcg+Bu\r\nVy2z2MQUm37D8WhcChPWgAwLdDMgpRCuIdx7Z3zzP3jufC3cGKg49EEh57IB\r\n/FsDpPHN4NLoPADSGuR8r82cdVtN1zH2wd/vv6is1ezM0JvO0gacpW/dcv9u\r\nUkJw9XlBEOPWEB+dvdqXqkkvN6COapSeRS59jhCOLTZCw9PZDX66E2eMPxVS\r\nL4qp5r3pJ1ZrA0ohUnRnW6lZET4NygrUrXu4YdYMnWSA4809IpYZetrTYWgW\r\nKj7yJTdwPOKvaAMbEh+iwE2ydytegSrhQ7gYTruv0Nrj8SzlW5nFIgrBezoB\r\nPuRsDzi2JGW4hSdq67P+OuwAvzvGMYxSgAmyxEj56pnek/QNwOrIieS+7OuU\r\n55yduOZjwY/Y6aJMFeM/5EwmZ1NGiRm93j+quTLrm5IB2DpgQ+EFrJJAr67A\r\nvxb2NTHcs+Q5FQJ/odioeKQGe1SPsQN87Nwo2CcM1RxPRnwF0VTZ5+x+Fjgh\r\ndKMsk2VxCglETzEn5KpdYOV5lTYXvaBbC9nEYf50HXpif2wqGBQwwFb1l2RL\r\nqQPbQuhpmQOykStleaqI8d4Q+4yNYT1UWZw=\r\n=HH3+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/tokens":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cf5c5907c.0_1658352156896_0.40539229814080713","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/card","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0617e2319.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27ac9a8264c376371d1fb91002c22356e935cfbe","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0617e2319.0.tgz","fileCount":23,"integrity":"sha512-qDFXsBTe06yAzI8DJX2ViC86rdL4oRBuTJZ82mHZFGUTZMGXL+CaC9RYQElnLPFmDvFAJv1gy1D1pFjooDn7nw==","signatures":[{"sig":"MEUCIQD7IObNJHoAUap8nlljxH12IwAurvWMaRaNuaXFTg+PpwIgTQIYhsFJWqGaS+ogIexphAI/SfK9NNJv0TeF9srRFP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":285924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB4Q//btOb+ej9o/mJIcCfBNoLtiUg2UjBvs6WZ7gt3IYxyWhPFG7j\r\nOZYmosNA77PbjWJM+CTxypZbVBtFi3flaDjUbIuZhnULrP+JduA/9cqVUwnl\r\nTvlCSV9Vi6euY+iCH5EmPCe3UxpDOIydyPgon4liu7A8XAn9BNzjJuK7qhAB\r\nhV6l5M5NOdbr68ZusH/N0Y32CFGzXf3A+n0N6Vi3ZAdCLuN/qytKjl0beYkS\r\nhOt1fTAWK7WhzgkJDi3MTPG2D8RfEEdrgX82WQuACfjlmJaW0LH/lp45Op2m\r\nbTxgam6o13xbwKAQIRi01bopwPVvLPcnk9S7XwMQMU71jicJDtsDan/wX6cB\r\n3CTQp3OwBWf59pF6kuhN6iA692fxKNS1UvNiTLw6+uN57o4Iy2ArxXT1L4jn\r\npIxbKPJ968cKr1cxxHzpY6ND07kwgb3P7oDLOGmbYeHDIFNU+1Kkf45CJ5wo\r\n0I3KqTwBqTlv2ecUrH/Sy3wqy8ct9hZEX3mJ2Gs1lQVhvWX61o5I00EQSmso\r\nBiNK/7DdIFtzYvA/bCtbm+Glpu6LXgknYyV/6FzL3dYTXLKGodGwHs7GJOBd\r\nNModgIPUwKo6fH7njDbMOsSxEWUw3kAGMYWE0myG/mjRVMhHSA6iE3i+CjtE\r\nxvp6XnpGemvK2yK2odZhyuaxb9QDMVE6Sp4=\r\n=wiqy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/tokens":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0617e2319.0_1658353253478_0.8002983512950765","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/card","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a743b7967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17875212dfaef140ffca1ddbbbfc8505f934dc4e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a743b7967.0.tgz","fileCount":23,"integrity":"sha512-H7jT+KDqA+GilIbHDyCpqeD92yoJgy807fBFgK7QffxyQsNqIRgNKXUla83Smlm41hMrJ3eoOhPID/NHfOzgTQ==","signatures":[{"sig":"MEYCIQCrgWscaPbf7+Vmk0wZQnrvfNgPmB6U3m4ZEmEyhKeoxwIhAIdDfhrRRn1F1xo+taFqVNJXzmjRz8w++RkkB3tcy3Hz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA1g/+N3SPm5Qrhv0sFHwTK2+ohv0ErYVCrOTnTvC/06I+6x0lmkk3\r\nVakqJ4rOwlWq426DUB94e+Z264n8VjuKSwIRm4d6wfb3KCxel60ynut52HPv\r\nkWGRhJKoP5GCjfm+MB5WrriwkXyqHoptgZy+QMgHEwgf7N5qCgXD6aX2A4gw\r\nvciij6X3KAQRmR2NWXxl8hPnChYPEcnkRYZ/IEysMrMxHFEYorTtL1PNlLQ7\r\nKmnsj42c8l62pd5Tu4AXL3vW1Y+mmIvy3hw1PUhQ2TfCT9pykaF3qE9lyjVo\r\ntJZKFMndYFURP3L+nmG0tLqII+4ZfI0BDIhbTSBFHRJtV8uAZOnqXEaZ8ZRU\r\nED+mQONKMz5TJd7xZqYpgF+7IhQqmzQuGHVVme+Ow8StC6ZJ92JiJSj8HJue\r\nTWLSWD8iuVLmo1UybOZUesRAd4U8V4HYTpNOlerodtLe3aJ4rYGCBuPlsqUm\r\n/1LJjFlFG4YxUjZMcRyX5ZJh9vdWS5KhWCGPe1hsjcs0WUEBhTtmuxHnABEO\r\n5PXw70rx8LwqxJNRBnQjC+60SOndzCOnTL8oHJsGaVrlKB9xk8YeM1U96cvp\r\nCF/JWeJ2H26gd1weQuqAPsUiPCEq3uKpEhGhKDIHkjJD55BFXS6nDYGY5/bG\r\neJ6o7a9goWI/Eoc8lD/ctL4yVxGoH+2Og+g=\r\n=xAgo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/tokens":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a743b7967.0_1658354272512_0.39080998578333626","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/card","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29dd385f9692c6d603da7eab2c33c64a09d814f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.69fd619d0.0.tgz","fileCount":23,"integrity":"sha512-wECFecijWDLc4YC3+03oR24l4kxBzVaKJVzk89J/8az3WKYP+wO2cKJwUOr51LAONKATWwKhbl+me6VfEEQi8A==","signatures":[{"sig":"MEUCIFTUIn1pF8JMjSBDusbY681OwmTJc4AjA6PRMKlxtVshAiEAjvX8EnyGEZVjXWq7vM0QL+sBCDpQSH7dMMr7p5DW9Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H05ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+Zg/+OiA4uFgYUspgPw8CTS3aubPH6NL35wbORqYoEocXK8yoZgI6\r\nv9He7LgjQ7sDnmEt7JYUidPiZNr+/dJuqJI1n7t5tS2Ftv3ksoPYI3OfY/Lg\r\n95UyKCuPD3BMqM5y1xasAbwXz4kHFdr4tdBFiT6rfk33GNsTYEtqbUVJ/syr\r\n8JS1CsKA7PIw6EVaa24CQQ8anYVglAd8XQpJpuvB3nfgTvpLAnOc2QvKSi9G\r\nI46RuYatV2SJWXnDqlD+5wsbo0RG+78ApUyCBVun+RtUJeQ/N9gY4RvYjnce\r\n+26GVww3AueJjHddjSP5ii93sWYMZ221SE4oPYOl0mP4BuT7aYNGzcXYRfOi\r\nABLCUFG2xczDGCnNqCLS3y9U2+HfkZw62RKlYZfmzXA1QVZb2N07lu41aryW\r\nf/LPCTk1DEyJpLYV45SHWUAj6ME/48tQtGezAA4GNaGlo90jvcKs3nbb7wfr\r\nK1yq/INUDqr2xPHa3Bi6pKIbnN6DeAdPwgjoCBF8tE+ZLRtYOFXRn1N3gIuU\r\nhef0+cvwy2YqelaVshwQ/JmLYYg6+C+5cc7UABZLB6gTatVB2VHfbV+bHLC9\r\n7Zh4uGqK8q3YtgyDEjqaOufQ9OFznSO/8UZHt2PFonXJW8WG8JIRuTOQIYVm\r\n737I62w4phHK1Kn6LEe+jk9VMoutDBfxFL4=\r\n=ea3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/tokens":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.69fd619d0.0_1658355000838_0.5543764224517129","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/card","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fc2633fe4d8f85a87a5ad9e302004558e5e20d6","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":23,"integrity":"sha512-Q+nGfalnUWb0IuKqkr2ZtH3LiWnJ/b5tR4sn6jzN8vZBIkI4njxaMGhDxZaaNoOjt1qyx7k+9hQIHCMuJb6kbg==","signatures":[{"sig":"MEYCIQCvXHONi1dDwCyndc3D6y4uOL4ou6+knEFArQnBHEQ9hwIhAOff8ZaImTWSVnX21tYOGiOvK5EOBQ8v+redd/Huc/bn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AVGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriRxAApEC1Y94Y1dMIDe5Sd6iQMrFB0v8uFh8IG6M+zWVA1ACNy1DV\r\nqUSCfRtZaPVqtcsYtAa06z7YqNsqhBKnoufpdAKWZGa9TivjpkssMkjPRgbj\r\nn8rRsW8DZgGVD4w2cFTJDD8BeyhwaQOs26Vp02Zco9Ff7zh/PwYSCwojRweM\r\nB3N/5UOd2lCdnyS66i+PhghMFfqCKrrvOtKB2DGE6ZSiLB+0HvVKtrOe0Wdc\r\nNUcb/HXHi5FnxgmwKSPUxndUxvnggOwAsSFAc23PWcdAlC3sasjDCRXpU6uX\r\nhTFB3udeq+ua+/dvxt+Mhcy5ABsJB5oNPn49nlVnI/qzePsD+P0XGwbP2sBl\r\nglmus41dTIxyYUV0w12kng6J0pPwynoAJZ3qcQL64Je96SE51W9fHyGQMZrR\r\nbAStuEBn3h9yymVX54xkyTFoYAEUb6zqyf6qtS0ItuPMvhQ5NfuXRCGE1qIY\r\n8RZZ3YlZOApOgoI0pWO/W8cayaNU+ZwYqEtfpIr/YM3gyFFvAZ5roEvLtUXs\r\nqkRr9pZAlGMkBlfBPVV30FMDS3nPY0EbXXcmxzO6M3DqMOBMKul7eFFSFocI\r\nx/cPby4+a8DuhBHF57s0w7hVUmYp6mydH4KUHbyNuAZrezpJ1d0hE1pgL6XZ\r\nKRCmh7Sw5+7w5j9ApTNBO971kSQMR4/+nxo=\r\n=YGJp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/tokens":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2a6ddc1cf.0_1659110725986_0.701728545364565","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/card","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc83161ec2948e3bf44592e23b151b56861fbf8d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.86efd56f6.0.tgz","fileCount":23,"integrity":"sha512-T4HgJ9t1KUvkdwJh8JUpu7czAYGpjvsdSXFWC0Y0uSehnv82D3zs3eJjEeDJixALH74jpzDKwLJHYsABUSVHUA==","signatures":[{"sig":"MEYCIQDbmXt0SaK2m5EN/mLDqdtCKFstsRQGhZGPwymt/RbPLAIhAOzTCB/2qxWg0APibw/qz9mYkSUVxeuwe0RtVasPvnAb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Ti/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrk5Q//b9Bcgw833ck5YTzFnAonCTD8XZdFlDFAQajPwNUE26WT6lSa\r\nI1z3VJ2OuM256fIv/jHGhM+d/6ieuiG8UcNJ6Gp6pbcFfbm8yEZ6WvmSZG9+\r\nhhIZ9Jv+VzRo5rOEoz6PxS7WVWIn/+mn+ZoOqh9GMb4ezDz60/eyL3iwTw8B\r\nc074Lz9XZpCHQJSg/LIoGOeEYmBLsce0uE7zCPKbiAPu2yEIjBngw1dpTpcn\r\nYm6hzoGSl2IyAgYlbc/xI3C40l8qoGUl8jkEVjyQ7WCz7onI4/T3sRq3iYQh\r\nxuMG4KGVH3+docJ3UKV6B25Y6a06t9FR/bz9vBdrVb/jm0Or/WeHevRkhFoU\r\n5hP7fHG7bJyi03kcBeX5FWoit8xDvAQ4z5DbXApU/s7SUcBmy6AcTqduMvEm\r\n7V1ZLOMoMKpuq9l/wZTMTNTyMG+RSA3ql6IQVfFpy4cOwCpk/R+mn3T/tYeR\r\nQd7YMi1H9SqmIH/EylzoS+2L1W1jt8CTRAS+eZb3gdmCq7uYHh+xlUNvxtWf\r\nZ1jxlu/NdAIXFsgjUg2L0aGL2XMrq4Wflbef9xbG1qf0TO4bFC8O0Assn59D\r\nE7NLh0BtQm9Iu3eqjV8QAFqFwz3A34pVtyMnf/O7HO8hshgz014ewJ0Q/NNU\r\nHWWKLtVHTWl8JivqajNjStNgJ7s1w3TdvjY=\r\n=h3//\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/tokens":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.86efd56f6.0_1659451583533_0.9125283526296737","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/card","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80bc55c23e78a6a1de1b15e743c575b757beb4bf","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ccfc24d19.0.tgz","fileCount":23,"integrity":"sha512-Qbp0s0xNtbCyZA5cAsubAVT6vVQ+QUo7wJAd2pEDyTAXKdnCVHujETJx3uEXdjsTWjCXAHkATzkfYyjjP75P2w==","signatures":[{"sig":"MEYCIQCrnVHj9KqBMOBtB9Yhh1FeGsm7klJDZNtrJ92qK93rTQIhAM9CaI/XnP96+X5GPPnNYhqtaakZ0q3RPD0Ek/NrrjW+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rr8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu0Q//fakjD4aFE/JQ3R2gC3yaI1zeQKOnU+EXymc1/iHnz6G1Rb/B\r\nXiyZ+a5zvZBZkgsESUuWD/ZNE8iBIjzY1IGxHNcwyx8zqN2eFV6JyOmvJt5p\r\nB4hGvyZtkhGLIZK3vvn4psiBxJI0tUkOby5nHP74elGaUB1+SXPfkxXxFewI\r\nQJoB5vEDmJxDAPDTURdxCG/ShNnNUDhvPWAeRjTIYb3hck3ZUsTW8V6KoWIf\r\nzOAYnj9xmoT40bs1QIWlBSJinIqPa6XwHBmko2r0zHCD13cVJBSPiYk20LTM\r\nGc0x9ScLBaV37NyctlHLkUFVZJ4jNwQbOlOU5rKx5mrvy4aSdOJrBF+zyIEb\r\nejtdebLpTNqXS1SEylBFsgbf+a1IiHqM/36nc1VYsRkxKTh/b12HJzuiqcLj\r\nEbgYvTMiu80lYStx21BVVvOwiuqZ9620lfPFr63aE0L1MXHZZaShbl54S5lN\r\nRV6Dh6nYWTu6WUFto9KNeNEn5manbEI9BR9hyjOKiaf6m58r7RYbDNUuQAAx\r\n7CGjOt25ioGY4uS5bDzp+iNjHPeRaecRVLllB4O9CQ3xnxE8E+N4pjHNAF7Z\r\nnlEjFSwfjvWLjtD8PYtvWrEb4WnRAVcG+eeRFtwvoQ8RCoc73d6aXq4msiIn\r\n+9p9Xav+2uzFto9mv155YqkcOZbjXFqm3qg=\r\n=Dqe2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/tokens":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ccfc24d19.0_1659550460325_0.14769966033784954","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/card","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e4570146f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04c5b6d5084305a687ad1e055f43f14b3eee26fb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e4570146f.0.tgz","fileCount":23,"integrity":"sha512-pOFWqXhAcbd7h28C7KMURZ63taZ3FOpCK+LMrf80G9Hx89tGCmT+wYUc22c9kLpIVj8IsecYWKTlIRfLUdX+Uw==","signatures":[{"sig":"MEYCIQDEmCCl6tgsLwJroZPdvBegInXfZbXEzWjXZiYeo5KACAIhAOGk+r+b/lN5Ww6X5h3UKBdGvuKbzgicGE3yBTpeUnij","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":286458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUGRAAiNlspNnxqIJsTQ1i36dFG4TEBC/xdWOsJzYq8pkZAofWiXzh\r\nSLrLcxzmovKVoHw4WOlq8WSp8E4fKXgfWjDDngYnbRYiwLCs1CXqJygpTry+\r\no5U30f04WBjdc3pDmTLNwZJSyB71EZF2VYhieEvZS3tLWUc08o6WhbHdHBTr\r\n2FYps0zRhAlfklf39xHkCKX0JkODbGZ7Hu5eXuOMs+z6VwKXpYwoURhr3Hs2\r\n2duSgwM9IYbQZRL0Gb1LYqj7OQKd6RUor3qtVLKRDk4fGE1GetNCIVgfMMbI\r\nRfomQlCTNF3lBT02PDXbsZT5HopsjhPY0xN4RNNrOmx6qVEqRmNGOCbzzaIE\r\nAUjWxbqZNMJPvp3nZo4y+w79jKM967PtS6A15NL818sIQbzfWoRrGTQ/Cms/\r\n9yxp2irj43TlQNu1ghnG/Vs6eJJY9SqyarBghtY/6xgf0Eh5btuRAc7LyY4B\r\nN8hfjMIgwSEjLvH3cKkKeIlFFsb2WcZA8iToAN7EiMUkI5XY+uIR8AaM8qut\r\nM+g4tS2iedKEZgPASxibncjf+DlkwC6TA4kmYox7cFlu2knWhtYs2JuPWAPQ\r\nx2tJWjPG7KqOHsbpv7rGDiCZgV4cbbS/w70TznfMO4cqJF7Ic5/Rhwzjkzjq\r\nRjOeek/S+0gS1aH1NI3uStZ78StdXs1N/ic=\r\n=xTHr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/tokens":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e4570146f.0_1659552091540_0.44350180763498326","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/card","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e1613ce5e6f712c9a432bbf02838bbad432323","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6683a36cb.0.tgz","fileCount":23,"integrity":"sha512-WHNSOVSxS4+HkOPB3Nnei55oWevg8RL7DHj48c5o8rBLAw9MKqG3Uayg7I0eLNc85XbEywg8f6VwuaWNZikQKA==","signatures":[{"sig":"MEQCIEERIcGtF7XYqEKdvi1rhLdZJnS1GgyO4DYV0b5h8jUbAiBry8CjESqcYJY6Kl854P3RkqaTTXSAkFfIWfQ8uI3+Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6srCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUPQ//VN4bMN9lAh3KgyClGR2SBdcKf62kUHFSheRHDzz2POGia9IH\r\nUHAHemtHEFKiCBFvMzfdN76KIHio3lZOLFcsxoWgo+5BM/heoZQwt2p2PUrW\r\nxGWy+XkGRDeW4bdt8YM5vMp5o+rw3k5RVdjNQRbAIgYYEh+Bn7jzduiWtgOo\r\ngLqPcVYtdeWbN39+kw27HAZe7H5Q/o8f6LfrCA8FdHmxIvyF79OAFeRZ7OLb\r\n1l5Z1UhRv1qIQ3pN2JtmAR9HAX+3SBNyXKv9xPxzw48FkxyYQNUHnYq13vA/\r\njIxz7LqILD64jnd2afPWa1zCLNC73gq1xN298LG3frhIXQQXHEFFdaPvPnBX\r\nEmrKZAGU5xP7CqTvRJdLYRR4SU7Uf5Jx/ClIZbG/tt0AZApYHsW8LpwqxxMz\r\npsMlb3OvZwUAY7AfZViQ+8SG817y3fDEhyf3kRpOn5DB0WazM6Dr9/AYIBSq\r\n/6eYfzKEA2LRY1tu088e6dnJcbNpZs+dRexPNRZqPbBsBZQ1hfu4wOvMSxaD\r\nAQkMdteNI64PfS3hprfVJf/+H/ZY9z4aYctx2O1YHdtEWtd1CIm9Rm1zm6M7\r\nB4ibqFzn2h/qrBnQRWDfSqHyiEmjmKNq8QkGjg5eREQKeRQqzcEhay97/+ud\r\n0fEAY00VPn94t8fphcMNdQCw61k4uacUkxk=\r\n=Wl0F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/tokens":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6683a36cb.0_1659554498237_0.3928430041616491","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/card","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.10196647d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3df7ade9a35a2460669c8959f71e2bb8dc6780df","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.10196647d.0.tgz","fileCount":23,"integrity":"sha512-UQ6ervKE26jnp91OEx+PYKm4qh8MOC3xFKTfsnSjiiFf53jodI/5ZlyrHEzAfpFN9zVc+xaytLe9klhwjeypTA==","signatures":[{"sig":"MEYCIQDWz/SIcj0kTXOkUBNuHHl5paVfHsHnT8oKTdXXoh2EcQIhAJUCRhc85FJwsgNTj8HH6O7CcUkKC8DjUpYEP8sL8T9m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqxxAAoIemTJWtEArkzvTfVr+TaTBvOtXFbi5Fsyycr+yMOR7qlmW6\r\nHyn1u3TV50Rbb2GfT6kAeCNHmfbJTHzMana45V0LL2A6MJTyvGb+UC3Wgg1d\r\nx8FpCgCC0E/vXSKgA4yf/xxJB3qcIhIPPgrNtuekElfOjgz8OdTOe1qF8sBS\r\nwxgfSnZ4CI3yz312mxufFqMGpDz8GG3e1tRFvc3HmUGHkiMnbiWp9fNGuHqp\r\npjMvJcOBYhKFHdRRkYvH748d/pNZM20oXtIWk+BEPmlX8xyCeMeM4/mP6/75\r\nn+UjPgSJYLhYZcVc1J7e/TWgxvXckNTZwYphlsYBTpMV73taDS5NFvHt3HPn\r\nRMqb7PbyjIkYtXXdX8stoGdPVS1D9V7MkczEtd/GarmgmPeQTcPLz28Xf3kC\r\nc/JnVVophau952iT9k9oatZBrCYWkoXa6VyuTc/GO0P4BpR1XHdoTXPFF/Q8\r\nvM46iv6l5fDwNIZP2nSTWTHdJcIjPZgDni4adJhqd8S215J2BhL7+ebSAzWk\r\nlHh6LZQVVT9lxKUiVrrIILYZz8R9l222fJKvSvnC26c1WWnBzsrlO2Lh+cgJ\r\nrH+OiM1Fs5N2JkLOREV6viDVdzMYAmg7fgtoGDD7x1moVsnxNPqwK6f4bBEM\r\nAQy/PY0C6F8xJIOzNh5uXLh9alc7hiFymrk=\r\n=morO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/tokens":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.10196647d.0_1659563670138_0.7987875676966367","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/card","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3b3dca81e046770faa2f2aecd261dc739ab1ac4","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b20d3d73c.0.tgz","fileCount":23,"integrity":"sha512-Ksd7hH6JxznQ1R3WcsvPspU0l6RRSyrXuRMfrk6a6Gl9M2mAGHTafOXyMAfaco0/CxtLYbpUQFs0bfMisfoELg==","signatures":[{"sig":"MEQCIFIIHgHyYYrXmraBeVd4ONJwybX0JCOkON9IkkPFm9+rAiAGh5LP7ci1zyr49XhcwcX/eX94EuT3gXhdYDzNJ7ikjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EucACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCDw/+LqPsLQGR1Z/UD8IPNqJD/IP7fhhJC2FN3lxqX2TtngmGzPhV\r\niFQTMiOAncYKiqreq7NZskxMx4howicCKL02n8XTgP/fb7r0dtsu8T/aXsxY\r\n8ap+6fMsQeJB9lHNRBv9Nhv/EraPpyXSf7u+7XXGXGDCUk8xlk51m/IO4MH/\r\nkPwvSBk/f0/bywsMETzHjLGawr4RvSHJiQ+KSJzi4Qli2I+zHIe7PLmqMA/Z\r\nBzMsZXxXfeAtopnT+tAyoEVDhUJ5jpTUClbov4B996HQ4QCHdvvCMWqx/4Ee\r\nriOSjfsfabwolkQxYtdMoyYuSLo6gfxOJ5md5DIne8iKlSEsBlRpi3G0eAYD\r\naeVXyYqL3cTcodPBCcfwS0kXMqSpJ5EM/QtsDmDxFS8I/pMt5Mr5Pb/ZXxe8\r\nlu2Qow+J6ilXagi+BdiT17I5B2T2xu23gEkz6FyBYzOsOg7cm8fg0sJrbS/a\r\nRFfNDnCCehr8kjS/VNvr9Lfr2Z/9P90/1eI10P6SgbD9BZt9M69KKWKck5dq\r\nasSPL6AFiyrYLSX+nD0+Ml+NlfEe1iGVEbA+R47Knvj2m5VaUIlwqbjRDvcp\r\nI0vJyR3BOIPz+7wQxcVkjnMDt25gl+kJ/2NFpUIKqz61EZmzncAgDTHSpw44\r\nwucXmCNeIvvy4NW3D2wA31HRGXnWjPMuP7s=\r\n=/5aM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/tokens":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b20d3d73c.0_1659653020624_0.8044432056988584","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/card","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"440a81c1c92bd3aee6c6d2440d95e5a716669a8b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":23,"integrity":"sha512-hRHWKo9T/ag9fWgKyF4blfkXOA0ZNdNFN4dPZhJzcx1OvYy2IfG90XhNDdu4feEyPXVKQsLJj3WcTl536iD9Uw==","signatures":[{"sig":"MEUCIQD7jNsdWGRJWhClJCREwbg8VC1CwZwOJ0zyQmuJ/t8T0gIgTby6WMlTF3tizSlyZJZF3o3d9tqCoS5h6zxnphu4ppY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm2Q//axCY5Dvy7Nvn9QgNBUmg/go9pZnM/vZcx6jFcFoEki+IMAsE\r\nPmZAaYL319oh6pkN8+U3AVvaivRUsQ4e03vuhb57PthHl78bEcYQJLN0RylH\r\nNKXMAL9mYmSFJ8WllfUhbZpKyyT+FIe0lUlO11+zY/b9aR7pNumonsaMTLb5\r\num3/fTDuE8ihITTxAc+bmi4waf553/BF7txQiV0wD8gTJMpMHyTJnhOxYXU4\r\ngPIoGQCMWMwXyXnHQlK34gbBc5aCLiXaaPGYBRK6q1KfXm8vCKKCpAFJZfVO\r\n6mCpT9+5XjYOqJdJsRFrvYtJ1zBncBTXyJ/D628aEUkOSL6doHVeHAAQtZ7l\r\nY6QykKnlwtCXW3pf2OYJpBfunM0EpPHCMNsAGLwwYZibiaYvUWl/Yco6EeC+\r\nqR+lsWO+HpSv0eVgfpL8TGjxoA9Ipqk+jd3634AaLAmJqzVNkLlv5QrkJJTk\r\nr0ApEvEyj6PET5GIcv7wOSCfFU5c9GVaE7wtd0hvzOCtTXW/eBJFDy7LkRTv\r\nUYUHZgjao1Vr9J/NBWSBQctArAswwfzbLCq1KcUgs3LwDsq8ON08itlYuZvV\r\nYRS+BWuDXa0MNTtbUtiOS5UzX0nnpdmA3t5xqJmEAFPhRAfnI0ectlbRO4Yz\r\nnTrlfhuWIKfclYgRmuHPe6Qrgb+n7VXarHY=\r\n=JhI2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/tokens":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.47c0c6b1e.0_1660058482232_0.14761834120345352","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/card","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60a113b96f6cca1f3f91ac135a6ae84b700d3f5e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":23,"integrity":"sha512-iYlVEP5exC3+EQeZkkULvOQ3p1Vbts2Zln4FesBJWhvj1KBsMt+hHOpNKK+NRB5GuXZHO2mMGQqs7DKFgqJzPg==","signatures":[{"sig":"MEUCIAbYd7b+GS4Wt07mjYffSyw9HYQ2VvsWuvW2PA6Y/zAzAiEA8y0358Br08aY4WmRTG2Jl/I6H9Yg927TEDDVqkOZkcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Ew//SpXXopnUZVlTJksU2wLztRpHwvIr0ESLkPUgbbj5T0kfqEP0\r\nAQB5HLNTI83RmweL4dcPQoO+Z/NNXQjID5rjrI/AhoAodHGHaWdZP3YV7Jd8\r\n9n3K5FgAwEo9xOwwgN8YkHKAnCoVGsJFpxbpyRNo/bT5HlEtj+csJ6NTGoeJ\r\n4X6caP8aPJ7y1fboYSCIkOjre81NdbUAoGrIc0wiUpF6LK/CvEXF4+mpPpo2\r\nALSDVItUIdQItmp1tLMBj+IJD65dk5k3S16FA2lJzyfZEa108Hnyp/jFR4PV\r\nuSoB7cJrCLcvoX2qM/Hqvd3EsARmgxviu5AUWirJP0uhH/COnQCE1gc8UO+2\r\nDHToFs96myA+cVEGjPoTbXNO7ieER2dc/63hnPTvqzgp4leXqAgxoFTxfwo6\r\nqwVdtQMkrvwXAoIC13rp5SkZs324hLmGeaTHXyR60HtRUPGnmaFiL78QNlLN\r\nyOxORM8+O9HDz0Xqn7SV5Lnz/+RfMHhhnwXnNA8o3POjPajvT/Bon+hisG4n\r\nBV05dtzJV5JrkN/TmBQTEKArTN2a/BpCndSKhga+6uAlcCaFHOAM2vXTcAhe\r\nqgsvT741PmYdtFLtxQwZCrz6VAtE7rZ6ELZWrnSfg61uzuc9fLnnDbT8nUCs\r\nqsTNzmpFQx7oqZkdlG2AvcYjN5sHfYTjUIw=\r\n=BUmF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/tokens":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0e3dc8e38.0_1660243602268_0.7500032804987542","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/card","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2aeffff1572b45252fa0f58a5bf3c66cf4297cb4","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":23,"integrity":"sha512-2IP0DiKWiml4F+KDPEaxAVZIQgf5tCm5gg2ihhLyoxQPCSUOXkM03XtSkZt64uFS6K+tkfx4Zb4VzpmcXD/ASg==","signatures":[{"sig":"MEUCIHmtueB+yMi9+nxaMAh/Pijy01bbCNkrJSOjbEc46o47AiEAlz/lsWmD8yArq3DhX9fxgRXqOUS2KYdLWYnr0spJRfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGUg//bE4Qoji3A5KdmPaBP0UVbufWHsFtbnP1rc3alZxHuMFxkh0w\r\nbxjRZrif+MMw5ZB0ZdLW5rmKosu/4jn0v7iJZh+DJ/sPMRa7cRXdf1322H8U\r\nfbStUTBGj5Bu7E0U+5oxkYoBrFJVHqdG4YFV0+IzfLWI6JHLNLfAz3UErjPA\r\n+3VD8CNzkMKkKN4jOw03O1k99DMhBUKMdBAj9t3sQbxFBt2OEeeQX0pueQ19\r\nj+lIS89duPeL8bffLEX8UDF2MGz2XeRkY3xwhCZh/GEGZ0ppdterqTp0+R7U\r\n5lrY8g9sYq5RYCmHQ2cU0upxT55o9gqXp4rVeRK2Qr5INImupfMa2MJyAv23\r\np8u8Zdl0j1qzj0GYpP7N9gS71HJnsAA97W+xa7mJ3UhU7IqsxlY4NeTe7Jxr\r\naizgPzFixI9kqF19FTWPFQsR3Fn0kVfpc5Xo73jjW1fGJrCiQztL+b6fTQ71\r\nc+lgDx9MYYjwvqPW8JxGClcXHoB6X2Inp2ILuHD5S0rRhPgLGGysV+WJmR3c\r\nnbkk7wb1MFTSc4giIV3SfExEizti50itZNtiV05Y+pwLW7F5sQYn7KlPHrBA\r\nD4tyDzs5Z3ilMLSmZnlXzNdmXQFrABrcEsNDjPSY0lYLCB/KoDbpmic6HiOC\r\npxT73H8G9SGaPsysRumJebFIGHqmjrkwZow=\r\n=Igyd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/tokens":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d5a11f1c8.0_1661900524183_0.1887929247393616","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/card","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.bac992a95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c53cab7787a82c5478baa92cbe9fc522d554182e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.bac992a95.0.tgz","fileCount":23,"integrity":"sha512-b7MKJsdLRVNIKtq/wCBRyCxL1CMD0GK7wu/dmfSLA9EMhuR9pL3WcUS1k40pZTjScoSt44tIoZBJMj4Hed/7Yg==","signatures":[{"sig":"MEUCIQDKrUiMy+jOLfP/H6ZDPbcVS4A7ARwKOkRBgA7Qaw4epgIgQklkptUbFKqZsKzu8f81FcsngzJJ0DZOFzsrphRRqTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFn0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4nw//a1Eq+Z15qhc2U8ogtjapJmwHz3NOlnD2AXm58LkyZnsMAWmk\r\nCjHxd7Bl7QfzTW4RCvW+WChMZZcCIC6SqJJ2rDc+wJokGlNWc5DShnEoomYk\r\n3YzCQqpPKKEXkoNV8SyqswCKfoi9LX73ToAHE4yBTnmy0jaotPXOoEUlYysb\r\nClIdSLH7oZXzaP2K3hSndUG86rsdS/YZm0G+ynI/3p2SGdws8vtimUp2pHVw\r\nPdnJgAecL5vZBynn/Puq351my/4Gaf2QCBLZKeGJiTdPm8o7AfiY+FUpGCRD\r\nfEgCnjKqZDVlwOOnGg3LHAMfemncK6/+MGN98XFBJmHev0AaSekIBYKU09Vw\r\nkSG3s/0LaSlG1jL9R40RPwaU/hF0ueuUEvybd5EMM6Cg8kqc3oJmviLL+gLE\r\n134smmACMC86XPb9oFOmmxYx/OEKDhg9tkniFuMmgCMacttnKsVC7Ky4yUwF\r\nUckpp4P9u73JEXEYx3mHozmTQggfuYRgqtGzL3VdrW+lRET7aQ0uBmAIAes0\r\nKsMHJrrNxOSHHbKFK+SGGo13UoxzzYPkpFB7eXyGCNQy1LOh6C598b5JuWqL\r\ng4Yvu3PV1yzJmmQrbR/1Pgc/PIgTzyROQi+PfvMsPByf7H9YKEgtfGOwh4Fl\r\nifk6Uv/1gpWXkKy2ytRv4TKeHHpEESDhwwk=\r\n=1sDZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/tokens":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.bac992a95.0_1662015988725_0.11662641271370733","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/card","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85650e46caf4c9cdc719f9e35de9cba9f5ae01cc","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d25f3404c.0.tgz","fileCount":23,"integrity":"sha512-bn5tCkjI5v8dCYrnENpq0B9i7eeGU1/QnblbglEqoHcCMn4Rdc2txjpFgqb63DGmnwJXqBZkRre/AUz1r95Qgg==","signatures":[{"sig":"MEYCIQC70bsr3hdWv+aia4MK6OZWguogW2D0Lvcsl9bAwNUSVAIhAOdKHzcru/z96XGwwU17u6Aq9PzKVT3HdfYZ+mVk2eoX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH9CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrREQ/+Ijjn7PWp1WTAkU2xbLmyreSISmwa746ZEPm46aHBkTuicGN7\r\norf7Esunc0SGWCH3djrwtvaoVm0LGGDk8WZWksxiKTY9m/zlIUwTtaKMB8Io\r\nxFxt8k5li30Hwkmy8+OS+d29HWAP4q7DmByn7G1/9Thsqn8JNH3xRLVow6/0\r\noSQYPqHbBHS4zjHZReYaAs9wvdyGSbBR9zSPAm46rk4bpsi4hCDIpjngn7jH\r\nx6em40EsoNCR7RMWX9pkZezvDMihisZP1aO4I4bzgUj++nb4A37eC00qxpTH\r\nbKd2S9zdJ6vyl9trRL+NU9cILzWqb5jXW2325N9RMU81GUs1HfBH5Ey+vjRS\r\nswNi0q/1D6iUtNyj1oj5yjUAiYwyl/ZJbWHMYwi17SlbBnaq6mRIOuzF1KDC\r\nmSUY7cfZ2yCx6abPkSxcuq3x9zCIpvo7NyE7sjRb2I0FwW0JtIqlwT3YnxFY\r\nxiNjwWcdKmfiH/IHz+mxcJMKapUnjjddHFuVenUIzDF4uEqOVUIOltYs9rL+\r\nv9YXzfNrjk+GLx0s52FHCpev40Oh2zw6pVT839XXT5ZDWO4OLSm/QOfPmprg\r\nfznUGjGHhiXu0dZcUUiWYud1N798h/U+3wEHpGrE/LZEBj9q5g613Up9mw3l\r\nwmUN2ncTKO1LPaHY6n49/nw64Dr6ZGuvuGc=\r\n=HlA3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/shape":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/tokens":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d25f3404c.0_1662025538257_0.0863726723797289","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/card","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"290c75045229392af95391219e42188d5e210ebc","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.920d8a79e.0.tgz","fileCount":23,"integrity":"sha512-qpj/DzvRWpXnjBcXUjJ4O9OaXp+2hAQ9Y8JdWcRNR8FaFY1xnHeT5yeDuBWiilIdZKxTSpD0W4E7QfCnG/lF7w==","signatures":[{"sig":"MEUCIDVT+Qmx+ItXYY0DvPiSyqPfXoo7fdQLXMNfJYqYmtqVAiEAsNd24NypRABQyCpn/m+O9Jccuvo4xcqYISBvDDab/d4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Fw/+O/ibb+19H3HwC34NONB+uNxnuh8mSPcN1fIEumpMs5SRrVN4\r\n0UVsY3emSjI4ItL8pUWLNRODx4LUfgOLSZeBiImy/M+F+pzNTaamsBLO/RBu\r\nLhcAo/jPTLDhepWvysqepMN04ByuXW5pYV6NNh46B7M8Zaptwgtf0ATe3B7m\r\nnbzVh2nZ+P1xmimBPn4TbDKoB5L4MWL4/h94JUbGSd1HhbmbnQpjvAShfFEY\r\nJvR/T0GX7BH4pe4e2rsPHTTmvYbtqpkNO8bcSQwEVVpRe6e8oqKX6jldMI5l\r\nVtiwJ5gCidkBcfusnkXHFGjgHBars0kFQMjpJ3uMM0nkf3hrusleQ46h1YL6\r\nhWuUAlkgbRM+uGBMS10b23aYwrNXX5HLriWJGSrO3qbAf8kvDF2Jt69zxlO5\r\nZ2nvtK29ooAUjvAkWJpWZ5lGMb5H+S2NDOAtlnRDdxnboFW4yf2bFsRmShZM\r\njIP4gQu9W2b49bCRJSAxtgblXTiBx+hXoiIfcVTJwiqjqO0hoD9klXUZmCWj\r\nu8axNMSZ37jv709F5s6BNwV756KCNQoYcH7RhFMaehdDzL33xLjnMBtZnMF1\r\nzbNnrju6H++wgcBitLBqN0sRBbriUt0GPqhZc8heUPore/fBSv5F/gJ5V2Vx\r\nTi7w2/2LA9fo4J9tpjvhcBlRFYrHkE3QF1k=\r\n=T6iZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/tokens":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.920d8a79e.0_1662063705682_0.6920216949718117","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/card","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c363f267b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2defcc20d1b353305ba4c2518fe0d87695f6e955","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c363f267b.0.tgz","fileCount":23,"integrity":"sha512-fgjHwYnxzuVbeLnBs+yHTQfkxN6UR9N7Nfvs/NGZGjJ/dwQJ2lep1z2i2cFQ0k8XibdBZTP6Wu4q8xKgXEXdwA==","signatures":[{"sig":"MEQCICCvnMQtDRNyhnbcT/nmm300gIG7mx7RFO7y7iF0JcOwAiB0Pg8Wibw+XhYzND+TTabkU5jXNw65lSBben28VLm0gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptMg/8DC7dqhryBqm+sc3exXgnsRHyaeZafqPER0yubX9FeDuOI3hJ\r\nUd9PBjzxUcIgnbYWXr+6V7yNPj16Ls4X64eyj0v0SBMRutMRFZqBVFw4O0C/\r\nEabbPbMifl0UapKnCT+0s1k0LuQJBMp6YvjR5D+X8OPwnKYy3nRajKhK4SEF\r\ntGLfE2Pv406lJhV15H8qM4hJh906SFIL4CSbaKSgZ1bJLv3/5WhPjJ6k5Us+\r\nQE5cLtBkuNQr46/iw/WuUFxM8Kq53tij+OEK9LQkrB8z7Xhdk0Ul/P5SDhR6\r\n9/svO0U8kVIKAu7j5zJvyvH1/07aAMkiAw7DPO6LoQRggQZRHxlpp+5DF6QE\r\n3dkV5IvMHVMbTkEwIyce2N0+u+QMwa/hdlYoeVxFr61noMv9Dw2cpJ0gldRV\r\nKKx3PtltkfVV1FMyO4wBICpqulZx8KkAFlxKofCTJRVkuVxTYp5FcSf16q1w\r\nPqI3sBPaSxUMx0A9h4JtFQKIjd9PiSh70kxsmg3h5U12BCjpi2WAyA9uxHMJ\r\ncwjgDykhGeec030/SmixCT2R/VohfseRVZU9YQHqU7KHefu8TZfEZZ7/zsvR\r\nzpYa+nrfqS2S+WQYSjgCE0NpG7vu51oskkc00JVTXSmvev3qvQQplq0Epmp9\r\n/us9++AxyMNI+oyfJ1xNy+HinyX3WPUtgHA=\r\n=6/aI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/tokens":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c363f267b.0_1662067142829_0.7479799304001189","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/card","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48d33358dc76a9f82e92e6218820bb8c428ca754","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a4eb4937a.0.tgz","fileCount":23,"integrity":"sha512-cQf9pU2HM25a+jTPf+IHUhYu+N2cJbYQfxFjbsDOygfNAkGAAkagiVztxNsrsKWGVkPt9wbYTnpTnyrtIYmwNA==","signatures":[{"sig":"MEQCIBBHBqqRfP8K7to8OcU4pn9OkYU/AFYTakDdeq/GsmVUAiBQAzkwc7hInJIRQdciB3DArCyHXKoH/LTG7PRt8wRXqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnvQ/8DuMgtQC4ef/XAOHnLucdoY/mTsypXmnwQR8DINBDNxgLXzrA\r\nj+3PBiDUecxqS/uezLQaIs0OC/67nrvBsvqx3VINK1Xnk0Mst4OF6jrdH7aS\r\nr1nH69+XL/OOO981xK9lXEsUA7uK90PamCPX8T0KPZs7gi+3gS5Y5EEX/vL+\r\nNmVr5ufVEkyrszwMI+AqoZDJANhG7VU22Kt0F0SUzS87ZDVQX5i2FiN52YUU\r\nAyGUeNr42pchJhe2K7dOrye24AUzeHlsmh100oHnhATb2ZE9csm62+L31ghx\r\n2iMtMC0bEWTfDFjBDVC9voruaHUHUiZUL/mbmJzWo17Do0txiEyk9dqNWfwe\r\nMXEJrjNyUnBGr9PYaNGy4lSnPf1vMDuCfwHJoaQ3RqboI9tljxEblYLN7h+N\r\nThlp3cdvb9GhO9mR3JybqGnSAAKpaJuNhxAzEUpOX8JAkkjFr/5hjWUagEgS\r\nI47ZmYo1Mnon33o5mP1XYLXw+aH1X/2O2o6IZeXYC55lyn+IqnaqChNjPg5Y\r\n9xmABUVpIGkKs4lN/mAzL1bSpiMp9vykzYFh1tZgFQJIN9mobz11UWS+8zR9\r\nKX8dBlQGfyMPDU/Wir5DwxMvlvKRL10Je4lkLv5Eoc2q3gOShLcJae8qVmyC\r\nHaU0AsLNnEejkeErxBQlq+hM3RE2Eum07Pw=\r\n=OMyb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/tokens":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a4eb4937a.0_1662488431544_0.924779816996429","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/card","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4299717da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e184135427fc60e906cb3e6727ffbf6735b02a5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4299717da.0.tgz","fileCount":23,"integrity":"sha512-oDAIQE7smVyyCCEkqtnNU0mxfxCf/lLL1EEpp3L9OTkmEk1OTYCSCIZSsnSsqOTeplzb+q7I01aIli+6vOyUYg==","signatures":[{"sig":"MEYCIQChbLs7WJIX9YojcJj8H+s1WcJyYhSUCzGKXbOCZMTzJgIhAJI0yScQ7AMYKp2yvXIy/iGwVy0qTNCPQscR52vsCxXL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZRQ/+JJXn6hDyhMIPt4los3jcpfwb99yWzogEzjqOOlN7qbRs/Ze2\r\nIYw+pWWJUAuxoUxl5Kwc2pMPayLulWfWaVJxK5a4r4H18o6O3DwHGdIxw+3q\r\n2Fz0jcWzBzLRmzdfl8xMZ6mj6J8KliR0PWSMVqpAph83Puvl2/rFGr7UYpqj\r\n/aNNPzhwvNOzd4y1MS0bJmqTyWP4oxjb8X+4GkjzHCFUeqfTP2IlWaF87NTD\r\noFJwvBJRo4VrVCFK1iMo6k/5eNOq+r16T3/o6BcfxmzrAVCTcUHPleiCbOvh\r\n21EiGiJxhhKPePJT/lcYjycYruHWzdytW6cKSCEsETOBcBIeQAS16NO/TUDI\r\nzkwpjRaWYTMyxCdCB2GseSjoyclQbBLcaYtDReiA0yhEensAseK/uJLyeLhb\r\ni2G8fOIP/sPfRyPpg/OrgyzZ79vr6Zs+1mnbfEg54u57r8lJN+PbmPc9/gHQ\r\nE/Ok8xdfCc/xbaRKplvPlkVRY+zrfalG9UgH2hgA5caPvD8328sR928vjcr/\r\n/0JDUajrlO0z624Tm1rNMKMh90GgG9021G/00IDfZgkIDmUNQ9l8I6WndrIg\r\nO6TjRDNqkL149ce37poqvC8AaC0PwiCePGSKylaoitk3l0tcruOlJIKZQk6z\r\nbjq++Fk6I5Gd8Ps7smNpWoSQeUNYjb3TsFU=\r\n=7/Pu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/tokens":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4299717da.0_1662567388839_0.36087525428965983","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/card","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"358b84db74fe7fed340536408f4ce066db91069a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":23,"integrity":"sha512-WlVsEB6fAYAFGBGNxJrFNopiCEDhFmtCSrnjIUEK/80N/5/0MqePM8I8uQHypJpi479EDoJG01Bo//DLYeD92w==","signatures":[{"sig":"MEUCIQCAFMxhCdsk3hWghT+SGjeMhbSyYzy/WyTUAAM1Sf3iLAIgKjdCKkbqn2xjJF4/9CWNx6d9oCr1PMOpyk42QXYPiVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUEQ//WtyB1onvjc+V5FD0c/5eaWhD2pZzpb0fjIOcyWVir874ij6/\r\nOzz4foxKBhGrwdM2gEJdnH1OKBORtXAyfcuTLPlIsJ/yos4OLx4zh9WQ1Yuz\r\nQiUOqMQ9AGxc5yfM27YZn+TLCDvAcF+q9KY2EoGeUyexKHHcbv9Q71eR7aQv\r\nPYArf3rRmUSrW2mEWAMcg51gBJo+5gWm44rmLAcL23Zn64AlE3RwiEQojDww\r\nar9rbVJSJU6t2g/u3UG8E2OiqZpONUKuE0vT4kY6IU2ZVWxXCJw3m3x4mRqT\r\nbZ2i4Ev9akBUZb6KuQUWNoZd/8000y7g/MJB195+u97kHJjxhEY9MOBt1enl\r\nnCI5d2e0ReCmWVjDEqrEsON1ZfXZ4qvxSG/ZCjkhb4UIhJvnjGnnFKjnLoxQ\r\npP8le/O3wSYhl+Wp5Wl+xSF+5FxKOQ2tEWwR1SyaaYA2enQN6qeni8phOcEL\r\n8mMyK/lkpmmWZD6QYNhHaCUryeNzY1RGGevupRfvd8UeUduMBkSHC5LgI2QD\r\nIrxGB82T52aZ/dHTOzIrIHkyhCWwJSRLE5hGGctWlxamNWrA3WY0e8dN/RTk\r\n/INS6qRL+NTz728H/UWGp68ojP2a2JdLNwhvuol9lR/EwmwqU0t0le7Sfnww\r\n34XtOPb02BkVD3vKWQ7baC2cp5pUP4LQB30=\r\n=+3Iq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/tokens":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.fa7d8d44b.0_1662578383608_0.7244614373210747","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/card","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"126e17d67cdd6368cf688b702c02a3186681e5ab","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a40e3c768.0.tgz","fileCount":23,"integrity":"sha512-j16jx7ozrbNTev5TTPYAZqQ2D+EN74kr5cZIMIFRY7nTeGFjwYblR3H6vdhj83a4ba9BgiqCgOMiWvqmHfhjBw==","signatures":[{"sig":"MEUCIEqBySIFiKWXEVFnsggS+f9ROPmrsqCYb9H/TGnN95yNAiEA5MQZ2V80Umtki1No2rBX9JGp9VZ/xHAbECvzeKAVmW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo40A/9EB30wq8BM5VsCHXzwPPHIKFOaEedzqNXr7Y9obzjiK4giYmo\r\nTuThTKxOuwim2tTsScyVV8gSx45izBPGIduDLeEtS1X1wnsiTsuzWBjfsUht\r\nrSrnjEM1R0fuy2U/eoukpAQqERZUqPgZKRWagw9M+dNbEApaBP0YoYIkIdr4\r\nuCZQeju3H35Yy1iXDXUgbAP3MyEmkiKSVJWCI/jxAyVHeWpeRyhI85PJGcZB\r\njWTjGXWNKVMuvQx4I7XCHgyQTprZC6uIKqIEatVyvN53ji/eL9kkbJ9zb5gE\r\n919qWuRc/eOS8ARNRDfhifp+YEQ8Cr1afZ2LEIr433YwO4vpbeVtW8hT5IvH\r\nz9zfIkpdbTsLjIe4JwikFbrlzWu7oKppKfQM0a4QTaDF2qdBA84DTym/pGeL\r\n90ioV2uLqKlihl+rdvwfoSkarI8FLLyKxJ8S6c86RYrxK/hky5m0f/bt/woe\r\niBCraWX7cO8fGGu04JfxWItsDFYUSMUrCp93SVi8MWCc5ldoauVDh4HmJ9B2\r\nwnC9yCMU5FCu8F8QGrZUzSG2x60k3fVe/eQo56aMiFgalid9emrtYmrZCuNl\r\npdsM63jWpsGoUOi2Kzdq49QclFmr8MdTbpV5mclplypsSJ4T0eLBoP2YWj0Y\r\nREJN/TYCXomCbFyf0No8OaxfY0czEhmRG6Y=\r\n=KvHU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/tokens":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a40e3c768.0_1662753879988_0.8885600993763991","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/card","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e6bd36881c601b75fb7d1f8ce4ce698a16fd2f1","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.18cdc9a00.0.tgz","fileCount":23,"integrity":"sha512-CQYsN5FL2xJTO8FMzhsAYaxOOY4wjR/aWdtCvVzhQitC3xk6gbhJfcczY+dVkyGMYrGCFAENUM7iqig5dFzA5g==","signatures":[{"sig":"MEYCIQDnkVCQbHvH8RCw/Q2yYrWVSsCSde+cz5mMDdb+hZyJZAIhAJF5QlPayJCsnYGy2pIyeYfY8lTlyEG20Rkwqcm9LLQN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYqA//TltDpogb6psYUlM1kThpylNwp5Tn/djszXuVrMb9WlM+ifgQ\r\niskK2aeVKu0IO64m85E4IdZrJBVPLT1IBsLshaHhJK+maNF6wM//6POghwNR\r\nWmf/y1soarXT3ET5PBmO8xdxAJJCh1K39sLr/KPEN34k1dO7fLm1SAME+XWy\r\nwpTqzlfqChZPbLgj8FCEQ9nVrPyBFtV6OKKGSqollOLPmC+zH0uoUeb91zHd\r\nP8L1nKXBSZg1HK7+kpMDJkYdqZ2v7oSUdQ1uAAbU3RJaeowqW0FKyevIz4e3\r\nobRobokOM35HmWn+bOHLxqgF6ysvgaQL3NZJJMvs8TBERCkJv817t7WlkZP1\r\n5IN2+KTuc/67/NdkKtRumQysiwXftEjDPQFc1sVpr3aCd26+kgAWgkNGczCi\r\nOq32NaG18R4XOMJEjKJXx8bvG+KnPdw0vM7LESZL1Ui0xAJpW/Vy9i7FT8lS\r\n8LLynwJOfTsqw8LkKntpaW1qQolgKuAfLXE98FfISx4w6UcVSFAdPaSfYDkd\r\nSmST/IzN684kAqfA7Rpy8taiNMS0ChFxfXHD+AZgVcH2P3E1JqUHkz3xKVyB\r\nfx58YAnkbYgQhKyPhI5ZaG+mlxIXz2alc/G32pE+DaD75fyXfrvtIcKWop0D\r\nkbhORSg/91Z+1BeGAbU6klqZfp+b4s/71Ig=\r\n=QVXr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/shape":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/tokens":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.18cdc9a00.0_1663016624716_0.6590081590835744","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/card","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac874af27b62ccfdb3029c3e4895109a882327e5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":23,"integrity":"sha512-HyuhF7+lVWbJ3hVtpvkuxwM2XDwasutVgns72FBICGverM6fV9rHqrBewAg9mOtfOFPKqmAmLM6gb8hc3IAtNw==","signatures":[{"sig":"MEUCIQD1STGt3/QKZ7qrjOSg7wd+eAibcyXepTF236EQd6w+NgIgDfhgo0UyVpm3hi4jHs5diGZH6iV28nqOt4+peR6gVQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQa8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrk1g//Z4H1/962qukxqGjEsdFZ5ye2zbqEneUP/RxSWO0u4p+69dZK\r\nSJi2NVl0SQZ6D9C+eqPMmGiKY7ouMjv1JGwTMjlJQfPc3PPsalykDSRkry2e\r\ndMjcfkccleJsKaWz1sHqWNCvYFhyx5C1jyP8BH6DOPP9tf9dP3T/wPM+JcwF\r\nhYzLo8a4hOA3T0S2O6zvJP7kP+ok8fCdoFZmfUO88Ri3r8knson0ulcdGPNK\r\nQ+JTYi6YuRlJ1bms6oA/3iPeErEZTJX3cWIuE+b3GvY61T1L+ecrekT/Swe/\r\njU1tzAVXRB6S9TX2V/BG7XVbW+YXBL9FlhF/yqWp8i8y7ohEzpwWm5NPiDYj\r\neAP/eGU+V0N62MXHQ1qOM1sDg+JDmYxLAQ1KZ404PiHXKSN9FDGZcxYe33s8\r\nTkBUz2g4y125XFXffcifPjUu8xfesddg856b9wzPKXwQj+3bHqBuxL80TpQ4\r\nhMlEavGnRZeT8G2vMrMwJvjx1WiGiVq6D0LC7I/yI7GzGuF9VzRgXBEORtZR\r\nGK4zz2oEaROCx77E2076X0xMAQ+hocHqIO+4LRd2zSvz8NY+pKXCQjvJOdmq\r\nN8I8zIfxbdBhoiH5RcuSCnG0Cm0kybciq4D9ax+Nx6Uoqt3UnjnZcLzc9sFy\r\n9bW+DVua3BaVu+PC/UHQ20ddTIQUdzbFPOk=\r\n=U3ly\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/tokens":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7ab3cd3c8.0_1663108796207_0.13576616780226392","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/card","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2860d244d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfb789c059806744c54f7217fed5b739c5b5d2d3","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2860d244d.0.tgz","fileCount":23,"integrity":"sha512-g/vIVL7OCB8EjtfS9JIZV9THScTZosqdQNL6e8qWehuMfsKRAGhxTqlX6jpoqq+YUzW06Re1rVKC+96bkdaamw==","signatures":[{"sig":"MEUCIQCDwcSyBMJspGlm/sD0gj5jljyZauhwhoETz+HpD3m8LQIgVGS5iJHBIlXtj0wUSoZdZ5tg2TX81NxFoLG7KdAksXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2PxAAoFXZYvbxBBCIfdQqjfePuLEExKGBnV1B43OVeYwsv/u4heNV\r\nq2XyappwMha5DneLKCzDopzr3UCb+CyOROtkHoDFuBVyAydOn/bkEQY2Mc8J\r\nLUggrHHFGD3X8wtMFgP/C2ojiA6IHSxX5hxYjQPzRa/rnJmR6mjmz2fDVEdk\r\niYHpuavVfL+eFjtOToCNB1qrD1p7PB2IXeYNlNYd9uHuC8OmQ0bm2Y9OZHxL\r\nX/GN7cx2uGZHLu+EpHmksHzo1l4bAiEJ3pxDFMEn0We1+LpRBaCZeGBN+BHp\r\nGcgSg4yzOGLjCDr3sCjACKBlyCXV6qPv+c5AhTsi5q5LosT9C1u0V2mAKPlI\r\nHZiMh3hWAM6RAWymRREbwaET05gwyhxMKUQV/u4Go0cQVOgJgPYb0ZX6BTDN\r\n/Ke5kFWnIyPUSRCFs3Sl1P6awt3+Jfomo/lO/thGEacF4Pq7Tq3F9r+5kxfd\r\n7tCprc4OcxINWH0d1Vq7cF3o4a1ixotqQi0b09PFEa2xk4CqIsK38cCdy+dq\r\noN2YZx439/Rpm2yUlU05RWxAAizCrwdzK+BJehVljuXAHNI69S8Pecgb0QYn\r\ntMMGeyCTwaJUc8MXY3e5m93D6+h4kxDBfquvfeEWyyB65pRi75ysUNa4DENa\r\nFxEExICuzBURcSguQDTjfwOWXgpvEeu3pX4=\r\n=Fw2Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/tokens":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2860d244d.0_1663368935551_0.029636608858980118","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/card","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e8726533c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0daa178cadda31f05806e07a0e3cd826bf442f97","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e8726533c.0.tgz","fileCount":23,"integrity":"sha512-3YjQjxYfeI+Y8AD7CIcxSyBZaJjCDAjcgKyt2NtDJM1KNmPgVhM2T49jX77IiqdUcn4HTCLNH+HpgoLzFD1qdQ==","signatures":[{"sig":"MEYCIQD9SpzDnSJhkZxkCmBUSFIZZXUKJMonwhYm5dYMlTSFIAIhAJ2aQWIyEu2RnBT+gW1sImTuVAtFJWv0gDUw1g83nvnR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiARACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHTRAAiMhz4SEzW3sUDYsldq03EDhnB5gzDjnbgKzk/oOuOSPbYwpA\r\nsf10SYDQYe60q8fymbSokVinNB/qupqvJHiQoF4d/cL/+z4lRtWQ1ubMn6dt\r\nrrYbYVlk6lxXspq77EZl9O0qPajcRtf6FA4oJ6iE5XtwTebWF4MKPv/R+43f\r\nyCm4eGZDEFsVFbM6dqBiLVdkS9jDXOb+Bt2/vZpQG83XoTf+oElZFAS1Kirg\r\ndAvfsw7S8bCw7/sSxE5agHwepJeJ+o/f/hYVGvpeGe8dcYZlrW1W1lJsiEfJ\r\nyXMJH/mDTJdedwCewuhrYcAsxm+T1bM36M3Tjxh1dbHdCgeAOSAASOGk9hiu\r\nhei3nu84g8n9EUcL7nbV8Us1Qp1xi4AD35DhDRQpZdwjAnbSkdHVPASiskXd\r\n+ME+bmzpFlxuEjOipE6+FPvdBYj5mj1EwVrCPx0XUsBfBFW1vcsEjyaXiEgc\r\n2pE6IaG4ycGAi2Pycz91uDsoh2M58lHE62PC+qe8V60giBjQP5LTi36+Gfz3\r\nDdO8JKhCy6U9TK0vC8RSwBfBautJtg70UKirxFUu5jw1fQp0KRuAAkk7yGJI\r\nsI+jKwOopcsq5Kkdtj7tw7rpszTSRf0nplbuOyrpbAg+TtbQ9t9gadq6zAkM\r\n4r+hwuv6kQikz7kbQtZMIoRSHR1fNTo3wu8=\r\n=1LTE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/tokens":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e8726533c.0_1663705105032_0.4817702517180835","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/card","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eae568d1b6fba12514658434b0ca170a1c601411","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.00d8de0aa.0.tgz","fileCount":23,"integrity":"sha512-AdMdDT28KpANMv8/mRAT6xTDI5hFbbqKNOQMA89WQf5vSNiYOhMW2N2Mrq1tjioINfQwCcK6GSWyOnVY4lrA2g==","signatures":[{"sig":"MEQCIAMbspllDFNZd8ckugwR3MPgO4dQnkmCb1udHDrJq5QXAiAUr8NMBxa+qM/depG/8YbRVybD3V58npMBNCf84HU81g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyvoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+FA/+OKnQvdldlBTblq3XEGv6t9VOA82zEu4BKqDc2Gj555oAW9XM\r\n/QFNAsSduFPTP3HVSycjycybKaU8HsPGc36u50k8YVRtbkTA6p8GT4PSTIRz\r\nZ8qc1N1SQEa3WXvwZNDZc2OczJI3yXWCHmBAIBPKqcfv2tJ/w/a0rB2M0R5H\r\n2pB7FRw1VmkniJRnWxLAsItdkWjBx1aZIC4Wws8+VW4rCX1nvdetBfUJMSCZ\r\n/kJpPj6tVMBeQBTOF8d04p69043YZtTU9pwPw364ubXnEtQ6omyLNXR5ATy2\r\nbHGunYj3CGaXRdHfR2I8XsDC3yKWSohtHZ+63MAXMJbamlcSQhA0LWQU21Xf\r\nwIqxjfCdACFj2vHirCZ7JHn5PbIzWFmsOJ31i7zYB+UF9iwAeQPMR4XjV4KK\r\nxtzThGsVBtZRBcMyOOBtsr1QJEopmcbiOy4vLWfG2yiLTmtgfHhjlQiFbref\r\ne/eS/GH4lCQrFon9MCLhiHsblzxg+DdKpbyK3dQw4VdmPfUcuUxs/TqQ1xDR\r\nev+ow9Nwc1wN42t1wWq1tUAmhob9yVncNWpKYCbnWc3xek4whOPJAwP+d61g\r\n3DO9S67Pi+dwvBROMyo2Ltr2C7pZ+1o40QsYFCj8xqbu6/mzx8e431byQkCK\r\nAHkN2wAnax1RoGbji3Gq1lKCd6NvBmTFVhk=\r\n=SpNn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/tokens":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.00d8de0aa.0_1663773672498_0.7465652422006843","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/card","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.271aedc30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc37f5662a72fa6770e1b353c676521b8116f38f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.271aedc30.0.tgz","fileCount":23,"integrity":"sha512-oCjEa681KJiU5US4TgfWov5+F/q0fP5cJ49RUf6S7QnodT+9k+CGyZH1uKXFWyvUy/Z61/y1eaBKuqZ6p63cjg==","signatures":[{"sig":"MEUCIQCS5OZDu464P+PGCPZ7ZSGNU8RC1b/y0yojODGbuqvg4gIgZNvK1oRXqRTHwEEfudKqN1/zKuZMw2gQx9JJbqweDXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVBBAAhDnsZsD/9tEvzQmI0wKWVxislMYTQ+gPANI28lFaFAPDR/4R\r\nLORBIVYbQ75a1wuNFXp58eQMq0PavxinMJdFIp5lXac8LVXVhr9QCQQ0O9jg\r\n5lqsio8278XBFgUT7vGGZpR89ApTT3w3BfDXaCyskKxzaIahCnOBk2YoCrDx\r\n8sb49Gq62weAuHyrIaLiN30N43b/VH+fSpKmxYzYRs8YxroRtREcyGrH2K+5\r\nnOLc2RB00Yf14WDbowb0IGiNqMwJRvdZuOo3l8kMPMB1B9g+kso2T8VMtu0k\r\nTpcJsZlTDYQ8PFhDpo5UAR6IwglYzGK0zb9ZYePB7Uec8+dnMnh0atKu6cww\r\nne+LNNNU4uCHXqQ5qRg6H23GYKiM892gNcOIaK4/IzAFUbq/AlbnBrLUza18\r\nUBd0QSZGcAonjai/+gX5dSNrhLichGlk9i7t+mTNTNr5pDPTHuhIHvsMU3hM\r\nWNf+BRRgHDClBwaQYH9ou5382BjHIhGmwCnh03O5vQ6YWWLUZoMVcUOAwSbB\r\nBHcYqrLYpsXcZwwNQT8v35DFGeZcEtdRu4pdmQ2iCxNFOzDQW6JgaLT2z4Dm\r\n8qtMIfh+vtbdBSfu2W/webY+/M+eFPIzSnVJVVn5elZTgy5YYsf4+FBFJkoR\r\ng3FTJA53WxN04/RtZuDBYiMupGJ0j/nTMRs=\r\n=J5hj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/tokens":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.271aedc30.0_1663774605873_0.05977072984726939","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/card","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef76d12c153803d988de999a3de3d26a5cf90da","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d3344c16f.0.tgz","fileCount":23,"integrity":"sha512-EB+PuFT4pCasd/Jf0WLXXw7V4KdgKl1Bk6YIW+vub4qrbH5vxXlhBu4JD06IxDSrfzpR19uRkzJygKKaLTz1pQ==","signatures":[{"sig":"MEUCIQCAsQIzcbdiUYnx/g96J4hYnObuFd3Ru7/Qwy0CIv+wGgIgAWcsEmpSUve5cx8vKylT5NANsj150eZUhxVyxygoJBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCn7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvtA/9HmggbFK4P9q6PqvBKLHgUF3bsX87VQUEoEJUtvinRjtwjEdK\r\nvQA2TbD0wJnB1ULsl29oOHSm7obvMNrROm1+rwZXdXvIsr+5Mzda+zwIyuoL\r\nXDp2zyRqAn0X0Q0PIcnefSb5vAHTn6HzkM30XXjqnjrlRX6u2Get2SoYxdIR\r\nkXSIAO7Nq0L3yMsnhbSW3k8o5K0CEoxlqeieOF6CRvXT5Bfml7+uHkDyVgLo\r\nN+zZuhAfHMvVmMFEtHdYkvrHRe1z5nNrPUqnTxgDR/hAYctlVXcVmFktXPRh\r\nSykWDN8KcTFLgOxhFS6MqL7v3MTVhnNCnQVKRV577vmcwdga8djPsp/Yohpy\r\nQQ+NqowJukqxvdhXyKRMmIkCN5tttvKvYKZnWYzDiQAnbsHynIaXunlFvDwO\r\nCfXWQ7cvY7sx+TWpsCZB8CYH3ZJG575sBi7N8mEQ8Gc4m7xocKFsAdGQrlqI\r\nu39AAXqZKMFaVfepnZCCOWDNfVsD6e9xAab68pwB91B/L8odYyrZsl+9Ys1v\r\noBNDRM0K0EFiRK8BIqOB6kv6T9jCzh9P9JFNKfBg5tU9aYlMwRj2XdqsQW0c\r\nLb2s4Zhd5OudrWNLfyVj24FwzlNpmqJCMg+0zni1hz3XciNZq4cr04XBGnY0\r\nbtQxcw6G8LNBC9c5XZRSa5PFfhuoOlySuG8=\r\n=2yCE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/tokens":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d3344c16f.0_1663838714885_0.0025379002734302603","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/card","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"088f08eed7828181f5d6da569efaecc42194f8b7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.94f20ccb8.0.tgz","fileCount":23,"integrity":"sha512-wyOKh7CclF6VEgv8cpE16QqbsvyRgFLYLSQa5mJWufiuKuscaTdiYWm1wklf2rjNHvMVkhFEuEiLlC20k/1iUQ==","signatures":[{"sig":"MEUCICfrmcqeRuh3sOQS3B4XpBCicTyYd7IfnEZLgQhyxNEQAiEA8Xq6JLZhN6uItBolRoidUhAWw9MBHqUIHJ8eRTup4MY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMokACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFJxAAgjOBHGg81nkap6LMqJ5eeF90oC94wZieLr51EiEEJYkuT/JW\r\nnhmohHcHNH3UubzlLbv9uqkUfDgogUxdB+S77SV8ah4ZwL7/jT0gjiW4bBt9\r\nHejXyeATL66Bmre/FYMVf/XR3+kyXRrhW50If0WL5yPKdzTm4zhlAxyV0LoS\r\nCR5Bpc6CE0iSPdPLj/T4jjWpMTLJJ4MXx8Zm3HwAkJljRLxZ1byI+RuRDMlB\r\nbtDzBI2ykNzfWpE5c0QkWITTuV7w/G2w8DwpsAfjap2U6eB+WYhkktw35hcK\r\ndVmvl6hnpBtqEfGmvjFUugDo1IjtDCadRKBhwqTK/1MbeCZOwx38f7caidUS\r\nM0Jgy9Zht3fOQHpZkHeSq8ZIOwIwXAvAWR6hRaXV3BuseYtUWNmWNZzAf7qM\r\n9fWem6/jLLJXCIhTOC2jp71Pshi9vQnkXo1POBtx6aPBFB5Z3HptTMFaue1x\r\nnQ+LtyGHAz8+jDeuvgtWJoF06ZLiCtBAkxo/5v0VfZZFb1B6snfwP7yWi3Hh\r\n4XKGLykILQ8rQmK58EeKobpuZ+MOX4xzWswq1nHrSMNuPcbMpzMm4YxoJVXC\r\nYa7v4AlVtux0hji95x43ryZokmCoMlCRFN/Hg7C1KXljoTNuVuDdt6gAO8YH\r\nOVtEkR540gJ71hW8e42sEaJAvwXFBClHz1I=\r\n=OUTS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/tokens":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.94f20ccb8.0_1663879716486_0.6075971930001307","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/card","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42ca60d2ba1f11e34cbd698176c09e3a01dbe092","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":23,"integrity":"sha512-pYnTeUksaMasGWeYzxBMp4arNn2SLXXQoluwcH3E0LO8FgTujcpkKTq9o5Sksim7x8i17J8mwHWEwQIVwccCFw==","signatures":[{"sig":"MEYCIQDcXZb2Lkb+iG1eRfl9g3VAtx2fPkpKuzbNSonvXBBQPQIhAMW48PIhjxI4dAh9IybnRxaHN3ElLByfPrrYUK1MMAKA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcwDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWUw/9GIXxojW4COQrVYMO3bSqbX6Z7Q3FjB1NnjTQRGHFS+HOQ900\r\npbw1/m27rzA6rUUQDp14zEBbyXPIRjiyWAddH0CEKxmUGab4pCsxjc61+Zil\r\nCqOzUAK77lQhGe7/qfL3uyW/LU84RPKPnEPLNpB6gN9/WhXsQACFb4lU1LsD\r\n0dsnem6WV+AWT1Ay/XsxiJAO7awufRiU0nAN3NvOBQ+Cka7uAhbIcZYITcq+\r\nyCCx6GexaVTjjdZb6bsI553/ikmTDPpH3wYYH4mjM2Ro4ccCQPbvevHK0oX5\r\nbu/fBX8hFUIJzWhNcj++NtINQ1drf3lwSOA1n6koN1n/rp/axbfSamLiP94U\r\niH69sbCWs1blDfGuQY3POA4XbciWiFtBcpI7HnoyOsqGwCeJ2DVopvXARr78\r\nH2k69wh5ObxicK4k9kTE5+gs/y9P2mqi16iYQ2xzJ8QYU4g0XxafRvup0nB3\r\nI8+75mEBiMyGFHkZX6zM4hvTZGlDi6AmSS1AT6RtpTFyzks4QFSCZdXI/eub\r\nAL4HGy+cb/z0DR5IzE1i2/9m3dLXSH6auag3DglftgDOt3kEtdYGbuer0EAO\r\nWbJTB/0y0HQRuKAvSw7dTFerzmQDEMJIJeXK8vUdWDCxGINXmKO6CnzedvK8\r\np+jaU5gYQ2KZRRjFScX9enzRvZIZj9v8cGg=\r\n=D79S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/tokens":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.81e4cb7b2.0_1663945730888_0.2971985905121626","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/card","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f34872e82a0b6dff7f93433e3f212f00597989e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.aa85f9413.0.tgz","fileCount":23,"integrity":"sha512-GxjGdJWy2E3hOlfetXkozacbDAes2T/E4NZARIo+AVh2iTzxublTdsrCPT3Ij5gxur3gUv6QvP1jZaXyB2dqfA==","signatures":[{"sig":"MEUCIQDeW+zBiIdIAI5Q4NvAg6eC1253GigTCa/mODQeRP19/QIgKBGXxhtFlmXW8lrWEep95W5Lf/zKjf2tKSkKesaOMqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcUw/7BSVjqfZHja7rXhYirMUJn2dkXoea/1gdwlinYOkKD4iep32L\r\nsJVUMGlZmYInEIAdGIAqbuorcGlGqUqxCViMWH7rk2mmiIg+/rs2rbOtxPKp\r\nqobeyGclRy3kMu4xvVIGzwC+0W09cwbvmGQiLF9nULiY8wL85GS62ppsy9ri\r\nm5Y/EprOOqaBh9Cj6ykKkx5ymvz2PHKDHHDN9jvx+StlZ+hlNstrlnJwrk0A\r\nS3T2tVUz6/BXxJYvQ2e5H7wYKAkpOb07v6QIFrWlcJgnmHWJMOpEQYfk1jOO\r\nCpGJBWlqBnHwMKDBdV423QnjHib+f3AQCw9KmmQqokkOgzwo96KOAOfF6I9O\r\nT/qmRPOUZHFATrJTLnzBQZzuaf6FzFSdBSWLuaRVu9oktt6FaDvu9qbdQOVZ\r\nxRKu9f9Njknw3C+gyry15HymgY8J6/6sLSeIWqEXsxvEVo+TnA0dIwUtkb/f\r\nYUWwfBoCJf1ct80bSg7MAECGssyRt6U2Xwg6uKtmkrdVX6XKiDwaawYpw00A\r\nkEWcKrpMjp2MBrZujtx+tAAnKlShczjubVvlksZRZdeSw1vEc6Bwmb7I8CBI\r\njccHY3OX6yhUec7sTwq0bjDE8JT0CPth1xda4GD+BFd4fGbPYITum6y1WLHW\r\nxPM+qO+qQBWGpqugnl6tFUgnHZxW0cLpNiY=\r\n=/Yzt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/tokens":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.aa85f9413.0_1664215023778_0.7361190186052622","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/card","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7134a7752.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c312d53a46f7871070d58d8e173f0cc6d5af2f82","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7134a7752.0.tgz","fileCount":23,"integrity":"sha512-6dWqUiu1l7M248V7cF+UQzgDoHqC4NuBkRetH9QNl5TrV9jKtn0VfP7UHuwKF9BJWxECXHR+4zQQ5raCLY1y3A==","signatures":[{"sig":"MEQCIBRbn1gbcMd3HGTiE8JPeUeNM1yzwA3noh7asI4AEaTNAiBR2KP8eIjAjygXTOTNZRSzmfNRub1slLhtbqB/NBFVsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiB7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9gg/9GuumA9DmhtPVCwYVMTYIeGhHVyzUMW3FFcE5yVIE8ncos7+w\r\n+I8hPJGQTefABxT8gNIWiL4jRjekimRUdbBAptbKjYDitWuwComOTnNV5WwU\r\naoMiPPO6kK38o91MK+xXKgPJLpwHKZlpUXjlYXfhHkceUAQNYBAEge0gZ4Bc\r\nNKqipIKoDFG7gP8oeHl2uHzUZPWSLOEXXMDFU0U7SEzi5mhnduhgK8ZKABuV\r\nRFipf24MrwxfHT9ztoOZ7lbW2IwxEdbwdTOSTZxhw9MCyWayRfmiMPJBuoPX\r\nDn/S2NJWchx3x2k5H2Uhr3EcSUhLnPlhCS5g3YMgdIOlu59nBCLxqSZhO78C\r\nCTMownMDlv4caX/PvZA/YAKh8CjqGRTPONaBoN+VcepBAsTSvCKHQBatQALY\r\nJ/yGu4I5eCMcI3ynwSSEdxrdmUDt65B3UZM6gCqBEukzc/eHT8tTYkReAfUc\r\nPczvUBo6XaM41ZI9d67sKfxcGWsj2UGQ/0ql/vrAutdaS4rctekVtl1acRJc\r\nUpcmzF81vQRt1ACPFSRgiXja5blB4Oa9WqP8gZ7y+GCGD3cgstKD/Yl1sCq8\r\nykxet3bLEpyEdjPz8h2oddJJEtWUV9EQR5+N1bnnKkPtOLHKWM2I+qtoj+SU\r\nSZsi8Lu4P7U2QrPhj20GIgmrSWnNFhYHuOA=\r\n=rF0b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/tokens":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7134a7752.0_1664229498808_0.0434186972599202","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/card","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b7dc76c18a99bbf3c7ecf6c84876814ab41323","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.70b8ac16e.0.tgz","fileCount":23,"integrity":"sha512-G8oOLeL2ExoUMENPErWITC4GPaou89UJGEbZrJ+yBqgnBnrOi8Xhl7CT4BmqF+cax6UfYH9eKWJ9PXaNf9hYHg==","signatures":[{"sig":"MEQCIFrLh3mS/ygaLHSmGErqWnD6n/7XfkmPC0c5LYiXMKgPAiB6JQ8PiMu3O0NE1a7KHfh1N8fbd5KViLAqft2wommoXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Jw/+MLFOdu2jrRhV0A1tGvcAnVGCdgGXEG0xv3BA7YlQuirs5DDi\r\nvYu4iqnyYfQQ41lk9wtKlNVPgjm45PPcDFa5w2ltCrYW8G751Z0Aap6AQDhf\r\nvvsMYSIsQwYd0ISgjQFAdB7HL3tShnA3QOcmWiB0yOB1l5Bg+DMHJx4s10Wo\r\nLj66UNyvE6fX0Cpj+IPknGBW8IMyjbcJ8CWWha5PbLRc42ZuW8CobgtdGCps\r\nTHGIglQkcmLi+eOQJJo+92Y5yU9MGTLopS2NM/t0mWkHqTX0EkvvN5LquEl7\r\ntExvwgzUhS8kp0i01iP2Mb9R+VjDpvpfF9EfZo1rCo8dlsYUJwbBk12Qd0Aw\r\nCzovQrztKQLDjnUVD2QDgSGWZWH29tfRZ3P8XGagPxit4SNdvG+6RZ46l1Md\r\n6sLquf7n+r1jJ7aaPfS85q5m/iJjzAcISye3VLgu/U52qwoEQtMcHUWhrrTm\r\nDIlI2lblb6ImkZsX2mRqqGkFy1DWF5RH33j15lIyWAbNb0hACTRiyo7oVSHv\r\nFb5LrIDRI0/LUFyh5EecoyjJcjT+sDKpLKWMZYH0+kLyh0xOuECL6p5zn0eO\r\nkDRPrEed7itHIM0aPDH4BRQLsAil4txhdCR+wXPPrTMAlBYQOUuKZc/QEfze\r\nSXhLIUhjPhKou8Kp6ORRMccROUJHp3OxMH4=\r\n=kmM1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/tokens":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.70b8ac16e.0_1664318729548_0.3932441840706269","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/card","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c20d74405.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ecf3df432f6990c9df90497d9564a59bd3833e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c20d74405.0.tgz","fileCount":23,"integrity":"sha512-VVH9eE5LJRYRMWeODReNG9NlEU1zUDQhKx3XpfcGaTbGDVaE6wA2+8+/uTITRjAk0hxFiXlxZX7OzQi4RhgiEw==","signatures":[{"sig":"MEYCIQCHXY1c0nqjarCn3WPvBuMl3MljuwGQvSK8OYkRxt7kpQIhAOdowbc/PU2ThV+PLxcijoSYr1qHkvDycUOEpRGI896n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4flACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB6xAAk9/teIaWJm+nenrHlPeuj3x3Ly+pQ1lrDDnQT7g6RpOkbsU2\r\nGqNCsyu9eHI2nMqsEdcz8LA1vQjKEeRHpbPeQEiO4FUg/fUsIC+OArfixGq9\r\nLn7p8tb15Z5mAyW4++dzjhOaOFgYWSfttJ2AUXoKkQy6Hboy6gpTrRqZ/EMk\r\naeQTCoheKfl9Mrr2yjOepTtA4UrAlxgrJBA6Q/dKH3zyMqA5Jrs61DvqCVro\r\nju72df2+ClVwIKu4S4YFAOtrwWCsdgly2jbcHCCJws9jdGoOaMrXzF+hPndq\r\nLabqAtCsf+c8KH37jDMxlLGzXkwJf9YragKcgd23cGxIoeHLssjhheoTbPHm\r\nHR+WmS4h+znrHHx3uBiWbbZIpZuHjV8GkR7Hf7yVz3FZ9O1ZDt0aAylwoGka\r\nBJqUDcI5aopKhHDUvcBEvX9LpZKxVc3sfuIIuotxahIqUwdikCsa61InxhIY\r\n/kes/Xj0sJ9PhW5HcAWi6xR8W0oseszy4amxGtNIMsQfBx45Qs5Mn7iPR9u9\r\nnIC16cr4TvA+1GklimI9AdV+d8VAgD4x8unF+1e6SwN686fVqYaRzPefKizg\r\nki7zMiHYMBQfHB1lKa1Za++SqTTRLqOv0zJxkheDf7h8R5KdEBdALIdjiTC0\r\nHiM732Muzl0AMAAZso8a1dtIy2rs8N512Ts=\r\n=bYVL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/tokens":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c20d74405.0_1664321509561_0.7613216038117445","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/card","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3985fbdfa601bec4d29b543a81749c0a75859997","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f033fc8d1.0.tgz","fileCount":23,"integrity":"sha512-g5WDgR/s970LhcApabx4rCnYKNaukO5D9FvKS2c1M2+AAFg+lL8lGDedxPR0tzYOqzbV4icbv6jmFWP8iYQdmA==","signatures":[{"sig":"MEQCIDeUmhGfmU+PRY9vyU8aRWNh6nidF0NpicCCWiJoNkBIAiBBHR4yDhSNtJOjAAaxvy+wHFfjT929shZlLWu8ULs8cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM44FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1aA/+NpX/eoGjzg85I6mX2BA/a5qIbpxeama7vHIIm9LyxxVCW1+l\r\nPN7a09YrJwKOFGq8wMsHvQ8ZtYLTmHa/6W7xYbh4HsSmFitqBasgghpBWBxP\r\nkBNaovSJfkptSPZuY2yUPdJ7IVSPD2Xx71Sgrsbd0bPkxxW8jucQgHThI88Q\r\nwMkrOn7sf9Vs5StMEFS1BKLcPnQ/1kGIbUQFjvwQ504K1eEoS17NA5HYT84Y\r\n4vEGggfDEMb32A2tNowx11POXwALdYBuyf4Ai56IFqWntWn440THpAr/Bn85\r\np2ye9bpv4C4qjPEn55bmMcyekrQhPJEY3jGA4rWBl1TFfJvB9d/kbGN+0lLm\r\nP/l1X86bQ0LeXfUn9/4iItCZVcC6koYyZ+llgP0Iy5QaEArfrN4edIjPMrqa\r\nZZ8oGnLEUM2/9Lvy26Aa59h8n0ooDHkWHMqQ6uQvzHMd4Qy6CjNgGuS+8m1D\r\nKjxoY+fcbr7/XOeZbe6LkV0s3t4d8LEKEbEUnXFKHzckPUa6XrL840JifRsQ\r\nDE58M5v47aWJX/hC49ttkjJPS/u1gIUaXTeE7aHsFbVujG9ermuJgGa5YvPs\r\nP9WFJlA951JNiuOgMgLJe07VEPw2MU+LE8qIEQZKkpRmZ8NIsDvRpZJRXJkD\r\n8mI3X9GOp4jHehsPLGXxWdskTDEKDkInudo=\r\n=/pp7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/tokens":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f033fc8d1.0_1664323077334_0.220779397228146","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/card","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b206a0ba77732789c64c20eba26112d450a78201","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8d7ae912a.0.tgz","fileCount":23,"integrity":"sha512-MHESuSBiwjOBA6kOU4FB5M9QzjavcGEPB8tqpqTRyW0VF8gnSfNM4iFEUJyiLg9v3RarWylITUCGRpD5p5huuQ==","signatures":[{"sig":"MEQCIDIPcyLp/DrLCdtpCc6UZamSVR2OQo7HoE9pzpxlF86pAiBZrTUHBWI27f/D7Wlip4+8yJxBycl6B8ESDqiqu6ox7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtrw/7BcVjdjPiaaPqO6diWVjfN7RjUGEH/Q27y/e7LvUvBz/ACAeQ\r\ntpbfdum0cfWMeDqMvvT2Eh5UwIUywBSEMTnOm3n7nUZzvMH2/MT5Yvie14kg\r\n1LxRlJl69lPZGlYSQgbdcHB88HL4Y+R7tSSfpYAB9eAvrpAIWSNiwyzfuf0W\r\ngjaXZ198iDCuJZdAaWTAc8IzbP4VcoOBUDFQH48+K/m+l3LI2MyfSuL/mzqK\r\n+Nafm+ungopo7wO5qk3IuBdveiWqrpZPiq0dcWfwxgnJ/IXdi1JfEiHF9Lh6\r\n5KHVZN+wglgUTw3C0pH3pQEhzSIAa1BpNuYjBEbkyvoNWPsMtblcNlhnZTuZ\r\ni6kO7nFNc9UE9ypkACYr0rHwlBZiVs/YG6fozt0a9R2k53L28334JUR1fgdi\r\ngLQrpzbldYbw+GN/3wotUtJf2w4pQFSc7Qnk4BnPekewPKGtvB84n+W6Y5RA\r\nHY/8bos5BhnyY2h48av/B3wHSx6CkjDxv74DbOUT47yaWJOV0/e1/lJRRoJd\r\ndiAnTzd3tsfgU3/bID95x2gpQQMcFkLwJxNPJFuB3fvgneZOPjJnyaojEcsB\r\ntZ0KE1r5ryIeOpv5sIoy9EH3OUunlXe/aaqprADpKkpI1ZTFPGJQaszakxxz\r\neVvIg/cpyNFc9LZzW6l3YZUJ8KpyKVTiRyE=\r\n=n6YJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/tokens":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8d7ae912a.0_1664351802706_0.7032487356253692","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/card","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.db414b864.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94a031d8ca79ddc3b119719913823545027b2885","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.db414b864.0.tgz","fileCount":23,"integrity":"sha512-xKIQgOAJ7YNyf2420opW7zvZrl9fxMRdp2uMU3eaGGLyO4CEVU2ZZpS7rfpb7Eq6Vbfk9NRbD6L/wljiUNz7Dw==","signatures":[{"sig":"MEQCIHmXVNuIMkocFhJFwqjY736zR7t+oknKAhUBNPzMuKGjAiBNvU6YZer9alP3eXsk/fPBuQ27yMEfBiUknenxKQYbfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpgbg/+M3FvzLweB3E7ay0MXuIJaQYj8cdaPsNBWojBWKK1Ieo/gcBo\r\n2s5PLLmJzaHIASTDsQEDyPhwDk4YYI+783BLkXvmzyGCFBGiVB8sEEz9zGYa\r\nIQdRIeUhK37Nz2CXe3+sUTwoNfE3UYjp2AdFtMYiM6Rhik3jK7nuoPVzE8zK\r\n1UBETKiKTwX5HlT+vXseitqv8Mxef/nMfupTLoPd3IlvFpq8fcBhnBAHR86f\r\nFKhq0Awqx3hh4mgUp4NWsJDxYNlRkUQXO83i4mMz5SD2otizlpoCek1Xbbtp\r\nWNIkSP/LtibbS7EvNwSF3LEHw9Bb0aqH/hECSAGms04ZBs49wia/XvLsL7L8\r\npAOTSJbN+6xex8C8067xZ+TqtoE4vZ4xMv+vPVPbGsPZvbehMX3ysiazDsEs\r\n5CsarerjbyQZP8OF42v7bRD0FpoVhmpYITQnGb8oPWdLWIfZOrg51Q/5dlMa\r\nKxSi9W3LchCadjDxZFdniEKet6wfLRvsqIS+1yqFM2Zugf/r6kGVjF/4GN80\r\n7TScFj4JzpmCHMlmMvRD3igFJ2ACq02FmrvverCT/UiD0nlHfdVgYyc9G2Wt\r\nmtkMdaFmPxKlMiAm88y3b1ZL+sKNpJrCxQnrnGYsPdKsZ/i4f/Xv+bRnYzhQ\r\n93is34y6XmV3n9vqyznDbmNYnphsmt6pq+0=\r\n=8k5v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/tokens":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.db414b864.0_1664376799188_0.9968038081323265","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/card","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac63d7b271961db4d610c3642b36b4cece6124f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.28cc6791f.0.tgz","fileCount":23,"integrity":"sha512-b+sON/zuQMdmnZwShsmmJdwSyjIc8afOv/Wc6pV78KsfKtWjeIFe467/tWk3KuGDtSEUtER4AOfsR1dujHEsOA==","signatures":[{"sig":"MEQCIGY7adntBmQdjwpqduBTZiHbQdKfW2F/Y+6R0h+nsKMBAiBHylXWnkjqYZ18aJm2LNdWWOeS8a6vd8/HU1JMuW9k0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHow/+PEMe13L+i7jeMUQaz2zV5gsryaBenJuYGL2pdcJQUM8F915Y\r\nNx6xQOptu+CBHDG+RUs+VogolpUrSXxLqP9oENDQhZzc2LVaUKQpklmPR2/x\r\nq7veAt9r8czh5MR6rVOvgHiXoC0vDvZ4QvNhXANlGxndVfae3EaTz+TN2q1t\r\nDiD+cTtm4/KXMKV7/T2swBrIcWkBaybY4UpoQEs9u9L4ST8FzeKNBU5BXNrD\r\nqCEnReqPxD8ubqhdeztAvVXxM5pTKJRoaYyF1/2lbEW5BJAMslduZLypyd3q\r\n0IrP1d/ld0udhd5e5xvQPxw7JDkbk/JR+RsIjxkow2Bhd7ozeEu4FQbRYyKU\r\nlIpMqPpjViPRSXfMU2stgo+mp8dKRPV3Qevhwsokshyzf8tO0+Vr+nDuPhd9\r\nmigNma3rNEyjCcmbJdhsn0y1p4MQ4AeAusMgz/8DxWfJULSzU97VEq7EjQVf\r\nV18JjsnpnLHPorSEpVSI/55cLvlSXMIDAlSBhWN3WKbEWsLzD8oI6L9NRJWY\r\nKobvzzTj8P9O1Jyq9b1ki7IklnYz8T93A456PdJCFO2WErXdMYB60EPOMwAI\r\nJ7ZIaqSuBTfOw8tmZHlTdEhShenGwp6Y/vznXjHhAMDafO9+UWilUWY6CICc\r\nrXuFMmbM9bhwzgMB083ouosvy5WqEK1xzT8=\r\n=LrRX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/tokens":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.28cc6791f.0_1664388463033_0.6033574157683641","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/card","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c5b7238ec4fc6949804a84858b360149824ad9b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a515a2d18.0.tgz","fileCount":23,"integrity":"sha512-7OQcfTLlMA0q4mo5OrhbkuF57SUGinG7pj+qvbCprjWgMSPlnPYNmzmjHKcHA5TlGEzXDeslIibsIVtdb8i1KA==","signatures":[{"sig":"MEUCIQCMmoOAJEokm1a+QO1kkjMJLvnp3sNDiKD4qG2DqHQjiQIgNrWHNmceca41Jr4f+Zl9d8CY6q8fCtC8VqTiErw+W5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMCQ//Ukd0+m5pxCPKE3Or7sdjf7RmTGPwFXPv80QKBfZTnEPb10jb\r\noW7qG2LxaMAeGLwNzdwNOFkK2sdiGU4vEVgyQKXDOwt6VJMXcqJfiTNX1Xy/\r\ngTvx6jJPaVf/0L3e36TQGjkDMTYdIAqy2c+6s2VKsEUlwTwzP8llmej/s+S0\r\na4HfKmXxdL11VROwQB82nyaKzsYuEVy4KTCgrNWLbmlJFPbYYh2C+7YOaIAL\r\nOQ/axHt2PBTSTpnAp4fVz0bGolS4afQJYPB30zVlMUjkiKPOD+szzKiACbFY\r\nHdH93CN8arlEwpavCv59FZevk0veMet+YxY6MDNO75MfHnAAcn7oVFP/RxCd\r\n8MP5KW8oS9MgihU6X+TCMUD/4bFFHstZk01WCfxIl5qtKL4nAV+Z/Orh9Lky\r\nPsT5kJaqp4+UkfSNFjoOaP6HhrZHcggy2TL1JiUf3inbgRFSopEcchgw2mee\r\nLujkHeClTEET+B3HGkO7qpO4EQPAh2oxPX4qKKRLGc8t7yLi9P5nzi2bPSN1\r\nLw5w7nXhmbtTfkpvux1NlbfG9+jdTXu4xPZXJZ6lFJP+ONlt7T9QHX1YFrab\r\n5QiN67hXY35OwbcrKWiC31TT5m1sTpEoyn7+v58+C6OqmBI8LVDvwC/ccnST\r\nQfvR3Jq4QL0PNkxIGRuuVhMti/1Q+X7y8BU=\r\n=MNA6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/tokens":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a515a2d18.0_1664391383196_0.493318818003168","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/card","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ce9523167.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"634915e55a6e60f2be8c3199bf95c5e16a9e2d0c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ce9523167.0.tgz","fileCount":23,"integrity":"sha512-zdH5V7ZCHxonIAavDBVdI8zZ7HhZn0UT5VL7zqkt4mPQyqDINc4dXXw/7lsoYj/uPkvCLZoeTVJ1r4tnO50B9A==","signatures":[{"sig":"MEYCIQDz00lYujcALlY19TtOFS8KFo3cBmpYVKVQlOXtfO1maAIhALxdE4hVWCY/f7pLkVnXufOVJgRlviSfRroEFlvTRb04","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgC4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq8Q//VQyw6zsdCPXc3Oh3mIs007hpa/y/GpqZMLju2fBoSp5JeVsb\r\nF8olWhWQKvbcEfw5As2c/zTHA6h3jZh+ycpLaG7WIqLf1S2zwZh2TpJGX/XX\r\niOa11FliynlkT04kPEv4ZTKthZmytGa0WpKoypni2m2E44HVAipIa5+IlM6Q\r\n7LDjx/ezKqFVYmqgiJK/6pUsa45I3MwdsslBVxlnghzpxfd68JeA4ek0Qq58\r\n7AHSYkNK8YUfZ+unVYIol1Yvn8YOfNNMaHZR0BNs0I4Hjzh996h5LsVqKNII\r\nfoO8JqhbWRlTt9soJelXdYUELhhwkl/Okmko+b5+J3hukyMs1FRHFLlJIa9i\r\njcE66pdo5+R+3HmzPUjZL3wZ9GI7uakt7hWiCDklg6z9DI1A9YLFO8G3AytC\r\n275RkuTH7g106buDbBnffujVw/lA8T0/eyvIEZbfN5MeQh2b4Oc8UOXvEAix\r\nhhVbpNY2bRc8LiNAPI0Xu9WwenItWh24Lth3jtdU0wcJiJXkMpaJ6WcaBIBe\r\nlDy8AGqZtGoxn9/rRaqsOUDmFjbhxKr6DBfTYVk9qFbAL7XvYqIrHE0h64d4\r\nwGxy8fWoTyIDPWtu4Fw7ppNTv7tSgj+CnobXFacTsXKi7QMBovCemLrSoZov\r\nqi18rpcseydfFyLkRRkkXA0y12DFWoZX5/Y=\r\n=0+lO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/tokens":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ce9523167.0_1664483512261_0.4823383276694675","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/card","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86117be7ea0db494f339bb68add48223a6ec0304","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b2310f7dc.0.tgz","fileCount":23,"integrity":"sha512-tJUMgU+6TBeNTQlI1sVQ2QKkjwcbRrhygyDlamSnIvIOnKL2/L2qcx0DjvDYqnaoJt7SJozkGPuwpKcfEXOWNg==","signatures":[{"sig":"MEQCIFYvGZEtxz3R5lPvjARD5WkTZi4lqcRAXSDp69sqS9ppAiBISfJgXlAvf6PctZe5FEL5OgO5NgDn33gRmRP9W6sI7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxHg//cAsWA2AA8aGIk7PAjtZQfJ9ppGFXaLEVPzVerOt6/x5o/k5w\r\nDUWyVV3ZlII8u9EbAk3hX8KdCSEzmf/XyYea4a6Zf1n+yOS6TkHn8+bYGY6g\r\nnkiwQq7Istp2/cot4Q3qozOfmmVVjHMgSuM5vg4V/u1zbgO0Z5dkBPjb9zqG\r\nJhsYZsJlA9YmgSu4XncBoMI1vB6VqCKFwsyeMIuwZnJG4GZn18AYjKmk+7fd\r\nlidFaRUCDOX8fhLxT4GDgu7YcQ8ERLnWpc24QtIARqlOCT5YchVxptHWzHIB\r\nQZb3rxx/uP/6vvi+oIAEJoNQ4urfVr2pjlTxh9y3rXIjE5NofZc+aieF36/0\r\nQljq2A73Djz9osSthtlKfq9d1GpMVjvs9pD5qfe1CCAWRjvyPm4YfMjlsbZl\r\nJDrUxQPR9+Hlcl68GmdFvI2x3YzKkJb1sh5hrCtFg6zSbCmvwqEnRjWQ2nns\r\n0Re0+rO5sAo5XxBLgzIMWP0DJ/D8CPKgWsoceubBhTkd8efquZyNHs/8iVdn\r\nz2S4dMVQ4pUXx9Hsunl4Ky1BxmYGeOwMN6PRHqtDD1OqonrxO69PCxx4qUpl\r\n4eHRZAJ2NjI146fuxSD5vQjxYsvpb5ESE71Z5qdVHWLlDYjbKPQ1pFgvkIda\r\nJ52zNeuOiahrie/pye824SXSX+rZlZSjL6c=\r\n=1N2V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/tokens":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b2310f7dc.0_1664496864314_0.08321862636598465","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/card","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a44241e54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da3ee40922f7a4e8affada57e048ded62eb47103","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a44241e54.0.tgz","fileCount":23,"integrity":"sha512-3udk4oM01R8UhXxEd2z3qmJUSOYTWMDldwR19cxM6nMX2W2RjXtqFAyBbKpHFJbuiJw3w3mwGb2nIuCz3ivUuw==","signatures":[{"sig":"MEYCIQDFSduIIuaOGHq47viO0CUfWQVNkNgOfeHa+LRiD5YXXQIhAJEHcimLg0/5VW6ICVe6JASpvpfk8jcH1Xl38IOFdHR9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraOQ/8DsWxa1/WxunWMZ0p0LRKdWVpr9PjKUkHDZCSs+bxShYFbFyB\r\n1KazudhhXz3tIM7r0+r86ZCa3LoA5XVtRUjB4YBFksg/yh9JPFj2QXwN5EtN\r\nLmHMAa4E0R1i7AJm0Wk/+7vbo92TT2hYtXWg4VNiqTyxreJ1oTnAUlGOaI6Q\r\ncnaEOH7rBGI2wundCr2Ps4p3NLYcsO7khVJmEgBLCfkDs3+aIkvQXVOau7fG\r\nEPU0sJFI0xbe0EjTQilk0GzUShKPBUzEbE+suj8CaxApZS0+lEN90+MHZuNC\r\nQEhZW1iaIrF8OocLj8wDvYKnQyB0Y972KFvC/mmJ/Fwzxsb3gcaW6nL+Dtd9\r\njfVK8l3Re3SOrxBuCI80NmNhJZ5T66VYP56e4cNQScXX6k9LSXAr0FGmSULp\r\nNPcwN3SoPMOqzIE8ZG6CN09ge4OVjW/7kSuRQt3wd/LTV8LbaqUZ/mTIcB9h\r\n/XoENiVn8s7NH43gdR3CedQ580qsUHcyqMHcx/0sPTsQVT7M4W8eUVNCn3jg\r\nK3RW6CtILx3Yo6+xuMryT8FoOfE+nE+0QE1WF9bMADAlyppX2n9YnYkEDHyn\r\ndEjceyDJyct0fOGqPYUzopGRYKOyF50hp/W+zjKxgTaClu1C0T4PXRWQwQpe\r\ngbtnphMLmxNTzbdTPfBpQih2qolPNho6Ljs=\r\n=je0M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/tokens":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a44241e54.0_1664526100281_0.6638214378092673","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/card","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6c77d840dcce82f5fbdb7e4e1ae08b73ddd7c53","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0ce81e115.0.tgz","fileCount":23,"integrity":"sha512-vXZe2BzzFTSMzlXZ1xhnC6AIaNYqTJM1Ozz7lh0ng+SLeSuLBsVHU2KbCzRf6FEprbOmlYkIZVQ8YKE6d5Av+A==","signatures":[{"sig":"MEQCIA/yJfObZy3RtkuMwO/bA51rIFxpxh9/q7pM5uz2NXOTAiBNHvgkzagurTvVV/D8wONwSziSkiqG5FZqHzgUZSCsbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeZA//SswvwOU1wuVFwnDwQ88g2KT2DDyG4jnOpEqDgtK8MDzw35zA\r\nG6+zQdB11mHnn/SDQN5U8X40NkiVhT1Jde5iX6ppbudg5nahr737vNSuQGuP\r\nCU1x6kTu3VAt1lezuhCqYL+hCSiVHztofzlbfcbXUrZ3bLYpTw67Dt08S4q/\r\nCfDiMW+fmMVmHWjFlQONa+XbO4htlJLjq3W7dhblL0yQ7lay841CtXbRWJ2J\r\nrUyFJ7LzU8C+zQBl0HWKn2PZrAiORr9CsXBsnFfDcoFiJWnJJOwNVcUox4Dk\r\nnklwjes6DwMOFYMibOz7w5Xfu/B+cC52Fj6TOH9rpHyztE5Fgxwt7gJaCz/q\r\nwX73ryPRYhhgJUy9Uf8ucfuj4KXMMeONUS22ZldKBnrFGr7WIzvx/CJGOjAF\r\ncJQsYhn14Q5V2kO3WnpNFqYB4ZB1fBwFldMFQekNvkBMDnpHibDwjnnTl3gr\r\n5N0ooZpj17GTl8DvtWVW72nipGjb+92q6MWE8i1ohgJNYTSw+r3EoJ4Ox2Su\r\nbZR2P5e0o/gqABhFqsrjsA6Be8BHGQpA7uol+av00/Q1kBpW57Pj2U9ZYTWN\r\nljSd+ObGjUd6DhkeHdT8Fvx9/v4rDOWm/FiXsnZ+m18oARFqQ+X/boNEMHFW\r\nwTgDGDV+QQTvMpqKy1kL7KwbQWNm+P5TNOU=\r\n=/nGG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/tokens":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0ce81e115.0_1664561929083_0.8219904575175305","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/card","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfa16b51ce3bcae40bce40b13ebaefa8e5faec71","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":23,"integrity":"sha512-qQsmtmSXy/r6s2CUPh4Kcf3Ccjecw9KJfcuYcGPfUxgyC6ZM6wObahHEB/lCbexaQatn1UMWQiy4xcS3/M2MsA==","signatures":[{"sig":"MEUCIQCmcF/c5WVdc+xPELWtJ3tTneB3jZ6bXGO+EaIdzt3jCgIgRP7T4TYAM3ko7aXvubzX24VuuKA9v+mCO4YFIWTK6bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGtEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmHQ//eTI4V6EBXVibPWPMNLu22lDIWPssPtz+eRKG3kAVmU9ZIXck\r\ne0jdzbBTMqvNQxxFhFlMiW+oL52ATUF41/SjOlQW6scSrDB/t08i8cjzIVde\r\nyTcDEVdsxaEPBH8HwZ84M+2MgSN9FX1fmSamEx2GVp1aQvQob4rZieWTX/Cd\r\nGwW/yKbWt3n35pqKBrV6NToyG8xEBoHEy0KXzFTOQBNvPEoRdl4kACjhpvw5\r\ndoDAfRaHXwYEf9/Or5ICSX/8/Wu6BQyBkIDoR9JhLZ66/DOl8NBtben4kpn6\r\n3fWMZ3Zyyc74nNqCqcfdD8GUb47qanIpM2YoqTGFPuL49L31zz8eDeks0bKT\r\ndhIKUdpt3UCLZb1evS8xU4O5TB+tuhqa9E/DsCwPgfrSDu+E9UbcTpccwsNe\r\nXsci/pmZVRZmw4Pk23mTVA5DEJfK/cGceEBUhLhaqFStIh0sghNjLdmC8R1l\r\n8qukLIi3gIBFcz+k7arjexFqY3Z9ejfBxukXzmGCQXOk05ghuu9SAUsG8Z/f\r\naeNNu9o1moYbIqzXj7NBcy84AR8mXJDCqxfHoyZR9HFjrJoNXAikpODDzWzW\r\nJntHkw790b9wT7tADMOaGIUpxpcx3Y5Q232ab6LxU7RKj5B3t338u64Jbto7\r\n+TaTtoS+FMZT7gsjfZIiX+ckstM2i25Q3qc=\r\n=9Qp8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/tokens":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3cc30f6ad.0_1664904004777_0.8336236684140308","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/card","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beb016039be2cf14fe37420eba99d6bcf2568c17","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d9cf98e60.0.tgz","fileCount":23,"integrity":"sha512-diZyv2I0hvBuEyfO7OA+WkJSR9zHvN9d7ZTZKLcr+Uw1EutLU2wa86uG7mLkWmOdYQtbgo+Pc/RdLgaMDGcsEg==","signatures":[{"sig":"MEUCIQCHRGqwtmtLFGV7P1zW6mYlx8UnZ23yaxmtidIg5QlbtQIgPTS8hljWJo7UPDurUog5cnouIa9k0Ea4j4AYO7zUIDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIO0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomzA//dsqDnSX1GzaLnNwsvB9dw7SEDdx1C9nTO3EIED1DIq8UaNE8\r\nrDgxXBHIsYQOeqaH4ocMELq1/8UEE6OQe/kv/s8eNJhkoXA2PL8mJJ3qWIfV\r\nQxSJKht4WB08r169cUaRmz4jgf8mK6QsIxOvuA/Cyaxm5Akl3iroI5N3gCNU\r\nsRYsJHJaouCjyYAVkOhytBTvZWrB6y325EgZ70gPyeXNhzLxLkh24q47Fjog\r\nuLH3zY1JemfZI6bS3AA9fMU+xyKZbmIlVc0qRh7cW1zgNfxSnflXMRB7NWbX\r\nn6D6JUeNFDMfZ6a64J00JBd1BMtc28rC9wopfmtlI4yRY8tjESz7+g/ptL03\r\n7nF2NGeY/dn6S2buRY8E/kpLNcrBHdgxMwifgJ6izQfnC+iBS2j71IrYfuxG\r\nYdtfm6ZOUFwX2tSFx8otnMEGT3YNz84rSA2Q2cgTo2cj2bE7ptlVPbRq9Rbc\r\n0BXN7vytro7lSTyRZ7bpku6Ri74t7twoOQMWh01otRhe604n5Fzz1cXZHpXT\r\nqtilXrG+b5j4Y9m5crEMbCe0h7nMbHTryWewQ1ApFlZugXyXEMmfI1BMFRLE\r\n4ITnGiaQMwoMBCHn0YnmT0UjB5anlMiRDTwp2uJaQihQXrLJJwMSxLu1TpUx\r\n0EG5Kry0qGtPdV1ejqvei92k060Q5/m6bgw=\r\n=b2Vb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/tokens":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d9cf98e60.0_1664910260524_0.7298527360091447","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/card","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e8088b98f65fcce2f6ab941de290467afa7b804","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d71935c8b.0.tgz","fileCount":23,"integrity":"sha512-/+D9ul/NURooEv15k4mbKGlu6EBOeUzgKe6Z6UWyZY7G3v7ccbjX/TJU1inibTHLm12CCRajzqczlne9nsCttg==","signatures":[{"sig":"MEQCIGitFhASWnFsWS1gBjQZA3MiTrf70wenYa7Kv+fM1NqzAiBZbxUDBrHm8GoLMAPHbby/uRORnwX67SF21u6rfvNLUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":283745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/CQ/+JtLc0gsAzUqTR7BgLTWSGAIcvxc0/YG8CKD3rwc14seGgqMG\r\naK69nYgKVFD+UTe14U3jSdNVDkxQVK3Fs/OcSBxE/U6g9jkkJqQdcsn7jnVq\r\nqfmVdp8O5aXAcrqjFIE7kV2jDShMlJGk4V6iAxNp6rKYDOLI24dROciyMH1e\r\n5ifmfIh7n0mFSCq91OSht6fW5FdoycF5pbJ2pINA71/T4pSEhUBsvjUb94Hz\r\nznm2zav++SutJ0JvbfNDB+NvPt+6UeW0/xMqI3Cbq6vAT5KAWDQ/qn1Bw+K+\r\nb2k2k5YztrOMShr3aVjUDRQGu4JFCgDadXPadI5UBrkz1scB1qf8bML54sTy\r\n02iBya/NaMj4N1YiOygrC0tohmba1zZ2i5RGswLtroMeRC0uxjxufVF3GyAN\r\nIPaRdJbFoU7am+FnC+5OeDAcrL8Yd+MJGfaRhbqvPplPgK9aqPhaZCmHfoCB\r\ndCeAc7gvYr3apSw+NEO1qlUbqF+lI6pEwDcGc8lfHwsJgzxc5czHnb8Y3L5A\r\nXlYIMb3htTJLawm/Wt/i8YTlEzpu5gKcUIbtiB/W917L3eYuS8Rh72YEE9yG\r\nvHShwxVVYj7wo48nnZyIAU6menwR+UG9vqwiHQMuMeWTpL2GQUPZtw3q1H3K\r\nN7G8fLQn8yn8/Bs5pbKbIoW4QUVuTf9S5cI=\r\n=stWO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/tokens":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d71935c8b.0_1665044130754_0.5526621972308623","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/card","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed47d95c5402d834a038a870685cdce2a569cb4a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.49c56a25d.0.tgz","fileCount":23,"integrity":"sha512-Ee+8Cg770vLyFNILleeX7X1fMZkBEDAQkgSG83Mk2LrlBHVE8vAdprGDXusI0FScb9tcs9n7WkkLuTbJ4T+L1Q==","signatures":[{"sig":"MEUCIG/JRt32dt4n9nlk8cN6Btf3ypy3edgoOBV7hIxmvy8KAiEA3RJZxC2NBbbaNXGgrrV8lYtp02rH675pzE97VHcpZoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo64Q/9EIEsG2EHy5W0wQ2H012/fYNyfGkuRjrBQWd4qoTXDY0zdTGb\r\nOBheuWrDPfvIOCagPYoK8e39UuPRSEMwwgUhX1LRKnCYzScEsZKovkpXyFs+\r\ng302te56XrGjufb0kqN+y+7Bl8YVpaeor6AvICdzW5FnjqgEth3V9MPSt5qo\r\nlFVnIuf3iv97CmSYWohTI1nZC1ygbvhNM+GOlSfmSI8rV8anvRwGjCZqHV5s\r\n1ReSuDX0/Hfgz4k2zVJVi4imKnImizM+PlbIUZ4NTaHMAlJ35AzV02My9bQs\r\n08htE8GwjPOVB5Po6igeKtDkljVS+swwYIVUkkT2GF4Om/GezSTCwCs2rZnw\r\nnVfgMvZDq87s7ny0o4vcGemBQPqZdCg+qP5bXdzVhVwqx1Dyflubhv/Aclti\r\nxfWY8wI8oMHokSstBwh8qw0pmdoc0q7YNsHL1Uj3WVRRjwed2LRgZwBUP73r\r\nNwWJDbrJhEgMWSDmli/cfIkJBEoNXMa/1r7SlrL0PrEdoCyBOXHzqSSqeDU0\r\nj6uY3t4CAv9R/WiwRXwZUyju6lraaHVvWZ+S3SGglmjxtD93YNENQpbp5t3M\r\nXnV1U1btyC97DWgD+LOdAKU7Sz5HlCggnsaJUrOUuPWWsmTpIwbDMbIA2Vys\r\n3HL5RFlfKlBCIN/v5LyiyY5mIgk0ydXtViU=\r\n=C/Ac\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/tokens":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.49c56a25d.0_1665082289167_0.5890197880871799","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/card","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.07acddef3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dac5e6cb60d184382df4a78691ffe954eeed276","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.07acddef3.0.tgz","fileCount":23,"integrity":"sha512-m22prYZNj3lFn6abcjqQC5qfY6TRaLyvR9yR3nrZY4qjxIsrcNKlC2m+lLfoOUMXJAg39B/H12VKUevaqmXmdw==","signatures":[{"sig":"MEUCIQDbQbXbSeyVbVGyz6YlCvuBJahPOTsH+0pD+pn+4spDWAIgQMm8ZoqZx57WN9d+GWCvJIJVHeBWeD2ZMuUfmpGqu9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJwtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkkg//Wxo6bSgooq8xgeBaJWegbA6XV7e1YPh2+jkh6neI5ipA/8st\r\nHVplMqoqMS0PtozlXEW/j6PtrH5BQB5C1Agk517Y92s1ke4ghZDiaHXjzp3H\r\nu95cbI1ln7Yd908yj1VXg0KZnZn+/XgWIvKlhqG4URldBrKlzgfFQhq9YTHF\r\nTPaFSEmJY2BA7Fqpm05+U8aIydM0muciqXWY0iqu5YHlSNWm/+fxrnM1tF9i\r\nwTglieIYbzOnHAxsw8pTRSuph/NId+QlnMSoEgaKxck3VMNLsKCeRr14OYtG\r\nm43WsCoOQVj2tvD2Wqb9d5vbzOmk23GZvfgpgWJlqkQgDssbMgwwGoXdUD3r\r\nYSl3ezmO51yC23mjKh42N4t26PZAjTYhjkO35PcYH5DNq6KZHY8JfSlx2YVH\r\n24aE2VuiEPc9RS4N6mYzWzUPkLaH9tp0tQUWrGzRB0QJ+fPbaK1JemqxCo9g\r\nBp8v/GqI64Y8gBEKmhgfaB9M0uyolWln66dIsI+LbkEJ/4cO1/lLirIfU4rV\r\nY4xJb6zcLfv5NBT5OYOZQzZ/LJUX3xlVYpM4MMlNeNQScQ/gf3cZrGmeHt7i\r\nmMKvsMJ9mfHrjku//ZsDUV95H1Jo4HrepWm7tNiDB4OcGl1QGugm51K2HmJf\r\nBwqEYyP/CmGsEmTvMRqIqMoAV6NLLndqHnU=\r\n=ASLa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/tokens":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.07acddef3.0_1665178668872_0.448813415506925","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/card","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7794edb4a2ff99407b8530bf0e6609c534db4a5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":23,"integrity":"sha512-c0yvI+U5MmnqDvNM3m7U/hsVnbS+NRZ2KH0+ayd+c3ng8rtOU+rXzzWvXPmZ1YqT8hmhCXSts1CFY76FGJOdhw==","signatures":[{"sig":"MEUCIQCPlK1xb0VOODNaD4LTg00B35wDaticrRBH3TM9kTC3WAIgOJzqvuLVD+qTVNNe/lA5ZBCWBCUzRru7GFXv2bOP2pA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgQQ//VfZ8TXhM2RcFlXtmiZ0tDdtV2LS3dgYTdw/fP6QZq+x/KXky\r\nA5h2fOOwpeOv8rPqEN5o7H6SzGTQQV8yq80SdY7sDWPqLqTQcpag1o7mZHGg\r\nhM2ZB4+owOwhOcm3Ge3iL4p52C6SeMBw/bwuRek+z+nLZ6Yrzfq0hLTpT2j9\r\neNQOK9pLsvy7APerxDNqC588vIqbP5MtnK5m5/snXBVU6JugyrevJCbJwRxB\r\nmTi8RYXXRRzeLiwyOXYYdmlVdxS1HEviDl9TjII1wP/Gj9ep/sGvsZ/1Lrrb\r\nrGj0vpsTb5G2IUM9izLEHj2lloMx+zd4sYeGgC/2IRPHuql4L/eDq7CeV4iV\r\nYMY3WYSu0HuWNyTZb2P0T8qneCr48dm+5CvMR9R1UMKr6ADmAyU5HYy9C3Ho\r\nJkM3U6fS7LjCBNUai0NxkhZEfVdm1f/sW1iBLxp7qybB9jmR5ceW222PBU3l\r\nWMlIs2KtdPUa4mf0urtURS+keOgH3wS34BW07qnsxJQcLp1v6gShLvo3624h\r\nL6UT6qZaXJzQMLwPrYy23V/bzlTe4k4KbEVeTzqhrJlxQ9vo1e5bIFkmXueq\r\nAIKPmE26m92CNeHL5bhyXRJs6qqsmmy7kGJfnRsA9/kk1dRWXdyOT4cOhPE3\r\niUFRGUI+yB1lDO7W7jeZfaPOFWoqm6Y3PkA=\r\n=kqa4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/tokens":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1c74eb2c0.0_1665179759924_0.5065749136311242","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/card","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51c78da6d45eb55334d583b0eb113b035a88ca5f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.dadfb713e.0.tgz","fileCount":23,"integrity":"sha512-5YgrdxHyKlZqTXXLLVHPNFgfyQhGtVlB161XQgs38wdeNpT8zQEAyP0eH/kS524ZaDcaNYOtBPkBVMU9EBpMUA==","signatures":[{"sig":"MEUCIHXnILHczcArxxoNDrH5Pmou3irG7y7hHjsY8/czIXoEAiEA1BDIPmKanTnreV8Oa+5l5nFN1/78SCx4yzl0QR3QpL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQU6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq1A/+OvHo9i8Fqqvi+BmCCwdRrFy1rHovheYve3+5DDYRn2xXNKD+\r\nCsWHqnsNyvA+7LE4SeKtGoqVyvhYRsjtRWBYAU1LdBnJJpFAGtTKJ938qQRh\r\nmfLXhCxa/hsmgbHGjDqYSZ6azHBr8J1lxVGUAUrhJCdQoCledrYYlfyt31UG\r\ntWdfR8sX6tbEpNZdQ/tTVTjfqm/6GnJqUIFAQEEBZLHQ9JT0B0BMEtwP2N5o\r\nAF8gBO+nv4jRoPaIQi8zFPdWSDLs2HN2Tt9ShfvvRBKruxhK6QezAt7At6JF\r\n37x2bRZVFu+YvvUVwDICorQDOnmjl8BtzJxYVaftgOFAUp4F94jBcZ/ib60g\r\nG2IlApb9scfepqOciWYqGxxpbSGO5+a9IrZvyu2WSrMoZt7TyG8ZQ0pFl56d\r\nQW+mkR8yaB6yYsGCFgYs4RVG3agGgBm4chmqwlAGIks7fgwOrYZmrRe72ap6\r\n+qhjse7bPeHnRB8zn6YFpqulnsrjC34IBjMFN8OzqTeEqxfIzRq1MLmoYIGx\r\ndOXFM/dr4SxAf6krNiBwgTTdmfiSzmz1XVALpLebbrFZ5a5HqmWhqAxo0Co/\r\nk7IL6uJ9Gk2P0UEq+owKAJSUIb67mvWHKwYP4+B+I9dHHW13BOL4bLa+MjlY\r\nwX9YXs/vRLP4etrvM8JL07YD6yvZ9hjMi0Q=\r\n=jZx5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/tokens":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.dadfb713e.0_1665205561994_0.062312513494397814","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/card","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ef1e0aff86ec1deaef7abb005f1e77469f57ef4","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.395f1ce61.0.tgz","fileCount":23,"integrity":"sha512-PFmE4S5b4/FX7tBkYuMyUmHp0jWuJOtp9dvUXeOHs9zVffnUh/rjTmcWS+0X35gtxR7/HaKiSmi8UHk+IaIgUw==","signatures":[{"sig":"MEUCIEp1LOMvd/Xm7rerCtHnDX1LnG4kn/d37oGRLSM53MQgAiEAxLkRy75DXGrBb2EUGyENIcKwIDiRn9DfCSsBQhOzzWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRYA//fln/EcXMMqD7Vz+5W6fHLWxIGNoTr++CTVNd0FlxPdsoFdCN\r\n9vCIxHT2UkQq1U+8U6b5HvgLxf+B3uQIDZ0/jAoAzrZ46zWvbb/1BKgmGHC9\r\ngI7RXqPvJiDFl2ZT/bBg1uCCuJbL48ol9dC99NlrsJvh6/bzLYMUAZcjdGZv\r\ntI1jfbS0bClxXr9b7/i5hlH7RZweNoCO3hljEPqtIaSOwMBBiZDtIN5sIXak\r\nZmX9NREYzzlhxVJ5pDh0k98Zjy1Bu5ZpzeCn4bWWMyc4c9vM8n75PsH3sZds\r\n0KeEIgnqVzHd5Y6ggXQaJsB4DenLzf+08T1/6U6yzLtEGRiDNhDpGBQ1IItA\r\n16AQE6guZJ/9vLLqGPVoJBvloQtN0cgOvYE0SUEcbhARQIwRNgqLkRVEFbsM\r\nCO3ePNwWKX5koTnB5ySq15V9jqGNCg0qzXhBd5uDCWTm9aMIvnsyrn2P1vUt\r\n+vTOENspHezVA1c8lv4OSJZ/jPU73aEoptLPXCr2vgdm8Gi2UrM5AK6qZd2w\r\nO70sdIr0hPBeCLaZkevBK1og52itqVAdQhzxqV/YWEN5XV6O7b58AfJ/jVhq\r\nCyrXq+CxYLR61nOhxiPJ9OlOWQViIr1Xd0l9/1Wcyup6yIhIXyzJAkbjiWcT\r\n1XH9uZYDY2hqjY4B6qGJRh1yFqaavHPEGaI=\r\n=SAJb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/tokens":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.395f1ce61.0_1665205682654_0.9782087220062887","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/card","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e430d9c8f4533ea4800a34c2894db5e055cc92","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e741b5c82.0.tgz","fileCount":23,"integrity":"sha512-/BTB+tzvDKQY11h5swi71QAvt9FXsMn+cicleQ0CLvp7lH4JFhSAZY4elrSeSSeCHSNWzIJ1lYUIlU4CNDYgGw==","signatures":[{"sig":"MEYCIQDNejrV+8uhQYYoAZVkximoJBYW37pnbHSrccRL7s2eIAIhAKP+S3ArXuCVh33iAyIILVLLvik6ssjRsdQV0qZDJ0+V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvshAAoDoodwZKJMOv3+1x0TamQwO+ry2FKg4VyRjewJ6ls6cMtX7u\r\ntHXuYPYEmDY9zQBy/BfbGz61UcX0SJrFJwdWBrcPCLYRtAaH0S6zZgD+81d4\r\nEVRHNGXyG79IxBMiGznDlyMShwKT+iHOBIoKTIUOOpuX7QzamNlrnlCMQCD9\r\nka9Vdq6bWLuGmWOw1z8wDo3kf37AVbJOoS0rRoJumYoeclVBuP99RsV2FrNz\r\n7N1zsW5Il76z6E32VQt4R7XA8WAM6rRw2U6mmtsKiGKbuB1V7IJuvKdQF7tT\r\nYO/BPHhZgVtn0z69cI1g5DnCxKmlKAVL/SzNoC8l8C2nX+/yHzyAP8kfsE/f\r\nVEvEukwFBRphvEcDnnvNCou8Vfizxsq5UIweC0dvTT7vJxMmnjHhUG5BQ0MQ\r\nR/Xr80stFUuHWTYPpvDwEh3H2hVxbtjR3P6Q5NHuFrGMWTl057TIhzoqQsbl\r\nrSJV6xFhgPtl7wSyJYfH3palVD8GXrw/MAbET/Oui8GYaN2bid0wXzLbVtMf\r\n1bhIn5isdrtdyfzOXNvfpS1FNgnVLLsyGXOCRhpHuCTFSleBtBD5VTnz9Ump\r\nPUr7oTdk6R6820yzHYC9LXvEElNpXkva3XosnXzGOgGeT2toN+b+M6h0qBBx\r\nc/wO738komqcJxqYYwuuKf3MwsK0Pg2Qq+4=\r\n=4uTw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/tokens":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e741b5c82.0_1665423497423_0.18301350480274703","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/card","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"929dbfb0e02d383db8afc3c2c7e4dc4ebda3b31d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.582f3cc1c.0.tgz","fileCount":23,"integrity":"sha512-PlzCdygYyByq5tZiF6qKKhTYvjdg8a70GlCa3QwydM0t9kDvpYMo1a/ioV/LPhtBg5xss8Yfz9XLeM9wLLOpIg==","signatures":[{"sig":"MEQCIGClgFsLuUMJbf9DFE99yxuyhL1SrDXfQEyGnN/+Z/W5AiAG4tbngUEaYspO4MbujB7G0Ibv7S5ON9Jxn+6UYGcttw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMCA/+JW1zOG5n63TIDQ6BvX5eyeXt61m2N+imF/oPZ7Lh0iLxxrpO\r\ncQ4kMsZGeq3r6W9Wsm/Mk2UnEP/WOHoqfKIp5g4GAjJQMvwR+tf73DsMif6X\r\nRkMmnpd0D51qvoyBnrMcVm8R/7zip/H2UMDC6dsVxcMChU1dZ6ymnKK3b9IQ\r\nwoeKwHMHkif+x/uxmzOenvLmKTcKmcFk3RjioyEavSJ5naDcqcZqNs4uJ4sq\r\nKII4YQ+DQaqEgOXSho78+f6y7nFm3X6kVTLJWag5GsuPfTcdPB6vUZu3+6nQ\r\nPl1/KoFiNky0F5KF3W0eLtYzpl0M6fcn7o6quSf04d3YZh0Ba3aJMEc1Ldsn\r\npBx5tddeyu1DS8znI8jJ3MAA3yq/W1uJjv+14di2sWD0KJvW0+vj27DqoH5u\r\nPZfGGvOMJWGmG3lZoy9gDlfVkZJmg94J+0lf8SRfxZLUCtbeoV8UW1fXKVqd\r\nX4yhg66Mj+M85s1MU+mhB/JiaSm+EfIr/FavcyAY7IP9Fz60Q1JmIlaHQsji\r\n/b5qUFKBTEJ8pWvAjZRQ1O7vOVF+r5LkAKlu+lEgD2n2Ozdu8HNEpg9KV4il\r\nz8VbSoOk/snt5MtieBna2827GdAn5G7ZHIITrlx9+U+AgbH7E5eoxDWY02Sx\r\nXYYUnlKLUBz0D8qqr3VPKK+bw/hM192rNlY=\r\n=mLsP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/tokens":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.582f3cc1c.0_1665463755448_0.5002650937044726","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/card","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efc2bb71b1587e83cf5b9dd40278ab666cc8e968","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":23,"integrity":"sha512-InctJJZrCtPnYNZPG4szXvMbvtjkk/0fgcxHaYQYH1nCGfEX7+PnA12DddMh+RSfaog+H99hJQw0QJR0+pf8Ng==","signatures":[{"sig":"MEUCIQCRb+lBSGaf8aBjOtQG2gzasY+9nAbBa8yVBpE98aj/vAIgGuhNhxrfE37WJzxe8Lf39owWdQms2c6AhZWFVA2t6Eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoddxAAimETPKQ+P/fk/fZzdK9QjZcRlZ+EbfmMN4XcdENjQBIed7fd\r\nK+tLjsrDy/4IxaIewfD8d/To84wwqDr1/Y0m4W56z4w5zdKICl+pXzIS3vsg\r\nfl0S+pBpREI8DPV4LDN2UHH8ucWsxNsOsOhS1XHxe70S8TdM14D36ogbQcEa\r\nkRgZrJI8alUixyCysC68zCiXmA/EO0z3BsjqE30OvTss0QHGHrRE0Psx6mlm\r\n47EBM9rkVWUDXEi76rxBIzehjTKmRO5DHeftkYyEX0KRck4IwGrrrPT/WnKr\r\nuUYA+4E+xk2Jnd/pk79/t7TBZlClRP8Ty+1bhEt/v6Lq54gnpiuNctQA0uUe\r\n463+MqN7mb3tto+FE6Psuw4NnQn+9FhKpdzeZp9tPuCbKNPW0WdYJwVg7LjC\r\nD2low2RKEy+8LlR82+Q/Z3+0gVBaEWM6Jbp6NTHaWXxjEtkCAhvr2lh8gb9J\r\n7xbErt28tBwxY1hzHrfw0+zesrb5wfhYUpWolpTmElGpRvUK/euVa+b98sXz\r\niGZnqjPoHaoeTH6i9T8FBBb0v3HYe/5rmuz2f25uSeeCYT8GpyjM8PwlF0Tt\r\nIK9ypIgHdkM31zNRqQM7fevhV8oZQLPvJJf7WiXkRcZWhtfwN0x/QwIdohLW\r\nxqWcxCoX0Q0mTq0Iepg0nJx7hCFM8lMJQi4=\r\n=VP0B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/tokens":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b1a6e3e88.0_1665576155161_0.37283675645307723","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/card","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a950a4ab7e796a10d307ea38ed0e54e797a0005b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":23,"integrity":"sha512-Dki+HAlpesDl+T7nJZq4N03ZUYYerLtBNbQqPQq3wIMaLUquaRSBzRv87AmlZ/ybecwREKRHPeiakuCCe8kUig==","signatures":[{"sig":"MEYCIQD0D3eteTR2uP8aK+1GN+eT1PhNDpdIIAiNsaojS5RetwIhANHskpMxI+f4j9JqlZamRSpwAV+8Jk7ap9Ju+JPXN/fF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEoA//QLBYUk72FNSFfkjYYfOVyEifg9Tq/yTfH5K0nEBOJVg8kwpx\r\nED0KGyWUp4nbOqyii9lpMY4eKRyyWLM+wkQGXn1LDBrVDCOemrLD084C+8zH\r\nxcY1P4/ik+GtCN7GVLbTCVKtSsPgL8N1/3w4oqLEo2kbEQGrS3xyJr2AU35Z\r\n1YCsqWM9ft8nBtgM3qRTFfJgcEky2lxO8bSzVSpfL4/upMf32WeZHcSVGHO5\r\npqVsJNq2KwtrQAGiR1Jl63cRx52vLa9PRvJn4ss04lXI/4J2ZqYHxqV9av7r\r\n1o978EmiCBuXaH9MVRxXE73wAChJhwQ4ikCKCzQpit9kDAGkd3BpF32IGLmE\r\ntePtSPP2W65YFkM/HaUdIw1sASDuN5vWFLnMfVN0XL0OkstGKJNIksALbfmE\r\nFjQmo06UE9A234dhUSUgyR9ZunJJmx4f3ccBbDY2lk/N6BQyV7xdikmMtBMg\r\niWnsRD/hxDQ089CIDKbkqND5cXTIWtllvGIs/yy0H7VoPctzcagOg2W4ZLCx\r\n4PVp2RzaNXJd8Wu/SHcFyQQEgDyysHnT0PSK4hy1WV/C2WY1rVzR7yhDmSjN\r\nrtadJylMGMIflDefXkre4Fmmo9GNzWADULZ3IQtBShWBrx45P04yEqiQ+FH1\r\nf7rS+LtwTnTADAIVo94ZKa1BtFoq2oXdYro=\r\n=v2Qh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/tokens":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c9b1a31e4.0_1665593925102_0.7678103164669101","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/card","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a10e8696a4760ad840ef3a1a99cc79124feee98","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":23,"integrity":"sha512-8V3vuveKI7FnNNU3/ZnStTX49CJTcHUSfDaIWhDGVOY3iNIYy2rzlDf8iu0F1diWRgJKD8uh+MOm0BAac/fjkg==","signatures":[{"sig":"MEQCIFDPfXeG1Ej3vipebDWCFFtU8HiokbwdaJZGuS4/ZKA4AiBTnaXjDC/DnuPkneobF5RYtPWGPQT2GzGC01gWrxQyUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxOwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkYg//YpciSwdbwCaWJkqJsn8YY7zGzggoVkwSEwHKbgWNvqsUwvM1\r\nDSYVj1LwJv9Miu5R6mDHmmXgKfHVWOMFDCKfqdxEo8p6kzbB4/oqWTbHb9o9\r\nsnL8RViBSUxTmJVBEHXAaYVM6LRD5Y0hYGvuU7919nu1MdnWlkZqH9rO/0Gr\r\ntitas5LWkuz0PeCgku3ZOPPmRCGvlg2RjC2LIHsQgsbzx1kTErCpvvbWp12N\r\nDOg5cBbG4COUjRzq3CrIaeGATM4AN8z0nxj7ZfKZLcZc4XL9gtpxNzKb8kr3\r\ndcJNPRwxN1YHxC+Ozqmp59N5xNdwXRTTkMhdeeP59MRvotUw4wx0OPouVkdk\r\nayC8BiaSXeeoiwcxb97rjVU7fEGjAhlMAZ7Z4NG6BjmMIkDPOK1OLtT8FxmI\r\nr8wl/NYiCEAd/G8mhyb0uwvJ3pDzf53+MATajnbTkyFaFWIyH5zmqIucz9OH\r\n0wAQh9xHr/5JF788VDKQkj2Cas9kuDAwdOgeXeBy3BAcuN2ElwOKgWU4xfzn\r\nhM7w2JsOs4sqAJnQfrHRpcD0x31PY2+XRguVqb9m1VlG0CZ6YQpnqcU1PR+m\r\nMCMTkk/F5X5QqCHclBq0DirqRtn65UZyuf+avP0AYSTu8bYrsalk8BEcRuKD\r\nvefM6AOJrIhcZ+356s6ACktm81ljmJmignU=\r\n=Ky+d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/tokens":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.13e9b0d1f.0_1665602480003_0.6207737591254383","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/card","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23540942ab2e6731077d83a9e648c6a7d2c5481d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1dc797e7f.0.tgz","fileCount":23,"integrity":"sha512-zboEqcV0FBdR1kG2Nu/Gb+UvK5diKhpaPtv4RAhc1vui6Wu3nuB7o/u0qplI9WDdusM0kX3eHS7A86AI94ZsJQ==","signatures":[{"sig":"MEQCIGyIRebfHoQ8sPJWAwx9m/iw0tRaSPTQtv2fbKAX4LuFAiAJA36WbMZkqWGR2lGA9S7shiIgCNUFlkjuNy+IcPZzlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO0xAAjjcPeNDu/L85Obl7jdDmFDstdyhoL2F9QVxDURmFqMGZztpR\r\nhjJE6RNqb3BLSXal6vWCf3mgWz7qPAIqhJ7eOpeefaAJ+Ji12m0BZ9mE6Wa3\r\nNOyQOluyNcgs9qfJ8/XG1zhlkDO+JyxAog5npGy1jPXGFjot674wMgkpgPUg\r\nnCyddZPPzDFo9JAOt0C0HQMksLUpjLqqgMYCxuIwEw4vJgmaUiYeqTo4D4G/\r\nV6Nh1SsVVx044sDU5OF4qjr19jKdJJ6hoCF1QH3xHyWai4qkPMo9w2Ia6txS\r\nB8l2Du9QPPqaMhW3l9NO3O0xjHLxxRWI4vB8Pn/8ZvL6yy3Eq8kaJJYrSwBR\r\n1wq/B0AUr728Br6qczLkRa/TLeo1xWqrclgT8IpID2lrWLfPqj3PKfuCKuKx\r\n3LLlskgK3YGfT57VoDSOAcOo3PDRf7tLOoe6KMPx2HVgCYU1FlQEXB1F2jJI\r\nL+2yxBIbcATosW5s26mgIu4a3okdu8JXvBJ4kc9BSChiH+8NMuU+cBnpuiNJ\r\nHIOi25aQCOt2Yuuwk7SwiHXaIcEcLHCYpLKpB+jYMBnU/sJwPuE7s76YsDqc\r\nxVkneSgnDkM6uMvkdfd3eNgneXKZ1/WBd4yZw+hsp4EY/jcA5sOieQ/TiZp0\r\neyKHdqGbYNymHNq71OagMjT4shx1iqscWqQ=\r\n=Eapz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/tokens":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1dc797e7f.0_1665740504801_0.6130853325813466","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/card","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ed4009397.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac65822cb71e1c410654d231bbf15aa562dd15ed","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ed4009397.0.tgz","fileCount":23,"integrity":"sha512-BTUcFNHWqT20TT8/SyDSOS2KXI3pC1q4Ejs4kYgdBzov+d2B74C6MZ7OxJDx/MFlv7rEgBBu+FPQ60tvj5PLLA==","signatures":[{"sig":"MEYCIQDKha09JbctM4lgdWeQET/adq4E178XCPrXcLaRxTxGWgIhANmXqFjLW93ZuxDTyXKE14xz68ICPGbZjNwC7HXy+vDj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbahAAjFPB4TYdvUDPEGwgyng7Na52b2TaFfoggPHvQrUpmmpgJ1l5\r\n8p5QTOjvPR+nbz9VDlRngG8wFON4d1ftAVgRL8+9ql7iFAmUPXN5/YxGlspw\r\nY/Ijk539RJuYnM6KswemUkfb4GEIkEvR2zw61W7hYTFjmNNOMqNYOZYAos5v\r\nMFkZfZYddXrsZ2AxvorMl9JzGgxIa1J3J+Q200wuXJyH5K5TeR6XOY/LayYP\r\nqLCGBTlm+NtWiangSC4pcbzNbkhTQsfcDAqabJyBhOKc6HyBLIb/U7Be01Uv\r\nVmu1vVt4jVKG7etlAaJKXGsg+lwP2wS9wjP2rVpWNSd8jVd7xDjSMA562Joh\r\nGbN33MgJZInXBuNm/mIIo58H+V365IsWsVuzr8T2/Xb3CWtzr7lSBB+PHyoc\r\nBNcqnsOAWs7jcwdkccJvnDmfI+GoY133ycxosaJzEeWYHlixCKkogSy5aGYl\r\nKxBCXYTvWTib/6w+M4kpH/pAWnVb1tLnNkJEbqnev7mrI78OXlVQiRPjOjIv\r\n7IuvtL4DebrhfODLTSCwp7cVJFgdDtQyET5EgIUu0zOwFyyOG2dVB8f6+vvG\r\n0YTJX3XEdGb5J9Igy+6MCuEUM+c6ikXxgttS0TgAc94Z3GivJ9V9FvhJ+IFP\r\nOoKzZNlshpGSnGwVMNdYguogvobpYbmnEyA=\r\n=Nzho\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/tokens":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ed4009397.0_1665766286860_0.8938779150726237","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/card","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4fe57ae5b0a68dcde85010c69ca779969a1f80f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.95ef196bc.0.tgz","fileCount":23,"integrity":"sha512-UbSB1KPtI54B5YVRt7wCNRUneMsgW+ouyPq7KAzfBHtpmwmBjKt7vQWMU4yP2AOBhIl0wtEg5l0jDzpK8ibihw==","signatures":[{"sig":"MEUCIAuvGLe9IGK0KnfFh3b6u5BxLIjIw19OTzUiXiH+J8SQAiEA4gertTyaswp+4J9eSJYFofxUBk85eFPlb3dYhBh/LAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe09ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIMA//VpqnljjgGX1qYVBHX2AL+9PoTCVLY1+MNM7gy8QRinKN/QHM\r\nSl/9ksR98IRz0vQT28zlj08+6rWyZZ9G6XxpTJ35Vm9tTE2dQxe+W04kJaOs\r\nnEz04MMTueMV2uYaNuYMLdHleQQ/DmFgMMHSXmqtUNwrjzYe1WAKVNIgaL4d\r\nb6ZbSmfwOXZMwTn4R27bLVAyBc8gt7RvpIdW1SxPl3jQ8qbaMwnWLaCdqCBJ\r\n9MZzB5X6myfdX3q4V6sIGAT5hT3ZAs0qmwuKfnOopTVuj/XzVCLMC+vL6Am7\r\nPHDEgWo8YORpS8s3aB4DbIQbk4wqeo9KPXhasFm3w6NEwNDfu5JBSeUEkmUH\r\ngPUqkvzj9N2BOS9k8YbiWkw0yXoZCQ9xpbAVftZIQkrgcuAHv3POfczAi0AE\r\nK6p1Y1vd5LQ7URJLaaeqaczK7ghKwlkmFJYnJtV5JYZuVE4ZX23OOK2XzoS6\r\nKMujWWn5wRT3pDRZrf7CrzLZVftmnq3sRffJZuaRjzgUYaFqJ7oty/0+9KXw\r\nvNqe7v1MJGGcMHFjwODX8t9Te+wj9wEsQHsUuxOsE7wMK1WXMfBAJ5K4yirx\r\nfmfwAEMhNa9a65AQy3bYLuvhUmnnATM3AaLszEUZS/9spQYbYWYcayXs0y15\r\n0Zl3wFqtA3BxpzDzoWFvzoMH9cDEglh3LK0=\r\n=TKH5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/tokens":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.95ef196bc.0_1665789245068_0.45262963574830173","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/card","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38b72fabeb70ee6503c6eae4f25c010d27dda09c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.13eea1b2d.0.tgz","fileCount":23,"integrity":"sha512-IO5kGbmyUpVMTDAgiVUPuWGCwcyhD6fWJ9wtBeTbxKAtMycpYQUmoYR9dZdPYahHzx4x3yuyJl5Zje4Sqf0eZw==","signatures":[{"sig":"MEUCIALNXSSD1ATmpQGrl9Fb8OS8Jakv1+RjmrYFyFIoWIe/AiEAp/y8JbUINonohLGJHSP1NrQkIhdPvXspDNSKwczeVX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI/w/+NIeIYYX4AP9azNugNzGdZQN4beoU8fShESN5Wko25xm4X8z5\r\n3eOe6clwWNjFuqQwjhj4D5lzO4s20mh+oM6wx2iVWjsCFmhuhIeadtw3vuNJ\r\nQ2SoeAAiunaboxE/g0rPFJcv/hxDuTCookFYi6foo41NdFOfBLHHL9ahIldZ\r\nJzfNjvLWVfceM/JsObj0HQv10KYJ6h4lzq2HEcXNKSo0RpXhz+kk5uOg2+D5\r\nBCvRL2hHdWyxg9ERKLIKoQSFxk8/74vP3vLMw250Ho8rLLckEbB9Zu08agfi\r\nQU1H5vAAHi1tpSd13JvkyD5aFPi1OV42m1PZua2b1jDbahTtk5gMSgyhtK2d\r\nOqqZCXknTEFnB8iBS9TeTFf5P+wi0UcqyOOZgc2D9rns4oKoLof+5ga4McZe\r\nQ3EGgceHDW97FaOhhcYAAoo1IheK+BZmQll2dkfjckk2jeRraWC8J8Vp3k5I\r\n4ySJA84NkQffzzCpW+IN1gTLB4Ghd7ERgNCOoWb++W2GPKHjSBHFWTh8qNUq\r\nWoSki2A4/IdyJTaBm5jHy8xy3BNEqbg8Z/Kp3L9L4rK3/qk0Rus6KMaU8uvo\r\n+8lcBbLRjjhagmq/H2bCfWUmSOQoHbuqLFKuv1xlznLs4N96MnDeR4q6gZYQ\r\nxi5AUYsen12q4Da0xFA4a/inhUxgEH9nwOw=\r\n=qyTo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/tokens":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.13eea1b2d.0_1665978704693_0.8241752323473501","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/card","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"441322172fa9e921da953408c38781f370dc89f9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ef9b2babb.0.tgz","fileCount":23,"integrity":"sha512-ShY8hLsZrziUxNCybt9wR/ZvJDQuuJxiGpIKRurEU8jrFZNhtuEwL8DJ7+EYFT0O5Bdyeyt/o+/Aw5+7bB3rdw==","signatures":[{"sig":"MEUCIQCU0yCne0i6IWk3Z1KAzc+eVSFVgnEyqFg82cKv9P0D+QIgEyONvH98cuDCDye32/vrcJvL2nKwkLei5c3tjaoCcW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0VhAAjeDwBXXOhgJ3gs263Q212i54Rn7AhbRx74XN70/LW/pCJ7Wl\r\ncWymQAswkwLFlj2209ZB0LYuDyXL4g5r/Nh9wIF9znOShhLEy76zfeTWiSLu\r\nsRcsgw5CnM9FkcHxbyW0tWfj+uZbEnlGMzEPMPjsqAPwagRVLruZ7rQIybVg\r\neC53VbqZKuHfae8ZQuu5tp7gjxaVQ8wid3IpgGV9iPXKaEte6/gS/S+UiEYy\r\nzVCW0GMWCz2NE8Eus+YM2R1Eazw7jQDmEFjjplgvbLepC/IA2BvY264/+oJH\r\neOnZR3F3Z+ebgc0QIzojPwhSPCb8Ixw7+4HbzIzCG8I98TfhYynUwxb3UCP7\r\nuNvM8IdaIYZQG/NwE8nIiPmA4PSdY5RYnld8P0I67EZcVWGPC/P4h673MzHr\r\nX6cYSSJE7rq4NC0ROfgZqIiyj5SIhtjDDeDJNjdfIUoxi9P+rYKV25fRLSzj\r\nWivOZeS9Ws/Vi7eraWeCCB21Umb5q/elfV+ZNiTKWuE/Apf9of1P9pM31zx9\r\nWGErt9SItJIJCDqRnmeklFznrqz64FT9o22ctTdaJxGvtJXWRDR24rHExZes\r\naXKF8wUBCgoNckp08i0KzMeuem/dMm6ZfxkWMAWtKryh8Z0zxJP5/5zFC7qf\r\ngEUw6ch9ZOi/HYalpS1rz3io3pAu1WJmdNg=\r\n=ZSCN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/tokens":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ef9b2babb.0_1665998288873_0.3426090155819188","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/card","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f38b8c50caaf1b9a3dc890f7084593d3c08405b2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cec7fb987.0.tgz","fileCount":23,"integrity":"sha512-0E1Uzxjdxu6JQGVrI9XvoRGWj/tX5qRxS1riKf0G7N5JJZMtJRJGofAlSJ/1tNJwwRcquSEe9kYsfYRYC20o6Q==","signatures":[{"sig":"MEYCIQDksPSItrS2IydUn4WSj+5+Bft9KHXi1WiinJPFbuf3ZwIhANg0x7zNj787uMgAb87atoSh5/VwOcFR1EvbFgXtCUzz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog7xAAomLwXSgwL1DqMUvYeLHmRBSs2dOnI9+cXTAniF6TXxWdNSkm\r\nQdAsUp1bd4rX4PuYUBcH89So9Ff+h0Aj1JrKGy2mr9hBt1dqmPlPIhp8JaBv\r\ny/cvp0/A74JQ47tmLtZkzPu6DQaH1/SJAsSseDtE89l3lR+Ru4YlWUkXxiGl\r\n3tlbk0uVH6wtvEG3mLy/x3Qb/eEH8wuSZeHkwqr+IVUw3zc2A/iflFMPMOj7\r\nfRyMYEP6MnvGfYYzGpOHJ3Eu467D70DA4s47fTj1B0eXa9Xf3AENHCOZEjr4\r\nELTMbdP9+waqSheqIjUAm65rWlQpdb1dRoOuVn2ZCeTKhSlk4h8/7rqBbCWS\r\nrwYF7Vptal+s6Ea6xOLTSXjElxHQTWDwxN6xm4x2qIORFjgyDOpsuXngiucg\r\nCLHPzKcXYIT8ELLseqAxebPi71UX0pRH5c7lO8apLbURZhTFS0Z/jWpKL3Uv\r\nI1jaKR+OXUfA0qmP4a4CaDj7fIpuO/dv8cvK+AraXqlAdS7nL9mdxnranz4+\r\nh9C3H0xtxqIGiRc+8Luec0G45oOSVUMOl9hSTT7vK6PDAHAOmZPTv2hGrSlN\r\nLqoIwDXiDKgNdqZH91mYSLiwDAV1zuxq+IKVbtLsa8AGkxi0mi+shvC5lVT0\r\nu92oMJ4WllZuSJzMJd1+E33wjZ7HsrSg1EA=\r\n=HTvW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/tokens":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cec7fb987.0_1666004190766_0.8078470387993852","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/card","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"386c49f2dcae2b078b2987b57ad89904a9f826ab","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4fff58b08.0.tgz","fileCount":23,"integrity":"sha512-YkegrU884OFonuAc+vKMzT450tmh9z5U/G/exYzmgV1pp+beBYRIQgF/wIfyhLR/1zjZSG3hooqmgg+Q615Ssw==","signatures":[{"sig":"MEUCIERG+trLneA+VV4Y/3uzJ2hTyqKzJ/YFu++gRTT1vrnKAiEAk8rAp7YlphPm6UVXxVFuLp+nGCq326FF0GQye2ti8OY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkvxAAovlkzzhP9frId6OZ83PxEHhD0cW5EMj7SO80/ofNksJug/hZ\r\nX38WoZ9JeXwLuMOEfIE6CLZPZHTUKEL0gprewSsIYbCSQHzVIDHJFEtCbWac\r\nARxY6PjxiiDIMxhcsdxxxdHoH0XrilZHjwUHmohqf9qn8a8fCAa8PYwJjDXV\r\n6LSTdLWYN23e5S3A1bLpqRD9ypXjxVl24JYXFKhi1C2Iuvv/JzA7qtnkcltB\r\nIX2fmyaF9/g5AlNEhNkKqA1skbS7RvNijpJOEe/V5iLBPVg1JRvG1Osw+6RL\r\nWyZ+cPVahV5PoeqW5f1XT3hayYOADfUr9wuNCUc+SepF5osEKkTCzRxFhw/4\r\nbg7acQTTugv0iPsd6ov7Sbuw1T20J7kIffNCJ0CmddcQ3JlpJXPq6rd1ceyW\r\nwS3ylkaZWGgliQu7vv8ivo4D2qkh0mQ3vWLM4U5VMVLq4uDpYjVQHUyA721J\r\ntfTtni5LaqFWMed4Zo54EKypGV6p2m9NWPJPmoNfBpL/yJSgcXAi6L2YEN+c\r\nRTJu8toAlxIiDijDgfvnP1tnJCTGCHpAVeu1mo3rKxUL5ObHP4H9MXFvUOyO\r\nvf3U6UgETpzWJ0rXj3dpODvsOQ7Byct7UQBmqrhryght2b5BRzlB2DtzHhXK\r\nMZ7uiWCXLpnbpgdNrnzCNw6GcH+Ze1aubPM=\r\n=Bf/b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/tokens":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4fff58b08.0_1666020160359_0.12868806648390407","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/card","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.587d8f871.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"739060802cd9e37cc70afa19e626d9b4820fe56c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.587d8f871.0.tgz","fileCount":23,"integrity":"sha512-XhlREVOnVLZIRiEmfURumY2zrMDm8isYyw56wmkcCJBa7pWgkwVOMIzHA7+yhWmjgbcaf+kxAjCY1aXzzMwZdg==","signatures":[{"sig":"MEUCIQDQVmJ4/RWzDzULHQHNY9FTinGBDujvmA+U8q4bFaoBJgIgdvVw+getiKcboSU/l1M5v+bJoh4z+d717GY1VtUQKEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohxg/+Pa7aDseRZVpwfWYmFSQ6NEQwIPhccavAB9iPIp+5w1NSanO5\r\nyCqsYHM1HZyQBtwC2ZXmNGDWM1d0vsSvsKHW0WiCnI1FLZvpJg5gxyiPKJZp\r\n4OMjpWzBMAXjodONzDodwHKyyYbxGNG7uhREEuDFQNPXyW/eQ3duEWBbCq5a\r\nWPaI2lNXjBNU56S7fINTCBOOwxbYurtPVA2EWUrFGHb/BKZWo6origxhzfek\r\nWwfbgVuqMA2fSVXACKI7qjAkYCFjj3/aUKZHcW0bkNp3ShQGG/Qh/sz/PNi0\r\nsHxickxbXC9UAjjjbbpR7hp/UKq/4VmARdJ2Byt4YCQ82anYmymVMrF7R2rq\r\nyCXGd3t0CXaPRLA/la/JIKQnFjOCe1tZRtP1qA1kD055vCrO546PTMt3obmY\r\ns6LQOM7gU+4TeE7kaUuvdKRXLG++xwxDJ/Dpf5YuGNWBF5FLmA766fAr55sF\r\nIV2epOK3iamQpEpKNEziYK6q4cvx6BaoU4HawIRPF6O6funzibS/lWG2e/bv\r\n381uFSxRx6FhSimLbNq6ZU7f2B9221HCl9tsVrGftqYUAiqeWJKIBWEEIdt/\r\nB7Z9LBfVMjFFH9WZKcahGKlB+XRdkI7FgRCQ1viqXfQbl1HfnKVc25g60k50\r\nKiRmtflR0Qdip1Fqgn6jfz9giVBimHQtUcA=\r\n=iPm3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/tokens":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.587d8f871.0_1666022237691_0.6040074474832506","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/card","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f709f2fc46f1d17e8238786ffc03754ac28ad212","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.edf4b98d0.0.tgz","fileCount":23,"integrity":"sha512-GkSs63dNoi2+HI1Kyo5uU+W+C/CGUYmlYQiDDxux3pzi4vK/zmLXG2FWMe3OsW79Kqb7yVneTAoQYn2kErI/rQ==","signatures":[{"sig":"MEQCIFs8S3nahK0mnyFtU7n3a7QV8e8jCttBCUT6KucpQqJSAiAcwhQwvYWrjrufyU+se8YU9UR0fcNpXDDxkvnO39/XBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpn7RAAoJ7PZrmzcjBqtTRhMQUZ5rg4MmcMANyRB5Vu3qXrQxf+smcW\r\n+v83wad6ZzR9e2oW+OfQ9xL/d5//XjSFn8CNzD0jfL1CrgzyzXBJfgGrTp9t\r\n8X98cFeHtbgyz1f2/XnMzkuXwidv6JobChUb05+8RMbEGAMuzaFFG/+PmcnH\r\nldrKISvnx2F5T2iQEEP3xWd4qoDbwO9xFEuIdWpDbg2EP1hPhl5qby41zRp9\r\nVzqbAsWI4+sWIip21bcCxyi1QMdawmIPuswMBfb1cb4XG+EOz/+Re/hgXqo+\r\na4ofQ25GZ1WjpEPU86ejx9iSUAxzNxZxbThly72AdieEvWiEYidkbasLICgl\r\ngCuwUxxkMvT+stEJCFF1FmxJLNnely+LjA0CKJwHynZznxqQPzAtCjWVb1ci\r\n9ArkErW7KPTyAP/Bh2A7kHgI86zGjUOb6sm8PVVMtE093lPQlWO0fiwPL3+x\r\nRek5LR/fmYG6su/OEPyvjQw6uB5Sn/kQW6/F6ab4katYi9L2b4+itPW2KqLb\r\n97Y1QdCf9TCpzEpUdcUu9fTQlGAI7miNjtGGR/+EPOEZnCZ89a0cNF4VyJnM\r\nYuN0CZ8yO06hWo1yB5en7m2Im4b63hA/pFI3q1Tg8fEfkWfVEpbRiyxUnZFo\r\nQ+yNXw6hpb1hq3h26QV3ULFZNs+mS6+y0ro=\r\n=XL2x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/tokens":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.edf4b98d0.0_1666024837586_0.3319748824001201","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/card","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92681c964e80a1f93425a2d4814ecb17acfb7590","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.024ac5f16.0.tgz","fileCount":23,"integrity":"sha512-TUh9VOmVo0y7icHzdf9NtzxcQNp1u85qEBR5hQaaKxOjraM4pAZUJty31ZpHWXJeeKFoRLWT/hnxoQJa3kI+2A==","signatures":[{"sig":"MEYCIQDpFhrHPVbs+4GGOa8JxuYOFGQ5UsSN5QMvgVBcosE8tQIhAMO4C+cxifeTD64H3a3P9VHcb194PspIcr9APvb3lwf9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWDg/5AJJPS2/t4Y21kD2Pkr5JxUVnIyldkO/SIT2+tlR9jmysmHn3\r\nwpvBZKDBORw8YW/88MnHUT4OtdKZ2MmMoI90OVWuD7cFJqM6b6B7GWASKehm\r\njJdHZnpfB8RxDVi+2BaSOgslTja0/DBy7irFm39nYP7dRKMBgqSa2AOI9uDz\r\n++dqbDHeS2s0TgA8Up5EXDQJWCbB+A7AelSzZSjh1a1JCKoJgIcThvfUhNRv\r\nkI9jGm4TwmsLdPMELX+AdE6tQtNUQScDKimMOaqvl5DXeuqrDiHXnJNZgeMD\r\n9o3FQrEhW6SHunACRGlTvaJu+Ofiu6GGSPCLURToSHxCJkmhcXnoCPlAT2Wi\r\nFdXUaEANTs9Jxjsb0cBbKLkRVowbLcfkXuLvQwoauN7coS2/ldZ3uzlt3fWx\r\nRyIyrW2GDzWp57maKjQn5WnaRlxuSRhSiLY7Y0s/t2Jop2u2c9lAEdQB1Bot\r\n4RntwChG1CgIz7F2sY+zUlErl2eRjVR142tobUFfeEHjgJyazxjbK5XoTooV\r\nQUiqUtQUayRboFYq1SLzAtGpvTm/7CCOlcBeikn8dPg72ons+69rvvAWgZQI\r\n4Cc0y4/9gYV8bSgc6IZm5vzLW9ijsDcyjOC/K/GzCROwChPt1+GJvx2/1Lu6\r\nVEXzvL7+DJ9LFPgEBkgP+kxYZd+ByNcpjt4=\r\n=6cIl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/tokens":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.024ac5f16.0_1666046552695_0.9569423868355058","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/card","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b18ee46c4aee3ed8249e5dd8b90fe69f62e589a8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c8bdf6144.0.tgz","fileCount":23,"integrity":"sha512-F3ncDnDsO2huKwJrCEBXm1XMWLjsVfw4SzPgpjPcs0wAny++IEJUo6ySUOt3UAunALjIO0jBIhQeHH6u6C2o4g==","signatures":[{"sig":"MEYCIQDL2JarNOvNQG9MTtTC+ApOcpNpHhy/Mm/qs/isp+En4AIhAJZi42QlxsBM6GBFIRAg7RmNpdbyag/yf9x5cF4ejwHC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu8mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRDw//ffSSV2wLQQ6OsHNW8yDewkrWE0Xlo1MIJVuuf5ktPStJzMj3\r\nxxlNuNozdyoFom8jS/cx6QljZ7+r6kI6crUBsE/v7Q9K46GXlT1t144gOnJD\r\nIyrMFs6evmunikIblghJyUv/TAog2pxGAJu3c/7LgfaKg1EauymLvzuFrXWQ\r\ntKBWWEVbC21emuEVHjW+f51Ps36tjeM6jZB2KM3kjG/lO/xJ2NbxDwtJuoPT\r\nliZ5PF9yBaLgyeXoUnmoiPZVE1GXq66WEQ1j1dUR5Y/oAiMJZQ4hwW8iCt/8\r\nxmOyiElznpd7VOMTb0OGLUD3GqRQGYx80m3nKF/ok1wrKyfXBSnN3TSHeFJ0\r\nKrEnKDMZrusCnsJQHL0oZ+ewXtVs42Blvt2JVQPab3ykrjpPnMmNHkMas/vz\r\nbjrpYvrN63FWh6Lw5/fmbmuFehkaAxLQZPvl9pTrVeExIEhs7oEFB5GQqtsW\r\nOcXQ3kmcEjdB8QgRdRoL0xaBt2t94HmfH9mbLfJrhFimR03VKqKrxpvMXweo\r\nIB/Y2p3fDMRbPfbhEEMXLTM1T61zcketQ87snw5MJVsy6G5RKNLC3yQqAHGN\r\nJfhGeCTfnLObvCUwg8anCk/9Sgb1KmNtZAQtXpLNSHs3R5MCDNDzvZBCeA/N\r\nzvoeiD67qjqN85Himg61s6HgHIfxB94NBbU=\r\n=3AlS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/tokens":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c8bdf6144.0_1666117414519_0.7726097237601133","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/card","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.bacda4885.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b77381f2d3afd7d89e1a6fae80d0e06e590796f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.bacda4885.0.tgz","fileCount":23,"integrity":"sha512-+2+i9Pxb9daJKxFtZyvnp8bmTJpqNM4XH5BFRgZ4MnEO/TrT5OgUgcPviKMNVbp/GFidwUl9PHmv5ShBLryMPw==","signatures":[{"sig":"MEYCIQDvhQp595wHbBJqC0V8tDM+jDjJIt0cRSfLOBg1S58PGAIhALy8EJRldOSfSe3sRJqcJi/RxfJT96R94eUuufZmBOIi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvOrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobWw//eczpMQyMrU0XztrOONqGmRkQozaIdEg4+7BIXHEYd3252LSy\r\nHyoXr3EsMr9SS0mQS59JUnBvqiF9UvTLVPk0PQmqgcN6XT+y8lmFyPEyEF2E\r\n1ossmsn32taXp9dFvXw2Bj451H7LVJqwrBIaUlWN1X0AAt71YdVfIDmNKuKf\r\nEPbB7GhMrNZJNqDvDJhvEHU1mGHEg/qKnuLUCF2ek6NYB61yIR8MlK71iWTw\r\nvLeRgdMa683OrmAlohmXFtqjalIdQLWY4VCgsOgK/BpoxfvJEErtnzA3ZrOx\r\nWkaRxnz50wFMBbOOFCptTWQa7vKKXUSILJCmux0F/zC8dg0NpCGpfB/JkS9I\r\n7/tGZHU9WyIvjIE7l/7rGZVOg0C1nnXyPKV8P6BNrjYsY20zKSN8AqH9utMU\r\nb9T8EfS50Uwsb40lXhsJGe3jMd/l9Nusq5vmfbSQuJP6NPVk0jXcMCLtZwMb\r\nln/nEcBxdx8sC3oNjRGdPumAHT8brPOOmHOEFgR/5aXeFpq+6rRnZj7AkA3Z\r\nI4rOZwvND8BCGstAFf8c5+20UXZCe6RZEuy/Q2vttjz8EoILU1mXDtlT0lqP\r\nHK+gOoK82CN+l3W6WFplmPE7TLOxzDay6YiQ59FymTAAaHKKBK2rtv019HGO\r\neunLxwD8hOORhjKtvfaRC+E9VH5FMu1PE/I=\r\n=TPQt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/tokens":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.bacda4885.0_1666118571332_0.44075564454071947","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/card","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b8fa1b32953f5dfe82b75bf4a72e5cd7d12599a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.92b2556cf.0.tgz","fileCount":23,"integrity":"sha512-R3Cmwlv72DnUSZMpTNXe/rpn2360j/r7b/PzxxZu+rLWkvIa8i/Gmbe9hd+byG4Fo5FraJBN8LAPa0ZoTGAigw==","signatures":[{"sig":"MEUCIBLVLekKen10W71SA8+eMBR4KLLktqnoH1cyiqAOg3pgAiEA+HFhAX8L5EPBUKQJp7q3EI8jAO8BD7bNUrZ+5DqrLyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT08+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJdhAAiO9ThUlRUAZogK8Gg1MgS34UaSGkB94zKdMvQwVODZSZH2Zl\r\nrBN91OM3HuIhzNG5bOun6rq7MhWwdTpSwv9+I0FLzHjW0VTzwjL/ulMFQTZl\r\nHYlJKdVmUhmNKrbQjNaJxfvw3FoqLVpKavw88WrkbZwctxxRDZgxG9r8Bhqv\r\nawNbrwwhW6c2W4wnfDsvHh8SO3GYCxYLV6O1sfUAMD9CRp0B/a6PXZA6av8u\r\nEAMKCQlPlKCdFUnCHR0SwDvQqH4OIMF8MmoVshiKohmPoa9UsnCaNE3xuOJW\r\nhNy82z6/T1IFlwOW+DFuK0FV+w0rXnFRfNlSeF1M7dwGcVjvuuiy3mjKnLuN\r\naiJHsUPXuuuYwmsdhbcmRy3KSonX1++X73B+UiY8+BOgFV4fTsLjr8MUvHP+\r\nsqev1Pa9vSSOfqGe9qwvqUoKsGlbZETS1gXAPvOgDxr9M+e04aj7YcL0KPbS\r\nvPh1b0wwZGA6gepdaRganI5j3gsL2hjxacJtOkWr+TJW3RH2/NuQ29aQ35gH\r\nU6wHKSN/OYiCPDOBvsHhOHQ4EtZSrzvrjuVe5culXQoblH0ddeairtIV3iZF\r\nenDEkyynFWNQISeifUW/kVrOoQLPd1AphUz2eKNyKhxJiZsHyi9QuMWsUald\r\noqRbDioI06Fjfo4gMV5Mg4YCE8Y4ogWZgWc=\r\n=Ix9z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/tokens":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.92b2556cf.0_1666142013932_0.28191907415414197","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/card","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cc804509a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe50dc97aeb3f398ed908af88f1ad5142d39f052","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cc804509a.0.tgz","fileCount":23,"integrity":"sha512-WmYsNDoa1/i2xfXTUaeBkfZElNYvaFDWtZo2Jlei/dFSBkRyP6QOUQc45GzY4SBayFAo+HOE21pgIfKfL0dwmg==","signatures":[{"sig":"MEYCIQDC/Opb2mT7797Hy/Z2LtXLPg2OgXUvr6JXU+Jn+FBdmQIhANGP+2kAqfKjESGeS8bWOrWSjvIzu5JFQsnWeRLv2Hoa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1AiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHPQ//Q8U5MtnQXNcVrHMw40p8zB6YcqduTu6mgX2luNd/4jalZRQr\r\nw9F3O9QI5Jt1L2xhjFWiLfm6GEorJBN4HI5yv3N7vCURcO4NOgjZAFGaP1/V\r\n59Ouo6PhduIfTfioK5TPsXs8mTha1oqTwp6cpFLHDIL/bgclH2GY5AD+tvQC\r\n2MAzW5OFuyv6KCaIJWfVmS0P46cshuhb+01Zdid4w0o1JkFrA4tTO6irQY0p\r\nsFHI8V6FDaUKAS1mA1e9Hr+U8OGOOl7ktOWCuEI074DUciX6YJrpyJs8l/A/\r\nnmOrHKhyFj3UZiC4aZ3e6tOgDs3iHMqdlx8oRFhhu91Kf806b91Zndg/zlzU\r\nfD+dPTyggnaRk/ADtuh/3o+rNH6d9niWIaDLjgd82iVrEmFzejyyRVyjZ2Ke\r\nrEU+BMH7sm2cK9o1uON9s78zcek6RtaS/OEonFuKMkcwRnNrQAIJgRY2IQZb\r\nEyNG5fzaBX8Q94GEzpKyHdFfZ2EyZQisbXJEIDFCXCY4f0X0IXD/t+wUcBjL\r\nu/6BlOzBJJ4EfKnIMhppRCi458o6bivQ7U8ORK7MhR8yYOyqLkmNs58BGjz4\r\niOAojlBYi2wqc9Xw3u3SnxAMsU2/z3hBMsHfuQ31NleRUsq0XRdXyzEGkouk\r\nVcHF409acQPyrCot93pPcCF6ABiPdc6iL1A=\r\n=GbCo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/tokens":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cc804509a.0_1666142242040_0.2120449475332573","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/card","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.982bedae9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef911e882981b200ad05d265728907df6b9dc5f5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.982bedae9.0.tgz","fileCount":23,"integrity":"sha512-wz8qOB9j8YSfqG2JIMNlK+ae0IRMh8S+8JmfegRjtcm34eHJWul1ZaxP5zpRCmBaNV/NM5Fwtuq/H29wmuQceA==","signatures":[{"sig":"MEUCIQD6eK3mSDwZqAW5WuBMk5yadN/nRrBjOHNojgs8SfNDzAIgb9SHrSaGfG1vR7AE+senwXW9nOaJjJzAt+ppNzkb0e8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojwQ//SonmvoZMiY/zgxM3Ffe1LzW1amZpuhmtAkKd2PwW13fZ5Yq4\r\nFvla9wRzyHEy6noEYsOrVSzloTeI4TmiFyh+K9682WvFqKkQHjDydWGswhsE\r\nhUc53oRPLB+IZsjZDBQyXlTXyhFLRfa67lJa57LF1NyC19djYCQlx6XuyaK5\r\nmOrJjbwbN8k0XGOmd6v7oB9sjnOgHkmzKMNV1Zi2tgcShu5ncSHwIYYmbdSi\r\n5Z5jPyFdb+ofF4baFuTYa3JJPhiq/bUX3X+iMTyFqsrrHalS1dhz+/TtxEHY\r\n8MHU87Vk52aOALDNWhFqlSLagu3fgsKXyJ8wh9gBlp2eETH4Q01EzhYxEhig\r\nzIZ80cwq0VOisdDZ5tjVeMHebt+Gld2F7vXp2IvG5gDczMoBGGngU2a+sVAQ\r\nVIBjaAcQ7skd2IZhye3pHgBNbVwWm01UoW3Zigrvk56ZeKdPs9PehtP/0/RU\r\n0hqrvEovirUxBA7oMChlYiIu5cLStnFn8IzOEbgLW141mGUlsmLyCD8jzdCH\r\nJfky1MElnPpuL++Irk6GDYfNRjDMN0GBmF0h4idqDgWrnNT0WYUCjBK0LYpx\r\nP7GbtmyVft9MzgT3u7aR57mxJoATrFJzBs3Y/Kq7m49EudwVjDu/EpUGlR8a\r\n9PtSZFbGN0ldcWtP/wh9uffe3sa1/LgRuEY=\r\n=qDLK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/tokens":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.982bedae9.0_1666143439440_0.9957691294364248","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/card","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5eca9e713f9539ae796d4a133ee027fc2144543","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ee40081f4.0.tgz","fileCount":23,"integrity":"sha512-7Q46SdfYCcragY7CrB1XAedi8GqZIqGTJRT/K8IhSYExBJFcTSwq+qBRCcdUB37XKFy3Q6vIfi4CyXe+MTww9g==","signatures":[{"sig":"MEYCIQDpsa5+DpaEcTaaKGprnV84EtM/+uOV7xrygwII2ui+fQIhAIZ2krGWSy8Mn4v9gXAQQlS14fGMD99vXW73Btgmiznt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/hQ/7BPUm+bcAmfrt6uEt6SY101+UCx4UIhRy2iV2dHgv759nWsEG\r\nwgCFF4YJ7CEDhXcq8OVfUtcrmJMqoupbjcI9OKIq2rDLoc6rICTGPuW1k0R1\r\n1lcruIwm2oILfC5+7T8bYf2x1y8vSxlH/YtjtD/yKe0vYiZk+a7BQBKLlUwJ\r\n9dbSMdpAvs33XGrt6HsdArHOP5UyDDN3v7+d0V7WedcoVZECrGRLZQxq4RBL\r\noQZCOELqMbzliRNQL2dIQ7HqEUx3iu3GVI5rM2qDGUr/kmgJKYdNXclI5MMj\r\nmGRPG5nXb1eUmocfo2AHHFdY+khiwbAaF40kJPCNnGtz2b5A+RykbFaqvN/k\r\nbWOrKWVfQrT9XKvdWi/thWRIhJZBv3h7JSjtPbvRQ06YyxH0f+iaTomykT8g\r\n5p5z16FyhWhvaG91DkLHbFXdvAanQ1ZMV/D5v/OAC3IP1gvwkUxqwxcLiIFm\r\nWqfbYhTD2NWfEPHNaZKUs7yRptXmiFHAzvQgU2vsxtLGI6ifxHKK6iKxubEZ\r\nKzD1t0fJcWrLTQjr03XYNqLyCWHFgLwHv4wQ+pRreVmSiS9oPtsck5tf+Cet\r\nvATV2cIr4TExnyWP5cnWmpKIH5Erx/csOwhhHWXBCby1mS2tqzsUorAl6a0d\r\nI0yzbSYt5YEtHDbSPMD+dO2gKSzHJ0g0TVY=\r\n=2CuD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/tokens":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ee40081f4.0_1666210319837_0.1214942249881259","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/card","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e59f428edd4da55735fba3f1b03cd7d18002cbc2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.98f1b54e2.0.tgz","fileCount":23,"integrity":"sha512-bffj4y5snHmYoNlfOG/50BGW2UGhTPiry3SCDz5LBdqwSsNy2Naj4sMvh/CUc+xDqQMXbKNc8EOtIIlpgV6M0w==","signatures":[{"sig":"MEQCIDAad6NVoVhBV/ZNR6o9yq6CtkYtK3iwXC8/rbQ6dLm7AiAwIoQDOq/K6TGtESNOa4L9WYEuDxnUI0n004rPFzjQQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdI1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWlg/+Litmbs3sQ2TJ5dEqIN+nmU/b/nquiU5DwBv6cYLhLvdZ3cEN\r\nKa4oLhxm7m72hgGiO/wz1WlyiXTG/2W8HSBx2aBKrPWjQ9PyQVeYXClg09Zw\r\nNcbLQ5C6N1peIq3EEFKBIs3liSg/mp/0dpDBr/xiOUg2IdqKUofUxVBCZHK2\r\n3tnoqX410+YpA9TrUrc5Y1ahK+g9UK9OjeoH4iMscrQGQrCyEt/oh65Kkc5L\r\nKTASZeGr5x8uFcFp7XeWMPXlPBzt5u867pGSoStNf3tPJ8GZMAHgrF6eNYS2\r\nZXwqlRrKvRIvdT6gWcdI1WEEzqQdtc5kf7yyp+6JfdXHLvivB+8RKkvS9ItJ\r\nHf2NSPdPZz3PhfxZLzu5AgpRV3OUlrN+16E9LkG1YaE+LsxX7mGybkm9A5jP\r\nALkFFfVbSEGJSz+cyNT6YO9s7LE1AvCi0qdaJUGPlbZmv7uJtBVYxtD2tQeJ\r\nBeV5SpGFsPA8MQa+Rjg6XvOxFO4vjLBz8DZdKqSdIRn3w6qVC4+hT5D4uC0K\r\nCVNH4hFi0Ek7egcLHYMSBhpldPyC5ZQ1/hAxT55n+bxa4I3I7Ua1dZg4vMW9\r\npCQwMiPr7huXPfdLTG6OqQyGCfZP4tWq2z220Wv7Xt53wQJp+iSllF8noOTb\r\nLU/uYEddv8EwwpO/e+5mBaJUT+iAqvI29Q4=\r\n=iXTY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/tokens":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.98f1b54e2.0_1666306612807_0.608869954609603","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/card","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"accb573a4e59b0a773f7e390618a6f734c48ce04","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":23,"integrity":"sha512-YvX5V2biFb9PbSgyaR1izApPfYr6ato/vZSn41Uiz5ITVUixuHygWlL/P+toynbOw4hxMFePUqTEtaM2Onr/vQ==","signatures":[{"sig":"MEYCIQCfLfMcLmOQIY2q4QT/D0htoKToqruq5Te+iSXAvjEz1wIhAOJEn2qFTx71pz2Uacw0Q0PhXKJxGhSkHNIGReSbVd4f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtF3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Mg/8DCIa+Ia4PJE1Qi/c1JG83KbSZnHDP+b9jz91XwubhzKI8qma\r\nsxcVPicv9Q+FmHJhPRPpWDjzZJLehEeVfIUYNorbf3OdCrcGNBEcdV2p1lfk\r\n1bKzYijk52nUUyeWRsoaRL7Tf4XsF5OMy++lB4+BYB5qM8zt8G6pTnBDTs27\r\npdpnzenZ5rMQrB/K4QRyadyVP+aWr6XlPyC5k6JMsZWKO9k0PyS8ODhNEiBg\r\ni+L/lKJIapBoJqyyavoIwHBJN84+zxVtc5x0nkhNgaCZTq4zpFujVyPhcru2\r\n+dzfvbYxu5ZRvTOrMJEqOib22KRXQMzyUalpH5+wqsC2yoEu97+ccxv/Cp4D\r\nd9puzD0CsodAXDck+ngYz/sMb/HJfxqddd2LGvexNMj0Gn0EfiYEw6/FtUwQ\r\ntKg4aipTmbdpPykm9SqkPJDEgKf+LzbatJJpnNz42M7YvP3DzH7vmHmvbNjI\r\nIVHTiQqoCa0HBSVQ+TKQKTSRw91YEVl9XY8MxBzm8/4pdej/WQ/tJivqBfxi\r\n0MjkWTagLMwIgiPPf9CRHN29iSpt4AYER8pkZU14SIDDRvqAXyR3OXaZOIe3\r\n2A+YtfcUoiT1LApc2NfZZG2HQ8LB54Py0VBoURLUaSg+WFe8tRwI8GQXKDP8\r\n1KuyH1I8HIIG8op4sv3bnm/ADFHJsrEw790=\r\n=s19/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/tokens":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e74b7ba7e.0_1666371959095_0.5823941149871334","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/card","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"902eaed4a8600caa04f278a1c51a403e8573ffc0","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ab55c07d2.0.tgz","fileCount":23,"integrity":"sha512-gA3iS9Q7wR8+Lx9Lq4n49S636k4zBbmwOewKjIdBen3CKfPTGHo53htkS7oLl8qJ2ac/9XS8CaHtNGfPJ5GBtQ==","signatures":[{"sig":"MEUCIQClvzJqIDkyTZ2kF258+1oGWU2dvdFCmN4ba587Lan/UQIgfODQeZiwWScab5v60wr6oUT8FCjgahPynTDWBvQgcfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZEw/7BWJYkFlQzrMxoWV9iwPXVN5zZwB8uS+E5cBVHpg+hChBT4kz\r\nTqqSrrgRb9T360NHoGxVfJhaHqmOmPtMPp2by4BLhEOOU1d5b+2uXKPqP/aa\r\n0G28UjMLy7Wt1SYRexgOt5XKxLBh6cQJpTa8a2KnFrHJEW4JzCNY6fZ2bcZ0\r\nfp/tEqbK603EMst/WgjMuDud1DpBsX5sG7fRzNlTkmlDPAR8Wj5MeOAVSqdJ\r\n7wzxVXNPwprt4eO0pH4MApXpNojbCoVVn90vfHLAZ8DY9FlbizuzoSqwLX02\r\nmgpb+GAlQIPwBNVFqKp51WogaJvLg50D3LIBRGxKbq3mKJUPRYPpuLZsQdn8\r\nnxd+Ta9PGB5byrmIbadofdLMK4323Fz4nkEujDVA2xkdutFTatTYHScvMTRk\r\nFdBgc+lt4YnzABlHpW0r4ELGEpoAJyVa3/2pfGCnGyqEXracrjXE71xgAVld\r\nPh3lY3hqpJ5792ITMW8ehsGSYHM35Rx63MQ9Na7mWTVCZDeqOnBYtIBDhlOU\r\nlaU669kNoswmmTV2MsPnG/+0VfFDvzPPO+hRwyYK+K0CjmEeKHDe/UDezGOU\r\n4Mx8TfO9I/x7wOMfU4h1vZZlRUyEBYudlNdlhHOC7sdyZnJBa9q2MDy0j3zL\r\nOWG1/R43Y6vUc/Iis1cjmlyZn6YvZ6cOqbQ=\r\n=rwxk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/tokens":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ab55c07d2.0_1666462760496_0.6061867241027152","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/card","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.fc539db34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2308d613d4e85c2780fa2726d757a326a85a0fff","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.fc539db34.0.tgz","fileCount":23,"integrity":"sha512-9WgSVDHMMEbQbF+9x5Uh7dFcRjZeGCv3ZhktJ0kSM6U+t3zorFbdUAv7nPuanhtJrBTntfqQAZIbh35ycNtgCA==","signatures":[{"sig":"MEUCIQC7NmN2l+mxZcLL2d6dPlJsP0m7ojcZodmz3r2r0fwnqAIgH5VI+I8CqJ7dU9k5F1Ns9Xp/E0pT+coUHUYwho1Ay/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo72g//bV9pgZnE/7h7kXXAaS2lu23AMzW2dV/ZqBy9rHt8F24tXpzS\r\ns4aTu4nYDyAiR8XLvtbTJQzQ890pnLYEqY9OnJ7UkK8C0ew8oRaDv9iVoUQo\r\nQe0puEbBWHtcMSM11rQEmBAOqMGgVkQ7cac90imTv9Ejf2cb9kDP3YCBm3pY\r\nI4FbCOdvoeO69RgwOPOJYqRk7Mdxw8n+QSAJECxV6ei9ZDLmOPLvC6Mq7/hK\r\noEbS/YZp0pSxcjmHGo8YcIaOMcN5/xjB5JCvtlJrVMWiBtvsb+bNAeIfkDd9\r\n1ZSI6gSoKgSD2OPvLu/iCXeekXfHl3U2o9aznndWfIhLR0W9nhIk61zflFgN\r\nVRn0cp/gSELbu4L/krUhtFjHBnn6jTowNzYYbXMMff+chti6unMbuKBbMFHL\r\nVy4CtrYc4qGNt2Vl6CsgQy9dT2FLpMb51Dud5O/EwUUAj7x9vorUL3QiDzcl\r\nGlCE6LZYn/bJHf6nWmxEy5iX/jzypGhj9GbhVKieMaIApuD2xlQ70LxEzd0A\r\nNG8YqgEreLsh0Jo4MVJ1sDnkmH1h7+iT0aoKu8PntBMx2OySyzqGy+d8sXSe\r\nIJIYqaiYQ4MkzXDCab4RUe6VDQqLP5idbL0J34fbV3HmLNOLTsblK8G4nKwF\r\noKL5D2l/X6AI0GzEjSDdEshrynVnDIKwZ/k=\r\n=3XES\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/tokens":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.fc539db34.0_1666637960643_0.15937863047994116","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/card","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bafa20e1b1461541930824c7d30b0b042eb1924","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e340b04c5.0.tgz","fileCount":23,"integrity":"sha512-guoKLgMnuPft3tOxMcBZMaIGLBw3JW+dgNPZOp7iHuBQaKO2/vxvb3I3BXb/gl8O98MSd4cJah38mS2jq+witg==","signatures":[{"sig":"MEUCIH/8Ulcir1CJmW6gJQbs4UVOpI7TIt7ErF7DdfTWOaexAiEAv4uMeeIxAveondG5caIhSB4j0i+e7VkFGa9Uq8ynFoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBDA/+La8VYc2G3foiuXd92R2iPy294iKjjOu41AqGbesgI+R+LLJ5\r\n3q6NmoYwdvnujp/j5M7as+BD09eK+3kIG6O0PLaN8ps1wuhyWAwsEk93hlBE\r\nXUhrTam36ikVk7up19Zh59yHtAOeh21TWDoPipFfJ2nfARE/htJu5eMyHhin\r\nMznQiLdwvGu2b3iMGYHF5xgJj6+hUabYDAZhFJsQWx5I7dq+oDFE46IIni7t\r\nEJBeV4CfEQ3HVni0+l6Ciks7QpALF0hHlkPrtNsPYfuvBQZoF16SRZJDSweE\r\nuyuxsboje9v9oUnUnqzOs0UFFOaasNnay/sXkM0Ceyg9rNsIii16e2xE0F6E\r\nB/cVrJ77DqnFoAQ9226IqTecDrmH80GvSgQRkbXPD4DpHc9/j0BafT2yDxmx\r\nbNbJypPAtKfgnqe3yaoFatQ4WHql5iwX3wTRq28IvELVi8ZvMjWEJ81ss1nt\r\nIC7LX3ufTjM0t/54uKq+knzJr0IyJIk+oPdKckD2tYQicsnMhpkyIjzBWlPu\r\nAgrqComiHY66J/sLdxfZMfQJeerUiW9me3tnjf+KYBgP6qZJLCloglMwc6lX\r\n4yHuQX9VUsQimBolE2/C0DZLVLbvftjHHNYEPL7tvByItPdhKuDuo0n+Rj1z\r\n5joIU2q+Z5zKAC5aWrsROueQyBLpur3k6Fs=\r\n=OZ6G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/tokens":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e340b04c5.0_1666741513466_0.0718497532821607","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/card","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df2393c0e9973b02956e8243a52202afb265b574","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":23,"integrity":"sha512-onp+GO7JwwcQtajoZjqu2WDub3HgoLpxGmT70/e6MMxkGaFZy4XF4vVVyEmnADMJYFzdP8WHeVWj+4FT/cT1GA==","signatures":[{"sig":"MEQCIEIqyvFZ4419+9rVIG3bU3GVLlcwTdslMgEPA1YuO4WjAiBoWgc1qHgPyl5DJuR2/4+Qzhguuo6DnGRnNbvcD+BP4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq64Q/8Dsonl+iqo+QvAnQfEkmtVgXdnsqCtJTc8Yees16TRz/n9b9Y\r\nCLmCSZe+UnBlC6fou3yrhuH0i9jY6n+m5vGZtC/030p5BxO+PVZO7ibCa985\r\nYUsfudKsceUF9Wot0Gdk2YryQCTrcGtm4gVt4BO03wwIu5xe2nMpH+xPzQuY\r\n2hsRRTZfwYhGvlGCTmTc7bzL466rCCQ/eircOqvfUnjtFy/Ysw56QLVEkLqD\r\nuARmhEnxD3G8UoIA5LkdSmL9CTvFFFZIw9x++qbOTbZs0eM2IMcnkRqWfk0w\r\nnIqguMyEHcyDzi3ffdLFTBZ7eSPLddQ/lx03aHWdg6Dieq9vgVlAnfXBo8p4\r\nBv8UHK00OT0IyUNgu40uiQjcxgFvP5RqhmnnlVDhcrtE6wRnM8p+27JI6C/U\r\ng2SXAZWAkrxpRyAEUMlrVlTWVPX5PkyIbjuY8Q1468ZGsE9m6YITLL1vzWei\r\ncPC/dYTEviaPtvFfH7+7ZrUxBOe3/VeS/EpWy40dve4uoQJ4y7IQa13OQuJT\r\nSNOmceXRzcKEh+I64RwtLDAInmz5HMEWXdzKdSz8hTWLyxNgTOAOXsB5N6AA\r\n5kduuEGnemtPCekADdRrBY3LNBhomdKAYOsup5UerdoiPYI+mMsEjsGpx/IG\r\nInhjqhNAtmIf7yBRaebuFoJKkzjEdhz8vIU=\r\n=Fw73\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/tokens":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2c1a8f8fd.0_1666805443300_0.2594099652527073","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/card","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1d5b9c34f4a7c82fbda795edadef3b36518b764","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ecfee946f.0.tgz","fileCount":23,"integrity":"sha512-gYcV1qWjsg2w471vC/CnHXrKYK1VEVot/ONOJXd2ahh7AbRGZ/hZ8aV4WSizgq0RHI6CJj15BAKQyCSlJzE9iA==","signatures":[{"sig":"MEYCIQCUHYolS0QHoGq2YT7Bj3hkYm2FX41g9HQX1g3k/N57tgIhAJv3UOb7DXZatRUegViVMrZpXWEA7qtHpYdEk3NFoP64","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Vw/+L3qjOOEjF7WcdRIBXfosHcWOVGFJbeLlReYi0hKwzqoq+fCY\r\nkAQPlUeEhh/F0irzZIT0dIqCasWKpR/OoG2DZiCtfArzl7cTlFf+09wQqeNZ\r\nItDHKu4lKbCgM9B3F6TQB+82rAGC7sx3HYqGCn5zDLV08hyN929aRlm5D/7e\r\nd/oJBAp204M6fZuwgDfyqdNJh4icv+f9QV1cJEKgPgF3/fhLAz+XQ3We/oqy\r\nsO4tPfB7C+aQX9CJwYXIY04YhPmy1t3Ce9mkK0A7B+KxqNpeUjUvgkthcos/\r\n4uF+mwpzkejJwwLOTE92tKrDO5plYQBtO+8qi5V0gAPbjFVuKLzSwJ5OhDoX\r\nqdkWoaub9BYFy9+pu/kN4FfVhA745YFo4vdXDkombQSXxYtiNPKulb+RDUV4\r\n1y/cOQ+6298Z7mtfWGK9WKt0yf2AR9NZS00XOA53NEf/e06Guffg5oSUZee5\r\nBDCw7H6cv9C57Hz/08NmzKKE0kRKMhGXYD63Jq1JgdUqHP20lBbF7OaQqnBo\r\nIZnXRj1p/+ZciyM7jFdzh8v/6IAR0sR9hhEgVODuAHWlF+JqXJTNNsTq6qvG\r\nLuQ6Mk3+aVFlH0rJL2bwinPaY2kG7XFLI5BITsn5cK4OYodt4OA0BFFvlJ5x\r\nKWioT2gbNFOfyF1jS0Q058y660hJ0sm9sI8=\r\n=khVd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/tokens":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ecfee946f.0_1666815325627_0.7690208806279384","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/card","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db9303bfaf66dcbb82db98ed3cd9ea430a45b589","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":23,"integrity":"sha512-G/c1sGv5B9/NPvsTq7QWX4/KoV4K+MPTjUOW9sK5cutMr1onGBx1dOFpvHR+6FwiVx739tlmxEEdp4MHMWe1mw==","signatures":[{"sig":"MEYCIQCEm6ek+/fHBoYiJFPwFdldxc4u/nymPlrf/Rd1OBcLIwIhAMFRZEkTHV8MoKD5kX+AwwLnckorEisZ+cV9VHsYG9AR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAa1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXVA//bROHv2klYy7zf/Kc+5T0UB3ZSTCZmlVejA2BkO+SXeTeggsg\r\nWBGa0TBJ5fqBY7I9BRdF/WCkpnE78ZnqcdTdCNr7+uZE0uP5sCsrpnUHdGBV\r\n/N5AQBRfrb7OYDw/KEvw7kKr/bDsDzK678mWnnVVr3p/ud5Evji1u0otf5A7\r\nww2roHcNi7J6PJ4gXcwTSlyDX0k1Qq3jJPRYeNs3VgexvjLtieSEjB9AYHoY\r\nKEJ/rGL4suEqM6W+2eWzvjrPFkBwPmH7x9LfBOTTz7dHHkDVu4vtAEbKXQf5\r\ncGag4Z8VUG2aCIwKRwAjU/s75aFQpU/fkCC2zvsxwNak3M/dYD40Jbc5G1EL\r\ncsxPOZ84qc3917wYg6axxtc1qGtRm62Ceuze/tNvkWhohyiIEPoB+woVnXum\r\nMAjH64NZlF2NVgb1PuQs1wuus1PS0pMj7sP65ojUpMNNySyNG5mBM90lLFY3\r\nAhU4Z1AA+pxBvzv3st4zs2+x62S0DhqPUNl3Cd6r9l85Aiybp3mZ/ZTMT48+\r\nj5qZvDiLyol1n8Ss44y2MQpqzC5gkR89fbaAjqL+NKiD47JdLB6WB43y9+TG\r\nqokKRRVFjBAMtg4qBfkjCLh8f/YVnjXLPOD9p15sXmAmo3Fy1xgiTWIVEB+C\r\nDUmqCz6AUn/do6m0OV8IGEtZwfFsIVU9S6k=\r\n=IR2o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/tokens":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.73ca9dbb0.0_1667237557567_0.3443829095702289","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/card","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a78ebee8147489c9c1450c6da2f3f955814d9272","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.357f2e5f1.0.tgz","fileCount":23,"integrity":"sha512-8uvc8tF7mOu5x81sO+CcIkpfOYHit0ogGtfI/dASVzwVQK0hNmFH647+8605HRLMznVZTxF0Xnk/SJZvWvQ+6g==","signatures":[{"sig":"MEYCIQCnL6EJnhebxS5xNt5XqFIcs9Vlddgo/2/1KvlxSK0UmQIhAOAlV7JXac89msAOura6/XWVNOs1O3TnjK8xYPgNjT+g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwYg//ThDVP77sL3l2zJHA+twUa5tfoaDYVU2uY5EX8rBx2l9qYE09\r\nnHMUY8itxIs4Kwhs42MIcxZCo2UPvrEvuS5XUuZczMlx4nHEBjJ9S+v+XbEP\r\nnKnNWR2SlUml4plSFxZEEntK29I89lZ0PicSxSIin4j655huOBXbx0aXvEsc\r\nYZVkd1fi9d3UVj8Y+4fuDBa3OPFbP00YZGvVVFpjfUFGDUpN4p4yT6cXSCTH\r\nznYbsgWE2xrYHD+8v2zCX+hobe7gsB/io9rcvNlcuV8sfZibxwhDWd0tH8kF\r\ne1x5sBAAau018fkBGWY9ilgq8rC8d2s6JdzHumgFYVTJaBgbR9qTmlGOFR8a\r\n91hPMB2D2n/4XTOVehxI8zN2FD7Us2tSijqPAOBWNN0SuWjwNpeTFYbBAWkq\r\nSANoy38jY0DH8yZWXIxMynD0coxVHIDdrBDHeDANnaTRZkDSQCtdWSoFEif9\r\nWMDJzXEZZncOIWmjjX9sp5J/fmrcUQoiZIe319XVQdSwhD3B0YzEqfSSXcnS\r\nXQTfOsAZ/XHJ9le8RkVymTy/hvBV0a7Kz8XWHNOJD2WLgkybEf8PslyPrB2F\r\nQL6+xTlEAhVRwt0i+/HUlwq5AMYoMuGTA93vNCbeNP8a122/b5QFdVGqMWVE\r\ngnbrfo25qe93ZaPL60VbuNOLJJd9P5/LeBY=\r\n=5lA6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/tokens":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.357f2e5f1.0_1667242177223_0.02322662470679493","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/card","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3268081830cef2a376b9a80eefa9076285f4d370","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.eb103d4b5.0.tgz","fileCount":23,"integrity":"sha512-wiycFbLDW59Q1XT+AO5RA+zLDi3K+3ckMlOlp35Fg6jN1y9aDOe8LbXRTsTjzRsdMiQy8XAKeCqgbLNJMCfHFg==","signatures":[{"sig":"MEYCIQCFudt0TE/HrDqOwMwqfsY57R1ddUBcvRYIAZmmPCohiAIhAK0cZ9B4Mh5xDq6RDlX+m7vfvJkr/303+jsmcMAed9s5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCh0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrVw//SxoLMOWpufMVg2kpa8QkG0kPiiWfe2smwCnDRD4PQVI2tmqh\r\nBU7tPFbC0qNDb5K40LClABUG3fFqPf+EJ/NlWwt1hU1Ezj4gXa3EgnFIpNfG\r\n9oCKRwtqnncTNzLsuQeiRxoSN3iI7VKJ1ZKRMB4LPCkTAZ7djXOPtmDIYGUx\r\nUB6xDlEApYvNgJ11lXYHBgP5AVB6gT98UbHinxn5a0EhTSi3P25BDIaBrM3u\r\nekWiEpfQs4v1dbAMn94Yjsu3l/fHMnZ09rJnfXoi57AWk7rquOeF07lATwJk\r\nVeptod1GScuouDmRpNhM0UCZA80DoEfQGa2zOX+TOAxVedYCgxsiZo+qslRW\r\nH/2bJ8ZRY9E2Ksxa2csfNpLdKMGoq6JzOs6AyjnUq7IIUM26iobPfBR3D3fG\r\nv0eamq9xqAKwf19n2R9ZGQotfkuL6oazHz9zM92B/Esz9pVGsirp7GWtV4p6\r\nMLrHECH+tE9+A/Ta0sKmfxtovDFvvcmdr0Z5R7kSwhtxNdasL28rN4EBVcUg\r\ncfCFsLUXb+3ob//5tuCJldjL/M5lnFSYIZUCfJx3fV5TjtgV1sDQ8hm1KP1j\r\nWMFVkU9eJPmKqIyvh6lxzB/Fynl2cpvr6yJXpMAahw18aszYlyyHK9d/AjXR\r\nc3cCeTkKU7xPSBsZW2nAhfbKMej7hiHU9jQ=\r\n=uBql\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/tokens":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.eb103d4b5.0_1667246196379_0.23113594497161571","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/card","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.af5f01223.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e30395b04a010e61ddc1fa51e33eca372ca97c14","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.af5f01223.0.tgz","fileCount":23,"integrity":"sha512-SBGS2ayR7mbcD8TXdG2VRgGkg/BPgW61pW1TrcBwrHJZSWE05jWXNj6ni/zP09aEKt0PEBKfOqu2DHLZK6pz6g==","signatures":[{"sig":"MEQCIFFDtea+LU8frOdYatsH6tyZ1pHQSh2XCIvpG4bFo1BwAiAyOU6zlCxiWLXkLnhc4DaY1usjR4Ph66YMeFyKBiK4KA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD5w/+NYsKoGkpu6vTJHwuiSS36i61cvgvwilLv3a84jdUvZQ9YN0e\r\nAHzI969LdpwXC1au2Fwb+asYxNZQ1CVyAUCW1ZbnVtDUgAIgeyoLC8KNgCXJ\r\ndoFh3+f0vkzvPXlHskxtj4eYDJ3f2cae9eDUFPJNrgRRgDUotZkMv+I5X/VC\r\nNJIwrpRGVVaM5mzkgD79f6n28fsGiV+Gy7HalNHoZN+Ecfq8SO72QBpnoa/o\r\nUcm8bhWnb2KFysLbO4HwNCt+FpbG0/3eITS61ka+fCSSNBs9ZRyuvEGpBjqZ\r\ndUDjkXhQAsxhfiiZdFplTtm0DKjuz+sYzQxPMQy5Q0RbA9bshPXVfAnQCsce\r\nwfKhZKjsHhXVBS5TeGYF3w11n6vJl9S5v6PvlLy/SyI+z+tJc7z7cBcIs4v6\r\ntK5ufNepWaGgirToqCI69H7FmEnj0wC3yu94g/rhaor7YHE0g5x3FVq0CCrf\r\nbybBmftqzv1utYbkYn+xt5A7TAhEs7Bh9rH7OScIPsqr/rigqiLNwtyKjz1Y\r\nv8CnD8I1t9mz89dnyw37+Cpnf7+pPbLCO8zKPZe83niNQLhyU4wxuuqXpkKw\r\nncCGJw6+xxXU67vTEWoG+8p3tFW/A/iqL0oQkWGyMEgYw5s4Ns1DXOPXeztT\r\n8+9MwBsbqlW0LedmA8KIrEAiVqtp5GuUu30=\r\n=CGIC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/tokens":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.af5f01223.0_1667327823898_0.3282643048996656","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/card","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.58733ef41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f2e96775c441b266fc00821c2142d8c27d27ba4","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.58733ef41.0.tgz","fileCount":23,"integrity":"sha512-M/+uf6QSS47M+L9PkxDSh8radOWhKDOAy5SN8Vso0wgTXNLIqnlVPKkybPJkUk3EyQB1B61urI3NusvdXsW3Ag==","signatures":[{"sig":"MEUCIBzp8BS6RCSoL8494Decd1JSnI9xDf9PX9o+LroCBu77AiEAitlX3OCGNPTVYbKu7G42tuFrlFqtPVPOWICCy3p2nNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrKuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFDg//VcrXmaZ39x7lTUDuw9lXmJnB/QVKPerasV14MR+8s3i8bj1F\r\nO4PeQtldNBnFsVCOzxEmkqhSkm1SF3CIc2EDT3gFTOPxyVZq3a4gXWNr2OsL\r\n8Wso5H/VPyvuZt8WqmceMz3K1C9u+yf/o6SMSxPll0mlozcg5IqkGsh2ioLD\r\nyAGIaspOYR1+DywCoL1uJ+2HyapFJmvP5NVNftpOJYEvYNeRb3ALCxQpKZaQ\r\npmklsDiyjbGWDYYl9Zr+JmnyiMSBqaToxTZllaX02giDrPMUj2JvwjuCROPF\r\nb6y7SABStjCofprxW619RUatZXwztmJKaTj29Jb8mpfzcswxUpxcYX+aqOB7\r\nZuNqI8QKS+JDFW0cKF80+/oGWMpqSSCbnJXmqmmQ7lGoYytL2FeZqZKr2nBw\r\nQ1XspxODv5c446X/VFLdOptuXwGe36e8Q0xC3Ubouf+Zmr8OE4d7Sl752ugb\r\nawp0GlrgwEhszfTH10Ye5sFHLun0zEzni9PThFQwUA9ZCIBqf+ilBz0a0vBG\r\nfkhoVOymtqYcoF+34dz7MaeZRPMSxyKFXzYrMaHgM1MIDhVKyfB84nthFLl3\r\n5KPWg/e//nYdfqkpPoWClOQm8OTNdfqwzPBOHl5CWbc6LspLuaUdimbuY4Ax\r\n628ppwWeiiBjnjBASUlIWvtcV47cljKHtho=\r\n=6MC4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/tokens":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.58733ef41.0_1667412654657_0.6487604063842756","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/card","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.909b48215.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b44a7ec7aed88dea9e815684bc378f641e83c004","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.909b48215.0.tgz","fileCount":23,"integrity":"sha512-ntkFhI1trHlovVVd5XA3aMTC+98h2WKuWJspYLzZTO9AwTfjWVAZLKcTZQ+K/VD+BDmBOrg/o4n15PLBMnGsaw==","signatures":[{"sig":"MEQCIGX9II2428k4AiQMszf/ep2E9TF+HcKPqYJ2+mr9xhnJAiBaBc/pQ/qoZrhLeIqj16c6h5btqOY13wGfC6ZNuBSXog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz6jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPsw//Znbtu6aqvmpNxlIHWc007Q5akyXtPkcVx4v7EdwjULmRXtYR\r\nYjFid3OsB01zCl+vygKUwzj8eLUVEiYp207XNleS0yRK48e78TUAti7uDSBb\r\nKexd1mf41eh5pHsAWB168JfNl5C7KFSsKGKuvkmlXlwghuIwce45aPn9dLVF\r\n8g4TxaTDhgyPZGLgKirCLpbYdVKHMZg1A5pSBu4rjtSvgJDvSIzsN5RZmwgB\r\n+zH6pGGMYqHBX9HEJntc0D8LfjOLmQPm99WLDARE2+QwloWFtdxuqI5I2TKN\r\nSdvWS3G+9RH670E4HqjI5AcrtBbJLv12mAMhQ4X6fv0dlypewOvVFkfPNjz7\r\nqOVqxFCiJtHyWpFRPzmJHdzAsCrmW6TkUKxFJQK0Tm7armrZmCmuDu4jOyM1\r\nxOB0FaVizU1AduYA7wmnAfER+ctVYVGx+AABfOIkB/6MfonuXqRLEqIoeihX\r\nmjXpQeEWZxC+dCSrcSCOeGY3v51GDNu2FXdcrxiTIL/279jq0FSY1oCyQfAl\r\nzTc9zKYFNRo2UROfW9mTnZRYt2hKPyepIukBdpFJUP9yR5eYllpUUPTxSbF6\r\nrY9X1CI/51wCuQEQlyVpqbueb9vBcEQWdjoi0uDwTVbLPPUrnxEnJAQf+Qs0\r\nDvmnon+le6hcyRwrdF0u/V0NwozkLVOgA/8=\r\n=QhiI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/tokens":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.909b48215.0_1667448483465_0.9006893643364036","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/card","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"664fe1d43f561a5508cee7c8f072525fa7f23ee7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7f17127d5.0.tgz","fileCount":23,"integrity":"sha512-gL6wyZHTqsmsRrE62NN1vSZgSQmNxAtMwHLbf2dSe+8U36XXV/ptc9U9ipXW8JyQyfxupIOKbb62IqU+lp1dsg==","signatures":[{"sig":"MEUCIEmftUVkS8nZG96nhG/uSJKbpXUCm+8moq850fOBNN2gAiEAje41BxX85wmaEeMPM5JGVDbI8aIpW6wcaTuutnf8tpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAYpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg2g/+Pzh8geD75FvSHLDL0Uobj/4A5iXkkA/DGDEYQ9f8fZXK3Fx3\r\nGuxJuUOQGAd4QsxIIGKjS8HjqzSOW+jQrzdc1rxM1iKTWEZk9LdVtBQlePMb\r\nEjuXXcxSs7cEpEAas/77Qdz3cyRwFzSOQCQsHQEKWQ3pjadpmMDGS1EOXdK4\r\navVQIPZBFPOj5ERWhBfpyKnnohFPBiO2oIT+eQhrzVZRjWfjmr4Z3we7i63D\r\nt4zgSQinNJTBDLWgN35Uv7qxjN2ndv/NhgZmTCDJ4xuzEKp/P5v/LJcq1JeD\r\n1PITRMHI6OEQfnmNyTRLwmi2wIuHUIMZV+5AhchH2OTyxRmFjvmpLsGNHUVX\r\n7Vggwoiy3iFPnE1IFxr/JQiwcVKs0nWUbyrQ66Kk1A2UJnghHcogYSRKGjVk\r\nPA23XCiGvq1EW0eSKResc68nQhSj5sTrVirVJrD1Jvyhnym51nq77w19chbR\r\ns7mAL7m1t+fk32EMQCgVnp1Np0XreZbKYHp8ivBHknx2Jkos3zBu+2Y4Cd+X\r\nB4IccybGITgkN9zDHv2P2okMw4/xU2SJ74KBtzAou+f1xnVOKJpTKu7qJnuI\r\nyKw9Oqmzh1XxPUtRSZM44g+ehA1rRnUiaN0SJg+3DfkMqU3BINNKlL10wjvn\r\nV0ZzJRBV5HCO0lOxDfHz1oaJfduAcUttKYY=\r\n=bQO0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/tokens":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7f17127d5.0_1667499561085_0.8128525166897771","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/card","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af42caa34051474d26f903ad5283b1edcfe6206c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.da95e2a05.0.tgz","fileCount":23,"integrity":"sha512-DyhR3FJMrenooeYX49u46kVbRVPIluXgFbRDfycyxWDK2Wiyz/bTE3tX5+47d5Gni2Nmpao+eXW98uOu+phO1A==","signatures":[{"sig":"MEUCIQDrCNhrCK5t/cnt5JfJzh3wwDsKTf9AWzbf7p3F9F0mKgIgANkgzAWMK3MhvZKX6wXgoRjAv6Gmjyt3ecJKFhvqHrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC9BAAhGw218V2gJL2JwWSroyMzTDgh+d5BEGYn5UbKrdnr84/NIXz\r\n/csx/oYavEeSU1z01KuEn2HVTFwQY1Dm6zy5LAW8ScAQ1Mqibozw+TrqFdJU\r\ns8JhP5SR73CeeBAypUloAdKied5CQdYyHL7y7nnUlG5BuxEy25kRP6h011ns\r\nYpCfks2YgnVj0v4Wdo3JUGV+2bXyBayKQu5sqYkeEM9etUDWvpbH3qJ9Ra1M\r\nLEmZxVbyQFhpnAnoicbYE7LrCT+I/P3TzWc0PGfTVURwMIgnuGhtW+S8mbb8\r\n4j4diE4yI6XUaOLHxLRdVpL2rzkYwp2Txwq/bBRk9jUvXcVbGv95uWNLnEIF\r\ne2LLH3ursZ9K9A1SjCtkjr3lD69LmRE0wzcKsWeteUFay2KuRoS9EWJ30gW0\r\nGhEjDTRKDSZ9ygUZxBsg8WFem8zDhMCnMCpv653lh/ZE6i+on2Tnt+2qer4T\r\n5PxBFnUrnQWhyL9Zf/84PieEjws/rjH2nEaf1g75xoFqHEPrAXnBmoJZL9k0\r\nvrn/cqnKFQLlJxYOvs6Mu9DfP2z7S+xbLkyy2E/pwGuesSMc3uyud7cDhS6N\r\nCcok3dD2AkPCnhRsYRlMcsLES9ASu73PMFOZIg9HarYjfiOHKTzCSi2iHcdl\r\nnu+8uwuCa1FW7pXApdsvb9rT0IlMJAxRW2g=\r\n=rbhb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/tokens":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.da95e2a05.0_1667581157479_0.46854246643832465","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/card","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4832e2750.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05d9118a35bfb338de5b68d3eb43d6b789510760","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4832e2750.0.tgz","fileCount":23,"integrity":"sha512-3vKxHL/5t8wR87Nq2iJlZ73r3g7DBbDV2h6rzsNz9HNRORB+wA5A1YMXjM/Gm2yfKeMJ7fYW5sc2INh954uKew==","signatures":[{"sig":"MEUCIDlbM436l/6VeXQuPADC4h655ifZWyH4LnHs+YUShOTvAiEAmiHbIeZPFMoo14hUeLL5UFXY+28BlkaKPT2ahEAfLwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXypACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp54A//Se3rkBF3plLGLAEJm5j9aWo6zdWqTdufPRwKuVfTy3duvrmP\r\nsMA+94h2VEkDpIsQbaec+xYnNN9nhoEg7ay5RNiU9T9EqxT+mbLeRbzlqhQY\r\nywdA2HWyeMrlKTGeQkr1N1PfbU1AQIVoC29dnYTQXhKfXswWrk5AVKytROG0\r\nrgylC3J/Mdx4vN6IqRSZw/+wxuJmM/7nbYH/aEqpsugJ3LW+UMuRF6Eusm3l\r\nGNvKWN5lOBHtHsTaVTcvCu7OG1NIg4gTCfd9vunyVpVxX2IjjWSV8Ftctm3I\r\n4GUl0TSwacsxOXFl/KAqcyvAixgNMsjyYFLIj7I6468thu8T6d76ZWG6ikNn\r\nDgVdfAoOrNwbsuXx5xh8/+wlxuVMoyJ4OA1Hr76UI4OuVY2G7rv+XtK7xEo3\r\nbPdguSg381qGnhue2dF2uEXHtUob8PZEd9LZiTxXIlxiZnvOvpusemAJZlSj\r\nkQRfHd/xKMZyU4fMjkMsI5Yp491R3p6uex2UfBg/wMxjxKaxT6l0yYXqPWiv\r\nn7xzKNrqSI9DJFOY7Ter6c5bqAviVGnGEcraujrcBb4y0UdiBLYTyKM4Uflh\r\nZ6DSnfHvGnyddMdwRLCfchre7Eci25NVOt4b7BzUxifBXSV+DzeUi7UiyByb\r\nF4uv/9+Dpj79c2l9INKLSlGCovwT7I8WzHs=\r\n=L2Sg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/tokens":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4832e2750.0_1667595432735_0.7240949216709502","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/card","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.215506426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5119c670d8adeae397acb6c18bfcc67985973a5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.215506426.0.tgz","fileCount":23,"integrity":"sha512-Z0Q0xVdZAqplAOnOPbeCrpq74bEvu+Xo1X5gtPpRfWTVoeNLWtxptRI/Lbe2JUFeN9a3i4D5nh6lAGSF7Lyn5g==","signatures":[{"sig":"MEYCIQDjrIHMRzO8EAR7abVi57Hi2nXAUrzM7bNv6oi1x7twwwIhALk6plHrxaOetLlg3kxCuYWM9OV2S2KzjB3DXTILVXnP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2Dw//SyHuCL9fXVFH3a10Gi9FZEKkKab709RIgTV7WMAPFURG06Qs\r\nYJ9sswZC3Jhq0uXO6mgtZisgFiwGn/anNPEKdgz7F4hBAxpqB0gwpwMNMRDA\r\nTB4IYfvldg11ztPYvPjM4tChVREUOCwgGMjhwXWVTJUgaEAoRqfvMpWpW9+M\r\n3i0FOfqZommhT5+t/mJFAIql3sjYJqsbmIaJaWDIW7a/cJsMebeaHGQWuitv\r\nhd4VNtjVGnV3w3UEmWkM0j+E3T/kXUkIsId9RCAz18G6YrDnijbYytjZUajO\r\nGAGDiTcwlAa5xIYBpi1f8y7uaF2rDBpm4pOgV0eqvzEMwgMSwlDgOVwMzG0v\r\nxCChfS2YtP21B71D5VtCuuWLfp20byEvRN/bFEvg1TP6u/EM9OpDzp0IXvm0\r\nodC3hTh2anVR15mu9247Ivn9SKPwCVeXSBZqBw5WT6w0wbWTVpr5+i+8SxMA\r\naGgRZ30DaOuCrNG2cA96zFx8NedPs1AzoNF2TAajetrCt8d8Tu7nVrmqSOAG\r\n6AtikrhInD03UrJbieba1z9wAH37PjelW2NMoS0VBMzWDiwm8EvO7k+4j2Oz\r\n/2Qaj6v5wVM2RjUByExkm1W5GGpfYkAmFiiYmcKCFU2YmNKTjbV3VSkuzB3A\r\nq/FsjLo3w1N1vjQs+eSiyKNS+24oHZqFHPA=\r\n=BHpa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/tokens":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.215506426.0_1667610370187_0.8130698436059194","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/card","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4cf917476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b9fcc601a681e45e0fe5c767876841ef1df0039","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4cf917476.0.tgz","fileCount":23,"integrity":"sha512-RPUxZnY3nUngLLcqZFTZdCrcwA6R7JgreUIIDntgGIHxoWU7D9llOackQtJOjWbjIfrjU1TaGeLRzY4fMIqK/w==","signatures":[{"sig":"MEUCIHjoffMBHiJSYHY81OdyWragRt0cJLvThYU+s6KWaAopAiEAp4eeYPucRsaSFMMqWUvuENrQqqIPsSaOLIVwGXORPuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+jA//Zv2p0wd52fiKVAby3tbjUfNHTcMO/T1X6GT4A3bO8Y/OctB4\r\nPrgOh34IsEvXOPSGKUt84hWJ0YUv5HIaEYvP2m/C2fkwua493v+QVygMZlNO\r\nTIWeeFwpe30RK8ddrfrOjCIgssBjoGQfOaoWD/I4BRJLgXNJ8av+mCwmIVIj\r\nvpKa6Ktnql6RfKNkJpjHRh1JFfZ4mCOXwcW6hgHUpXu2wuq6i7/jFm++MGbp\r\ntxVwa5gIp1YGtOMu5zZQ9EY/hgkq/HQ/tWlXfSshPSn+sShwlZ0WvVgFIiGe\r\nkxf0f4EldLhAu+BgUcYQClwmym/ZePqB1y6hyCyPG1zE1t0w8gFeswuWg+et\r\nH+e+r9aBYe/Cv3UwSItwGO0h083kNL2QUFaU+gK9c/ChJPesHIRbs53N+Jd9\r\nvxVgOUPwBjHUt9woxeHRYn2XdvNrU7DOdAReJgfX7oFjiaSQXbAaTLE22GIC\r\nczsdsPyrBfYliojXStKDensm5SFNUodGfbp7Pefkb5HRjLXCOU1213uvlmvS\r\ne7u+jQvxgHpfq1vMiGogAbJ4/B8NBSHVIjtoYZh7mXfYWEVUGbRsTPzIQEgA\r\nEapUGLoA66KrBzdVnGzgYqb9BfFQzx04IyHclC7ZXuujl4dL9zoLbhST1w5B\r\n55+ZVEYi7f+21izoJuMEAje4JrksmPnVNpw=\r\n=h7s7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/tokens":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4cf917476.0_1667671454459_0.09498958767455479","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/card","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3106a129aaf102640631dcbaeeb866f90122170c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.eef14bd32.0.tgz","fileCount":23,"integrity":"sha512-zUgDGSQVmz0zTNjdkd+VM4e5bwYT/JMt0VN+cP0LRkEdHhX8fCXOSY2HR3q9YjMzW7j/T2VNgn+SgVwzx95Ltg==","signatures":[{"sig":"MEQCICIHyQHhKiY9JvYliGTCyQiYSofD6be1fuUc2eTAQviiAiBv7rV0kh8LIR7orQzeq04jNqVUMBl0dTaBFNyDWrTglA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdZg/8CzC/jx2poQTrNo6OluGp6Lbp/J/jQxBZBuIlqMDaw91+9LXZ\r\nt+qg8KhUb7AbSEId3a344r4R4ToBQqPK6QJT5HEym69Lxdk1e7ZNNwhtXtaC\r\nyRJyfk+pWDicrs8lfY1YlMu1p+gHQ6nl2eowjEnh6FQlrKq6IlAbw9JjWavl\r\n0vONK54NGfaIL3FgY4INo4FsLnWp1ANtYwyxLomojDKieDnQZInNEU0dQoNm\r\nwVGWw2UQRRNCGZ/8qg5JKAZOgPB1aq4H9NzIYgJx0Y13nD9/t0b/hQ0nwHtf\r\n07TP8mBvll31NpP6HEZZalTDetK1tJTeOS6wh9mMhDZOUa3xsGbzg+Nd3A/W\r\nlGY2bBrdnvGTTQfqyK0ytFf7Gg2o/3WGckkbqmsyu/dT4eRzE3Fn8bY7pS52\r\n7NRHHdBTQGlG2hwZNMCOF3K6lyCZQNZWAQp7T4tGFIe4MHrykHYQMANZzrRP\r\n34+xm65mv+6yc5ltb+19O4FzuF2g0KHwWTBNudug47mOSTheOjY+AagU5Dxx\r\nxxB7qr/tyXGcWrdGFuA+98CssYjION5BKnl3CXBzeBoGSOdnuoIoavpj3DE3\r\nx4IIFjDZqDqijK3eP9MmPpNjNlILoNlur+nv+rzhPfmWQn6v4rcCpOw7iVKr\r\nU1vamdtGu2gbHmUU5hToMsjLkZj/ShTJ1F0=\r\n=SAfV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/tokens":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.eef14bd32.0_1667755485918_0.604253933917754","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/card","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"067050dbd9d8b09ff0dad9683d3d4ff45d4d945b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6faa29fe9.0.tgz","fileCount":23,"integrity":"sha512-iVE8OT1EZ9eBC4OC+lM85MwKvG6yQReL0ashFGbB01jASxc8rkslK61ebgkWwcM9nhZGXYO8msG8Cl1aR4pj4g==","signatures":[{"sig":"MEQCIB1TdPdc8Xp8bEOs7G02uIJ9r5c7KjUAIbJPWrpSJKyzAiBqUpT5MiqG0udMLfr2QHBqxgNivfzexS53s6jQ26mJqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHffACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolPw//QxxtkKar2VNHI3nb/JKrMvO++yF+wEBhqh0Ee6swn39JbCZh\r\nXNS7jZLcTAw3gBmD3i5CjerT+VXU9I/GiB0mLsc6F3n17AqYG3dgl0OE31Jx\r\nFeU5ia+bQkYl9nkgj3Q6jRH7RevYdcX4m68PabcmKv7cblxb6uQsgxsfn1yw\r\nok02cJfAZFyCA59d27wEF1RcgFooFCVrJYnhT2fmS8UCg+Vift59xlvnnJgm\r\nvc7kUV4WvgZ8vSI9CuXCjSv1KzoYxMfVM8kmtAcKWr3KRAn4CNa+cnm7avAh\r\nVkin2ejZmJ6yilQojaJ6aa0eawzXq3ZUW1ycmc3eTpOtaE41YESD0OPSIG6K\r\nXjjvoBO5TsUzqC5i1icrOf+posL0a+zbnN3Gv5aIh2yenNkT0K4CiyHievjr\r\nS0CJS2SsKk0U1ggEaT92PiWOI4uN+C2q7HZeUK2B3KFVYZDP+uQ41Uqgdxvn\r\nmfXCpYLkD8ehJPwvvb/TKrFnkHrqJk0QWi+IYWTQS0uAg6FoJFUujOMlN426\r\nVGlA5FRtYEHXY9EvPM8m8zvVT6xyGf//7Q8ouICaZ/ioFkMGCU7HWSecqEjw\r\nt6lk/mLCEXABV/bx6gn4qtWF9Xcvo4T9EpVPtVQbyy9DtzRTrVgHG8y6tpXD\r\nTdTs3nIt6dQHPlFYYLfTdehlw289yKR6FN0=\r\n=OGYY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/tokens":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6faa29fe9.0_1667790815250_0.6215454218249008","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/card","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.9af09b967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47ccc534f701c7dc1ad1f3b655689878e0b619ee","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.9af09b967.0.tgz","fileCount":23,"integrity":"sha512-+5cO6k7RKNUqV6DOtZdIdNTb4wXesO9i+Y68sFcQSDoK43i/ZW8td8qt9JXZdegvS6PcWRyj+8TY/yFO6RL8Jw==","signatures":[{"sig":"MEUCIQDrGjVITZ+M+f+tfJ5GFw3XXgCieh7Dqfz+mP3dLqIXWgIgRjLvIrGKFpwoyvnnHS3zJ3ULOJtS3eWqS8A+Z4za7ZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU4vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrctw//UWJY/lBeuqUe6zRQVLfXdZj1J4U4Ax4krDAOphvhYNPVH1uQ\r\nku2LEyHM6zwGfwhNDtG2CHa4KK6NrwDIPfaO9o2GUOqDAwJq3zFZR7gvbQUG\r\nL0KmEEVAIxGOtsMeROvBdl8nXf2P7Y/FNdC8Nh1ro9ejVTinXDtSH/XYfHiA\r\nZnTWaRw16KPYqOjkWjl7eK38DvhvQ5jyck1itZR3UVRKCluKx+DFQy/OH0/5\r\nxFWr0p4HUUje+kXIDrgNPe5MuwNXU6W7gBOu6FZ6OhJAjyCgznGMJNQuXF+z\r\nDlNg1ruo9XsywoOJf6Bz6b3b0Xcv9zWxjqi/9assNpYcjIB/oJfGKast6xRZ\r\nu0vXT+gf5swVb9ePEXj1QLH3oHDcNiMiXxqiUH6WzUEMvbKsfK2TeHo7nbGN\r\nBMG/kbewl+RYMazfglRpyb8/lwfgr8+dEu/7oJw7mKYpQrpM7MMNcUHIgq8Z\r\n4w6NJxpWnDjiB5uEOH9k+qlfvhbmCopOVGM2iiXd2ZGJjkaI1ImV0ZkhY9ru\r\nn7mYbnK+agRa3DQ6dWOTGNgzAIWHnlNmt4YEFKZ0JcgVtV91I5HYaHZhHzPv\r\nXxkIrQXMUHi5JqPuUjFrB7sCf0lPrhRVJhoHeGGupguwGBR+d05l46P+V0Ym\r\nzrNYaZLCYlwWf9SlFGBue+1vHZ+DQgbMuSw=\r\n=3dhI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/tokens":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.9af09b967.0_1667845679069_0.7176673963031266","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/card","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67fe0bd0508cb5c6c364898eca4beaeaf0089c24","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0f54fbb93.0.tgz","fileCount":23,"integrity":"sha512-0/DS0XngAWoVYN5ok/f/s8k0Vh/LmsZg2XVKrlymZmTja8U/Fm62JGtdjpxvlXvmI0ZJRCTqX0yQIEyCptr/Pg==","signatures":[{"sig":"MEYCIQCRsNuKkzYDC+Do5nelBT7hqvohzwyUGfMVoJ3dwKIEbAIhAJwleyk7tmGdKCUBnr0C9HbJeCguXNEMt4Z1pfDY/lO7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA4Q//Z1eqj3RaIhR9KDPEYL+leQ7zvSfMfvaRMofskAf0UkRCWQX7\r\nYc7l9yQn/KIbPFuJQgKuYk3gQeLLQlJppiMh0pFy+dYscL3jJvyY4Yr/jQon\r\nEIBqkNq7+WmhfzowmjuGSgy0P9Yi1M/NU30Mk+envv35mBNro3mVXj2/fShi\r\nJ/BHQYSekNWPaIztyKU75WaelljdJNMZSYPxf5D0M3LQqy31+pZ8VYldPtn0\r\nDCLfyE0CLWBQM7Um91WVi4xzdkzffz/zYnUqGcKlUrCOHNQc2ot54UO2ttFJ\r\n1jBTgV8OgySj7D6WL33UW/1vvyzMwMYpz3CgK8FTrPJX6JG2iRP8qI8HWtCo\r\nqvZdU2aRLzqLMDhTJP5ZNgw70LUPCVbK9qPqLfeiWxwMTGmX6/6uPuWUv18k\r\nVBJtKderYQEoZh6tomUjsxYWWIelrYRock7EWQR9uxIxKR8SsbBZonSlU0pJ\r\njZ0akbDJjh4qcK8zRua5k3rXFBwE7jDtlso3XWUEOqbM8fCpA3pjBDaMz2aJ\r\neVjYc/FqrmJfa4ZlwW9Er2pbyXTU7QTJKulQtIxWUYY/9OuE/ET6y0rYHqOW\r\nyrdn/ug0sXlvXR63fcWG7Ih7muSO3sgbDep8Ljs1PBMYHM1vJ3EGE9+xLOLs\r\nfw0QPlqqiCOvOjnGL7PJ/yewhvgyJlZheoc=\r\n=QlpV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/tokens":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0f54fbb93.0_1667944604187_0.28390711432504023","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/card","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"babb658c5cecf93d5d6565dbd14eea021dc5bf57","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":23,"integrity":"sha512-vb1+BgZQNdnOmwocU2f+hHlWuLT2aKguGpWTj0b099tuCbihDp8v77NscDXbiwT/Df5rnUIcWux3FUq5uwtyPQ==","signatures":[{"sig":"MEUCICkO8zvMgsCFUSm4wi8KqBWtaLNXimEs2dioLQOMeACzAiEA+W+19OYp1Q6SkVSyp3neKyOuMmCzHvEnrkvTlQC8WJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayn/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprSg//R6RiItCOgO3QQnt7S94WqgKe8oPHlg0tXROmdZSdSvsQpzxH\r\nMLGDIjaqIRqNei+ay3Cn8AVhCLbisWRCCyp8XEV6KfXaJyS+I2LaTwJjN7yb\r\naHFePHgytYzGjTr1TbDO/zjOAEVjFwtFD0rEX7oS8jUI5Z62MM3LLOG1C7V3\r\n1DBZjpEmclymdM0P9PqaHBuEqt6/GNoXGBF2XxMnZO7FkSDrSxMbLGdt2XQs\r\nvpHUj2xLDaxieJv00WZPWxfeT4FsHnT8kGvBCXK3l5AMleouG5rGs/q4JfI1\r\nnqX/bGoY7Iw1aOluKRV1t4UlI8kwA/MZOJiIRNy5teJbTuEgPvWhcVc3CNTQ\r\n8P6kgw2snCtFGGY0rLsNr3FrCAI09LUKSMbBKj2NET830m5AJoTKrYvmqscD\r\nZqt1NZV2KGgKZbdJs/BnV93ayaDPiO+hEMz3OsCkvkOYl34yLppZD5+d7aRU\r\nzl9w2IrboF1lHroFZwPsCbw+AGT1ENbWkee3fGvj8CQ9mQFRDUmAM8fgwhtV\r\n9KNT1IPPQkumVYf5NuA8gM6nQ2rVwvUShAQ3O3ml/Jdyi+qu+k98nWH8Do+H\r\nZr7acA/3Ym0ZopZIoSQhWfke0NLiCbsSlvDrsOTPyL2olLM68XscP/fbpxSy\r\nC1zpHtKTYJm1tV4woYs+9j27mYxhurCVuwQ=\r\n=8wOz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/tokens":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a8d47f9fe.0_1667967486687_0.4352137418469171","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/card","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26b0276e29166bb5388c15dbe695e91f53d9489e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.66a1e75e6.0.tgz","fileCount":23,"integrity":"sha512-CWjXev2VKROkOCMcHrSGdDycWwxxPGZj/zBh9q+ec61BSOpB2w0DNHWs0O5kFvphtwraLzQ2Bc1RIbikzJhjkQ==","signatures":[{"sig":"MEQCIE5WkDjkzgoWy/l40KBA9J9YfP0+kpgX8SWcw08Fb0ITAiAZTPHNZF4gYDSSgq4y+V+w8+8lbcehl1cKA9Hqs7iN5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3RwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqilg/+K50VbJDLvW+mv0U5rjIVNfsEdw8Fw1akHZeHaFaaPqa01OU/\r\nKUOpLAMMN9//X/uTFQ46fgvLMapGQ74YtmxiWEyEJpHjIql4NEOgXswiHCdq\r\nnD3L9R9qb8uC1m1Xqr7L66IHqnF8hIHJ7NMEaK9+8ZtF2HNMsbSAHP+E2fOr\r\nMfhbsHOBSFKXGhMAHGPfp/bjUwuykn3+kHFFwcqif/ZQRW1OgsDhk9q7i9mj\r\n5muZSWuLzWQUVSt8ldhMVarjHgNAuttsmWo8m0T5F1nSk8uqMILhgJIfhvkA\r\nUinVkTDLGVxf1wrwhBzisXQC0UjVuaDd2oep8a9MhschoejMbpJicLPbOuK8\r\ncWgnm9FYe0iKqsL6LJ+FQNJneE+HHqV1Ik8XlbmV9I3R4cwXrbuih9EeH6ny\r\nANmsE5xye+D2aCpqXTsgzqskClGrqKL3ww9AczcSLtzdugg00AJTUkor8cq4\r\n1BM2oU/Aebzsp0BLBV4jH3Hzn/vVRN2BqzwXljrfEBHbNbPg/38FOUuxCTKy\r\nHGEvTxvX9SFkkmXmcTHDCZL9fny6kPnUzbpLmxof9RtgQe52MwVnR19XuiBJ\r\nEwwMSkpz/naAeGZyYcp0me2Khq48LA15h/57Lndns417HXzTVFPUK2KKV1w+\r\n07C4Y/w3oge8l9eJ1vXKKZ/FjU/gPriFd2g=\r\n=MlZJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/tokens":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.66a1e75e6.0_1667986544584_0.07551644099791432","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/card","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884fe199ab0a3f39bbb821e6721a4f2287d982a0","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":23,"integrity":"sha512-eOK64zLA6PDIFnuuz0EvDRRfWJ0ZGaa/KcUONCOqvcx/rz8o2dcZN7zElGP7MMB2Ujpct8Kwv94RPJCiwD4cSw==","signatures":[{"sig":"MEUCIQDxiTN1bR0tXGQiweSmk+1clZzW6vTnQF3V7MgtXVSA/QIgYVYpBbEbFk5BzGw6DDjsAgE9jX50wHxNLgaBgsZFI60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5S2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq55A//YYZYlnOEdNuJSJNZvaPOI84RG1fTlOXDKvGZBF0Due7shC3y\r\n7uHvjbKf7FzfWXeVCCb7kLM1Ik8IJ4/cfd8Oyyu866i7h+j9/AUZyibO7RIM\r\n/5wvQ3SZlZehNd5WWCDnG1W/TLle0R2K5LKXbEjpVXtWM9m06M++WfjtX4C9\r\njtxI1U/M2mZE/O4jiXdP+68TKwVi3PQMQnD+aKN8xQldDFsarbR3z+jmFftD\r\n68xJRVTosYAaXYCcPRvsyF80uS+cQqK7c2Rj7zZd4l2sBovfGS2tU3Q7WIHW\r\ny/IcAv5NjW7j1v5tEW6e0nYXMFFUWBgfuz6pYQgBAzhaAbAJzZgTWnnWXAMw\r\nYoYNgH7G8/nf8JjsVBfgQAkbT6rPjYB+t+DUdHBu6BOugKWpD/CHliW0Ocwr\r\nBDKBtHjpYxI2HqQFcsSKNWeyR0mXxMUioK44SE4MW4NJDnaiq+3byV0dRa/M\r\nDhtZ4a9eFw37VpKHKx02kwXXZC5hca89NdOMTQ3vWpd8EwZU49yOcTsl3R0Y\r\n7v1DFgk8VQSQymuego1kiEZrXZpEku8JR5JvJznK7EbYOcUljV417DiQG5X9\r\nH4PrQ2lF2v2H+G/FoSBfK3n2VcCpkPZ9K/vMypm85jqaHLdZ5jeccHGi/WWY\r\nkhmvwTJ8boWySW4k3d8OsqHCU2F4kW6tXJg=\r\n=veYl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/tokens":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5e5c2afc0.0_1667994806048_0.9891912604105288","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/card","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23a8d323a332eaa09a224c01b8420e7549702683","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3e3f43359.0.tgz","fileCount":23,"integrity":"sha512-pvuZMz50gJ88BupMavbEV2z6+VCKGHb2EcZqHnCxSk5viO+i/lTykJy9sWxmm1r/Annui/YpKwXfpjoknk/s1Q==","signatures":[{"sig":"MEYCIQCD3qFMWxzvnnvzRnJu6bc0LdmyfbVlwjM8aJeNqnvDJQIhAJYKcP4uz8yB+pwKlTiUEj89mqL2/8TbX9abEPJDu96O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAd2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohOg//ZtS8TyjVggRhauTecRDb4UricZXX4Barcz8pcmAZcO7tYf1+\r\nczm5bnqpDI4ILxDigvEfe1Y7F6Lnmxv8RVVfZp7eO5/JNwBRBBrGByUmOzHX\r\nQZUMzKeOxbe/Wv+igEPkY470tHzHd0XmenpB0PMwZc5t/lJInGWEsZwjJuC1\r\nZ73JxNBKqeCJOWGBJU27JU50fOb9bS2mPiGHOFlg6OM/wHmY3TYUHUgrGbfh\r\nG9PDgAJEAfPsfa313GuDTLamGJ5Cyjf7vp8tFVJMhMpyWV/w9mhaGdfNZaOT\r\nQYEM8DplcAR348inxO9pic73xegKjY7FCONcVqBabBIEXrqGXxzO6EJ+jrgi\r\n+KTfLhspVSL1U+lMlVb3P8XeYekwwgLXJonahTWQ5AGP7GrAot8TKjPxVXaF\r\nv2FW5VTujWzdyuzop2GrzxQgF+UEhOGwacKD66+skBalv9o2E0kgXSloOaOG\r\nthzKwmgp2EX+PwMcxwdxQHFZvxxqx6HtEPVkX/LDYJwg4YD3NgIzrW9MpEo5\r\nc45UnHzWB/rQ4FXwNc61TunpbPJQ/VDicHd9hV7uz3MXysYubrrgVTZiLtJe\r\n5IXXyf7IaBSCzRsmkMnfXbGObRBQMZ2T3Bw3J+QZzWq9rc7FBZgF0WtM7Ii1\r\n15j8ZqbcWB3IKtctAu/olBHR4rEGpGk9FVI=\r\n=v4/G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/tokens":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3e3f43359.0_1668024182630_0.05579118219355639","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/card","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7024b3c36a6976e354bcd10b46a64755ce5f70f8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3f667fac6.0.tgz","fileCount":23,"integrity":"sha512-i38s9IbHLvN1mZLhyGX480Ipwhu6zAbXnX5YhY8Z4OajKnwTnX8s/IErgrznWD/6PpWbnQHLRwSAmlKIf8WmWw==","signatures":[{"sig":"MEQCIBK2+HqeAaklmlvDyjv/GTafuVVg8wn78HgzOLhKcVyiAiBUhwK+neb/6LodOfyElJiR9FwbD4KwBCb7TXYOnCaEeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLRQ//fZ7+RleaUBN8uTbo+fVVXhpF6XIcOkSSKbc90ioI8hQ5Bz3Y\r\nMhvY6orYpmPl1sT6Y8ssKbPRRKnDwDcUhX0gvXw7HYrWv8M5gHHbDmox6HGg\r\nLSyfoXzz2UNQ63W0O/MXSevP6sxg1LVLjwvcB4MMQ8W5TmwG5zsQUVPa1px4\r\nxzXO3G1C1EjqX/tLc346JGxSFzzClfQ1Mfw1DEbBfDDo6FibfJog1Lju70Wa\r\nCBqAqgHoA+t6Eg8f0t8ZZVhZKt3KBNdEv2ciTgV5r+BGbvF/MUUwAVzLoTqg\r\nIeKY9F+bnTXhL9FdsZOAuKz5WvzIsgRyKhrCC5F7wABO5gwBxwgrn5FSwqtD\r\nNqfWPAqQ/ys0XlVg7tRdAmJjETVpLUXH8JzbfqXwkEK8Njja4L7y0DN0PZn0\r\nWdBthSLmHrH99j57B98WPi2VPAnC99k9nu25tUzhGPAMTQRpPZUPuucwtgYp\r\ns6pfFHNQFQGJY9lWGyRVs5KpXiN48y5erqKpyPHjd1Zp6/m/bRh3RIaMMEBT\r\nuOPiCMDbAYwFwJXANH94OYXgp93AmmNjSzTvT/Bb5lQ+4rNm/DN1t95rsQEO\r\nc9Izw1Ng05qGKTmI2ZuGfk0e+H24RKyk5BEgDKGKPZIWjM00O8pZorZbtI/f\r\nk5w3UMGFgbip9KhxvvRTVk/IhygCNB+OBG0=\r\n=4i/e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/tokens":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3f667fac6.0_1668031573149_0.45023410353973214","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/card","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7924620360a2fe3c95b251bc3b8f95a5c3c49c3","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.faa28c1c5.0.tgz","fileCount":23,"integrity":"sha512-3wv8LgrUP0NDPZAyv4+TvDFxOzwzLIsjuke3EUOdFD6QkzGmDcwdSXiQyDIJ9kSFIFzTcTtOX1bWIif9uMyi+g==","signatures":[{"sig":"MEUCIQDmWDtycEBdwki0zoKKAH5Ss645Eockydha3JnXPsDi7gIgPiOqtSrZ1KzhYi69EFYsSrTh0PgvNxuNWhy61KrwiKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxEw//fR72yz97gHrzQWsvMprBE7/SDz4O80+DyQQcs6C1aiPpEx/I\r\nBctqgG43zkaKB8kixahakv1RbWbwHfXl+8Uiy3vpiVaXzgPHMaDW5Y0QhYHV\r\nEzVUIypiB5MDH3gzADkALHYF1bCCPse10zK1ERrgy3PGaOtaZ8qQF6iD2U62\r\nDY2O7KZ9TGHNReHnbTl40p5v17Raj+IXNL001w8pJ9zWrXiPf4YMnX1QKXLZ\r\nCV3yeEY8+AFSIPtKIZvVyzPYJyWGZJoHn39NJKZ4Hne5iPur6cFS8ozQ18sL\r\nnLa/dj2/8DKG6W7f/qqlmkWw3om66tzjbYMAc/Mwy85MrekIVxQpWrKKDb49\r\nIZJHUUOya6Fy3BWSFRkLzlE3/mg7T8dh5829w20EHm9NPoMGFjUZVUPSmeas\r\n0UtlrWcYtmzXpiURapMI2vSLVkS5MPj3BoXw/+91YUs1b3u3FOF5rcB5tpYt\r\nLjE1DrwHJMCK4a8VVqTzhtjFaElLKO2LgngJpkwR+/PeOA0J56JTozmXvkUW\r\n4tJJTbpYX0FoqdDC2I8ZY8StGudhH6ms8NTyJo/6+usbzqctNmpeVvw4b0Dp\r\n72mg6poA0QH/ggP3A0XW+CusC6VE+cv+Qu0HD3hRgU5Tnbdhm1XYMJlnkU9h\r\nWoeA8xIOmj8QB7iWozWKIxMnr9WdAsdYP0I=\r\n=xx/5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/tokens":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.faa28c1c5.0_1668184560331_0.6988732415930963","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/card","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a868c7866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e82eed112962da69783d43f9891803cf4febacf7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a868c7866.0.tgz","fileCount":23,"integrity":"sha512-rWrEJL0mL+EkLdTzlz7S942/R5/tFgy5TQeEXuwSH+0VNc2qG709V+i0674QEOdlVVzOzOXYigFDTWOZ76/RlQ==","signatures":[{"sig":"MEUCIHfOupBO6nEWW0qDibf9Ej3CPWd8EjutiXnbBvlTFlvLAiEA3Nhi7fa1bu4WNOnhHDAxdo0SFgOG7dnZzPk35mCesdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5BA/+I855i4WMhshLtgKQZ9/Paf1BwGXtezF0gAP5kisHmOsSwdGM\r\ntMLFo7oOWEudbmCC0oc16rUs9OB8WsYVqAGqnUxXHQSjvvxw4FOCPMrUfO0j\r\nEjCjdP3OGgN2RidkEfjajLfpM8K5iyo3OLHjGIn0wy9LCbgCD8u1gwgWad8M\r\nk1PsRV4xCm4PITEPjOqZ80YYvgHlctajwG4DcI5o1l+0VwL+N2t9lrNziyQd\r\nbGW7wgK1BdBcKydGH5jmhtZJW7P3N9G2jh1UQ5XS1SAzT97V7F1ly2nWtb/W\r\njIYQBRc6VcvaIuf+2oWN1WWZjh8vO+8soscHV7czg4wQOmY+6GEv7Xggfj2j\r\n0/JOUMeWv6J+pCjnEsbt6j9zvYUGJFRZPlEEV+frMmrRTu0fBysGWG+PlkhT\r\nv+idI1QAt5MW7fWtRvuVnX4eC96pznDvVObDFZEx2hIEzZiXsIWJc59I2+q8\r\neaS+R72tKDGeYYpFcXbLP/zq+nGYxQG9jtvmwym0WXceH7L+qxJtMvsE3nGZ\r\nBqVWo5ws6hR4LE4rgIcBGVpeDE7RplSvQr7IQ2pUxxb1zJcIrczMKxZwzxsJ\r\nZglL8f14NvGy4fAEQ6lUbyIjnUKGdy4paq5T1G3DyeNNP28GzSKTlM0KcO00\r\n5k9ruf2HZCj/gZ0zl/DE4/5TAHpl5E60GiU=\r\n=N7uE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/tokens":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a868c7866.0_1668184601049_0.8448095561447768","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/card","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85c8962fbd6b2f459f0c1ecd1576acf97d9842b3","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.602fe8efa.0.tgz","fileCount":23,"integrity":"sha512-Ot0GS9p2r8lEqjt64gzOCrDzsHjqJqMjvNLzNbVtUhVgK9z26d9+O1n9TM/T5QrzhsHawYz5bd2JnFj+a4d1/w==","signatures":[{"sig":"MEYCIQCD/+aAryZNjPHjKT/JMlVRzlpgvehE5X+YXrpG9tkvBAIhAPAg6ygKJSUGWpMC6OfIh58UOHJjt7txfq36USx763tE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWjRAAiJoRbHV2bCM6HdgLU7/L6ZIv6xdknRzBZ90qOcN/moy8bRFY\r\n8sBwYPjES9GeD1dunFR43IWl6JsT6Sx3uYPyXEwkTpZzBIliJbwaGjFYzsuI\r\nJ8ZPVN01+7ciKFFz0ddtM/N+J8tpMMWYcD/Fot/O4pD5BR8mGVakPaCP85tP\r\nT/cGbXyrSx4uN7hLqIXMka4zdf9HOuLEboT37HPdE+JbBL4x0oioozJF4n2Z\r\nomFnF1oW6qR7dZ/u/cCVYeyr4UDPWKYOk6j1Vkx4W4AqVVaWwuBlw+4QRqAb\r\nqBDlzkuzeN6CpEfEUgKR9Sjv4Uvvd83uIunQicu5LDcJzsizvL7SqDxxbzrD\r\nwqEk+wXD6pBFNd2bvMjrhYGrdnLSeoj7gY1BE0E/6IYFcOrnkahW8IwMZprB\r\nZzK1ACkyLg800qxlUD/hOWGBsWDWwk8mKJqeQvpmUJuOGKj6NqjoqFFUO2cv\r\nPfIbNuI5mgI4I9tY+YQCMAJkAvDlW2grdzQrK/NYB+29+2X//alfAhimEPYZ\r\nAWFJw8bj85sPledR26qcp48r+U+SVI9ZXxDxnnNrq9lzZAU5BYT+zCVsKNYC\r\nsE/7d5cCttZSC6mygxL3fqn4b9KwHh1YQ7es1ryVT7ZTPWb4kV4ruLJ8zBCx\r\nDNWUwwc3SgYVFzJ87OI74CJNHPrFXd8qDC4=\r\n=yUwA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/tokens":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.602fe8efa.0_1668186720347_0.6635369682425607","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/card","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.558c2be62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1f623834c96356fc3a6ebd4bdda38a1be7e12db","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.558c2be62.0.tgz","fileCount":23,"integrity":"sha512-j2RGi2IrcIU8ajv1Py6AqgSzQd/i/bk8In1TT9YU3MtvSyFTj10I+VV6v80xUDh3LbqTiS92hD0jA1UvD2ofSA==","signatures":[{"sig":"MEUCIDKMxKL/QR653NnTN/jZ77A7NhmrZmIzErBzgA9DVkYeAiEAphlTHANdmvTTlazn1v3gMUpcCNSlsKMVTFrs5HvgZb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTKw//Uy9+qyzLmaJ6tfncIC5ZKrhLoxEU6wc2IQV1MCkydrFpMQQE\r\ngx9Nu4E9uxqUiXxEIFcDsBMA9l/rap253gvG4YKKYFPRRvONTtjzQ7egGMpv\r\njT0gkgjB5HaGAN+WSTrfWTyTXPbhQ33q6J8xs2xT9p/TizmwldlmZuNtY10H\r\nV4zb4TrhiVkrKUGVFFNfqFZyAsjcwZvGhfK/ngNlAkMOJNfy/F9CBe8A2icr\r\ne7UkNuu4Di3C1xJCR8mYzCXdiont/F9LI64b92pzGSs8PrPZgizMb1CXO0Q7\r\nyDeJS+Tm5EctT0g+sxCo40j67n81/awelNQS1EJ+l0SUJKVP9xIxHbV7PGW4\r\nMtZvt78Ncr98OHSXPnCn0ZmJlPOCFPEQSOO7Nae+4x0rJunWVEPKOcieDnKp\r\ngUyU5sR3vK7FmEbqK4a05mFYrpe6lfXmBxmHjNOD5b7gvIMoFL2J3trtS6PW\r\njjRKoKACeLbGPWezmp5y2ZgtsMXP9MvNgNTUigH8z9OX4KWdJDHi/nWimXe5\r\n4F74HEQ/2j+mjuag4A2BvAPF0w+eQ0aLtM+wFUHbWz3reoT0EF/YHeWwMy6y\r\nMgQnxb6aayH6f9QSDB/E1NB+9vJs2O77UcbJTtZGADbbcxajpEOwVB66tA+4\r\nJ8pKR+qBFmjW8w8ybOaNitnFjCrX7/4Rk2M=\r\n=8APw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/tokens":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.558c2be62.0_1668206727616_0.5510733747765462","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/card","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b560a2df710b998909d02275dfbf205fbcf1e928","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":23,"integrity":"sha512-PzratDJA1Eh1HnsW7ma7fkBn+B2Ur3Ef9311wvBztZtJ21y1JMVAwF/aV9xoKVIJ+89GKzM/Oe+2to5BSub5tQ==","signatures":[{"sig":"MEUCIApwHS8QDGifMq9xpt4E6pRKb+tsu0tdwxXoT9AvcnkcAiEAg5ODX2YXl21YWoayocymKx8sBFa4rTWuoT/l51QS0Zw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmW0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodVg//TiK4PZrMBXZ+teT1xzomRs3ZLiVgJYbVOBtv3yunn/O/ypHb\r\n4Zf57lQSpd9Y9GjL7ntvdi8r4/zYcySmpFKmmM+4ayP+CMPxf72FKEb/EpUE\r\nA9qX1gaTDt3BeuimeWQRFF4K6zcOmWybpYlI3WQcbsmui87ZziwhOh5PwedQ\r\nlmgV7P/KWZTMUPPXQHorNNwHGWO8w2GDcfrBHlpmPZeCSouAFPrtMtx43Ulu\r\nnK3LtVKq7jLr44+R63GYYi0Kd8F0JA/fwIoE9YFmY+1Tcm9NhzBwa+CQ+vvZ\r\n0t9EFVXVRGdy5ohb1c+trCXbmL47rRnAJnVlcPdQ9CWci1fw6r+nsD3LUuTY\r\nG123upORbLCwRpqr5K+E1CHkUty0XPfqzvzS3auXMLSC4r4tLYNjVdK92m77\r\nZmIZNa2Jlko2105JHINursfQxbYOYFqpNWGabWV1EaaYYUKLw/Gtx4yU4R7/\r\nTTTivBy3YgBWBaRj0I0+KkPCcaN8UbPbpYvyjMDTIjm1WRNC3mHykYTbcm0k\r\n7wW6I3MOSREQRMugw10tuqz1v1yRaQVpuJx5Vre/SY2+eCT0QdQP5neAosft\r\nilNwG+Ljf1FnuMfTFdNMnXnsU9lnAHCf2qGeBZS9PavITsT4eMMrVzqAh7eu\r\nJmppRkgpI2KylQNMJ50+kfNMUcaS6IBVi1Q=\r\n=odDf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/tokens":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b5c13a7a8.0_1668441524144_0.4097589470861458","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/card","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93d17e5bc1ec893a97da8b6510e6d24dd0be942a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a6e1c0702.0.tgz","fileCount":23,"integrity":"sha512-M6ISiAe0AFZ57NbFWJhO9+jvUNF094q5PY+YO7NHJmQrwbunDWCVMIMIqxXTCc/jMq3QffNhT8hl9DKgfuV4+w==","signatures":[{"sig":"MEYCIQDm/pdGp2WfR7i78rbAqD0/MxoW4vQkEqwcYu8sH/dDRgIhAIb/3Du2bRcTb2P7iHUzlJINspYv9y9CuEB3IsGjG+//","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnpxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOQA/+N73fdrHq5EDb46a9ol7s5c3L7u4fiiId/AobchUr9pEL79Dk\r\nVNEkupOJReVYVPUz9lxuxouAL/v2oxC/nmN1QvYXn6nGxoh7wsFvaK/G0Q2L\r\ntt7ECzQeUGJAUYNoErsrgMERONyqCFg3DyWHccr6sZzSK4yPzWsCy9HjGD+j\r\nyZ8AQwGVA3AwJdQbeTJrkzQN2U1Tz3OkBQV+FeLt5agnaMJhQn9J3LCJvBYG\r\n5cL/Omd3WxUNTSbHSkMGrXDTgICSxhnhnwh0ehrrI+4V8LlS51EV1KasIkiy\r\n17LCWs3zjqndFIOzCCZOvYZx67W2OcuRfXJFCmSfSCgZu8rxFnqjPrHcxSTw\r\nWJAwR9Am6qX52cXgekFGjgUa9IL57OIrkfRIEbUrdcHrdE1HUUOYimHmD6Py\r\nrq+MQ6QrapHarYvpkhO+MxSi71y8K/REFgcozb/GiXxJdLemenLO7U9Cu+yE\r\n7UUNQaPGMI7tOgFvLPoyG8xIH2IGxLN77VS7y2Mg3yenVW+BiQn5mZ8dZMv8\r\naJcrhUvgt+WCRtM8jmKSsowL5esbqK9Rm63MFPKrhlpPQ8y8Wg7LvpxhM0hB\r\n+Mm8+zTH0dD1MN65YzCko1OkwXUrr/rOTIjlGwE8Uvn/yKWKAehSmd14uaww\r\ndOwSDp+bCrwnlQkYaY8TWhdVfyydJqaNYdQ=\r\n=s6ag\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/tokens":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a6e1c0702.0_1668446833382_0.43235729504726317","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/card","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24504df7982e47daf6d9036914075a90f072dc92","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b6f8a06de.0.tgz","fileCount":23,"integrity":"sha512-3RwUy38bfYVSzhzlrmEx8qLPGJAxkrH1LZ6CtW0LyfAzxdii9kFU1fwYuOWZ2H70HK4m3SPNOD9xohZoikUNdA==","signatures":[{"sig":"MEQCIBm1FLOV4KxNVt1ukGLltEujdpH/PncDIlNqzY5WQbkhAiA1sLrqHG5FXOI8ooroqwR9mntl8hWWZswYjrpsWTMlCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1u+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt3g//biaaVaYWuna7IKT7R+4ONcwHCrLltwI3gra/3IQVDmLQywxa\r\nydNZXZ2EeMYeYFLBjIcB4uprwABwX+Q6GLul8a9ajIWI38/VQd5BBnmR3Ct1\r\nq53vq5oJBrkJRf7paHKTy1VrSdFZrZdW2XUsCJIZiVFek57vxCr+6WrcnaAf\r\n/h0H2PdpjAN2MkOjDPKED+iEaWqs/j4yrx+pnfzpfvps9l/PZYhhtA4riy6a\r\nLdeKP1BwaL2bVO5OnFzKROmxKX7ZscNQMBrGUvvgNSIPLaJZGei2K9+ct6fK\r\nU7Z+AuhA4L9QU9vxwmwqBWeEM7H6SITJojeCMYJnXdWuty2KCq2Elp2cL+Jt\r\nBju14JcAgqHwwO5ix7Cu83QEYJxfNI+vv82yPL/MV+r6zkuqlP3dD7Ry+xix\r\nFpyKb4RDtin4BOqMYTV5UE3fsbOFj7DOjmXf/JP4FHgS1fUtjasD7DTjvuCi\r\n0hAZVxoX3cfO0A7Ye/Ze/XqhXVjxykanOrw7VSBPmflt4x94Fz4sS+e9CABl\r\ncKFcJ1aT859pbsYH5jqFgoCnvmFoe3op+4oWqLEnfztE4srMbAFp7MsHF65R\r\n1eQeubHlTm68XVF+c4ND5NwPGVdQmCU/HVIRlwktQa6A1KjvTS6l1rZ5OKBZ\r\nZZ+2L2nZms4g0e8GmWcGgD8zOfxrNsywL6s=\r\n=WdMn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/tokens":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b6f8a06de.0_1668504509825_0.9774369326989529","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/card","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4a48caba7987c4041fe9cff9d743dd8c834f8cb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0163f3ba5.0.tgz","fileCount":23,"integrity":"sha512-lx79qSM3HWqVoSqn5U/1rN8gce2dliADlt6Rq3ZX04/LXnLebeAeiwLXJnJQi1Ea6OHU323mpiV/HMURpB+3Mg==","signatures":[{"sig":"MEUCIBfHJx27FYysj4MIQgX8a1afhmpNwh3BDtqnGd53U8XTAiEA6+ImuOkeOqsemGbtXWT8VWL7wmG06Bl4AwYvW3t2o+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9QsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFbw/8DsQlbzyTJLo28V/NaUk70F6RA+zicRWaOhK9QPwl2yjaM65P\r\nhBAunNb0353yT5qs0Ikil3pZO8XamNCNxMsukwvwvAVi1dg5SFpKOwdCl7lm\r\nSCK72Qx/b0cFbNriW2mp54lfjgs+P9u2Xz0zbEfisTDDZkr4fdHi3cH5NUed\r\nhMPNtwIWnPCGCB4ywMDlu0TT5FE45Jy/cfYInk5fJ89tUJSHbOxPAKrmcKzp\r\nYcMcWmOyAXcC/3MbM9kWtKL4459XVuGn57MGDup1S03KIz5FT0Vb0WfkzypG\r\nZQa00fwsUtlcajqWoX2jhbN7LXEg21g70SGzuWgqX1wQcL7UcRqpJ7vvMwUi\r\nldPoZmw1jA5FhOe/sH+b3UkG3/Qo/FGP3LQNts1SDo5T+YJ4x7T4EnH/iz+W\r\ny1FKPXD8ls5jdcOvIOj5ncF5G0pbbmzjStUJD/7l8s7H/sOuwisQ+dCfJrL7\r\nbQFIvoZm3hAy0saPGYSTNKRPvsdq+Zg/L1fMuf9hma+BWVF+VkS/eWKJX3ko\r\nJbifKGqfQiQ4T8Aeru7fc7cyx9NDWbPgwZqwdspCEAqxBn1eujzNvi9s7a2R\r\nMVYNfWDe5ChVJez8sTWHAp4UOcKOd66+PUOgpnmLuz9CM5C55A/zNCaZmZGy\r\nPtKbqMz/oPlDFaWxwUtWNg1ZBnFzlnihiCc=\r\n=NkcA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/tokens":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0163f3ba5.0_1668535340440_0.8109987922478201","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/card","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"946e0bbcbb105e4df29d5bb011c5ec49920e1124","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.66c5cbb94.0.tgz","fileCount":23,"integrity":"sha512-SjzV3ie7QtwG0z+bWdtIJjgFiSZJQMS26cbTwGhiD6xUk/PKHQNyYeXVKtROqDt3G3RICPROI2XnMY24lEceDg==","signatures":[{"sig":"MEUCIQC/Fpz5OKPB0Ex8EcAfAO5CpzxrvCOQqobqKp8pPnsLNAIgPx2XFQ7pT3gknwxUArNMHGac19k3RhQmrNaeQkL+cGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6Og//X7wp1egl1q5qYFDDxrUNedVGhLbSposeV+UDpUPxapdhrA/M\r\n5CfHCwJkm5gGFcOUlK8H6wezP0DPAXxswLooc8mh6WIch9BqXpbcxuu5oE9N\r\nRmqdKEih9zMJjgkPrbCKlcKiWbs7wsre7WasI8A9MIRQyGOQmFM4nQKcapRC\r\nCMr/W0mZjCnkfmHKU/xBM/UiDX8EQOfoe1Q1oienMo0Wmswv85Kt9XUqcQw0\r\ngiZs/oS+Y2uCIuUsoqdqNW3E6kvPUUJ2yk1O57KXNtMz2kGvX3B0Aom3A5bj\r\nGJHvXq2wKDOvYxo9lcivTyRvvTfL3eIP0DmT1XXO0xE85GVs0T3uq4fdooZ1\r\nZj7k+WlySZV5fJkcGqALW6bFDamwbV4O6OFDzQJzd0spiQDftm1s0vIbnWj/\r\nrazjydpeG4cPM5w99z7xGNzGeqOjhOp0NvUtTfbv6OLt/5mKhkZEetuL6AUO\r\nEGCi+XmsSIRRL50vAABrk0M++V9b9RtW8tq4KJ0vRQR2VYVnHkYRltuCX0mN\r\n1vNENNFk23VYduD3mQBqmBlPO9wb/RBQik1aomuzeeMdb6cdCorvXWCFfMkX\r\n8Ndzznr/oZHwRq2Ou/vmo1Hc2RYgtmBQPcQ9hADBDPn3oLUYp8cqf6DMAzzY\r\nWP4kSSZr9IFkFkc0VTOZrUkyuadMaPWqe0o=\r\n=lxtn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/tokens":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.66c5cbb94.0_1668540619476_0.07238186727335494","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/card","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b01136063.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d03198275e928a71b9e954200a92552b9ee482c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b01136063.0.tgz","fileCount":23,"integrity":"sha512-G6D5ZdFCEj9Y5xLg4yLR2ggwo84vARcADFk/febrzK5J3QkX4EL5jfOZjtQIPcIiC54ICUrYeFjKpIyjJb0P3w==","signatures":[{"sig":"MEUCIQCvskrMH8D6uugi9dYUeYEXToYSWodpmmxk5ihc2I/KlgIgK0wGYT7GbLiSEJmexn+agQF1PEzqU2yLO7Zd6edwODo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCvCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraig//eTNH+W1VwTJX5R9JVcvHAoziAzfO6WANaycP1eU3nikb0yp6\r\nm92LAE3rpYcwXWp10iHGlxRG+OtJspn5Kk/8LFp9OKbfvJ6DRXx95BG4B9RG\r\nHOWl6ozqUGTwLpIsUMSOs7Fltjv5uZZ4k+e3uF1FK62etK7GohQ+Z6w79X9C\r\nBbQKEJCLeh50Wz1ykzkVBAT5FTkjjMFZYi8ers7zu2jv5Y0Sr7gAW6gzYPCo\r\n0ZMlD34O2owxtyAC09PVs8n/XiC7eltiH0atk0/FUJnmb9HBJeAQU8rzbOut\r\nKY6I91742kvVb5GM+JCI7NPdI8P9VDTgHb/lfgmxvRPoFrzZTsJkpttAVBLM\r\nDbLKZIxsJiStGvaBd31oB/YYQ3NTsMYuHHRDbZLJiyk6xYFbpCSQLeUakjTf\r\n7LeiHRvDu2L1QMVMvy6PshIe+hSQC6VQiY2GeA5j5a4clZhU1LLJB/PhLHl3\r\nsBUrnkfbuY97KMsJRIRXvGvEz3PYdCfrbUK5x4yYexy2KSic44l72hd7XI3L\r\nZtdRmAgAMuXE87/fh+gHjVS4DUQdbukousI4nx+vfe3yg3FUxlMgrzeDIg6z\r\nqQmoGqVjHyciWxVhIQ4CfUOslKx0a4bOPVPKds0JOvJj7mbB9dmsSDbH6zSc\r\nMvIswg6JcCKhNf7fGQao9hBcDTsTM26RXlc=\r\n=/skb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/tokens":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b01136063.0_1668557762326_0.41824728258122135","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/card","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b830b07b2045b0af30af16ea182335794038e502","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.01da0cabb.0.tgz","fileCount":23,"integrity":"sha512-2K98FpplIFd+QmUvtSQZnb1jdEekUqABicrR30MkcjdfAiTC+q9Ymxj2uLfWOWnW2S8l0hFz+0pxMwAM12pJ2Q==","signatures":[{"sig":"MEUCIQDSZ1a4NtQOdKwPCt+LU16CIS5pcYs3k+xKl1wpfvi0RAIgSoVl2JDBfnR8a7JVEge8TiC9kMWDZQ2kkQmk8CMS+2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKm3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN/A//eKdxMQcB8tBQl6CnVVvd60mkQ+U8LldN0GqQBqNyr2oH8hWz\r\nToqX+ivhOPdjINMsiDh5+JbNhUKbbLiqCTZKIdTrLr5QFX/wp8D12aLKTSGZ\r\nK4Y5kuZZtPiRCsQf79CiOVH2DXnCRf3ReI+MwW5Fa6X6Gpp8/Yntmm/0DWco\r\nr0rDOcb79YG2CIJKLkRPLNlZEWxppLYczlCKx175w9vyvJNYDK9pRmS4wftR\r\nSe32aPUT/kfJLbCHHzgOM3OywEMZZh822+2J2mOsZRJOWh3WzJ8ieeN6UBGn\r\npKbFv9Jy64rWnZYgsOge7sGZl5JWC+cDZnsKwZpDsOejxPOSIIXpOM2+IJcy\r\ntG/1LnwRyR/Iscj6r5lU6g6C7qZvKyZQfN/6wAk/pTEEHAMPLXOotmqeVt3p\r\nG/LajTOQC/1fzvU/Tb3dHmZPZllmWsaQkPiE1XLlLATBn3ginMm5ya8Nft9f\r\nqbaUVP1zBza1wE1+cnEIOLjQIroua19fC9OUiIKmGLTLM36vT14Y2eC/Wun7\r\nQFwe8KdxFPTKT7xT77uzumbRgd9/wPG4env/4VnyqkhDsMwcBy1/TMuSduGC\r\nGAX2PBppG4SXkRpnzhcl/ZzE/fJdeQ05HIZWdsLePAOICUGBw8o669caGirP\r\nF2imjenMiOP5zmG1qY8ZjNiuB9cZXKQwi8s=\r\n=FacZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/tokens":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.01da0cabb.0_1668590006771_0.3245623282750749","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/card","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4ac393164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eeb5d8764ad33ffe8aacfc31f49b298582eb975","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4ac393164.0.tgz","fileCount":23,"integrity":"sha512-cUuzuQRIBB6pzRKuzG3lcftCk8VsW+mlu+ouSm4R41l7QNcRyPjSPjnQl5LvEencC3CO5PdAZdDPU7qmWBTI6Q==","signatures":[{"sig":"MEUCIQDc9mdwqPUGWiVoBbVssqlijHhzrgKdBQG3LkNLwxBSMwIgRnd6tzpMxMunKGRHaColzqHGKe2jbz6J7Kb/oWCJcMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQyxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq62Q/+KWa8GAnt8U3chR33hIEnIALZe0slKvc9zik4/fbFABWU9EI+\r\nPCnxnnPXUlr/NUK/XN31vQmfTfp7zVWvJsWdrevDIeYWdzcP/RUcFg48NfZ/\r\n873fPtCqYK+GdDh0o/3AG1RPqRB8glxvjDujhAMtdtEjp4kZClzuqtR9D/Dq\r\nmlxB7qj0IqyJBBHQ+Av4MoaQC+0E26atYdRp/xzU5GjXIGMkizfVfBGwv93+\r\naT3dZrAxPkzdq0Ypc10DqBstjq0euRhJ/rfCwtfl1mWvgTaRLqUw3ZmtTBUo\r\niC4XlgiSdoBcgNKu5+o3qA+QK5jv6Vzg57zCBze5kPnkFL+wSMG+2wvScsBB\r\n+VyikV6mJpxjgOKRlge40/HbWoQD4WBTEBIJZl9mqDPIW2FzAS/11y705eFG\r\n7FVKeKIwu9h53K3ckQe3ihtC2E+zSWYTy9VBZrDigO40mc4khQPmal/XOLco\r\nGJV589X1S6BetOVp3+U5pYSohGL5d5uCiioeWZVmyLgS4UCcQwGGmcMqvfiX\r\n7Xon/ez7pJdIa2VYnt8vJ4XLqcxAylpFZqXrVk1ILDd14bw84bwSk1+muTsn\r\nc05MrFMckMnh8dCiruAcntAbApUqOdU7Cz6kHLeSWc+7XNBGHCdl/mof6ZUV\r\n/vy0CIVV3Mi5IxKd2Tr0PY+BKqcaPdOepyI=\r\n=Z0Kc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/tokens":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4ac393164.0_1668615345552_0.6137139506950164","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/card","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6048fb563.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0aada6092bd2e27037be0069ba62b3e96130470","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6048fb563.0.tgz","fileCount":23,"integrity":"sha512-Z+b7Cg2nbCaApIJSIaOaXVv+UOPfebdLEwq84pTRM3ok16ogTEErrfUNTkKE5MbEzrziy7nngpI7NAckbKdG4Q==","signatures":[{"sig":"MEYCIQC6k/W745jaFt3nw9+oOlF2y4NoRmVz5l+MfI1j0zevDAIhAIP7f2OtxieuB7GO1m8OKwFCV5Z56Fgk0zE/eOI9+nqc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA7g//e1xC+q/ZfF7QAEtSNzxy2gWaNfBBjyCaxq3HfXGfs6eej55d\r\nidGbVO+TBYr9FEveWD+5qlnIqDc+ZQHu5izjLyKieqmbLZ2tRd4lkcotaSiV\r\nZwN1/NNUVLnok5+1ZPZc8ynoP+A7WFJenWz94VPat9d4gyirnh+V6Xvyt7Gp\r\ncV708pyLsuJ7bpeYuxqAWp94ssBezmUZA13pYevyY4jB1S2hXmNgT5x0y2su\r\n1/PZFtMOcXnF6M+B6oHVwRNonS6+BVkDyAuRl+UTizJsib1PqT1SwMW+yS5m\r\nN4T1YqnaHm87iIkqx9mI1kWVBOIKWdAztlGDEIyV1rLc3wO7Snui/rBKJbF2\r\nmHTcxPw8CgCqWF0PzFpq1UBKkIFebvC3tyW5KzT2mbGdX65D2If4g4OTQxax\r\nPGAlBO3D4mQhrwOR7ApDsoaY1kWTsdmyrd5eeNQrvc++hjuJrPlV7RgLHxLk\r\nNqvKGLYHTqQeUsFv6spiuoUSueXwPsMNus4UjtjSvWS8Y1zIY4OVt66u/Goh\r\nqHf3riXoLgjSEXepR2h1JNcd9ng3YRVrIU7nCo37azjMF2ijFTtY+Kdaq4mi\r\nY9QfPZxyPxHGL7kEBuGl9mTEeOBTrw0IyujSZG+Zim3vKZwjq9utu1YezPZ+\r\nVvdykyrU1Jx83CN9PXVNZE1kzfpy5Y5aNpw=\r\n=/k5C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/tokens":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6048fb563.0_1668615465594_0.8193844050506125","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/card","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1feea9fc01ee65a180244d14e9eb90577182ec1f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3777b03cb.0.tgz","fileCount":23,"integrity":"sha512-QIDyBOY4lNcP/J4F0QaqYLLgmMm8bRj0Q5/c/vUt4t9F4SnBhu8qLnCeY80zVIXJ0msw/+4Z12G0Buad7mfM1w==","signatures":[{"sig":"MEUCIHcMIJr5LNDUxYel1GLYy/azWdSdy+e3OB4XcaUCBem8AiEA0gKtETkEsjTtPZc5jcfMTPV/pjW2pk/LD9LouYrgAPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS7hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpieA//XVvySrjcJ6GLaKIX5ucsHEL/MryYSkxG2URvg78eyq+qnbCh\r\nc3k400k5Kjr+VYQW4Til9kf9lVaWe9+qicGi8C6gGiwE8pL8+ikNRfMxbmm+\r\n3M+6ZpLMLcMhyLTDDQB9eZver4GFke4djL+R/ZtE1szFQoeCHewK6DwM/Csy\r\nig6+kjVcTGdN008UUVKewuDArlksmun8OZ3dl2L8TwgvYnbijOTIDkr++n5J\r\nbJL+WCpXpm3Sog7x2jksV+TOBrAeTJh85q4zCsUG7Qtpc5mNCJdX7YQo8T7z\r\nfLcdyY4+NnqvFnyvTo4Wj2dfkVPGrFRQwPDGstpBMsiiVlGORemH3shgFh8a\r\n7y3rksiPcHXE66OorlV38TtNJtv1WJckR1Y17Ysh3cBWFgEjN9+wpTO1PDsE\r\nIz7BanxWOorvtV662khQT2Ym4BlZamP6j0PBieuFPyhWesgcITuZ1CEmRSf4\r\nxlgqRYBpMvCxoZEo0P4wLC8+DefHqK/6LJpxePZ6WwIkUXYHsvjLenZ7LNBp\r\nwERqRq/uSGoWOr+s4iiUutFFipsplUzxM5biA/OS+oBClW+sBqTmJ7HbvTOI\r\nmYHKwwE3Rg8dP0a3Zimfoynea9ZrnxkZTeshpFDyisIZzjtBGQ69U51IooHy\r\nM8AYhVVuCwK8I0kq6hmge/9AOORLRc+2i+4=\r\n=934g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3777b03cb.0","@material/rtl":"15.0.0-canary.3777b03cb.0","@material/shape":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/ripple":"15.0.0-canary.3777b03cb.0","@material/tokens":"15.0.0-canary.3777b03cb.0","@material/elevation":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3777b03cb.0_1668624097462_0.71696714506105","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/card","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a873ab51b399eb48098928da0ef7b894f57d513","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f7f56fff7.0.tgz","fileCount":23,"integrity":"sha512-51vbfagUrOJ1gc+8Mxbuum7sU8DRnORbdC+2bzYBd4LGKwZPTxeECyo+OtWoacpzzociDm2q/4Q0poZg1pTyTQ==","signatures":[{"sig":"MEUCIQDzfhhbOl92nTXpoWuBvSA8VpH1a+LV7dwRq5xp1hEgjQIgeXKiCGcxI1fRCIrNVTe8K2zygX+avJ6ZXIzMdF4yjKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5jxAAjM7YQic+Ie/7OjRtbMoRBlk/K0GttQGhV3rlX3Jvo+WqTrrn\r\nOuMDltm6fuobEQi7VQBM0l++pDwVMmDr7n86odPtfy+PlYvNf3jz+dLJ+AXQ\r\n8mZnEHVERDA25xhJZEBWF9xMo07u8ujCCZdRygiPilWLUxeoJpbqCeNXTGTW\r\nrspSU7YhE+4rhdCPeFSqonmO76OjlavWV2stNJ0XjP7UrEX+fbGaIInTPZzL\r\nKGJo9Y3k0PmSyQI1eCk3UGPLH1Fq5X8DjNgKJpVm67j0uzd692WtOgKc7nEu\r\n5PWy8wIFEfNJICa9LDWv3rMScoFZIt/QVNRbk44d24SEmOgVsga4NtWmCqKd\r\nu2cd91iCmBeZT65iAZXERHYLL6ZBiIuw0NQCRfkmzJ8qbLLd8nmWObp1ylDh\r\n7DX6RbGaZYF70O9lHJSrAsGdT4OB1qIvKUjrwoAFRvn2Ct/dTkITWISZZ4k2\r\n9fvFPO8rx6EJUOUFztrYfST7WVcFb/gzqHXiOK53Y8cSVGGn3zrmKAt5bj3M\r\nlQL9sONkpgc66fiTlg/Faxg/T+AsFLg8IJOhalF5Mvo++TR72m7pLkbnaN27\r\nvc4SjFGAtGqTIR1IXsSz62lA4dhxvCH3b1aqCv5RHw5iP7QMUv5jqRvJ6oW+\r\nc7mssBnX410Nv6LKMGFEPUdiVGnQWbZ+3oE=\r\n=w0s1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/tokens":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f7f56fff7.0_1668628570913_0.696517430686957","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/card","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59042ae71e773d500e6dd00ddd1372e02eecb1e2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7c73f6134.0.tgz","fileCount":23,"integrity":"sha512-iNxX3h3k7hBlUSrxKBV+y0y6Mj2I50bf+6V7C8VqzW6re7PdWGL85mp0M4CEynZv2P6HRE2qbjL9ry9i4HQpEQ==","signatures":[{"sig":"MEUCIQDWwzdmtUBx8o6vLcyAiZpb4vcOdBUgaSCxBZraT5pKkgIgFv0GpIFTFW8iUTijTRH6mNZLkgVL63+VQfEcFVGyD8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUFhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAyQ/+Km80AAROsxO429jouRvZo6Bj5Z3mBjhssdTE+D45yj7ahx4u\r\nL2BGwRLwtOji0F/euYloW8nyilvuajPWtzUqB7Nv5zFjyX5HOSLo99vBVqG8\r\n0Af041ntsybhkz6vbIa5UV40pBQmr+t19siXrBbwZmVIPHadKN0qUx2qiq9N\r\nU+NQPy5er8RjIOInwB+Nfx6ZspW2HkSPpsrD6TryyvValv8i1vhtCq/yH/5w\r\nrBnuoTGGHOo1uLTpn3eljT50KHHGwjsS7IkOQ7CXs2fDwbVEMmhYefZLNiIB\r\nloAS79w91DXcf3jH0CeBOlZh1DvWZ9IgHQ1fePgPW4y8vAfzpZW8irJ7MCKu\r\ns0QdhEuKk6/PP729WgTbRzi+9obsR32Sj4HpHOjkLzZHfZNjIKVLlc7/Rj0O\r\nZjY2WLu8IJOb+fbR6c+A9LY39kiGPa4QjIkOGO5PoYOpEOS+9gMHA1M2JkMw\r\ngkpfHcPEubFv8rVKs4H8AaBpHGFyNql2Ch+uYRtpTJSJdwVXixJOVHxxL672\r\naWMNqVZTPVggJtw2/d9gb8H5ZnkgTgisfNtUpdNWAQRCiat1ce/EJXTvbP7p\r\nCc6Na2rlz4jI5VLU/u19jq/0aht2DPUMFw9iZMXkodTw39MrJCe/bJLvNrKD\r\nZL8G+FiAN2jmqZVitPH9jZwFZCJXK74TXVc=\r\n=nGRg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/tokens":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7c73f6134.0_1668628833492_0.7009909473458142","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/card","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f1e037150.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfc90d56186eaf6aff901cb9188ec27a1092d975","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f1e037150.0.tgz","fileCount":23,"integrity":"sha512-vg2Xf7PdLu1xA2L6r27/BNgpMfQ4pLYvoxSSU6GisBHKXblEve2nkpatPZnt0vGl7qe0PO0icPUrtoXLIYJItg==","signatures":[{"sig":"MEUCIFasH91hyqxQxs2KNIO7GsAkQCwUnZ9ZbaUP+Hw3lmJ6AiEA/RvAgDHGij0Kw8D+ZdifUn5qNVgvFD5PDNL1/3/LuDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo74BAAkEBCqIxdABGs6p+T4Bylxe7E/7A2jHE+BmyYb04Mz4+pIJTT\r\nGJehY0ijSwps+SGLdM4XvdkaavxldNYlBdDk8cRtkLHKdCSE0WkCQf8p+rwX\r\nck4NxWGwTYDb+gipGzSg4K9zt9HHuzmtExRIUTVYhdhIWP5dW/PlGLdgxaM1\r\nV3BHLy4QWBRsZQjz4dP8Eq9/9LriJNSNltHupMmp7bZrBr45945hUX3h3KRf\r\nJc4EFSsxjbKfeaSc5nmG+BZ4RvztywQsMrzLNXMtu2DxHpUPh0ort68dtPOV\r\nOtVScPAvGl3LEn10kEwWiUJV74lcKSmYqLxk/IBf7AxOp1CBetBfwS5fBlEm\r\n6L4KZ8N05yPqrTXvLVOfmJ0VjLlsIpbrVBTM34UWRCp+sQLIXmuOi3btaJ3X\r\nl3g+xmICv0Welq0U2BZidUMKVyZwjVLkCoMGKD8ZI1PaMexQ/Z8szJsVDMwx\r\n6UIijbGXa3W0fgfUvf7niB9yqHSTzOyleCmfUAS4tZcplR0rD8xEol49CGiq\r\n9lpuDCZNrK0w6LWTJmhwVG9zJMhRjD35PnwiCPG3cAxsHNvl9MozrF8/Rp/9\r\n6ozwm6j9+m1+D/kF3d61RUqxd9WClGA2LpRWilyQ/hZeMofQUICEsiScPRPv\r\nHsggDWEJRDzBM0Zs6rgsyy2OpfiQaeOgF00=\r\n=Bi0c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/tokens":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f1e037150.0_1668629126749_0.3180803790010158","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/card","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.40b18d043.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a455aaffe0e52d351ca27cf506b09e7d2a0c0c6","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.40b18d043.0.tgz","fileCount":23,"integrity":"sha512-+YQbiNBgMfNbU4dpmaVaESHeNhCMfjKQin1UlGZG6FNbSqgZdOv7rnBJBFNHvaXbp0qy19kD68fFmoda3Lv9RQ==","signatures":[{"sig":"MEUCIQCG9/1clXkSlBRW+jnCuNweMSTLb7sPRFncgNc9mcbu/AIgIOSG0jeWp6R5JO4x8d4mpSYSveooinSuIW71fCbE+OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWszACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6zw/6Ah4bIOflZyLBrL3Ec6JEKD9eb1RLyaE510SdEswTj6/jAIY1\r\nAdL8Fp9RTIJhBojyr0md0Wz23gOwWWkWTuOsT06YirpFOMHnXp7cDA8xBICG\r\n5YueGMjiGAzLTIebeFQSbmyY37i4hZDzG8a2zycmRzRST0z2n8xvKli4kstg\r\nixI6EYhfx6Jr+lroDroBhK/xE3vkbymXEd3VFbTuU4Ctf6nsCgGzHNA5HJQ7\r\nY5wgsLnTnUlYiC9I3EywS2RQbtDZVYMoVLIz1ftULMVU9Y7P3ZoS6pjgqmuq\r\nyfY7UTAc+WHO9nTnp/fWToLBNmJZiZ7pwC7UOcEl8HM8L4HALX5V1BAyPUtB\r\nDeiMPwyj2Nl/tya9QCwqH6sDDUUvblWuHv/KsGa/CeoB/TiRYW5IA221jlWx\r\nIDjkp1nxdp4dftplbQtHoHFZc+m60msWSaxu4Mj55mjJviMclF+JGHA+x45+\r\nLpEG5kvayMi5pXWD4FjZ1gl9MW3+bnap0cvDHZzlQV+2vd5ILFzcT7QKUhw/\r\nqQH4ojJzDAJqch+2VE7y/OeMhTHLyTFeLnErartCLbMNcOU+7c+8A/etoFtl\r\np2E2xSglC1Aou/5UR7TobXVflZIHfSPtulJ+ViDRKQy/tU6AeBR/4yUZMCP3\r\nzUyS51EoFtHTLHZ9Xr79WinR4LFpHrff/dQ=\r\n=b62C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/tokens":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.40b18d043.0_1668639539446_0.9775698241061948","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/card","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04c3771b121eca81a351e8ccbe1fba477a1a8d0e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.86bde5c06.0.tgz","fileCount":23,"integrity":"sha512-KRlrTVmgg5LVjH9Raqh/g25Po4w+LdLTjkD8INrxJmkxGBkdJ7t7Qhtz1gghs9nJAa6KkLjHQltALU4RLJ4+Tg==","signatures":[{"sig":"MEQCIDWyKKZaO/jKY2OTtL+izincI7u6Rg8WCaHqzl+Xw9qqAiBhNeVn9zlUHnrXABE958NaPSgSJKX5uHhUQhsUiB4J2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs2Q/8D8Yk3cheOf9eaZ+FnhOGmKdbFwWO2OUyzEwF5KEahBZ3yPsl\r\nE/e5QwUTUSUJmnHb+hVDvdtMY6AsCFsaWwxokd271GvUkd06uGrcCxTdDP6v\r\nQIAcGBguVOLft1W6WjQTN5PE8yvdOC1igIjSeHfjRqkROOE1akktzZ/bNdRy\r\nVbfX0eLqKoxOwIWIrOHCN8TeI9Iwi64VsMfqDE6xnUFdz3JSlv2WbILkBYGY\r\npDOKivqbksqtHvNGh74pcpuEuQCXBQFP4qMsPxHk6noitYbKK3Oyq9fzkMQr\r\nHal4v1MB/+WTCCmpuAcCn4Y8yZXjhPu6RoQnlb6rGtURsE65ZU5mdpp4xBQ0\r\nses5Axu6NICKsZAmxlLYvvZxaerLy3zT/cv5DzeEmUdhZ9o/R/O8ij4U1QUQ\r\nXA4/UrkNWzKx4MrI9rSxn0f1ixWSVnK0eEJ04TH0+1xHFZbITjUfyoqUJKWx\r\n9dw0h0nMKfCDqGM5C+WLHIWEVkou8Ufv2yf+RI3u1xN/YeepD92uq4wOkvY+\r\nYTuDrBjoWSsCh+Isko7VbSuHjPDa5MqKD0TZLtly/LEjgZh6R2C1/Z9iaDf6\r\n0dpZ9THwcsZ1qzzLwHo8xG3yMIywh17qgFNcyHVMp/QU7qEvygIbLufCPcOj\r\nnIxMQhVURlajT1DUJPLQcvLqcWtvW4lHcCs=\r\n=plOz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/tokens":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.86bde5c06.0_1668640146186_0.9114368294414594","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/card","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.bb7751002.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aae6e0f6d6b3ec6bb315582154850155b35a8c9b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.bb7751002.0.tgz","fileCount":23,"integrity":"sha512-fQ6++phDql52RdQJLCQK8YI06iLxYTqJxBSF7D2S1OANp81mVTxjIUN0Q2VlRIvwi1vq+VOFFX5XRJZc5WFqVQ==","signatures":[{"sig":"MEYCIQDqvZ1mMquPia8iWHoNZsVJIjbFpz5yRrXSnAN0FHqNpQIhAL0fcZZwwbAVnag5qhNqyNhNmOSUVvDLI1eKlgMHhBc1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHFg//d3EEwCe3SRR1JaIr8ldlStSBxewQEoDsV8IL4LmQ9/DTiLfP\r\nDXd6ImcJXk7lMBs31zMR8eQOHWz4AnD4dltTqW6vEooXu2kpjfU2F2o+pLMz\r\n/dxTRx8zvNEQYpL9hNAqAOesk6RDlvUtDjTHXD6Pw1NqqoiMELIS+xb1iZST\r\npCPy78irJWED1d26w8XyUBzcDZaQVgnKzlgDcIBF+vcKLEqVmsr+iHBpYN13\r\n/Mu0EqriTGopx9ELvR70dDlQ3n4r4ToyiedDdiCu5NT74itTzrfZ1GdVHE0q\r\noZqGXfAhNgcnYtZC3KXBFbU7yeUFOPyc+zlFWtovpr5+VBGEQfC8cuqYlMMw\r\nHyPat8140iV3zr0s3TOVsu7WlNAV/EjDAk03E1Ls/u7k4B5E4nF4JDHAqdHI\r\nNxO4XQw61wtN1talpMeOlaoRQxFyY+U+f8/7kfx35OMhfKghxyV4jehozvDK\r\n9NM3wRLWPxZS2V3nCecJ/4zTap/YmAMB9FIXgLMqY/DTh6rzNVPPE5u/DF5E\r\nIzEZo0CjrzCMHM0Ubtu2iAqfI3o+qpQMpFo3EglP6tRz+OqfWInbLLQBizbQ\r\ngE8Ex4d4ddDtOQwb3wYsqil12sqmMCcb7HWFkITXNjNE4MkKX8E7d2juIOqp\r\nfXJJFLOBjtaRuoSey9cn+MDn1Cv0BOuyUJ8=\r\n=ulHK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/tokens":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.bb7751002.0_1668643218950_0.5654162096730266","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/card","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"374f7b0b01093732398c57bfd6e2eeb4833d7ddb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.63aca9af6.0.tgz","fileCount":23,"integrity":"sha512-Bu8a+iIjV77oRv5JQNLnAIrXsBV25MDPCoJy7TB9lpRklpuWdBj7IwhsIsHfx9NuhnzPO3S8DKYkSvJFlTJs8A==","signatures":[{"sig":"MEUCIEmKl/MqkGedNkwQgX/jS+qw5AynjiWXvH2XjxvBaDb+AiEA38IXmUl4vnybBxBJWoHKVJcOU1gfCxQpYoeXXXNu0IU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMhQ/8Dd8D9et3yLC/OVtl8lPLVmcKOzU6qiPANdPRp9d+/asxTtVA\r\nshllnHP91owiOryCBIVOFe8Fn2/3nSuX7nwBh7BWs9LKqSDv6E2/KHSgg99m\r\n+mp8kpTyOKZdCDTgl+rL5oVx2D45+jue+DmmIAWNemYVI9YJnNOETGi5a7Of\r\nWAXrRrcTv/Z1njLlgcSkNrTCOXV+FTYvYtrJr6bPQlDGemYkmaqxdCFzY1QI\r\nyG7tb1+27G4Vb5KjE6eexY2QX0KqucRIUQ2lmFmdFlEE2p00+FQYEtI6pIGB\r\nTLqs0fb0bIADVVujTNfhw2EPQuap5Bx8LAKMC5pFHnuLwbvQz2EpW8dTWpGW\r\nemGVuQT3ePO2Ovj2Kt54kDa4cjjrM4ERAA1w05kP1Vm+7dkmITTdAuV6548a\r\nt7GZFEqgLuLGeEUcFE3BZjp7Qx9CewPFCXm6dglZ6uGWo9fSavKFfemUHfFE\r\njVhjhZqNXs7aQQZoeSTBZElPlDVAUpMp+1vQiS6K9rAipxfQTNJwm7YQ3qyf\r\nOEr1De3AC6m0ZRDT11yCL5y/hFwnzR2Nld2kE4LiK2VgCaD2OtPLZyKb34qn\r\nikabEjglwRciPoPbqOlvA+nyH85ylvFvx7TUESrlUWCIrUQO7toiWHm5L1St\r\n/EGHuGQYWD7vbYFSkwd+2H0uzxwEa5ElRTg=\r\n=XqOm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/tokens":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.63aca9af6.0_1668711725635_0.7511142751852595","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/card","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41f8bfc3fa443690e01093dba6ea2e8353649d28","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.56482dc2e.0.tgz","fileCount":23,"integrity":"sha512-jXD2cgqj2pP8WVHDkqHbpPfRrQJE5T9JmiouBW2qM8otizK0uEkhUCqzX99349Hg47TgpaiZ05tL3D8WK0SlYA==","signatures":[{"sig":"MEUCIQCRvrLfTTN26AFoJVGFc30BtISi3IfUEuRinC0s0ouGLQIgKGK0wlDhdSmmwMjclVrRCUE1mZ+oSGDQg2bZsXmL+60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEDxAAkk86g5Ks6ppJjO+tiIvaWqDvpR4G8H6k7MhKigqMyhGmNB/L\r\nNuev4iu2v7PHWfWJ/zw6fdYR/5RqWqsR0SguLByIBjsRrc/GzcdG033IidHQ\r\nq8NIdwM1CzHa+z7Ej4bCauWVqKYU1FwgPmdje9PCje7qJZ3ReyyNtSTznY0R\r\n9xAEWsPWaBXKrTso4ZztaUm6l6jnLgfY5xlj2cRd3mHB0zpJ2vYKYkISQusX\r\nCmG5NSCLV3LW9lxQ+i+cScnIxT9FOhnFIiL0MYJJhABRN4FpywaSXEjnVIZT\r\nkYmX6Ex+LBXEQ4W3Ftma2o0A8clEmPUbvRseLKu7iQF/wbVt5zMKjV3st1fj\r\n9tfPBJmftG8WYsWyGrh1G0Su+Y9hNnAUz66uDCk+V6s+15DG84GeqxmLg/rj\r\n8CGoFVNYBwcB/RjPEpmvIvQk08gNleEZFz3xTB06kqbWoXOGV7BiWrMODatv\r\ne31lJjuZt+hJZMBoN0lrU5Kj8qcGhVRm7V/H8BjEtOSF3KgfRtwSsuxjDWYD\r\n1Ijexy3bP6hxJXx/mknVkeOWbPNYjBLQZ9zHIJr/mMwMrz+0YF1f219J4WPX\r\ng/iwXVr6br4UHEfRYJarRXkVP9qfNSeSELngMjVT8SMPk5QhNQSsbNrkQJjz\r\ntpGFi7ErR2M+9WEm6hLD6o5mTMP9A/12dvw=\r\n=Ymje\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/tokens":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.56482dc2e.0_1668722153668_0.7426027924754857","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/card","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.953e689f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f02386bd197813533c83c3d0448118679ef8de85","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.953e689f3.0.tgz","fileCount":23,"integrity":"sha512-fRJ8odUbVM0xEykMnLWrrb/8Lp7zYj2U5grkIyjqzUKZkS99WXGX0s++PvAb6YxQXS8RSqSPBnqj/lQvrFnBxA==","signatures":[{"sig":"MEYCIQClJZwdvIr26do4pM0CKldAIR7nV1QQ+uRR0LCIuekaGAIhAL3mEOrkrjzNQuHR+mctchUAMmA3xGSagc8Wv7WODrqg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrACACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqDxAAgxMJxrmGkTCSeAlvFmicvwvA+IfFzp2dSH9JLJmSIP1sqPIh\r\nsLLrkQX7SYdVrMbUoLe/0/xqDUADkeNOKEW/NQfWZMR1EFCpbHsqWmgt/WaR\r\nCkaNc2sl60eW9DA77F+Owqxze2rQXr5C39gH1kD2X8XbSf51DC93K76mAqGo\r\ngVXal5FSZ9PXGCdvesn2zUWhZzUnbcvlVSWMv5TK1sny6PIA2eMWIF0svw/f\r\noCpe0m2hGhq5gZQ1ZzmmuMavQx3KTg6Onp6ee1ZpP11ODKJ3b9bNbF9Yj93l\r\nvIsRPdI5EPzSSOQe0ice3myw2/btuifcmA5dJmcdrr5FTdKk/+2fMySv8OFd\r\neS1aV+iPbSfCLWfW3ENIPoTPbKqPnWA6FZSYdNZcoYJJ7s2goBoI6i2EdFHD\r\nsCRWvq6TR164z9nA9z2H6krxZVgA026saaaGs9TPLbNcunyaZFk2RfOO4Anx\r\nRlq4/QIh/CoCfF11xsJ1TIkix1NSyIRKtNpI0X8VkNC9HOVbwfkMc5Fn20JL\r\n8LR3boWyEOjxjAKX3NJjZFkxXCpiS/bJhlXZ1HDMPLsVfftSTOUeB9ieZUaI\r\nlgVZwBypYsHOBEpxIMy4b6Eew1c/DvKo4wkTRjXhqut9+/kHzPoXnYPfbyZS\r\n+JEWHNJ9flf0fr6wOXz24aSV3+QWQ5196I8=\r\n=zx+/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/tokens":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.953e689f3.0_1668722690371_0.41823519243125196","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/card","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b5606a793.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5165197cc9731b504375a1ac3b2cb54413f9317","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b5606a793.0.tgz","fileCount":23,"integrity":"sha512-cXTrokGafpXOuydtalNzSAqKvH1tuiUFRacU2zoBRSWwMqLTD4hW43rzltGyyI3GAFPeYdc0X+23IqzKkPyLPg==","signatures":[{"sig":"MEYCIQCmtR2iZNwxtvSDSTd0wuPHwb7m85XJd5k7UHAapADgKwIhAMNIpUVkyw8lm9q/UKZqEOriH5i1ccUaT0x3jaH4RFyI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1yiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh6g/+OAdG1+uEWnBs2R9H3nX9MlxqHZviS8LkcXdk3OH20geH1L9a\r\n+QwUFhVKD/MZc2yTRphQqf7R/5zmvCmkU1cL+CVnVjM1nYdm256YiGlLwMPs\r\no8yzkItSVZcj4FkBxHz5tLu/AyAQU3ugoVz+cMWDqQhU6tk9qpPmOgb5Iwa4\r\nfsBqLhaDXNF9dliGfCTPLg/QAdYzpKlTRT/+Z2/a5ahHPIsjlAYi+xvGe/3o\r\n4t0LEbFK4mF7Zf85hvYLSQp4GnbXoudo2YwgaP1RxX7XNnYz1iKeK6a9xpXQ\r\n/x/DNp4zYAsHU6TG5CA3ZD6MRYF7HWNmdAzo1gV/Ldq2bR6vmxqWoAC3TA5U\r\n+Hau3KHNSVP/OSVRdpcSWEukn/J8FOmheHGHv03qML5k9y8NjMGLw9Xccq09\r\nH1JAlFjszZ/mKnOxeyUMQVDmSfE7JufPY9bWOJFZZ3GocitCYKE8evgvf+2w\r\nT9vnSQ/2UWA/Y9+4yEmmMe0Ptk4HSzoTIfEYgH0OTFX0Kv4evEaugoGNwkoP\r\no+w/gFv8XeFW3LIbpqeEOk6RJXlT1xF/LMnvJOlKmniSN+feq/icYPOP+tv9\r\nS8F/YEkMf8LR7kr/2eEYAyH093fWOc0VS+fkHK9HsRv79RBltOLOXcpInDbG\r\nqwJVf6YC1ZOE0zP0MXy8ZUMPZvMbMjBuwB4=\r\n=8rMG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/tokens":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b5606a793.0_1668766882711_0.22311544536643946","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/card","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8c5675942.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b97198aa0490bdfce4481061d25c84aadbc038d0","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8c5675942.0.tgz","fileCount":23,"integrity":"sha512-69akncYPGA0JRGSEo4F61iu8jvnPXYLE52620dnEISoEpCNc4dzBHCybED7crgskekWneWxizSfFTxX7cr7r/w==","signatures":[{"sig":"MEUCIDp+jekXXfAjOx3n5Wz9HVTIwdqeJ4HceBQnY4IJ+e7zAiEAr0c/fFWUZK+AEUiRGA5JSE58E8ggo0EViqGNGJK63uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhPhAAhO+O8FU5tqdH5+GMBb+woeGpPkDNOAfM4D1ZTAfi5SxWuCt2\r\nxOhCpm+1Jt385+KD8rLb6Aglmr0UYGccgijdk1TRm6w6Q8rYk6EkgYGqZrFm\r\nFbdvSjWQnQFaoz/ifD82+pxRvzb6BznEktDCqNi+RGg77nDsedp/sPUmKN5i\r\nAHOmhajWzHw8So1j2GeekLZW2M6v77fc3rdpp/HnxW0TRLC0xP2Hgp9F7l5Z\r\n9bv4YDHBEIAE6FrN55RSzum6YNXRKpD2bjZj14kFVzeyafnZ9QRmMI3Ocnyn\r\niXBJZvcwmDD29dOLM3COsaTdLH3nHQKstXHEaLEffJa7CpDjSVYt7EbQtREP\r\nnRKzg5wUI83modezurCdHsRK4r7pR5rZp2s+n2V+VMW8pbKCrqiSPEfmH6Ld\r\nClXdZiIKToRn96FK3Crq/ciazMF01m1j5+IM9XC2vhcCbS+oq0GuhYrcOhfy\r\nJGsGusIrJOOD5vwxknlQLt0MfAmKfC7LWWi/3rtcZlh5nUxUQu3HByg8GjZd\r\n8S9+VcqiM1PLzbSjk6s9clFW4TTJ0Qs7qDMgPwD2ox806EWqG08u8Fp1u/yw\r\nYpV87/rrLOn4U5SsBFJtr+fnOn23gwtyqVUmcrxiaQwAW0W+ZP7BYbEeC0iL\r\nBBAlNQ8e7ZrKv3BYOwnPQEXiyxxd9oGIn68=\r\n=opwa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/tokens":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8c5675942.0_1668784589295_0.047249479669351","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/card","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88b59cfa6f66277ec30f3fa4ecd7dea8ca2a72d0","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.697fbdebd.0.tgz","fileCount":23,"integrity":"sha512-TIFJQxQb3dawmjsQpDnh95ONT3PC5BThNBnAQ0KDYr6hdz9Rrpcvkrz0PxDjpTYACRy67I9ghrD3LzHRX2ND1g==","signatures":[{"sig":"MEQCIB3xHn4acnxkszNNEYXHPmK71+dpg59nBZp4cr4kXmB5AiAQNtYDl4bEewPBQ3uMQcWef8T0kjebHZHuaCste3tQ0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7pLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnrhAAl7qEW8duMbsrEDcP6VMBLn32mRhVjvhtlIL0NleEYnvtrYvl\r\nZ1NTs2ODv1McUdIkAACJnZABH5uGkLSYz7ryHF2F16mgkOT/Cjmhlm4InffN\r\nDRaYDtbJdP5C8s5CY7zFp9zkwTjQD0QDVgEEtGRlR1GI8BWxezRi62hsNerw\r\nMcT8qThnybb4Q5CxGShBX1xSULTJIif8hD6f9MYRvMBTivK28F+t3hngG4pP\r\n5nIAwRQb3J1W2zsZ4P1YAzxk+ffk+4SjWncy2EvmP/u8GoPcQ1OGn4jDj1vu\r\nELp5rX+Jb7XcTQTyfdH4iuKEEXPgbG9FG0Q2zPduy4CJgNN8Y1QoDyQsr8Jm\r\n4JGCNFdgtUr3k+A2Fu38MnrWcOMEJe3p4U4f1PjoKI8cLKOb+GLoE28fAL7T\r\ngEG1XommKLgN7fzud25hhHa0mk6ldOly1fOUTmPG95a8VJUqZRTjwmmxE+ik\r\noG26EctKG2OEJjLqwYU1JT1aiRRUyKxIpOxRj9yQl/mZGUyAppg+R7cVeY8P\r\n6hzlTB18nD0EdGlvxSg3QxHc5hK5nAc/GogMMrttSHJFniQmVYzoJqMXs4yO\r\nuxBM1sb8pRkWfYa8gEbnurpxcxN2vcT6zlb7khsj1uiQMUCW8/zk8YZ5Ewnq\r\nIs/JLf8r1uR3tIqcESdL+wUVr+UKeF7oNTA=\r\n=fx6Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/tokens":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.697fbdebd.0_1668790859335_0.022490057210158287","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/card","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d58410453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1837f9dc05f9c5823d6820a1f6f1ea9e521a7aa","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d58410453.0.tgz","fileCount":23,"integrity":"sha512-PIMTVMlx7mOyVWOUYolI5AOv3YaK2DFcjg441tDXkTM/15anOHIupetaKkRbGBRkv1B8CJ0upJwWg2PokvJ22A==","signatures":[{"sig":"MEUCIQCNQpnJkhlPQYk5vCEDl4J7TIPMFKEW7gWA0zmzUKJLTwIgXXJIzQIXtehT1AsmtHZ1tdpV/dh+/XVcIpaYrDyJ7WE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqOA//Xj8W65+dPW8UllsDHrnQ6K+O4+nwtECVOuN2nOV8bftGGK2D\r\nvzqAnQRqEoiaZv4unOmPeU0ME6iIYV3+JJTKrzCKlsL6i34Li3PbVZp93MD5\r\neDdguD/9EcEmt4Dtd2Ld59PlSovpox1derz1EoKX5R+whw9ASpwyxIVcIZW4\r\nTQjyjFOq6bW/htX54M5VnA0eQYxfBuARMsL+g9ygJYMDsLe2bg9RqVJgqJG4\r\ndaEqiDD7tnvUN+AKnsj52j6xn4XLGM0dGmRAmsUNxmtjQfiMophbzcFsFkOS\r\ngAYrfv1TGfNx0l7Ti6XELTTJfKcc3nc7KgtCV+ECQMUYVi399l054/QRYj4X\r\nJ4ga8Py6uQNSstvzCkEF5lSRLVy7hKTKTOOPZvslmzGZWD2n9cIXWmXzxIYQ\r\ngqe7Y7tbsvfLFgt5mRXnnO4b8zdQDyA6TkXEQlC2dFFyVnhq20pqyeRXN+TS\r\nMa8AZNGCX6Yt7LIZjVHVTYKN+TqsjV3shLz1HNumd7UkotKKukzK8VRJ4GCY\r\nx8aUCwEJc5UqlEI9+Q6ohwIXm/65PQ0gInJGq3Cg0tfAEsDadBXvmPXCXMPE\r\nLdMrRfWSaydXaZ6zAV+hTV6wu9ivdG52IZLe9AZ8Q2HmeM4XXjh+g2rCn/LJ\r\nfwAPWGmLT9glofbyBeG5C4TQMINt50el3sw=\r\n=yUG+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/tokens":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d58410453.0_1668799516724_0.016379228001206503","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/card","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9656b5f76f1a06833dc36b5ca955dfb4ee1a8b3f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7971d6ad5.0.tgz","fileCount":23,"integrity":"sha512-0YNba4Keg+a0U4JK+siLDbTyO13s40hm88kX7uQ46SmsQlY3fbMsdOpX9+y/PaOkOXIJIgX6g+c7ASM7c/6Zyw==","signatures":[{"sig":"MEQCIGNGNYg2fl6RQw4JYiuAlocTZXuylVvhzrjtlJ3HMpPDAiBaIQmnDm8PoYZoB9EfeqDeN4cRB2ZBJ2JeJFpsPOTmzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJelACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpncg/+P7OCeVsfqgvBfNsjxdLNHLIPYyfc/rJEheKr7Xs65RqsjSXp\r\nOFfhByGUJm1MarY+shLnapYwtYhU2CtZl916PX1g2KI7ibUuwfmtkWXv+KO0\r\nJvyv9URPDdbqMAvH7TOREP25HcYmDFHgk+omB6roAo/01529V+ON1Ndw3XXG\r\nxaTrEP8pWQ11OUkys827s1qkfPvfeB/pMRly4E5dkN85/FIBNeyBPDz8/qPS\r\nkmgTVkO9xQOZZO72ySmU1Zgh5E6RIr3NYxI0ByYNYxnTAd1C4oJ5EvzCqFBq\r\nIcIqILTMws+tLvPGIazKNlI/XYdxp4cNIbp2OaXEr3Nx0bF/S/uGihiqSMLx\r\nfG+yW/Z7smTt4IdypyuIw6KcnSMzRg8Qkp1GRSmaaucTszvLxqhc06ENx9+K\r\nZFo6hASPpn9b8xv2n1k75Z4dtlvJiPeVQHKw2YbhYR/KqOYvKg2rvAQlGsTd\r\nQzmn1TXLbmBEktR88VOQBMHFnR33EX+TO3RqfmoGcjDVlg2ZK+xTOlVLLjjb\r\nDriXh1OeCj95P4aYNYn+zjUr01ztQ3LMZS9mxgx5Jc+ibPkfapA3pM8lThUq\r\nYJiBok86TZ8/lvElZzX1Q0woHfPL3DfoqEEJV62Q7CCQXeCDwUGvWGnkS/Gg\r\neyG0bTlgIpzFfKObHmf9aRANSQTm3koiEtY=\r\n=rgmF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/tokens":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7971d6ad5.0_1668847525236_0.07677693934160046","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/card","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f88e51cfb1a9e66ea335245b5b6c6a51557c31f7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":23,"integrity":"sha512-WxCbCuPFxdu2QYHKioSKvK8UpPLKf7Iqw8cpA6iMGHOUgPc+RUPU12WQUiDRHcliksxxJp027va0QJivZMV2nA==","signatures":[{"sig":"MEYCIQDMK20ZRENXq818Kq+RBtQDKz6sJOQnaiiSc3GencH4UwIhAJ28tGbPKJMnATbZSgC37AyGN28DTYOsXPfGB6A2rXqA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9ChAAoLgkOBN1Q+WklyCcRK2X+GF4hNp3xZGPJbzaTt26/YLGIzp7\r\nQe11MQcBMwjLdm6/daaXN1wX+UzsYTH4wmo+f/9RaFGIDqj9d1REUao4hPl+\r\nUNZb0cGZ7X2bNgfGAH//08TjUiQKNMInNlkApdLtyAA/n0km/9q5tnmXUEti\r\nQCtqmNpM/qbQSLEVMXUEkYRAKXkytfCyu6ocKbJPyoXO21Ie8adFEjuviBOd\r\n4Lnj7OS7kFsq2M26XOcXxYcBGOk9wQUPfO23hTaVqgj3FRZl49JlT3OXsUoF\r\nt9W825n678Qsk7UU/sKiD617vOBrz0tW8fRAjACjn33TlA8kEvxxL+P31qry\r\nbVMRw3eaTxa8LtzDNKNekjG9TaWmB3waGtLGBZ0NC/8UVAsGMFsic0t++kdI\r\nkdP5hLuIAgygulTaFwx3jtiQ0Vglz5hWAzU3lHHMXDNsIwOu6M8YJ4MgGFh4\r\nnOtAx8E5uyq3S3esmgogoDCbtSvYjCl36mHRJAJWRpKZg1SMzOX201fhEQcK\r\nVPil7wdSe6ZjWMBcnFzKyLWxGwv7l+KQpwYBWMaZr1fpvGkwnSk4vq63/pJG\r\ntlgAQ6MahpCeDYUFJNSnns5RArJBXY8gDGC5D2bQrXK3pyxg9srZpMxI9Kkb\r\nwURFdzqo8BDsTHyagbA1owLDJ7BIgmY+QUM=\r\n=FW3T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/tokens":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a0ae73b0e.0_1669028045934_0.8954565704909183","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/card","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.96f472604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b7d3e44c2b1f3169898c2081f8dbdceb9be9496","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.96f472604.0.tgz","fileCount":23,"integrity":"sha512-okKNkdiZapnJetZQEbeghvEEUcQG3ZKjuUNJuCvf39eHVu1Zd6G/MdVkfqZIh5ZVXeJdlIMUKqdhLuj/R3ipaw==","signatures":[{"sig":"MEQCIH+LhiKxqhSyCuhWRm9PPoaQRDAlLe35oV+uyB3PiFiVAiAkPQRifo+Zh13WGuxPYshr14PibPGz1cbtkTu3CvIuZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3SsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouJQ/+N/b8EpJdgnPMfamy4k6SK33dLZxup7NMMIq91oOhssOD7DNf\r\npKgHcZxKb4Fwmvdq4ZiVImmGPmVU3m4J8s7q69PMol1x2tGVr+Ev7YLABBfN\r\nJWhxnj5X+oEzbfyqRGcT04UfLk4CRvzWkfoLkfjdrxMjtRlmEWn/2Pip5jt4\r\n9deE3SaYv6ceT7rcRNbO6J7DgQ/Wd8OLn2JDwhAPQXa7p6+XFv18Czgi9g4Z\r\n8fXQYoVFomEBFxqX5DulYDazxuWhXmFuVaheV4glr7jOYF6jxPAOdN0Qzn/p\r\nWRH62ToQf93OB7piOXmL4l585RhorgrDkxjWycVcrD4lSBrMdL29iiIsXyiH\r\nnRFl8IStJ2SDLxtQdFnIiUTpFUQVnk3WCsWaScsKSyFEgVIVjDWRsDb0AX15\r\nari1S9REM4oalm8VfVGbopxSSe9Br1/kFdWnZL+qEuqB8HLhd+7qqP2wrdMm\r\nfOifMT4JZUspr+ZfKY9Hzx66Dz7OZlO7I9ZTnhwgCKiz11bT16AXO31eGZ/j\r\nwpnm7fwYfSj6e5bjK9pFGEy/aFAZt59bdkEyM9mkfAbvgtUp9u+Pxq/f5LbG\r\nkP5wj39pY3P4hXkP76ZsjhXlmJGtXzZj81H4a6jS2JtPx1xpHFCs/XRG1wuw\r\nYdELkz/XK/8pE1i1aDMdN4l7Qzm2HyYenJc=\r\n=uGnT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/tokens":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.96f472604.0_1669035179860_0.09463325561694824","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/card","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54843510863676164907e6f9b8865dd6b644b374","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.18b8f31e1.0.tgz","fileCount":23,"integrity":"sha512-+iCdjSYfB4MF3wZV/qwjJg3Hx1GM0M3pBC/baBDopkk7jf9C6XECzYVf8jVRAoJsh7nFrnc2JvsBQRH+ciIl3g==","signatures":[{"sig":"MEYCIQCxkIOOpXdB+R8ls6lsp6fylJHVIHdaq4V9YiIbDsjgbQIhAIepmQy+gYUs9hP9dJ0pyqsUf61rp464Q3OC1nYpVvcp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwJw//TDlvOBt522HWaPizWN9mRkNzMPgyJjTOmMH9lTwQ/sjUrcbY\r\n4sl+K//doZsTcxw3DwHt0xVLsIVc76T7a/WTn1NW8dyKEkMT/DjDqDm2Zpj1\r\n1lTnMThIQ04oqvDP2nrEJKXC9umhKMVjwniPx2VgFUls8aC/S/m2AShNMxKN\r\nUcCDdsbPl4D2Pmn1+mU7+eCKuchY7x8TLJ76Fy3xtQOB92vCasuSjH+4kR3u\r\nPAQhRlqyuwshdNiPnriJnEiipcgn/hBqRqbwZcAgWjIwKd2cpyd4SH2H36Gi\r\n/gmVN3s9qC9677EaT1hdDJM5bS5TJpM0QY9ua5m7zNPDN+1ZjEhf3BKgMsSy\r\naArflKP743FzPhJj6rtmcqsCDYM+UZ+IjqON8a5Cm71Z+GQYlwi62u8pzff5\r\nRQcmHnESvzhFO4A7naS91tzi6cDvWuulDp1Wi6i6VikToLa2a2WKe0BW31n6\r\n5h7LJ8GSQUcV3sYE7p/GjxDapAsWKVF9x9J7sANyTw3RaaTwdCNOLvTp5H3g\r\nnrDWIwcI9vQuXPbMWFZejZqgJUOwtzbn8qc/zVjHXnF5e52JEzdez3FXbdCz\r\n8UsYjyO53+qgpouOMwr6/OPgWUuwjVvgMDwi7f+ZOXY7K3BScMMUXTwzhwtu\r\nVn106yir5uSylVbGh/UqHDqzUHCzdlxCApc=\r\n=fXtJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/tokens":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.18b8f31e1.0_1669046559097_0.5481621365221283","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/card","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67232d26fc800e5d625d7e20f0f5f558c0cd242f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.912f33ce4.0.tgz","fileCount":23,"integrity":"sha512-0D2SEaeTX/7Xo0kXRahFpVuyr9dzyEsoic2MpG/wvsQ6LJl3T6hbwCjd+uUDFA7ptiYo/i3jEDbbPMGyfsCEDg==","signatures":[{"sig":"MEQCICuzDEkxWPvxSazFhzzMXa8DlIipUzFCp2yht58+FBJfAiB20tgtpbR4qw006+rmgknTMo6wxhSmQBmQbLzirLqCtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS8Q//YVepGiU7xKbpwcr4LvLJfNtOn6EkgwkVKFlslFbqghbPhDT+\r\nljA01Wr8HLHp6GrcTdbH2zmpHooZCQx+CXe1kA3uA9/J9HZV09e8csJGKqCT\r\nzntT9E1xoVJXmTwHoXTvKbxLmq6iSGGe81wJrkFY4NE9DiFALRtW6Cye1nWN\r\n5P687Ixjk2SmS6dpcvEp1as8OFAQFQpKp9uTwHqZe55xWqbEJqcRrGcmV+2p\r\nzdH8fdGllqfzAha2rdHvosROwSjwsguaenHdaq+CsPv9z8Jo92q5pKbWfKWF\r\nnyodd3t2nWaOKo+9MHp1VRl/At426jW/86IfCPb5eGNORqy4P9I59PTClnXE\r\nRSdKTD8RK73pXeV6YxeDImGyjoz6u+srsURPlVL/l8VBNvzSEPbVHJSf85tn\r\nt+mts+9E0nozTaW+qi5PJRfKD6/pPdtdvuo/J/YZuvX+Bfg3jQ/UREohOW2o\r\nMc8JgCO9eaMSpapldwO0mdwGHbpChW0qnA39Q9dVMviA/XbzmaZfteWQpU6z\r\n7TdlltI68f8oy8jkKgngDDEaBWz8LM6DLKFXY+59bYfyAEAkZD/bc5eR3ReW\r\nnR8iIIUBVjIGFN9mnoX/xO3RUDfOProrGuUSPaNWRthcEIjXLCLgkbdzkqAn\r\nkLtKoTL2MRAKkj/1NFWStjZjVFr+mgrBrwQ=\r\n=hR2p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/tokens":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.912f33ce4.0_1669053253809_0.27712264245787166","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/card","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec80d63780fc440eb14bfb11339ec80cf037616b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1e1b1c369.0.tgz","fileCount":23,"integrity":"sha512-mWTg4IXcaNpCFqj1kUvWVnLN6NYFMOwDHmk+0TsRLHM8D7gPyZ86Fs3o8/Pb+0usEfKLijLmFBIVxsb8a1kbQw==","signatures":[{"sig":"MEQCIDl8JqjpnE2OvO4mcYFqf7i6H9RlJCjr3nTz/eeb+20zAiAT6kftbOWEx+J8Jx0kASbdsZzWn0BYLLQFS4OE2AcpOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm3lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvBA//Y+pgPrQgNKMlGt1zKuATr5VE56YapMfnBdOWbOZahsag72zI\r\nGW0SmrrKSF3jumGhS2n7UfJScT3W4dcB61nvcQHyNE9ge+KcLeC3F+o4Kgkc\r\nQuDiUlhEW4ALiMEDs0GpvSFg2wIYPSTN+M4gdUtuH6JRXYf7EVMbeXmq8UsF\r\ncBLkAmgeu3zjZuAmwyGY/QR08gww1DOS9M1jCB7k7SPxD6MOBVjQ3iF8BdbI\r\nAYDLF3HvT56dL+0GTu4JEGx3EvXeBQFyuuF/QLEI7yidxwWQOoBtyaTNHpRP\r\nh4L356S2Tu6ffmFbTLabiysCMQU5RMo63i9LiGYbvwBq+d43JXPP97KxzdLN\r\nhmQoCdz9+cML+e5MrjxRUNELXIcf+8puW5rq5juF3RPCojHHEUupv/hc/P4V\r\nHLzgVApobaW3yNy22nF+tiMs5kmpCwOBsLYoVFM+O6+WaPJTK75LYDChTOXq\r\nfYRRR+lp8DUKr9ntDZhgCp6UBd23MprcRGRYblDp/jrv6p9EeH7KLGWiQwOd\r\n3AUmFufhjlHRfzBlkkeYKStw1RsQOUl4bpPKF96RfELHbLoDvOpddit9/lmX\r\nQ/G8VNJBS5xw0TSlfvAADXemmE5wUow7nU4fCWJh+6DbxUy4ldujtkMNLGvY\r\nKJj74dd+a9Faik1VYVCcCLxDgNNGK4cXnLk=\r\n=+4Wr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/tokens":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1e1b1c369.0_1669230052823_0.6143349681788015","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/card","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e4d72b40ddfec218e8a13d44cf5dab1724a9774","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a2ec49244.0.tgz","fileCount":23,"integrity":"sha512-VBgiO3SjFXniKNih2FgyJDxE9kq2MhkbU+W6MFNL8J+ULB9uhzvxkZ1RV3kfuqjbizGJyZLP6UG4rhq3iwi2sw==","signatures":[{"sig":"MEUCIChPAg2TaiE1nbZvB5tzO0lz41ezgJxSTXvLphxz4TkkAiEAog9+8iqa784QusIJYzQ2AUv7+lOIMDKBGQJ1I9mH2m0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnT8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOng/+OTezTwhZSVdfWBlHYTvZlo/zF9kVpnyYMcCNCcaTFjw0hxYr\r\najwjcX44abdXny2IbBRYkzO7x/J0k8Fc4WKWQoHWXRd7+WV9Wy7u3VCe/MnW\r\n+D0H4uWfHGmnMGtyeX+09QojudorZPH21eJxDcwy30OjQRkrie7GJuN69kBN\r\n+7bWDQ8oQhS8ux9QlKN6QGceBniHdYryq5RchrVbtdZCuQHGe7c7sCCZDuzN\r\namtKXBWfOxoKW0dOGM+vJ3+254xAWJ7WpwWM4YlCknHOQ4vcAwpli430GI4a\r\nQs2mIzXPdjCmWaWDvR2pDksocyqddRCRmPTo5ewnL9ufxrfer8NoAmJHCDYq\r\nzTcrlIYpZwOLUUMiHyMpsolcadhwJzY+uQJw1eoKlLnrt+iBb8xlcdclQzhm\r\nTi6vop2qabizigq0Q0ae9rpIPJNnU3annZkUSMki3O18wb1N/bZyE7qq5BzW\r\nPnlTRIIy3zz4aiPj1f1mCKm5BLSItK+JdWIRUE4MawGQQyIkLSl3TKxfGMeD\r\nj8rEHRDLrKcDvXzoDPDSlAXTMR13YPjEYpJebBPxncaKdvMeDWo6G7j09Zab\r\nk4U0CqVjEo/sYhBeE4BEvTcagvXq0IuZVzBcYvwdRcMuZ9JIdu1mq9Cx+yt7\r\ndifaxS7udhPwI1AJAyRqIeK9hIYbyqurvgc=\r\n=LZoB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/tokens":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a2ec49244.0_1669231868050_0.010368850794209461","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/card","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eb48cc31bb53424247999e5428b1bc3f8242153","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a7458ba0b.0.tgz","fileCount":23,"integrity":"sha512-avFZg8ssAjm3YkpjyP3ADYF8bhXpWSlZobEpRVKvL5Q5wQMM1V+aDwqxBIKGcnhT/TGhZkZYcw6JkZ7QEBZG5Q==","signatures":[{"sig":"MEQCIF8SC6OGmTSMG+W3HOKjQRV6WJ56s4R5XbK6zuG0qDT2AiB1g074fo7o4A955+uCpKmc6ovtXvxpDxsBDLC3ETj8nA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlOg/7Bz46iedo2BSGSyV/r3BF/KyR3GVVas/fScnRBh7THTsyllix\r\nMB08IEie0pQLb/ASRppO96ta3oHFWPOJpr2FSoJI0PnSfq2XJ0bLpOcVXFHi\r\nhtMdaizy/1tIkhEkyztzuI+wrw1whweZ7urBrNGVBf6GEXmCzuCuLzAuZeeJ\r\nh2AlvjxMEclbXu/+r0blin7wrHFgGRHajPdU+UVgnGwyIcHUfFYhQOuIeAGg\r\nX+1Es4/G2REvHyM6U8twByascC1JukRDTKF168uZ3rDNF/VuTDTfYNtJUitf\r\nS/DxST71Dj1ZcLl0uU8PuuKbLVYmkloCzwRmC9B2rKKOoN+OFR8IgXZ1N4+3\r\n/x5lp211oudjU+26rvFbA9ox724147veoQM73S/SjEebDn7xSvFACG+ZO/QH\r\nI97087PIsnQmhZt1gYb9qyBvz3oJadAZ0uoDUrh0NwFY1xDK/KDe/oBbC+/a\r\numMeaaUV+ehYzlgQkpGzKzd6jFNcf4MRizmUu1rLJRm7JWXgh7eZOke1XLUm\r\n4ywchyq9yIjvz1C1pNRQuDZoy3POk/ENVsdoJ4UFqPqnqXsK+BSLRWz1f3Ba\r\nQB/+jCm9CmtBG/gU6ns0QZJXiAJ21S09hqZ53JZpMB1XKAEIWBfCuBzgMG6d\r\nyRFP001Qh0SfqpBooMI/MFW2mvWNvnfAnwE=\r\n=o7FW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/tokens":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a7458ba0b.0_1669234598453_0.5244686734082908","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/card","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17efb81769367c73d1a301101abcf9f32ca6b19e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7c35e5036.0.tgz","fileCount":23,"integrity":"sha512-Dzca5GRBzZyitxZ8uirFV10R9uMQqS5FtsTKSAngPHq/7gjnR6AvOxTnL4P6ogdkdfJjo5Y0ImupS1ws0KJGMg==","signatures":[{"sig":"MEUCIQDc0cI0V7u6sXZ6+Qwc0ikVaI5kV6fsQaiVP7LCrsXLOwIgPg9EgiSWRLzWjmzvDCRjZcmCugQYiHyhrYjv21Iu+/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw6w/9E8HsuIjqmX6OVX9qc30JrdpG7AEizWoUVtkpBxn1UhAlfcBm\r\nydcx2dnMObZuqSkyEqH3sspETOuJNfFcD6+yopDzvJtNHHrtBxTq7r+8J5Iy\r\nC8Y3KUAwxyfQWn1WOFrwotG/HWse22TjPNC7oa17ANOJm2hdzJsW+5KuhRkr\r\nVRJTn5Ll5bHaZcu0r3f8JoZPErocPr5ypudjbuGJZ6fv2tBTJzqgB8FmLaWS\r\nJQS4Z7L6alUt1d3Um6OVaLtQ0R+6bmcXh24zUB82R/rd2JmaZUEDHikxxIcz\r\njDPIJKZ0UnWgMIyu7ULoriTo6wpeq5E6Fq6pDLxa3B/0DrGmGZvSdhrfnogJ\r\njMf9DgD0ADBcr28vpqfBFewzF0O6newkI4bTG0DFobRmm+Et4Hi1kE+DqZ/3\r\n4a/PFEqAY823m+73n8qx0kka8k8Own0VTuEhOG6/QQ+2gmdTdBvh8HrSClFl\r\nuFRII9dbs1PpjhxPDprN6JCRiNRy43hoeTbs8WF9ihu5dLkM5kgECOipmdPu\r\nQO3lyLtjEFq5cR9fZFrvBI6dXWgi+US5T9Cy1ht6E75Eu+kFvwuIax5UWrcs\r\n9NhFwjgJaewHxEcB30Y2Z9d1hn5vJLq5AoshswATAMBrEkYnHO5xuh2rg1ky\r\nJX+8IvbUWIagrlqlseMvTRdR30JXLs2wc7o=\r\n=ZLuM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/tokens":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7c35e5036.0_1669279179281_0.5934533675427494","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/card","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c00948d4f043f77989191a0287c7e57a833825a9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4356e05c5.0.tgz","fileCount":23,"integrity":"sha512-TMD52uck7/hmcslV+BbADhNmHKuOc4sptqFbYNg9LYtk1pUTNGXj5kgJV2w7hHP8w9dSPBsI5iAIK1JGWSNSBw==","signatures":[{"sig":"MEYCIQDN0rWbf/RBvEOdjGUuG+w5BhKTF8Ek7FFCMc6l5+K8DAIhAMGNrf0azIp5SjAXFzg8okD6EiSomGZUSpnZL+Lf+UKL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRLw//d7qUAuQJ70lt6p0g68XLMuJNjRiwLwCEyLywkFsBn/nfopAn\r\no16M9yPSFew3U4muvQaXyJHETD1XGK3fjxe/MeNA3ZiMPDF2I4TO5++EIiZ2\r\n5nbGX2XW36B75dwigHm4LLnDNOyKMgGEHlNDMPvSqi2xDYm2YHZnyFQtcMCW\r\nM2cl3MpnDDNkQ3NeODlkLPIUAlVLXsxX8WX8zEimI/Hk96wDvZyMNOyU5JK6\r\niZGlWn/Qd7RARXSuEgZeehBeptHhzRhGZNtZCb/xyCyKL3882gSs1uEhj2aY\r\nTD6Nm7gbRktmiN3bDzShlfniKvcfvUc8zKLbNyUyqVYsnh1P0drUQRojPGfN\r\ny1fyAbFYJ1+94fwUcv+59q0BG6iVU5KOHRdQmVQg9rPoF5bqI3mrOSUoASPr\r\n60Zadcg1vVsVGuGGv4mkMd611H0md8ai4lOIPK9/kyAeMG/3aIPlUC0gMKq+\r\nSWdEjv4rBI1Y4F1cDLM+QTrWckP1koaaXtiOqy2IKQxALSjgvI7duH4m55Bf\r\nBGg2+EKoGdVCgNWotFuW7U+0d0lPMnz9s+aIxcJserbs3/VY+XatKOQAUhdB\r\nI4CYZ62g6zjYwZdXOWVYKlaX6O+/bVEZdTRA3O9MmnjrAyPXGf1vVE8u5C5N\r\nxBo6iYZyTKtcBEt2nGjnui1pyLQvVGSPsNY=\r\n=72bM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/tokens":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4356e05c5.0_1669283817447_0.8131954369490062","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/card","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fad24be0a28569abb0e40003ea320c9290d7d38d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cb605f8af.0.tgz","fileCount":23,"integrity":"sha512-xJzbeUOObqH7mP0/ePFKA/XA4G4XQ4JI1jxU9PAXQaghc50Eiss3XjxJCAX8q66xPjdcm3orJMur/IyQFA6V1g==","signatures":[{"sig":"MEUCIQDDczWZxJ2dFBwqsAbEl+6VH50RJBrU644DIg++GzJzLAIga3vb1p8lBFvVB1ptvH4JyExMi1sAE2R4eZhEpzIUyDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0RbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptYQ/+LjsSgpHaVo4hxqQwEqN3Zq4+C2furafEOL1rHDSmiFR7wtJK\r\nMxCUO/E6j6cbsskBINxMFqrx/DZBVZV9k8VAoyTj4Vb5In7W14FMpBuRNWn2\r\nA+oAOSBv6aWv7H15QqVO1Hk2oWn1kMXXO7vK8puNK6KuA1mHwdcZbuYfQ+Pt\r\ne81ycjcESxj2CELrS0Sf0xz2rrI2Edizwn3LMewcgJ0rUrGyXr1/gBgPGU9B\r\niTNgfX0Rg8h4wtaXkgLKhZ1TjJnHWrx7x8MFmxtanKZVBZNzzmvMS81b0CLF\r\nfT8kis4PhiOomiFykjIizimVC8kTfDJOLGogXojLLXMEEheAwGavrr4DsBpW\r\nnyYP3rohnSfR/o1loaNtYR6aUdQVe7D4ivDRoscYmtA5naB27fCHfhX3H6jl\r\nAgHMYHqWHrfUlEfkgnQkrmfbflU2YbNDkdgcq4d6xiV5MzxufuKH4vU4mbC2\r\nMuVY3HI5eFaykh+Cx9/ua8ii/42DNsk77cbkZZKTxh0+NAq5vRjY3k2lBBcl\r\naI0osNd4d8TWvqHAdiIigGjEeg2BPYKTpixi2BkZHOGkdPk+pmklSJDJvRPB\r\nSIqSyK58+oYos3YPb4ezGgZcoRPpbtFc9iAFekn8O1haBbQg1qHON5g2iUao\r\n29H26+3kqDo/slbq9zCD0PQ0lX6yBL/p9Kc=\r\n=5L45\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/tokens":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cb605f8af.0_1669284955169_0.4989913984246459","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/card","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34bfdfdc5e2b2ca08798083d13c7581c3b612712","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.05fb07f9f.0.tgz","fileCount":23,"integrity":"sha512-2vb8M7lm1FVVKInYGujAf3l4Ib5tZr+ksslC2Y8HAZRIpee53LPbmGmwjKprIJSVEQ7ssLY/6ObPR0/6liiTww==","signatures":[{"sig":"MEUCIQCpDv7AwgKGE4msxPSi1dVy9A9rzb3TYtoLFUmFm3GTzwIgAl4pqQNgWqXm3fp8WzcUjWeeUa48o/Ou8+/BKBkaN94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUlQ/9FztZGm7KlSZEG9VoknQDi3hOIEzooRGf6q/q2qjSE2PSf5Om\r\n3vKySij0k3PGuQit2y+cFCWXBdgrg6acObRcIOZXuYgRQX4jEI5rv8lphHMa\r\n0IC2gr0BNajuWJ66zu4oVayx3pGqGWL5vn1q+J8QXno9xVPUnwE+ABgfEwvv\r\nrGHovZfIuAafkY7b4aML/Xe9EMbmwAo38Fiml0Al+8crxlMCEeCSuK4dXLme\r\ncbuz008Z/he5Ec2ini15VyxdTKhX+PxhD2lj6sCJ8jUwXWCj8u6cQdZ8VjCx\r\nKxov/mqOZbKjt28vXVeYtjY0oio0lw0Eo6leo6ah6tqxg1YLLiIAHygN08ML\r\n/eJ8T9lRffb3rIaHkrOz+xeHcw6i3XgYi55+LmZtxwCkN3G0msm+g7+dSOxz\r\nWvxQ5RqNk9W3/8pduUby0JrC6MHPdHj1zorKpZVrNmp/ewc203EU4oacH0MX\r\nfgOgnRnToU/MIu+QSAeXAqXdZhp46BDNqkkzOfTR4wztO6mILMFyRaeBTtL1\r\nn7EKfm8yTk1g17LEV0GYice+Me3Y9HjwB0nlCK3BG5wlhtFqh7xLW5tM9YN5\r\nzHoxjUEYssSdklBEsOuw0JZondJaTlCBKWeo2zhxVHxLztlpUz/maqS5HFP1\r\nX8bIwN7meuznFo39Lk4CJqFYPrn2n4qrp5w=\r\n=EEZO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/tokens":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.05fb07f9f.0_1669310038099_0.9315493572619418","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/card","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a911b386b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5bc85efb41c9805daba720abd2b40b5b04d7575","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a911b386b.0.tgz","fileCount":23,"integrity":"sha512-hBT0fHjROlgr82bPZc85snQOxC5zXMBx5sWvZwvHLQkuntDinwTHKHOfNUCirL/RS36KjoezZ8C1MGS7eWVftw==","signatures":[{"sig":"MEQCIHekAEmbJbHC1ICGzuNnERjRrzR96HZ6EjNjMmPrg3PgAiAcqVkoOk+qs959b4eLWJRWmFj/o0hLz7XjhUbUbLixgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOYmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq72Q//WXAQRg1kZ8qMLp6uy9HWuzal/G3MUiGJPN4DnK/o2MUt+GnE\r\nGAuigtsOYJ1fgtYYhUp7q0LLMwhCeQF6u+wVzejPZYj2XDm+M7qEmqPdiQqa\r\nXc82HXv7aiRVBwhUr3eYoXbPAceXwSwmBL/EUqtFDN/d30yDzA6w2Ef2ha5C\r\nICPXjeWO+Cu91r/uMxjSD4JvZdolOMsXNGfShwkqmnU/jevnBIzzZTBmjN0B\r\neWZxtd0U9CdsxvHRwJclUK6KYNabUjzRmG66gWAT++V5ps+LxhGhl66UhxPk\r\nWl3AMoBUHHyLbZfmlD8wfpAUKmRUmTHu+OJ4vHHSsrAkWZgoFcU4U4rZ1aMZ\r\nOsCRV9ZpwgDI0RNtEI00b3zim+HWVdrKNs96SLk2bVtPe2TcXK2D2HyYir9t\r\nV5C8c9ihwsuSwElLZgTKKZ17ZEkaYRAdMq7BlARcJmKWpLLIeHQFQY3w6l6S\r\n6ueQFFOZ8f6TqfTl0/Fu11k1gjIFrpi4Tcjmy+o1OnnnjL8FDpUCoGPgR0U9\r\njremDTxlHOJR7/jlMmZFN+Fc4I06CZP5edKAIcg2dsmpcDfW6olLTdkEDr37\r\nR0jbqiOw1yaOEf473sXwh3dSQVJvX7hA4bI9TywpPyseDj4b/BPoB4R6zDkq\r\ns7Yw+4pgkHs2e69EjT3XfEvd4VXvk42J0jI=\r\n=Uy8n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/tokens":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a911b386b.0_1669654054240_0.23571799609751531","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/card","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"394672fe47c66b51c47a1ea25e706ea77aa86e97","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2aa8050b4.0.tgz","fileCount":23,"integrity":"sha512-QDGb4tf/Sg+pGeG/NRjsGaW9ujuriFcRXhfPHFC9sn8H6sqslhkBkve4+W1/ljWFZlfj1vMMAl/oEtEyWzjJrw==","signatures":[{"sig":"MEQCIC9C5lmaw2vUz/OqkGffsNdyjjEbsO15B7owq4ywrFxMAiBG1gOVCmT98sBlb6Awl1Aws7TKR0Ecf9VARQZYxXHhLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQf5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz3g/8DpRB8Xdr1s0WSePZyo57guyeCBzPzcG+rRbb7L2pDg+Kt15Z\r\nuVAYd65/wjWYZYSpD0He41R26Mobfm+l77rspR7F/m/i0AaJzzyiuXcemN2B\r\nAY6wHi1H7TPQT/po2W65JIjuvKodG+jwaRjEjY0zYgvhSycT8CRWhNtrtJ8r\r\nHyqBjV+UTjrxY4ohqLiQu/9W+oZ7O0FYRNMVRCvnJne7yJoBcz7hbFytydmY\r\n8zapNwEdIN2rt0xYMCJ8QdtSyUHvoaUwTdOE9ILf6hI1qJdIHUehKqf08NFj\r\nY/SPIC9PBQcNkydYs8R/LvDnR0LoiDB1cXFNuDpP8GwpZyikk3lhQWsVucRv\r\nFm1ADOQs6qwdVVr3mYrtQXcuCyrIRTob+3AjW/vpymcmNWDg2hYm8Uul6ufl\r\nVW90D2WL37A5FLgiZ7prfXFuch6RHeJhhU+IsN1wMfg88z3j1t6gwAMKo4X4\r\nfPR5IyZziWZTvGGfkKt/ONslDGyMRD8MeIuHNKOdRNNZVvS4S92CoaNPpXdX\r\nthH37xC2sCoClSG6eGnC9Z8bwerwXtHwkNwLM1Tv2s9tCMImS+rHiqTVk1nG\r\nsquod9LADqNH7dTdw50UlNkHZ+0nwoyXjXYwMsN25cr5ibHLKZ9iQ2dz8TZZ\r\nQh2bMq7Gno7Hk8DJxcFpSztiCfQw57AxYw8=\r\n=Beqx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/tokens":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2aa8050b4.0_1669662713021_0.6714903115573723","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/card","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.323904a9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c06cb78e73f06e861136a8f88e5093c4f838036","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.323904a9f.0.tgz","fileCount":23,"integrity":"sha512-ZQoRNqstNeTHrSWTL/Zcbvd/Hdod+UEP04awsqgWm4Bu0BOMBTBKbq/9Mpz7hf4pJgYqya7fvfdhDj+ufA0OCA==","signatures":[{"sig":"MEUCIFlVy/uypkgp7NqyeP+kAkD6smAzgoX/wBPo4zRQ57pbAiEAjlhHZTEVvtShBBc/XeIsG6Go78Q9juLmZDytG38onBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiaPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowZhAAjaviZE00kvLGWQe94qwP+4KJcFpnjGlgUkid2FaJ4rw5JMlx\r\nU9EQ+jyCyPwMmhmYaRtLC87YPMiMK2xdmU0p+6+2Yc0KvI5OfTGmMPYczal/\r\naRfP7Ti6nfsb6UZmC/dvKN+cvP3JX91q7we+/rtgpfJsYLyjde5bBjlxElkc\r\nYMhBtXCWfGPuFW9ybWQV8eSbdYC40n0FTHKhhVCsm6z3pMctlTPUYJAbo6Nj\r\niYyTyKMmzeZpyVwQqe1FFOeZV+ZFR7RhWzsTl+uBw6YRns3+b8T/8B0HsRER\r\nkGy3WPDaaIu4QiFmHRUWsn/IGcphCnlIo2Mtk/yP3SUeA2vcWo3EDCKRwjhL\r\nSQMoJH0bMTArFo/leAkPXJ0sZ08FtVLIUh2tFH8UH6pyv8sk8SxyVp8PH5Lq\r\nRwtJbSM8PKfAfCdvJplhXVm1FjOacbAHNdLj2F0DlB7/7Wv3kJA9lHxKTnz6\r\nnawseG9KDl3yznbh7WGUtmadi/oGkoMTIv9NDZT7YDXW5lwfYIcm6ZzIz16G\r\nfxCTKM/zOksNH1JxcbNxoi5eoKRo2FLIlnfDsY8N9FhnZUBwknYJQ0acfyZ6\r\n8h3qRPssGxrFBZmMLnWqPAZqS2yZVU/QnCA6UImV6b9+B1ut8cCnOySXGEVE\r\nigTcHn10kXb0MQzEgR4S2yYRdbqZ8zPXiJM=\r\n=/GZN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/tokens":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.323904a9f.0_1669736079253_0.3560744747631617","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/card","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.168a629a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90bd994d5c8c894917258093299b768664673984","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.168a629a4.0.tgz","fileCount":23,"integrity":"sha512-ZRE+Y29Yg2rBV0u4gP1Yde7Ir5pJ9HwYTqLfh7xo/oIU5h7qQ+zbEPK1YknpoFYlKny0of21WMMNT2qwQfJK4g==","signatures":[{"sig":"MEUCIDZePgjJO7JnZyihRAjaSaqQ81JqDvwsSEjb5X5shZtUAiEA+RGdBgcyvvpkimP1nGpVPkgxVpuoXKgRcRs/z4OkMd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXcw/+JBphpDKW9YV/Cu8K8/WEMU4wMDjmk21exVMr69653tH8fpMh\r\n1KZ0S8eQynLNYefoL6NkXtnTxTvOZpRJkdhNrd7625aMVNyawJP4df/ACF5B\r\njUqFhHOv4S0u1GV2Uv+N4r1bpigcfmVseyXY8YBMdmacfOVnePRzU2u9/sLg\r\n1wwudhIlqbrkHtlUqs7kvXKu7EIT05Z2IuBDqJdPSIB6gqFivSgb8P2CgSdI\r\nIex7ATiQzktvBFFyfky09EZvv0V5Z2Uk+s4SFDfRdFnF/wUBWAf2SNLry0U1\r\nb8Ck3K1BDU2BzvXxrMWcxRACsez8uhZGFrKnvkcKiIZ4xHem8IJl2G/EuoVu\r\n2/MlKLWAGDMzcvP8LB5MAeKOa4WrB7lHSFiizYGBFSN47v+j//0eOCkOr10v\r\nfW4QtXIv0sHMwsedd/llDA7Ut+YI5C2opoOawnWjLGYarFLmiPo4Rbcu6y24\r\nZM7ClFLdM53yWDxLXqv9gNwZhaHHwdHY6BOgau+r11l/aP9RhbJJ94umFvlx\r\nwoyRXeqQwURbMZeSvS4LsQ1oZuhMuPSeocV4ycsV3375KbNMe3KJ519ncOAP\r\nIXElYau55Oswqs+bQo5nuDut8nskfExTJILhmBiRQ4d/Ye1O6H0McDqgcu1B\r\nMFNqRe7OQHhynO13PETlt8HNUppn80hz3sI=\r\n=2173\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/tokens":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.168a629a4.0_1669740589640_0.5793969544369815","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/card","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.65c411674.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2ed84cd6d730ea8025548130a05480a2a8c3dd9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.65c411674.0.tgz","fileCount":23,"integrity":"sha512-Jdant2fqy40LBKz/Qkm5nWy+FV8ldIsOOF8bg6ZXBFAzGd8It/ZS6FoUWiZzd0sLVsY0BPEezQF0wZHz7rCA7A==","signatures":[{"sig":"MEYCIQCwkh3oJ3np4thEX6Esp9rO8xRTL8zjvBxqZmJFoBxBFgIhAJ80X8aB2I2GNsOy1FvHw/+Gba+pZ+qsQLovfP6U7/j8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkOgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZAA//YKovbKoFgsnQZTowMt9jv9Jf7f8XnpwKBTlpc3+2PkNDU/6c\r\nANzPeXffcuVy7pawJ7kOFpZbLl87mAoZdn7npvmO8LRdDa7dTlji7dLYPDZr\r\nvGmnZpcOWT3phmzvZhBEwfM3dkhOW1ZSYrflkpWYAUOBZF1pTL7rKb/XUi+y\r\n2djbJDfKTtbCrtqX5SA8Q6OW3/juYe8LJ+p/r0ykDrRQzex585LqponG+Ok5\r\nO06GufklbFkf8WtDyeroqCaP2ydzK/022BIPMYWcfu4zG0OYB11jzvUNbv0M\r\nkEOlBlcNy45S0HtrEJTDaaH7OAaKgkhbDDOYCg206NcI/EWvfIng0ZeUQJoz\r\n1DGQmkineDUTctFOInTBs9cftxXTwHI+p2kod3oC4tZCdsvMYx6aVcdYeZ8P\r\ntomZz/6vvBQiZ1AJe3OazdvnvhKsqspLZenkKUZ5ARSg2UynWzPDQNzkCa+P\r\nEhUeCVT+aGZJvE4o9XOzgniIbUiFGAYWm4x350VCfxrWOi5RzpW7qS16X2ie\r\n1gFffavuOYc1TKYgg4QFHJR2FF9CnqaXiOp8u6HgHSm72Ca0HRvROtLV7W/3\r\nYuBvimAJqCxjYxoup+e7YeWTXeJ8dT7j/uL3tmZasRn1RwHNiz7e69SqosuE\r\nkl5PLn/RYIEDb/sBdH5ZQypJeZXIICvlZ5Y=\r\n=JbQl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/tokens":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.65c411674.0_1669743520687_0.25563985226856123","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/card","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e5894d34e051daf3c1b17b8be9702998578ee78","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a86d36fd2.0.tgz","fileCount":23,"integrity":"sha512-GDAESRSG1j3TDybBoJpJiYWjwWXzftFnUZrNUDkmBoly3A+ylT8jaZIp71+xp0wCBMADLSJ818r/1Uheawqbsw==","signatures":[{"sig":"MEYCIQCP0HpMvmjfQLiPIK0vDwsSDd365XAOvNY8+jYhtU1UvAIhAL29BA87kzPc8sBoIbhbOgwZSYBPwhgjdXpYEgQugenY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhryEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouPQ//dGYCHrGN3LbDfxW0UI5OeAcHgPQ0DZYT6ASXPXWvbaXOrIhG\r\nVcKOdSUOpicyMKvIj2tEkqpBsISoP8RvBCuPzN40qLPMM9oVnBvLG9xNgbQE\r\nmgbFHtboSqksxre/afPbb5vicaA+F2bQiDLNd5p/bag3JAMVYkkLDy1iAoJP\r\nGCTYyeufBNHj4nlvA0eRuS1e9BAOynwuGbpRQ/SLIknP8otN0silTV0LNgxK\r\nH/G3FfWyGPvqjGXqaN1z0I3KE6iMJ9AdS/F89zIUHhCXSle7NvMpY58m66EQ\r\n+ZMxShrrly44D/SfkLbJORnNNoHZlP1zIxsCIujll8HSH5bQpoL5RzgI8O1d\r\ndTRd+hHU9BCQRYc6NENobXJZMlcjrsr14cIL+6yITTbuQIUFKTck/8YNUrXc\r\n+0XkZ/AnHdp9f5XKr1me/xu1cbhnWfZ1pJ3LCfgmBwQgKjIHE9symhz7ZPN8\r\nTc3Snrj+zVTkbmwUs7ngxcmS11NwSnKeg67cBnN2t1rN1v7x0/uQtyA6ou7k\r\nB1fU9BX9NxFhsXf4FbKkmvww9+alFrI6ggj2OvGpfJykujdy/2VmGpxMJ8+B\r\njWrO0Sv81do11oCMIdEW+OKBB7/oYZFg1BQsi+pGMENvWYEuvtKoTXE65Ewo\r\nQyydjDxJbkaei1I1jwf2XQQbck8LRADVBgs=\r\n=6Aq1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/tokens":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a86d36fd2.0_1669774468343_0.14807158578807922","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/card","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab09bc1735d8ff9398708b2d7ccc1fc5fc2ff64e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3a1f46c66.0.tgz","fileCount":23,"integrity":"sha512-7r8B7RVBIi9wWbh3V6d27ec1J77E1LuThoBMgr1V4ycsxGqSBgijL/owXjqpKTMcpUD9Zw+ksakW4hVCZQyzTg==","signatures":[{"sig":"MEYCIQDTdmuGpW5SwItsHKKYqPbh942wV8Gza3askfd/cgcaPQIhAI8/XU6rkJhKCxoerVFKOSYb/toH6ik0Wpk+PqIBeSif","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0eBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA4hAAhsyp8z08GxuAXO7yKf9hQFkPToKnMwq71VIrw9GF+PaoXmgk\r\n24l5gcKu2n4iAFe6+KcJ8IrsNlaWWsu/0DYuKuJWWdGF4pujRr2UyhK/IjmS\r\nVBzjatmzHTw4DJ0O09JIGmzKKqW4QCY2pm/qJc8xskrNb6pVytPACmFTMfZ7\r\nwMul9jAoDrzuGs4AAoDQTrAZ9nu+cGMeWSu5hbnbpTUgdTLTU90bWRTnAJRE\r\nz7B0mcDt/Gql470cjcmBWA12B6QKA7J5EN6tdHm7DrjDesqT0GOogdeOYaOS\r\nUHfBKo7o+dzTFqkXI6FprT4QdXbkr12jOfLhBuAA/ndJ7A26cspSNGNnVQkE\r\nZZVNCTWDibZqDoM2DSNWLJD+upPugs/XkE+HRiHsQdmBkYqd08BgDnQv+qu5\r\nvCwZTrU9mVY+RDm9/SIqchwMKvZZ+0642pXo6CYjvcbcJUTTQpdQJgltqQTM\r\nvm3JUokdmvm+9gcfznW9plCz9kkVz9N/msb49GEDBIIw60Bh5e4zB0IQ5Zhn\r\n4RyVo9TfNL12KYpu+mMWSV6RIMIo5cnkEW6r5Xc5s/G6vl2ji5fywXdkV7EN\r\nMMv4hgQJXRNib3YaPNgD3fbT0BZewdB7Ufz0TMV6RjlxrI6Qmr3MvdtXK9Uo\r\nCLaqChJ83IpfVMyQMXILe84mf4Dw6dkRpL4=\r\n=39vi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/tokens":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3a1f46c66.0_1669810049522_0.8583764552795377","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/card","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9c0c3743b7ba7661cbaa7d78e8f87f745b98423","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.32d8a9648.0.tgz","fileCount":23,"integrity":"sha512-4zBcQkig1yrt97aL5t8PoeJJMN9H8j3skEAQdJ308SpgNRzuKUEmMpcVKSH5+XoKoJGTbu870x9OhXCcgoycuA==","signatures":[{"sig":"MEUCIQDSys6j7xxpF/VjlTQ/XyqwbTFzYMjlPs8n1vgzkCuvQwIgYtd40BD53a7uLiG9wnoGADL//GNE22NqFUUtC+qJ8DQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOR7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqVhAAmD27nXPmY/EHGgY8J0gYvjjKlUE+emUBHpzgJonXqzad4o2c\r\nSB/8DUlYX4hMg7VemVpD/T7MD+Q+1TLYDJKUQwrLENy5GaGF1TbtjT7o0alC\r\nqErQQg6xhp+iRSDbJQnw7orn5K3SOd23EkMK+23I++GOQUrl8mmDzg6pFH+u\r\n+evDmOHItIVafnLnVS6bTt+GUW0Y8d6QBQNWvRz4g+pgb9s5zI3X6Ke9AbFq\r\ns+T2+Ge2bIbANAp6A991URfELjC9WEeca/m11jcn6xJss0fQs78WWXk+41fi\r\n1y8bspxrx6iGSaHVzew63CidXAnitnG1WQlKXuJ3uFm4OHJZ1cpXOlbpVMBx\r\nIYwzacFmk5sx0rGoHbDiQWTkLs0BoEKX/dfvD8YbIlJCMKKdP0I7FRprMCKK\r\nE6QBG8/8Mpq80hoBwki6mJQXWNsfsB7pIcLlYQ9dUztrZ2eFOPTDwTbqV/T5\r\nngjBN5HSAQZeMst+obCTBGDd9mxRTEIhFg/EoYqkk8fAfrjz70D6zWhZSyCB\r\nFHgiACip9E+SgFlrx1+/Laj1oOokc0i+k72UHDzzVRzH5+nZCaztpIan8FPV\r\ng0q181NPJoVFq3Paaag538gL1zap62+e1vWaW+Ad6ppAoVhscO3xrYxqMkPd\r\nIVQstZ8iFrxIW++zGHyic3M/qZsgTGJKH/o=\r\n=QDFu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/tokens":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.32d8a9648.0_1669915770833_0.5026091881376997","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/card","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.03618ab70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62bfe1cebdcbcc3954940c0660c7229691fcf9e5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.03618ab70.0.tgz","fileCount":23,"integrity":"sha512-FtmMZLHCHpD3kOx2XXK4exFpGvtFnjgXqVjgkHdOfCSNZ3bz2gD/jOcWGVSM9knx7C8TOOXT62DoaeSlbtV95A==","signatures":[{"sig":"MEUCIBA3MHOJMbbqtyroAqPHOnNM0Z6EMgiR3tVPnZX39OZIAiEA5JwHU67bayyjmfNQYJkkwp7Xfv4RM+9j7MC4nE07SZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgSQ//eZaDZs6vdC6vZE4oQ9PVZLjkQVjlRUckFnVPYtdAEAcLD7Yi\r\n0Dka67p3fmX5htUGDWrg9Fio5VlF6KtCIGzffsdSlsmdp5cz3dWnIVqv5m2t\r\nXXN9rgHkgdR3eVqKRZ4onPYzxwe4ovYj7c7Cy9ED56DsjBH/GqntkVeYH+76\r\nYoFG8W6DG7hIJSAE1CNDtbk5UQfzlf1kvBREji5SF9VtjXPz8tAVydfFnOry\r\nozhUeLRtRjkQMHd29RZMsXXlNt/Yz5EcAmxKVfpKJZ+gsD5VOVDzSLLsfNd5\r\npOmoNpmT8u9fTjyNyPCv0nXpOkvJWdiskq4oBcaK5LFimceaJMUEkFxPFExu\r\n7ov+Oj6v5OHtZAqucMzma6mPn0Gw3Cq2d86tnhorGtVcQYZ52hs+3LMh3aeg\r\ncyuL6UBT9HKFuZqfYHIqQ3bPiHXTu9QpI988GxgI2LK1lvBLX+2xnQBbgbs7\r\nPwYYn6w2WRWbgvE/GMDrrGiJOiBOZ7gozv2rhialE6/PJqi2m6gcEfFCtO4b\r\nMD7LRmPaUUuQQHBUsM2Nhw9tygaSFv33qb3PwStevPtBYjE5HlQNvor9tdRs\r\nzX0gU+z1+CtK7u7T8hzpX/JUQBmRGXE6bH4oEf4yfLVkCC+jxFqMaZuK5nms\r\nCedZfTLVa3ZBHnio155ryLbGO2q2ksIR2CM=\r\n=CdIa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/tokens":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.03618ab70.0_1669928085887_0.8763443032753369","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/card","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.68aaed940.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02d0f24f3efb032727091814611652054b9927be","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.68aaed940.0.tgz","fileCount":23,"integrity":"sha512-QLn3Pd+ID/hm1BhdQy5bze2w06SJY/iOsB9kzRwl4zsHDizBB5B6bRsnPKyVsrj0idBtNpvnRCK1ptsST1bCLw==","signatures":[{"sig":"MEQCIGspBiamPi/WFyM9/XN+sUcDVuH9odyhpsQjJJUfPKbhAiBwOFZuWwzxmA6gx7mlT/485EOmgpkSsY1icYvsTlqtvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRuHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSSQ/+KbfZSKhs3S/nZ2n8CZHbVTI0+xuvFa36YIrAD5O0AAJc45ta\r\nJFhY016nXulX2M1fjo4dg5NHadk2PTKA/bJbBa+liVBpHsmuJDjgEDJFNdWY\r\ntUqZjnVxiCcCHR03JdRc8tz/z855RwSHi4amvh7SayhF+uEWmPPRv6jGQEHL\r\nfd8P50Vtsx9IosIjJ74p2YT/LxyYali51QMzqrnBpFM+oeVn35jGiJEpovw3\r\nbBWW+TnO68l/HCn7KFhRDLqNkmr7nP5Fz77UXcXyRGK/15f/ATl4xzEkOb/y\r\nBzrCWIPY5c6qNwQDVmywuCQpmEWSWq1sa6UYTuvolhAu5GEiSfkorG8hu2dT\r\nJgpto9s2F/o4w+2JiccddZ8VUKUYF04l19AXQor0y39JW7ji9Uog9PhmWSzy\r\nqklfi4Xg/xeqyvwOyrVJ5q7pbtH/ihMt9Z3jygAzXUomb4t5GzGw9+czDFiF\r\n6d1y7ZYN3e083byKfWwoMMnrtx7ftDWksKIIinkR6f4B0rPktyB+7+LzQ4vU\r\nky96RbeYOfhzIOrCG0fFvnHwARr/DwFArfvxwvT/od5Kqoe0mnLpekJ5gCbe\r\nZXX8k7E+El625Dcc/k+iWZyI0NLStxyt1ppy59/iVB+A7SKlXC13FiV9PiRM\r\nhdsz3Xx4kOHK0hU3G+lj229sDxxQ8Xmz3sU=\r\n=l4hA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/tokens":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.68aaed940.0_1669929863520_0.07847538341827831","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/card","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6fde4afc0b8e432061d0edfb0cff60efa66761c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":23,"integrity":"sha512-/gmq9ugKYXIKFnsd3iViKEsGNnlNerKB4dPRig2mQ5REI4y2GfntXfqC4cJhvQsRlYJpHvuZrIxOSMX462l9qg==","signatures":[{"sig":"MEYCIQD/aoAH/JeQ2YNzNtPPGcNvZGYst0/nv2OkuplGoviYTwIhAORSz8QpLdADfbRNqhaico6enXv8BFbPiAsO6PSkrFrG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry9Q//e1OC2ZAUX+1sr8HygN3VgniGAAjPs2zcAodIqsI6vNLoIDRw\r\nWtXT0Y4PvedzSuS0+C/okc9KoZyTEYtpzajONPpgV/TapIfl8UWa4mC3oEGM\r\naYTaFLMKrzpmpfE4kdMSNggAZBd0i3r9Ox44IDWNdu/gdvSKDDamstVFVtA+\r\n57HEAZDbe72bXQ0GI9BKXLxdeFZWtbNtXhi1BKl0K58seuzw2jxT2JlD8pOS\r\nmcDjqk08dU5A1ZZOEKuIiynNsdLAGhyR+8j1INACbcrX5tJR7SPWzkRVDz2O\r\nbX2NEGVYAym7lz2ZrrGmWJ+ig4lXPjamSY6XWrtUixUCSTHxD48JfjfehMjo\r\n9uptM8QgEh/RsxipuyIQQb2nKHB8qybFwctYxDsQKj81mC4JShP0vigg15HQ\r\nIOuadxO3W6+u8QRgpcbJp5kxHcvnFuPk98PlXVO2puJpzXyS8rKXjPst2Htb\r\nk0o8U4NF/LWDleIIb5r7sn5xaBv7yN3AzXM3I/F9MJL+Nka/sA/PrnvETD/+\r\nwTzqBysHqK3bE95j8zb7Rv2T8oGGRIeUihgSuD7mBaq9TiH7jXEAgJ4xT+hI\r\npVuzGYZ0gRfMecw9xbEe4YPgpjeAdVhpidQgXh6uQyDjC8Y+SL0CkHzZ7pa8\r\nGHsCK+XaDHsw31qpxgrxIhMreC8Foq7JEO8=\r\n=YQTu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/tokens":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f0a0bbc75.0_1669971753059_0.278501551932709","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/card","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d85b5f4fc93877ed722ca6874cc31482a66a6b22","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.dd99c8764.0.tgz","fileCount":23,"integrity":"sha512-BEoYOW/A6IrCsgwZDsnfaLVeHZj3F7WpKfvSLtdqldoNUf6sU1sjBDs/LBjblA2lfHk1ypVclDcRkyUqzGmTgw==","signatures":[{"sig":"MEUCIDeYILVgcjqNKRDZJYAtMlgIJyco8yX4KIdIkdGJ1ykUAiEAw4lIARIqkJjvqx99BatbFSafOSRCV86HLB9guF7J0aY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigUqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKEw//b+7kJaub4Q6tN9rgIW61lsF6cXb40t7hBUcM99JKwO/u01ko\r\nJ6uDz2hWQ4vKQsZRRXNqH0Ojmh5g+POwcrymoXd1H73U3mkE2NdhrboNFewS\r\nmELxuWrcnuPiMOf+7G7DuHZb83dl+nl1FfC7bjeZEIYatFMqcE7MhjA5yEat\r\nQx3TRaPevsQ3LylNOj1UhZJ04bwJ5mrO/28ciHEXt5sr2nH6sUN59xyH0+l5\r\nNIep7Kg0RLCCioiWKn85DdzYRg8Q1VBO3SX1lhN/z7tQaMOGA4DPIHfZRCG/\r\nz+KoYk4CZzC4GE6vGZ0N3OK17U8rqZs/xV/DqiehzdIRX5QMwHdkHjcgzr5W\r\nS7kLY+pvSEB3jMRB8toBJKoKbyVP/JiiSdBZnZlFCGY12ImT2MgTPo7JOTyV\r\n8o6z1Yoe5JaaQjR08D6vl4Jk50TIbCOvX4weX7eaUH+2GkZTZ68NNWHx2NUA\r\nNCFdCbsQaGaSladcZhqksmCaNh80aP5a3PtfYC8pOX2FxX1gQY4JyQBBF7DP\r\n75aYF0rzfQDHW6rn8qDh2J8S7az5QJjWxcracAHUiov6P3KfMiwNRTdurHXM\r\navcNlgh4ghKYvdp4ImCNj8o3yVSA+VfpzRpt6oopJV+/QptJG7yotZI1tVhc\r\na9rSjIGSK58+Ildxde/I2MZzNF76nI6nHb4=\r\n=YdUt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/tokens":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.dd99c8764.0_1669989674448_0.1074386453498295","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/card","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad37e701ae07ea6d16281f1ae7712ab35049ec17","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.fabdcca3a.0.tgz","fileCount":23,"integrity":"sha512-4mtDp8hoaLdfi6+e1Bsrr+XvcLPvuyWN7p1jRbAWCmJq9fXQrxnnODT7hIxxzGsGvBZ6g1ZjS2jpTf7IZ2mwEQ==","signatures":[{"sig":"MEYCIQDlZPn6GPla5Mk30+69V8hkF1v46rjwsQDqpgUux2++tAIhAMO/TdVhb7xuekVIreOhghnPMdG9gXWi1MarWECiQETY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihScACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSKw//Yvz+oDow43VBVpBge1jkYYKHQtZegMjVn6+YBDscIGOdTNR2\r\nU+yNHRMd4kgIgluw93SgPi3xJWWGv7mlxsstNSaytEm2hk9Thgf0Jbv+YdpW\r\nVbaOjSSX1LXKGXc9+I1xIwdThfAFp+MmD5StuUzeQ08b3vU4dIfLdlOKPcpm\r\nLeCn92v3giwhFMQivaJf1CGBiSrJ9qOqkWJonR0NAXxALHRjDDC2FSWXv5Mv\r\nUC8ucH4oRep7up3iY1KPMT79RUYkbjPifHVJ2xp9AW3k6/irWBuka5H8tpLY\r\nibcy/RmcI9jiX+ALDFMhUMPUvKV19RYJ0ltKzYC9Wqhe3K6OxHy2c5Tqs6C1\r\ntBuyA3OlgOPVCiUVqW7URkSahsRqJG9A216Xz9MmGS8nsSXZz1bdcXOqyveV\r\nZ4FB/BmYx8hS1NhBXlJ0r1L2Xj/DRC2VQ7SeLcezhxrzvEUJpmILpog2fez7\r\nphGrqBaDsUaAC621WU5iKHx+xtnqAQYEZGtNFGRM/5UR/IckRBilU4klqMN0\r\ng6G+aXOk0z9aee/cC6HzJRbUm/7B7AJe+ri5CNY84GVt3KNTiP/0/yeX2mST\r\nRNiX7F2o0DgYDxvUM52CEAC7vOWvh8OfMw1onbaNj5EYt0bAjdTP9iq55Xhq\r\nBUp8aPwKDAD3SJ9kgFauOBVvzIYgy+je8LU=\r\n=IzVA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/tokens":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.fabdcca3a.0_1669993628198_0.7737946386944752","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/card","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f33a3a7c5285010afb603cf66852faf2421e6e85","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2d26722d2.0.tgz","fileCount":23,"integrity":"sha512-4l0VvPOP0FnNsi/ap6Y/Fvu3wDlBTOQZoOieP1bt4q4gHmO+bJtEDZ/fIIHuny/Ku5AiIPoFcKkYsgnQ3+AilQ==","signatures":[{"sig":"MEQCIBcYBi67GVRKr8+xsMo3WHcpoDJH3KtItupSy68smbrBAiBtAWOVF3mOjlJxSp0/gIuOCof6+VQP+qyLOYknhdT3lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrONA//T+sbPCDH5N74Tp5Ba/Mvjw/hF/G8vujn4AmJrEwnGINmHkze\r\nOMtsLCrnyTCDjWHxXxhpin5R9iPTIUmYseaA9N2dqJgn3I5shei2c7v5DcqB\r\nRUTXsRIoY5Yn2Zy7to7dzfKdXGwCdjKcvO5laEi8oYSGUvbmuOv2m4AAS3Yq\r\n5vODApStRwH0/f9wYSqIdrzvg7095fbv+w1XatWPYdHQ0wVPhS0YU4uKpwaO\r\n/ADZoDFN+0MfDCJjhWyFmvMnTjvOHH0+rx1AaPpGLdKqlQfLzw3ZT1JLlBlV\r\n2DwobpFhsJ/TjMApykM4+Ns2IAR5H9ohTWdreCwITwDd23UuC28LsEeM7nCq\r\nVciLzSn52ipegUi6vK4o2QCWAzl5SnpDgSOwDoKJs2gDQQQdaTit7B3E1gW6\r\ntynPu18A/IE+oAx2Mj5/Hp8f4qzgll0vQ+AGkzqSiXtvoaDzjcgbQNXd9n+i\r\nqEvLZfeeIrmMRs7ozb9M6qtP4oP2ZD+9+0DEUFZcUQfmSbPai9IaxXk8su0n\r\ngt2WzzUUkp+w+X5TxvGphaWljBNiRNDOj/FTIqSKBrJwQvg2EfkQMJbr1oa5\r\nSRzlhPzaDltRqFDZCZgBnWhNonOnz3oSFJ9yqU6yF3zmhmpHxO1/qw/yp+ck\r\njZXQqSWhPBEXKARagQm3VJUWhAwaUss+1fA=\r\n=Oepd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/tokens":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2d26722d2.0_1669998411002_0.6462975730591201","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/card","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"223b28d01ece8c5aac7b7738d7ca1ad4b0f9f985","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":23,"integrity":"sha512-sUP1R8MKeAX61YRM/9ec2xslVPC7miKq9yW/iBwlHdP+TzhmwVuQYL9OTHKcgv4HU5nbh0/kCNkqGJ4uN/NwlA==","signatures":[{"sig":"MEUCIGYkz4MEpPc+db0Jrc3adV/4pSMtyWcKNZGO8ye2F55aAiEAiZqBmsg+Af63Ct8DAa+aY4LaI7+xuURp+rCVd1/D6Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijkiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocBQ/9FRnZcvnHvA1k9Q1/hatVh3s1eG2KPrndC0bCm57HAoyAblM/\r\ndZLiboXGQvxpVgtx4Oi6hnPdEIle7pTkTEwbGjxsFxmat++xnOGSyvUHx5uR\r\nb3VdomNpxLDongpdV8nvCVLtZt1Y/BSjBEbB14utx46V519LYtg0ERYBRaPP\r\n/QDKYeswaMEekSHEJUygBuMpNjM/tuRI3mLi4ekoz+WWYPwOwgE7Ro5Xc/Iw\r\n2zty2aQg08Jl8HyOUamakFjxtd8KfBgAjU815tBgYDuwF4Cfh4QWp+JZRg7A\r\nglN+tahDt1plubsVLOycbw1aYVz6xqUt0NB9Q1tFeTHmDWZFEfIQoGvFdi9/\r\nu00Bm38CrOi9cv8ufBcfoxLWMeu7H6XD+JRh399wiT7AI4qJOVUw9yd0PthG\r\nVGIvN7eIFvSTzmfZvEnLHiEUYLADJRDCBN4zBPYRQ4+zu+mp1m505GWODHEX\r\nc2j9lXChc1YvDSHXYEZ2zX+fS74o3YyYvR94b3oRzq2EmvelAWV8SWwMZzMe\r\nnHZgkF1cB3eqcR2yir5r/nYkvFeZE0AzgUw9XjhRVJeDGtGwEayYppiIwpmS\r\nCab2XfMOYlAa2ZgrcC4M1CkEReo9S5DKMmjEa9Do/sHz7RgI2gWjw5aNL7F/\r\nDj+mCZQ3xfIyrjYkSZutI2vwysKzeuFbek4=\r\n=ZwQ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/tokens":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.eaa0c3a86.0_1670002978639_0.34077779176815426","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/card","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49cf6b44021a806005acae5e5576a77660cbcb6c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.79a613bbd.0.tgz","fileCount":23,"integrity":"sha512-X5GJgOSZL47wDyPQ4qaPlocYnRtr34EFVfQPfnPJazaHhM6iMoxn/QUldyQmpWs8QW8DOqlOkAB9RkbGENHjjA==","signatures":[{"sig":"MEUCIQCpbz4578sRam2/f/ceP4FUEhpMqimKcdjI25wPvj2s3wIgV2MA2CqHKSXRZTK6NtdEuz1/6rhzbJBMRPzfldCIYVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1ETACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTbBAAlBmDYvXaP2zxnUyMvdHBTRSDZgCKNI0K8Ezfx6ChGbDEu8D1\r\nIdlTxHdpweTKxN1+UK3wc9vRo91TcFqxOyPUoXLT3FnMNeuwD3Zj+q6kcHhj\r\n9PdSXr4QsmuSEmIO5N9amVJZRLZ1I7bFVM5JTDH+eRaI0FRrwyFQeSlKkHQh\r\n+TpHepFSU479Nto5G6fZhWqjBKaUN9RaZK9s5axpYgP5OwWA54avxIHod5Gb\r\nghfQrxmQRt8A8xPRfKIzp6IsHfMlS5wMkFHDwvXMJMtsDWwLqx0DPzZPPa47\r\npt8yp/k/OW+ycgNv/wc1W3SCDy2QChiaupFoJ8F7Ql8uiIxkgKNy/9sqLUwW\r\nEgYwqjQtFdLT1gyYYozAmb8HzdP/DN/YDluHcCbzvtaLFbKwGIj34y3jBiFo\r\nWh6Vx5qN5NxIefrwl51Kv3vamGy5l/COJHErzBZiyXfzcp/QlyFNPD5ScJHp\r\nFkeKJxhb+KeSMdcmhLX5KzMZXt/ou4B+jREnPxj+k+fXjRMlO16jTUEivTN8\r\ns4uFvnVn5xjKg9jfkEABXvWSfOPH/SKxhg7p0MjiD6oQY+tFNXVnyWDymOxm\r\nCoLk1dVZ97k5N7oz17m+lzL+h193e6cfiAHvKGlpww0lBNHvvAcS88dRgJJm\r\nGjvYnZ001IIRBQZIDV0LZEqxqLdoiC+qjyA=\r\n=lWs3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/tokens":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.79a613bbd.0_1670336787350_0.23042642217131237","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/card","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edf0f166946e0e3ae3046fcf08c164703d9e8b21","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c871fe61e.0.tgz","fileCount":23,"integrity":"sha512-Riiu+OtDA+eS9IYOVx48yzI04Bx/8zq8EPHPfjDAlPkRVtB7pi6YTW9Yh2Xlhl5edy5AwvDLhvQB1oELHCVqZA==","signatures":[{"sig":"MEQCIHZKyMAOxdtEoQLUgM21C5Pbh0QMa986tiE3tvqutWTxAiBvF73RdvLrcv4JNZAtrNoaAza85ry2NJ1gRW7HUL6qEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEYrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAKw/+P3ctnp/bEvALjkXgWV5EerBclpsY01PunZCYqkg4y+iUd/No\r\n8/I3IphTgP2SsPdHdbezxcG5k1JeUyJX6y34Htbpj5rbJv1SejNoa3j5WBw8\r\niQJou3nfYfWwqwbdUQ2rdZgo00/hgC3fSeVc9pbKtyBmsRCgYL07loj5uukr\r\nwFOY6uPLi+4WKLCt+f3QHCRBqNv1KgORrZdfUPea61JHQvCX3QQ0Dsm1NDVU\r\nivXY1v/3RaA1oLvGe2/oRw/QB8f2ud6qJ0VE1Py9Re2EuirAnRxnUC2p39Dg\r\niuRG9edUAL1X9dA6BTczgYzbLzc7LtMGHS0G+HQp/LvygtOXIDah4L7LsIqn\r\nmT7PD4b+XkT2+ttN0Z4T24BRuQdllbtWminAKEWC+ioN2wGRyMbbV8FlPvsC\r\nCu3B9lo42jMfRGwyQEwSQ7lI5HUYokiMHIj88P1uIPjWuUT38JakaSTq3xLQ\r\n8XJ/GvHHHJw7ClPqEynFhxYdH2sDbdbVMaGj+GmfG2qp5NuX0cvMX8p9C6C7\r\nQoFfuYCrvky//A55l4dG0wcrsooy+kW4x1tZXM0Vp41niq9GxMZrxr7h+Z3C\r\nxGqB3QjNpgWBm6XMJZQLgz6wls+ZYrSLxEmba8nsPY7r/5NF6ikbMn7gzADc\r\nXjVlQdfO52AhGeR2wHqRyGPEReD6+PB3ni0=\r\n=UCAf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/tokens":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c871fe61e.0_1670399530785_0.3796375049215108","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/card","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c57c1611768dcd9064d3ee1cabb10b36c4714fe","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.9eaee7936.0.tgz","fileCount":23,"integrity":"sha512-DhjBIc6rAzwSJOiMizMYRdrNv6HntkqJ7yxp5bDscD4EH1isYpGVj4DO17nxo1aCfElepuU4HmXHRQMfDsscPw==","signatures":[{"sig":"MEUCIQCRAV9nyw/uUsLdXzRoFD5L8fGeMOMwrPImIWC+ulH8IAIgJTRDFBgj4AyN8/7p2LtNmzXikjyQrAjXVFQK1FGzvWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPGBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqiQ//Trhz4FC0Ma4+MFC3g6WrbRy72Pt0HOYC6atYzD5A23FK5vmz\r\nqn0272nPafvisorVu5NL+kxWfHvRy+NqSUmoHT5xkrzKx9OhWoXc+Q9fY7EI\r\nsQwW+CubGSIGwDT1jNk01nMQ47M2WmV94Zp3sUp9oD3yxncnJHt8n31ROYfk\r\nF1PTlDCZrmyzGMUyG6lXZoOmMfScG3rRXAl9mdA1wDEK2VHcgENEvEA8CFJ/\r\n/4SLoPs0jeOOy7O1uwO5BYZrUgUpRzJYmEmqcurtKuf+Ecbv7YvN7rSzHFRw\r\ngKgg/Yom5ravvFNC7k9A59c4+Gs9p7tv7fn8GuhS9A9ueF6TwRmbq5dAjFxU\r\n3UPNRLiLa5oMFSdoDfYkg0Tu+EQYxG3iaEq9PzWqDpDggnplD2Wj6oBLhblZ\r\n/HQIc/lsjNbbpwbsQ9//hmdo81I3YHSbW5RZ2BdtFm6WQQNY/TpE63av4rbk\r\nRn7LAHVUPqDTHkDFMZNVLXKbCGqj9aHdv/VArE4bpFlEFJOP41H/xPcxKxuc\r\nWPkxmK9b7HhZiCGmVVfasQA4mwA4lkY4TOWd7x9K0mq6LfA7vDODmWvFklZb\r\nhJwoteK8suFANYaA7qDt982AMI6jbLUz1WSus5ostTA63seF4YX1EpSkXxm0\r\nveDFllh/sDke4OROWE46Q1LceE9FDb10TLw=\r\n=K9mC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/tokens":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.9eaee7936.0_1670443393068_0.04505948067695709","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/card","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c94ccb9cf320eb7af063725c4363c6515a23243b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1d37bf601.0.tgz","fileCount":23,"integrity":"sha512-K93XAT/T9crrClOfqklqCEr69kfd/lg6i3uak+pnyx31qlkAoBFmiOScuAc0Qw55PScmRlz59cre9rS99EJsaQ==","signatures":[{"sig":"MEUCIDgkLpcF7FzQq2uTalSlBbSISLyN0l8jyjPMrBzSPPAWAiEA8Wv2c687mSzixt/8MnGxZNq7lH9AdXSGoC2KPoLMcMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPp8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqBg/8CzZ5ZBmAStcJbjT3D5cvMjbH0zleWYAYP69qXn6lJQ6zoNqd\r\n+BbLTHNzZplfceP0ye+0labq26zrKjASjlPrJQS7eWlenmGQOuxIKZet8Tcf\r\naC/UmezdQuHjC1Wu2xn4Em5+SEeC3MMQ8RxKogReXmBPCCpvqbLdIu5edqqR\r\nlg40eN/mOnsaY2O0iKaf/9ggAzqxum9aQ7WnISH95JfHcnoYbXGkD6cxSJzw\r\nnU3sy4a+o2KQe3DCooWmCmwlEwGmDOnDGYoCeQX7LB5mOeN6zknqUMVQesuv\r\nql8/6H6dWr6DYeaDdCqmYDytdDJeg2Dkgb1a1Hdwk/ZqsqZTXL7xMP0DP0j2\r\ngSGfVog9BU7FihqfZ+QIrrA9w3Mbg4Mv0W6EKrKLPV0hvMA+Ljwl6RJNb5Bf\r\n3pSSWntc2KN5n3GzY5q+WWxYSN629gp6rn+2wJc7DVCoZD5Gmp3PWvwiCrB0\r\neKaGaPw6h9JDTxlipUKcIE2fiaNDUXvK/6RnywIy9fz778eVM4VHlUFQQ9XR\r\neR2T0PU7quh23XT/Zk547vuyH0HwvHSp5UwqqK/L3LLM7BhTpZ5ARkBmbiGV\r\n37cI2aG5vGlLOr21Yhc9l1L7Q1bHpfdgaj3/6RHdB3ZErTZr5i4zV7mFFmaK\r\nndcSOQzL7lkzgT4CuuFcvu7KlmUeDPaRibo=\r\n=E7M9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/tokens":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1d37bf601.0_1670445692071_0.748573561065065","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/card","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b0837639e68899ce1b82f667630e78e40f071b2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a5fe069d5.0.tgz","fileCount":23,"integrity":"sha512-wpn/cAmTt/wAkDjtat4xJCojeFHGEFbilZFwEm/PwhzLcNCEVUrRwD5k6lwk7FgLKV/G20LYrWhRXtu/ym5+1w==","signatures":[{"sig":"MEQCIC6CBtR+u5TBzCORy4Unq0kYTwAkHdS7wfiqHbmMf6FqAiBHNfW+/epvATcqR9MWXpw92Obuj8Vo5W6O2qaPaiFxaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4IWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSAg/+KWyLNglEtRDpCJSPDsq5te2MZgiWI7tOwV4vdM07xppEmLeV\r\n2oCm3FNsmOuvubcNdKKU/ISmQvzoEyLtzhXptX+e+PBetzSmjEMfT+UdcACP\r\nUM9kNkv+YdxaoHb5y2sFxxrvczZ4s9xMC+652M2pXRTwMtyJi0l8XWnVzFbI\r\nSKmUNZhLU0BTLoyM24hpJHKwVbUIdIdIreCypiQTm/L8UyZXwYyRTxtrP76q\r\nYoOmIqOYeWlTQhRkg/lJeQTrNErPdlglQKAB92mKKnCtzgHGLpuMARDIcoNp\r\nZQu7mmS8Je5Z2Fq9CvuBFNQvtiLLvDmarI7P5t07Vw5s7dk7usnVs4l660IL\r\n5HnARTNPU35z/3B4Wrga2V53YfB3zAEu15Bs8YJoJ60PlMPc3FgOLcw8J0HS\r\nL7msRqgc8oDfFMONj2a0z+ugv94nM3mwC6TnHMmwJZ5XT8E8YxtjTvscdYPq\r\ncG7HxKpiVguuycu/QEuj9E+ZKsFB1jGsh5sK/f1YjI9cUvZHr3faTBsRN7Hq\r\nPD5eUXRCQZextOq/lxbN5S9gzHkHULOapnHgG11e1SFAc7oZ7/AbyMt+PF4z\r\nI9f5YzT03I12W/dBJpyk5Nyl9ziWGaF7nh6eoFaSOAUW26rKbTMGGZ24UK5t\r\nGbXo0iqn+VgUQDCNVADgH3CCd1xyHnT9kCM=\r\n=vOTW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/tokens":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a5fe069d5.0_1670611477798_0.8385163736933354","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/card","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e487cc13d90918c40c335c6705a5629d44875b3","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ce8b5326f.0.tgz","fileCount":23,"integrity":"sha512-zYKLcQWmbtxeAjxo8cyoWd3c+ocA4AxAUvoxv1hpl0NJZgHDFxVA8WDI5P7/FGXkftVcT0gselUawgBwgP1Rdg==","signatures":[{"sig":"MEYCIQDam32/eaTvQf1Vgj5bPXBmsJSBA3NV6uziRsExVPc5rQIhALX+b1Lg0L5IxTrz6Ue3RNUOJWXakWAUpxcnDqZ/CFee","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8U3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpwjg//YaXaf+jnK1qmt8Lz/CPO2Ocuhdi5SX3hfM7t3t50EpjjWVxW\r\nsk2aLsOlkY2eIvg8sLQC2I0WB+F8wNuOyVo+HzcyIIfOfh2vJWBS+PXNq1GM\r\n9I9c+rScbmKIcPjVkdtWDKK5Cj0B+Kwnza1+S75h/YvH4+3osW2cQJJhjAao\r\nkSrIcBG3B6sS1XYM6l9qD15vN1ZHw9M1jgSV54OFnrxc+6ob8qDYrkuqnaTZ\r\ngYwmqOPm4zIbMW32cMbsijwyC1H+DZ8EWTCWpmkBD5gau+6oolEDlwZ6jCgc\r\nAJKnWct5amEDQfWZk77kZijeZS9zt44AgHDzX75sXEtPnX0vWRqwnW5n9BQI\r\nFyy0WSz6YffjTxImDAI8yJzsmJFzSS4W4entqZX4beqRfO7ieGWtywXy1YUI\r\nbigv1T1tDJ1N9pibCNg9xKRksJiNmQEu0okgyTFZ2SdREikJlM1Ioc68oio/\r\nBloQyBmU8GceC7fKqYQRf/Ip1HNJgeXhI60wxO+OhhFts4gm06EU5kNPRsVE\r\n2Xq3+GD/Sc2vO3CKAcYhlLzTRUNy/xXD61BBihZ7gw+JRG/FCgkS4lMes1u0\r\neGlMEDm1ab2pXw9/vW+MFlTUNMdlBEqvAqFY5fHWTRF8c5M6FfD61yXnhiXF\r\n6Cf2705N3EyqTx1myqAv4IrWL4uFzKrCbq0=\r\n=f4+u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/tokens":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ce8b5326f.0_1670628663787_0.5290344002755405","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/card","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f639e9900a2e8e1584a4ab838748b7ee9e066c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.43f5323bc.0.tgz","fileCount":23,"integrity":"sha512-JQdxy5BOXTsZt1XBh/44XKjBngG3atYl7cIWrz3gvitnKY/Cpzs55ZaJLZmnZrF5AHnFabYAL3dPzYwtqdG6Tw==","signatures":[{"sig":"MEUCIQC8jhmq7vnG5DhC9o1Hy0H/cNaZi++k68BP0o/aJQWvngIgXaLtPkSzWPP+E0B3ByhcICfnNGW59qrT3lOIzGxdhJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1sNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIvQ/7BPdkDdRLDQLfA9SrUy+Sb6dGiPbz+OthBR3IWIwDjn56gF1+\r\n7P5S9bpv5Md8VXSw0F6IUmtN0Axt51PJQ0cI/2crf84LxlSBihy350GMY0tJ\r\n5uMCuWoIGmWCfE8Omm1BtkX5VFqMwdWgSte+sVOPieC5upCaC0P2hPN6rMK9\r\nAjNm+GKfuaSd7CYqQEMZ6vdnBqI/yVzQsFHxZzI0CncTxXUzip29msNPxqwg\r\nXpbX4S6A39fY/FF+MDO4cxpDOk1UshId7V8QitmkA72S7fWPZnT6uG6oNXAB\r\nzRIrEg25/qyfi7loFLI1ub4VE0+Z/Ciu/84iIJN06j/dIzFfubwrEImEEKZ7\r\nSdCAI3gBsCYtCXY8zK0ZYhGlCNkUY8nMxP2+RUFFDiAHlZOl6QOZhfrVIQW+\r\n56EEHXI0lQPnqCPjTowJrfMy51xXqZu6u9izbrLm5LzeimqPy4a+xx5jKm0b\r\nRcda3GAGNZPLUBjbJO1eBCUdrlHxyRXEupiOHMV1CYTA7OpnXVGadtSPyS+g\r\nTmTulfI6wckMOlEVlKb1lDaX0BAipvRu54b1jLQNCJCm0ouFrujosN4+1vJX\r\nY3ixQHY2Y9Y3NxlmCVqJNM6rqAbpmawqlDjmI1KmXbBw8iuYDcA3W71r6tQC\r\niVmGzCIx/3yWA7+NRHOKJDh17KAdkTe/7sE=\r\n=bqbc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/tokens":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.43f5323bc.0_1670863628755_0.6407077860059074","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/card","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f1aaab63455a1bbe00e268d2b1a520193b8101","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5490e32e7.0.tgz","fileCount":23,"integrity":"sha512-FjKakX4RsEdfwK56YAJ0+22BUVV0AsMcwYyCKsDgLOiLIRdrNQBAnfwuzl/tvp7PPluoGiFN2B5otBrT0403HQ==","signatures":[{"sig":"MEUCIEz9dVkRNz4pkI6oIeT9grgKAXdZrnUabm4VrXc3RW9xAiEAjy+VbNGUtKjarrM6AcvkCpc+Zj7JO9QMpP+2XMeDlN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl16jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrePg//SZ1fDhWNH5XJWa/1ZBVy4Aq1xB7q9WDBsGeiBqXE5sJO94Ix\r\n/fQBBpLtX0eEZwM9F1QEbw3cVDfnAThfBW6MBFYVVQuTgCvkEbBZoIbhejYq\r\nPFt32wM/RbCn2MSixDQuFwfnX1WTMeoCIvtY44SEmQdEXhTDGExBi8wNdhR1\r\nmFha6Lc37opUSX5ii4tEHYem/lByhUTFC7a4FbFPJ8ZH3nkpYAkTSQcWCEuk\r\ntbf6B0Avb3lXKilCS3CQgKlzhf7l5N4HzVR8u4Y45UhbCWGhr+4Cw4kApkrf\r\nV0nKy6oowyMAj84hHwtc/22exd4V6eIFRo/NhGnVtjtvD+1UC8O7C/gAStaS\r\nvOS9oQEJdYBkTWvXdNJt5PxPYvqD3gs0TmnP+dsMorNuj2tUzRyGPMKeJ1fp\r\n33YS3KX9KyufYm2oCbbqSe+My5TVeY9glsvt5oX0vhZkIx/BpGgZUw9ACVI+\r\nnC1FWY6jMfE++pHYOrbmqf/UEC0r/N/E5UK7oGYuE9rEU5BmHhxKQLicTb7V\r\n1LxD1yoz7MBGfze96wNDS+oBigG1ctqJRBsI0fnxqGhZ597WywXZTy/nfI5V\r\nFFmNgui1jpnwCQBdXBlrLm3oinYSZpH23oLlwLgkZJvPU/nvAjmnGveBzGc3\r\nD52qh1Ifqa9o0u4Q0kw5dGWmtNH3/fb6qvg=\r\n=aJoD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/tokens":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5490e32e7.0_1670864547485_0.5612417101913827","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/card","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.817002c29.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d059f79041a0d8a0a1a6ee11e8193a368e0e12fd","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.817002c29.0.tgz","fileCount":23,"integrity":"sha512-KwLhNP5Ex/P27W+ubfByhA+VhNz9hfjKbGkGfh4JEppr9JexDt4ajcipNJIM5NeTRvrPci6NsT3I+fOy5hPEpA==","signatures":[{"sig":"MEYCIQC+T9C65CJ4eFoPOkyTJClrwvqNlD3chHccPiAWz9nVvgIhAIraW73nlSg1l7GRE4EmCVFZGgjbKLBPp6uQ3ycZBocF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBCQ/7BZKop53cO2Jzd1DRct1QlUcezVvV7+KUHJY3EyhYzEAa1IAF\r\nSOKA1casY42Vnxpcw5l5P4PnPipfvPX68OvoyCloA7QUQbOXcwWo77VmKV7J\r\nAaboIIAmih8P3fZa/EkkWkbqZL5/NeQgLO5Wxk9waomV5VoH2DZ9Ke0zRvAJ\r\nkhV4LS/GIhMuUrZ32nwCNlr3zZU5jqhfioZN2st5nfvtaWIZ2uXG79i+TBVj\r\nUb0Dy8jcqwD8QObqNX8ifpDWYJCHWr+TJN2s2Gyyr/AK8qelE4atC+5cQPTv\r\ny+WSeBxQtOdsWwZkoXMaf9/0DSZJCam0fgmDwKfq4PBMLd0n/6RV7G/6jX0I\r\nEtRvRQj16o/ynH6khHcod8fBrCBqFBmJvrNjTJwQtiKq0uxZrlLWLcE1VqFp\r\nZAJUUS8Iu5gTinWdZRIm4SdTC9v+dDPM5wEZ9WaP8gT39ABxLYb6L98jRnt4\r\nyKKXumIVw8zssaQ6WCk51XnqzcDGLqyuXEm4GhJQC2B5gf6PiDrdqHCzLUJ8\r\n2Jz4WMeF0pWAWjO0q+TZqa4oV3D591YA2CXnKnlbPKDNmwOwZORiM209mbrP\r\nfspb3+TrtA0leBreeGOa8iQ9zXqnrAoNtLDWMkLti0df97yWU/a62VXz3Dqq\r\nEYzwTIvNidYDmRJz0pYg9sl+86WdCb7fbF0=\r\n=5ra/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/tokens":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.817002c29.0_1670968463856_0.3964375339163122","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/card","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.313a1326a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9bec467fc5679178e7d739f352245e9d8910e02","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.313a1326a.0.tgz","fileCount":23,"integrity":"sha512-GtIL3m3u0TA3k6XyWy6y1zgnxq2T+9GvUWwCD4D2i9dqYQZFVrudXGtCBg5kkNRpIieUzYeClUlxa/Rd47k4Gg==","signatures":[{"sig":"MEUCIQDR9Rv+mbUZwsyn9jAm0bh/iHS8U1BmTz1LYTLulBKBuAIgKIMPlrHONlGRW9L0uN8cPGKRL88XVVR7jzt4mi6Lw+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaVzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8kg//ZNJTui6xBbrA2MA2507AXuNJD9GEhdXkUs1pr7b9Kn0Axq5i\r\nb+fNlILN5epuztrTixkZiYA4fwqOqADyEre69xfHcF/ZTS/tIh3CobivCCaM\r\nwNDl/t+ycwGs05F3ywN2m15VyjeNToci+qWRtHlicq6yubSdzUSt5mLklEqb\r\n/JFSIL1MvQb+JtOU1FB19F1ozrtJSZLjXPTfCJ81k7O9pr7kUGN8CPxRiCQf\r\nX1wCTuT+3Mcuebmk96d16889DzT78vBFVLoJtLlEC9XyIk3MESg0e86YOeAN\r\nemX4NngB6SZ30IhFyBnEONfeWIdh7BFrsFvRqKVeUodupMR9YkMU4+EhRhJw\r\nM3ApcXHaSH5ImDNFay4riYjVZpjrc8QsPBUdWGgKh6ZPYGkGY97qS3LLXAf1\r\nXvUnSxD+kFRZOl2y9Z0miHJQaG75r5ECKi+LBpRaeE1k+/dKotut5/gLEIvk\r\n1vAfkDsNjjbCFypgNUwrlsBwvr16KGvwav+xKCXcE4/3gZPqK3ZWs8tkkt4t\r\nXLPFRRysIFOt6K+jleUZElPj3AgqZ5BG8CJxOAjO5ft7aiUNxPR5F6Wv5u0R\r\nYLBz74jh9swC5rdFMZlCC3Ifynm7azpGJzCwOeK6mXFRppms7It0Rl694pmz\r\nvzpKM6+6dTuXi9mKdaBvgcKTM4UArK7ra1A=\r\n=NywK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/tokens":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.313a1326a.0_1671013747666_0.2980939287923361","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/card","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee3400d447d1db3693fef7cc31506eb8fc1410a8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a69c14e10.0.tgz","fileCount":23,"integrity":"sha512-4TZgLmyRLopdbGiIZhkkPT8dDAEzNAjKdC3/PP2U6fmlLObWY+BIwUirUrLVcXtJ6z6KlYg6Dg0Xwh3aGnh4mQ==","signatures":[{"sig":"MEUCIQCxec3S5D/BDKhLPAJY2p00uRcm09rmOWO11Vwu6CmcywIgal+TYUQcxPpwJ7+Dc10BstfjigsBurqwDHPC7H9lzQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbFXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjpBAAo6vSkiJGccin1zH7kY6f3SpHR39m18J/EPxufmTNwlOCoOmG\r\n3pBK3zjz2cE9Ph3hnA+iLkXri6VdDmrORJTRsimawy7sgI/h/H85+mutWs3W\r\na/gK447ch9h3cMKEoZcwtLteareG4GQMhHPHy6fGeQeT5DODVPFxmyrO7PSf\r\n61RxhICIbSKq2sneJE9IgaVGuLvTsQCazdJJ6Kn4WrD2qbLG/PezRyIjR2dS\r\nti3XwcuIZAr4XVq84M5nd6qsxZPUuFomJnciLaJNz7yoAF55JP4PnuXDdYp6\r\nsjLXs2VtkT/DgbutBl5rMhaJJHdK0jklDKPrqefFbjt8g2WZxMxo4YORTM5m\r\nxMMk6OStMea5u3q78OnBYQJRlS+K/xs5l/yUW/DEUkPD/0mGvhuzJvFcIekq\r\nUjV0TazuXpR7NqlT4wDfdjCPE/rX1OH2ljZusSaH07rXwQIVuIxBAzD5BI8U\r\npYXkgjQaV1CjFGrr/LT+Almsd0cNUSX38b5xyYU/CP1jXa5vuU+CUMgSRNJR\r\nPUaejA5Y6xoG1yENo+WAQw/aSOr5/XndVXxgaibhMvUhv2kDOdzhifY49Xru\r\n3z5pxmHy6kIG3itxuZ+b6wuDR3V+EbdO7zm1eXB26Ij9Lq0J4UOumbPA/3RU\r\ne7wMQoOepFrVteOy4AcaTZnoBMyhvhKo8Oc=\r\n=mD9C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/tokens":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a69c14e10.0_1671016791022_0.1820906262489379","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/card","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b7610d2628f7f7dd97fbdd66ada3e609e662280","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":23,"integrity":"sha512-jcrEVeHQLoW/Vb7DJiaz+fW947pwc0U4WaV9r2rvEAUNRSEoIfjKuwhFdkpnvX23I3TvVMTk5E3l7SOl9luAUA==","signatures":[{"sig":"MEUCIHSftfLgSp3DljyLOwoYOvCJDTCONec3UoeOQK3XO1nuAiEAik+O/ZvMUyZunRJweeDNi5VQtJnN2DaG6A3yHLExcsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqikxAAkgOMovqA75C/UNTtf2VT/ahPdnhh7HirCOTfM4tLgo6E5W8K\r\nZPqG2+kahEH3baAdTUm73GggxCrEMCxiZ8yG3zip23SUKOjpuki1v/aHTlCh\r\nwJVKTm2AfQO5FBsBP+t1K7CaMScGQRT2oC1yxL7+i+8QneHQdgCRNfpifTZR\r\ng64I+4zkm/h91+JXQCZEstdofmQf+OBPEie57ATLS7vHepOeRPNYzGJBtX7t\r\nMSAaGUEK4QzcydsDNqbiprEtdYxW80SyNhvK57fUnhnFhz69yPtzNui9QtgS\r\nkLBnMDyEdenx6IWUfgNP8ugry2HA6jE66+UguMojjyK/wSP5vEMzQOJErZ6L\r\ngGr6PoBzbBK65CTnvhxMJl0kPsGNh1iSMX85jej8lD7KNdfJvHZxVqxtMbyp\r\nn5Dhl9cMOu3LE/vkdgW+ViZhQw9l2upoK0boKbel9/c3ZlcCvZRa7Oz6s8OO\r\np9HMThbotdTNRVAOPfNxy9TOhZu2cblh9x26YuKI0Jlh8+j4SRJzrKv8xVGT\r\nvshAzPH0HM4Bwb1UDunfofwvXXFpdiyEax3/+6ZhiqDti9uCz1ZSJikUff+x\r\nhzCA68fLxw+pquGsPobvljfCtnoIg9hxCWUc4geuEMSKRr7dSA1OtHmfGRjT\r\nSPKfnRMguVXOBgNpcz8hX/IxfL8SdGRkeQ4=\r\n=S49Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/tokens":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f43e0ceb5.0_1671036310900_0.4197903566770067","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/card","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.34767110.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1be95b557a7883b87a6e656c78bee01d42a5bc17","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.34767110.0.tgz","fileCount":23,"integrity":"sha512-+L6A0RBWJlUygRc9kplZjPOig+LwKWb6tpqznE0qMC5TRwH5CH0mkhRihxBQJULJ2RGqKxLXSt5Pt8u83tSFLA==","signatures":[{"sig":"MEUCIGV6zMmBToXInpvBAaxoX5rERGJ1EcBKP9jKPHZ7+JuaAiEAyhgjZSYxXETUAGaWOGmroh3T4MAaKSKu9995HfdnVQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgWsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobsRAAgaPfrX2D5s4JjMGmNKrDw7lsMsxDuhuiRJV5SqPmKb+WuTlJ\r\nVAZJet/HDTaMQD3I5ChbeepH6hGkXxNDKm6JHluBPEuUyV+IhoMcDi1i0s6U\r\ngvJsg3IWA0GW2r+L5YHjwAdXDc6Axm8cTib3TgKw42Bzs/tI66iU8PEhkSFW\r\nSH9ZYgz11Ni5xBXsPriQ7W/zDBc2aKK+t9SKgZZDNMdSuoMwgn9pmYn0W62W\r\nI9mGNgnj+h903wAnufu3bJSZsxMA0hexi33/+hLA3i3EosmAdTl6VqaHmDXF\r\na6wiJoQyJPeG6A91AenNugcH++GGzTrEhvlE3ktAOVynDDLsurgr3ELVLaYM\r\nedZ9zSwaGhD6OtVySlhAWeaOdiugf/hBT9snGJw8F5jaAmGAXNot+rQSkCcf\r\nSqBtAuMJmItv9bGti75ERwk0WY/SgwHmsoTZXOhvyWp7tRcQaKWiD3X43G/V\r\nidK2mQ9TUKyscbfzppuez8HxZ+ueNCbApyb8dMxbrXRJJgOGd7f7AwAYKNj1\r\nqsQYCaM/P0DdG4+NZLNBIBDnFs9BLLsc4w9RMUgqYpPJ86wXWYUPU9IBTg1p\r\nScVlSPtObISEgdNljGj3Wu6uaeX2kxTDo6bhDPhmBUyG6iUJe/ByGdqDdBfz\r\nrvnP319yPa50td6kTawpB1xR1Klcs8w54Gw=\r\n=LwME\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/tokens":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.34767110.0_1671038380364_0.9437747498504157","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/card","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3bc54cbe1b0fe5842d738d6b54b9493f5510e11","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1f99f3c50.0.tgz","fileCount":23,"integrity":"sha512-+DwckCvIINBJVF2+JNSJ1/S9VXlnpM4YNIJ+SCsSNtgoOIuKFxWxFhigr9qIfyaMmO4adbuIGG0zuDrszUtglA==","signatures":[{"sig":"MEUCIDqeUvbjWeMfw31cbuUpsLFmPBZaVH5fdVaOJVF68vJxAiEA/S7le7qsrjHUqPxuM91tXnlIee3lpMCVFIOuBNiq8Tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy5xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7ORAAo8CchVM9RzX6Hr5tHG0eIYdiaglBlgAzj71alCN60HKy3iia\r\n//UzLrAQuBVMK6SWRdbBCOiLjHVGxQgXqlpBu+BV+LHf1JujlcoIsIqxFunS\r\n8fUz8qBTSc4k2OSnES9D+K0w5/DzfDMxjeuAGUS46N2D+vG5FXgwGOrUwz63\r\n5RQWdHfpVaH5lG4VaSNangn3Zp6Xxa7Ny1cYRVxOwMRn6BQBnjB3TSSyBoyH\r\nXU+GB0pGTChqdzQ3100Md2oxwQyo/wKsxelsXT82eyfK2vO/3Bzz7KFj6XAy\r\nb+hz/n/HxRQFBmllQD3Xbn0kaTtEpnrXZBGfC5tMnCKPhNtXNHx0htVSVpxN\r\n0ORTUlDiskQqxgufkiE1/mvnS+9ZxN2vsj9u6N+JHIok+aITdCH4TTQ85VOu\r\n0SKF1w23mmBO+O07oVfz0NnhaZgCnoDNpmjWGRu3+35hVnM63LsLUMRu8eHO\r\nq/TtDjDP0OQai2YcnoMinUzBa/zxD8NhHzaxTbjIme/De2/yqV1cE6LZzhRc\r\n/U5g9sbVcg1fx3kW7bvLtWYkOOc6/WDsMsOxbNrV96ii7MVe4WuJKuSkNG+I\r\npMuMhsH7BYbzuBj7U4JVPkphkyD0N5bsrBkTPpA9kyOUeFsFNAMuIfNHQUl0\r\nm4KEFzmRMXYEfTjyjEoHYeiN1NN36yYjXRI=\r\n=5XSY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/tokens":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1f99f3c50.0_1671114352930_0.9345187688957384","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/card","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d918e993a46d49e0109cea0598bf4c40debf91c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cfd69490f.0.tgz","fileCount":23,"integrity":"sha512-U7QoyNVWvkYS3l5J5pfuobaGRCXWxCQ1HlQ2EYrzAxQKiahQexB3fCF1VE/hqI6Mzwlp6C73/tuxcToXkqfv+Q==","signatures":[{"sig":"MEYCIQC+ir+CM6o2R1VuV0MuSy0B8dCC9ONHaiv+5eJaZMhQpwIhALdEad1pZiVIGV6CnOBkuNsVQD/NZK7574S0XD2Pe4od","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp76g/+MuN9Xs9k4GLZiviy0RQfkSCe5SjZGNlKTVNVSNzPNKR2nmxW\r\n9Lbg/F1d0h4mJpISDOjdY01QAqxIcqBQNca5AoCwMS3NNyBDRK9+sDpfOoYn\r\nkDZc5TWRQonhmo4qE76DnJDFb1norcBWHtyVCqm0EttdUy7m+bW90S+vfgSI\r\nCy2Xy/2cBk3Qc4/8cAJ/N/aSOSQRKp8TexltC/K7q/yyIN+yPXCr+IwsAdWm\r\nuelQHJ2iK6zMfzOWfukHpKL41joUlRmk7/aQ1+oLUI4lXHctdBdxsx067icS\r\n9gLnCP5eAiGp7bTgv87R52J4RlbXg/GbKrWqbT7iJJ82YBuEZ8g7NBZklhlo\r\nJE+4u/oe193yy5twg208jlXTjesVvlz6iWdZAo+MM4ap02W7KpAuMBA5imKE\r\nwR5nF+fVi9b0ZHrhboBVGMDT0LPnv64z2NtVHGwP6pQVyAJNMlGP0cfFa5/R\r\nX7azskUQh6Ucbd18krYOPBPWHEcyF87zV8mb/O2HRjmARc9E2g9whKqrX67u\r\nooZxss2e2E/0GnHYjcsNil2DG1svJXRgfYkijDnOQCkpw7tQ+b/+m6rj3bQg\r\n+QIhPKpjPEfS3E3uIY/UJxaPAgJFoaZIG9z/B8HIYLzBLDIAI9Xf/aJTvhUg\r\npoGVro6eKpyZOV7brbM9dNMpmaOvoV8c9To=\r\n=Jt9H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/tokens":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cfd69490f.0_1671221333887_0.23192057319463588","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/card","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ecf4e3d8342e47021800b4dd3eccc106a908681","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.94ad8d986.0.tgz","fileCount":23,"integrity":"sha512-t142r+DLxycBbTZKA+8FTsFzKTDIVnuyL53tepu22Wr+qEKCFO0rZ0+P59kpoAtMvyhhEH72N+UCGifFKZzmOQ==","signatures":[{"sig":"MEUCIHno8s/IEO5dbPME1b18mawQAGEhkcGZ2TmjO2/P+H7MAiEAkVcEoHJ6ZaBvtnDo+0P2D3NhQYSnXkcegyNSvUHlzmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2yg//bmlvW3eNEB8VeEK3MbViuF0fb71C4Yhtlf/PWYTXF+bX0XzF\r\neCGytlDvcYmr1MaNktheiRJyeFF+xNGNe5r/n4HYV8WqJJyHWaKdLtjfp7vj\r\np7hoheF5T8Avn+cl+xYnTfbS85Wh1gZBlIGbXSSg5+gs96+uqbiztRxq2hFe\r\ncMXlHFjz4I91v+ZqduG1ACe+zwuXhXxHTS4PyosZsm3JkIUyd2P7jizP3TD/\r\nCv/nV/WsNauTN2fIVMmXNPL/GTJNVCOJPEJrRMU83oz8+kBBokD1UWIQSba0\r\nhOL65uBMhqif1K+xUdVUsH8KUzkDaO7O1PmdTM0mNDDYVeOtDmpiVjpm/EQ0\r\nDet1Zd0rjCsa9+Xkh0sLjKVBsPIXGfrj+Bz1RcPzB1PMXA+rt6cWJ7NdDcC8\r\nNyTzMou09R2ZS/hFtRUtrAveUcjoH8qs3bZylDBna78LPGMvl6sxWvHYgrSt\r\n0/GTqSaDYPypr6h6blvIBBvKFPsGvijdsYxr0XT5R6dPNcov/3B8OUvl5DTF\r\nD/QeBGZKYri6Hg/pWz36pPdUl8IblUprNiWTe+RgifXMNsjHrEKXA5Vc+N8o\r\nARPLbuVcdy9NE6LiRHb/ZHjZpNv0YC4AHy0A3HUyMSaSJolCDplM69Bkpd2b\r\neJ5oU4xl6hn0o1lFAKl+LMjgA/OzrZD5n8E=\r\n=zIqf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/tokens":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.94ad8d986.0_1671478048435_0.9188428823553625","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/card","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.604264203.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec670e11bef70be76b2a776c724da8173e4f0d24","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.604264203.0.tgz","fileCount":23,"integrity":"sha512-MP8srNymkrpHppUXS40rhdm4nx7PTNvB2yPpsTCev9Jfiz6zA8V42Usu/KgCWXgx0ZlI8xx6S+WnOyliEJ/xiQ==","signatures":[{"sig":"MEUCIQD4LeWEdUR5gtrppPqvZRy6QTZOtWpN72lWpLgkomw5aAIgQuuN4LpQkikDyJS1DKdYuK0hjTmXhLbuSkv03VRPVjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo31zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm7hAAkLXnoTneHAssxCsdl2LYJXYd5D5/J98fT1wTAT0K18CZaDeT\r\nS7bSJGmO21mNakyF42iIX8Ws1DoQL0uitKSKDbxWVMgHYCpItAGyns2nUiS1\r\npw4swYP3I85XACfH/TRV9To0GFDdMfn7mN5edzkqbAFl/L0/pQsVswJhDnqk\r\n7QqW6HlDOPzA6nsJgLDA3hD+z5gEEXKttWE0FepzO4/RBQPCeDd24VcR5WGb\r\nIqjLNc6+kU6UfwM/0kcjCXfYbA26cJu3ImqGrCTPAt4gOEzifRysPRiBpBHH\r\ndOj+pT1+CpNrvsicRE7J0Ldfj2oPw1sgKuXD2WGzv96fOshEzl4+1JEQhnp8\r\nAmoxhO6QCS66pDNhGBtu8oK/Lke03oo7kEkqD367em+1RSqngqYyiu1Iu+qC\r\nFKod13FIpxRQX56m64WxXFDnwO1k2LY/sp0wgVf1Wbhj2WmEOeYIQYjyBFou\r\n43MngJqogXHmR6k/bMHWJj6MtNT3DxuFvX6xr/4TEnHBMYmsrjcPBOtediNe\r\n2+fCoxcJJ5nhXEz6MwyomAk3g5VgtNyvo0jJDZbfgUve3Vm99TOwhzTk8atf\r\n0d7pYBK3iRmNXZH0KIGyGq4JweL5YwQqDhLegYW3BhdRDXzoX9sXuQqUUdyq\r\neuY+0wejbE958wK+Abs2M6Ts6uUb07TPyNw=\r\n=0UOf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/tokens":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.604264203.0_1671658867103_0.43885304555354554","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/card","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22a2aba4c535b355d64986dd8825fbf84afaefde","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.85bcff6af.0.tgz","fileCount":23,"integrity":"sha512-Z25Qc4tvAhdSwtWxo6fYLjc0rx4gw0cdJ099L0cO79V7/UWnG6njmaALz7l3gcU+hpOykgKYpdOcFyg9zBa5RQ==","signatures":[{"sig":"MEQCIFayc6p56Zi/hqK0ef/Q1m7JyUO2HXzaJhyFnvjhtzqVAiBh96ETeAOo2NpwKsLXw03PyDNc1no1HK8/sUifvDzVyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDC9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+QhAAgEH2YRI/GiggsjaI6QlUy+hMO9e4ItPD7ZAHQ0kol5828xza\r\nsx7smLkcGUZ82uTBmH/6571z7Qq0B5lmR1kdIXE2Erl96bQjWntUHxnsvHI0\r\nd6wHIScQg9yVD6FD0sYmFMV90m9iugjysw46X4vHS/QPBSqWDt94snyc7uYC\r\nToeOBMwCCICzbG5yk2sT/6tLNJjBh0MIpmjmMMHOL60Vt0IeECmS1pfTre8w\r\nT608H2y+jrgttCOkP15WlGiAqCb2ylRQZVnwh6ehmbkIoiZ9IgJyBFHFoRgu\r\nrJ0ksRyT1Yo5lVkerVIe7k2QOtu2IDVHNFD/JTxSVe3x5li2Xk6FrNH2Ak5c\r\nZljcYlJj77xmMQEqaQDT+i8aZesSY9uTXrnqnsPKnHajmBQL+xs6VQyQVEkA\r\nlZ8orHXV9vrAv0C9vZ6Xrid2fcnuxTNZx4joeXzOZOcimoV8iJBLOAhPkfOS\r\nJbi3LOee7eWQTY0v2FwNMoDL/U4A/QTsPHZCVDYhkjBWUb1FedfFs9VTP1SQ\r\noFBzOfY8yFGWa+3us15aXhZl9raMFU/Ndx+Cafl4Enl5kmD3bhrvJwvvAhE+\r\nKrYqReC5qT4ASDIVGwF6ZmOKdG25JwGe8t3LwyQFW7d9R33PcQJ3eus6WkOO\r\nQHrCNB0CUwDSdmCDXx5PHfpanNOz5WHdY38=\r\n=LST5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.85bcff6af.0_1671704765536_0.676732038654551","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/card","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f12f3952d9949289d2973b8d39444dbb24ae2666","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ece3e8d21.0.tgz","fileCount":23,"integrity":"sha512-C1dp/053FSf0pNoCUg3+UjdLBHpZPNENO878oGEjXzHTG5vJMlxwknrgWHfSg9g+ehQGj0WnHVue8uikuaFkag==","signatures":[{"sig":"MEUCIQC5gHERjTfsHQ0jJs4GDdcO+Dny7wMMa0iEMXnZwx35+wIgBOSMi4XrC6gZ0FVGEDbs06G82oepwZoimGnqtpgZqM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJACACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqcg//bCOGmO7VFk6QqL9JgHf8W3YjEru4z4aUsR24T9pqr7Q6NT/j\r\nM/G8bX489/ry4muDaw0ymuCkcTnD8tyZSz6A0K73076rRKc3t0Tyu1kMDCDU\r\n7P23ytrv/30YS2JpNJvRZJhuAkQcgvqtyV0SKMVwVgZAmTCPvxWAAw4YQhzz\r\n1hjZE3ktmkM5GmWLYl6z/KEhdrvCHg0D5PdILtK2yMzuIqDOn3S19OuCOxFO\r\nwbPkzxKMp0fsE4uKslY6wTsFuHSxhKZhHdJp4BjQpSmFp0xyp+Pq5KU3ttEc\r\nHKIjVLREmmsMX9GS0aW1O5kHSzHV/6YxkZs7PMCSAH4rw9kJBlgvxtDrX39P\r\nJFlRNJ3sLQU87ZOzNpMYZ+raCqesFXXcLaS2rC3r1NeqmxKhkltlcdYHDQ56\r\nD4IzM63ITg2l0VakEybYBC4O+s6d7ClBFLEWL4AunVIk9/QmOBjwmaNcm9iZ\r\nHUSNRfaVCorWXPm6Yf6HQ/3rafKLUXocJT7ph9mgSxlkJpmHOvfZvW9Ejqls\r\n8bPp96dG3gnGjOqLa7JNhHQv/bpGEi2FRb2Cc9cRNs7dVqRlLUC+r7Ni5vX8\r\nScFdQ6wHTYE5SQfJy2JWDlqAqqhl0NDM6BtasMgCfd84zmLFv6NDW2HKa8Zj\r\nu9KNFvmJP+KwzS4JnG8n5GG6QVjnyLRLwLA=\r\n=PVED\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ece3e8d21.0_1671729153932_0.23976375093541935","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/card","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67cb71509a8ede1d060c291f93bd2bee1529d610","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.278ad53d1.0.tgz","fileCount":23,"integrity":"sha512-kIEchMlZqV1EXcWghIRDv73nL4GzLl4tOz4FDL/X83Zhaxgy40VDXXIwtMKePWgGUzIoWZj9y0jGHT1aLZis/w==","signatures":[{"sig":"MEUCIAe6wIhseHEDEi0jkO96W7gbe4IcGWC2Zlk0tGODN+kGAiEA9GSlYDG14/JKWnIsu8KA9ocPk0Y5CAJjI0AYSBGYStE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsOA/+N0qJIGV5HvkxS7y1gueNL2yQQAtON1Hg9hJumk+H55gC6XN/\r\nmmPA64wbTL3j0RYU1RM9VbM5985gT6Gut/xuopwRP6dpIgfj/YnqTq+hO/Zu\r\nko4MuCf6YU8kyvrgWKGUOBquhgEEbUm4n1MX7DUvsf2Tpj8vI3b7QzChbGQK\r\n3HULvirMDGTC5OoFniAHm3Mu8tFMP2PKOPNdvPOfWvP7dd4EctflGj8ocSnq\r\nMQ+TDg2hnCQjMVpLyGwus6TA0Q3RyTRlBW1beZyz/T6jNCY9E7H8+U/vs5Dk\r\n7Jfyr12xAc8ypvkHZfBZQXHmPbWQAH6hpAJb+PhjH4uifNoJ1PaXxOS5q1Bn\r\nPhyql7OhmVaw2hwpT1PQS9e1C+Hi3ipkVmAo6Em4eZCwYjzzTDPN2HdtLsls\r\nPl/2AAdelRJgpBhOJHlyMS1t6iNm2fQOmopNc2sSy1aBH6ZjU5FAwtUG6K8Q\r\nUISgwnd2208NQEzSCq4LhCtt07dtdYdTFLSe9i4jSzIKBmLcT/jR8P1FjQ9Y\r\nuB9IK0ABXVW7MGzWLUZuhnFZiSeL+fyCenQOVAdaX4NMuSwh8ECwJO3D7R8b\r\nuwU5d7cuLz8wx92rVvAH4/IpWg3BuJw8s0l6+XTGlUc1K3YrNmzeuAmA0esU\r\n3TL9tJgvc+dpZcCzdI9J+SkO0ZbA8H20slI=\r\n=PJDs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.278ad53d1.0_1672160724569_0.8349689466052377","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/card","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad89abf94245ff3311e5a10671399560054229af","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a7d8389e1.0.tgz","fileCount":23,"integrity":"sha512-vDOW2xU0ibh6iScdREdbudMxJ5Xukr1PO4UmQPw3THZwUzpth6kbUJrS4OVCXiXJFp6R4P7YQ9rINMBT2UZ4/Q==","signatures":[{"sig":"MEQCIAsrUpjusQ6m9ZZP8kR068YaKyldxP5wFDrgOSvvgWbZAiAabFLxjdNtov73EUpUk5yhhgLaTYVNVDDqIbHur09mWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0GoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmom1w/+LR0V7XAMTFIyeni+7+6dyN3F3xYgH2BpAsjF4PF9tmpLffcC\r\ntEcTN9BkWl/D3CP41fyDWK/4KxF01WcehI9kmfpz49inZFgB49SGCD1dLZ4R\r\nTwnkTaTPTSLwYqGzQPylbMSnQ9QEjylyI9+VuhototrCbMtX7r7HZ11dl7Su\r\n6jdt6WW3g2T5bAUVp0ZDN6FVZ6DcGpnXGv6VEYpKdFUQ3XDZngjY3je51ipb\r\nZUn/TaCuh6mcr+14OQetpaOtfkNBowfacd3E/kXFYL1HSW592Jg2qFTkWx8W\r\nCKcJSvPb66To4OBcT7Mua/THPpRFvB/anycCK6Q2hLI6IuavHdqW2sY2jTjc\r\n6M1a/tCJ41tOf9/iJWpI1xXeAeDa3ZUGNLxTut3mQCL6T8AIUZmspnpr/3MK\r\n/kepkZ+3vhHlFzH7YHBHLBUTGbde7B+AmeTRlj33NVTABMHScUo7IVpLOQIw\r\n71ZEFacyoz1s4eHqGZGJiduDGP5kUYq7xLWhyCRpeJqY5hpLumk9WQt9UMPJ\r\ncgp+QvI1fH+X/7s52eCVucINMrF5rqn13hxrVT07T6oGz1CFlaNsf6MaMEsz\r\nvXqyH0NIBRn7xwyBmxatBxW214M6PAqW0WTb18feFaYNa1jTtOW24/hznBMB\r\nHLmhWFg7Wn04ox0V+lcb2sbiyPSCqUDKdMo=\r\n=0zhj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a7d8389e1.0_1672167848023_0.11765066241076916","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/card","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b49fb48d7c193fe4a2bfb514b130215fb0a7d2c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8175d5eff.0.tgz","fileCount":23,"integrity":"sha512-rMh950zdW+YdgLTa3ZAgsPA5QdzMgyQ9mRlWU2YY66NWMLGbRICXQ/FUy1CA6+3IRCfnWDE/GhbYLmftw8KuXA==","signatures":[{"sig":"MEYCIQC2n6p0JExAB5vu3uQA+NOngA+j8koCRuau4eObwG/vGAIhAJsFJw+Xq0cPo5U9poSzez0dxbJMVrtTbHsR2mLO2u8i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Eg//ZxgzCtTsvfLA/DFJq7dIp+rJlwUDwSj1gJIxM8kqh8ipb6EN\r\nBL+/uNuSwIBnbZp9y6EK/lxZ4wNyVad9l3TLAYNTT8DwTsHOkTYSpHl8Thtn\r\nQe3gQxnSVMwNPe86dprbvNdjfVGKoySf5nh6sQszsiiRAVOZ5VpAQEefrOUV\r\nDXN2/4CBZilgB153tNL51i1S4DTa9OJ8UGXyNokppUWzKv8m0a+hAcW4kF1p\r\n0gzResCcmhP9k1JD3F0sDHxfrWTusaBAeMzt/BMMrx+4NhQh9UToGHnFCjRZ\r\niNuG+rZAvciIf2zdDDuVA9paiv17XF7MXrjvksw/6GE1og8CTIJoSs/D0ueW\r\n73zmMfg3Kd8hOln3/lkAnjlDOhe1mV2SLM9HAuoD/QCRH0+IZTB6NfjpmEvD\r\nFeEGk7X+UtD5ciHPx8e3yZizZWjLOMoTfnkYwIAXzEEMH3LYJEgAGS++ntlI\r\n8sZcSkFGuUK6c/0mgK9DKdsBGWCdBjNt03JGtblZw+khq7y0GJsw40xheoBJ\r\n/2uGiMoH8skxJQa8KXhrVjLfKeSeqlAcELEnqnXbLnwFMElXqw9Z1IearRwj\r\nm9M/5HdbJ7tnEOfxFakQAsMFi0dWSPO2v3xX3GKF0CrwnLT3WTPdDqtXsomg\r\nHU9NhAqmxZXEz+/426UssKWSeh2Q5ist6o0=\r\n=Pgqf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8175d5eff.0_1672192321727_0.17875348950164316","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/card","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69fd61ba3a610bfd1ae8304b3b4be88c5181e61c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e21dcb86d.0.tgz","fileCount":23,"integrity":"sha512-c0QzA1x2em+9RCtQQym9LUlCMNksO5Bzh4ll/MmmwlTXPMcuOqkIOPJ1++g3c4QC6Nu2VqHQewzy3rfs4zzp6g==","signatures":[{"sig":"MEYCIQDBpudLWkOkVMnTjzDjfeIBmpqEJExcKpiA2OPtsVbfeQIhALMBBMQPtYoPMWVxVewzdrF4smHqXQ6jHFd6MqjiozM8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ32ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7rRAAgJWzAQYsI0gGggUzWLWet5gU3lxWS9xGdvUZQ026Du6WuS5+\r\nPJSJvfrXeF6UMhqEoxR7zL6yM90R0P4d2rj38GLUDwSC/xzKaR/psfKRSEvZ\r\nUEDzjyfgV/75gLxL4auLT9HB9CYX/244XHh4TvcXxoKuPgnSnGAiyv7ig2jU\r\ng7txqqSTg2g5qxpURfT4TDLbbNL8Dfx0E/IzXkbaOhMfqkzJAePIQQng5AEE\r\n5xEnX0y6JXtMEh3FvgmdDl8u6C8fjHv0FdJGNv6ekUdQkBttW1sK3cRlwHMP\r\ndNixRSUff5ealSNaIUQbHFP+zlbj6gDsOSwXf8Vex2yskjAnK/ds0J5CdUKW\r\nnKwiE5DuCq+5SkU0W++17uV1l2NO6FAiT2brUWjhyqUBUt6GWKll/w1bjalW\r\nfcxcpfZCcIiBDi4bqz705Z5jh/fAg0uhHs+lefWQYuYMACcNhVkL+SbZNxtQ\r\ny+qj8ET4B4VTK7/QjYuKvCLJV5Rr25IHYETdEdIQ6hyBfiIcIbHh+Yuyivbr\r\npai6ddpEO6hB5fB5KSmno35gguq8EhkPEw8wohQMzrYgeFFxmxCzAlqMWc1I\r\n+PNz2BZ/NnRzVXaKeKLT1JolUVzXQ76GX8GhRFWcpnuYQ3PpKpjJEqQkW6P6\r\ng/eVt7uTLHkUrfaEvwBcr48M3VRFzspmurw=\r\n=OA7L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e21dcb86d.0_1672322550106_0.01746871734786626","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/card","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d4322926a2e2d1ad912ea32f82b891e420ac1d3","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":23,"integrity":"sha512-2KJL5wvKFCyc9rJpTVI9Ea2bz6rHRB289n1CElkyZQLSElU/evakG3YEy3X5afwZzndJW90ZphxaW1n0UGIZ3Q==","signatures":[{"sig":"MEUCIFqf85cOMWLlSyrbRDsNFQEYbW7hk9Ogyq9Vg/AXgg9RAiEAuXZ0j6d5zN59clz6YewvsafBwWrML01JsKXYTAEUpQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFgRAAksLQML2KWYy2gEAKkp1wT/pj6WJIpMUNNt6mTm6Y0FlR9QN0\r\nBCEpiF+vT5DbImLjTDWyNDvUSbgSN+7FQ40qIEjk7kwRJ8nzhyRwH5O6LAyY\r\n2kqj9bBRU8t8zPkgvcZk+lu41LgSCEDnbkj/Cifya6SpF2Rtw5HHSeAFiT1s\r\nwHTKVHkSDjhVcNe0uBCALSVn3mzZ7HyNnC+GDSyy1uKIAep/JBAfhzbfUb4g\r\nQxTX/XQ99Ef8lEUPaBVrdERJaC9zxJCse/J6yngPtGf7D0sAuWtaCUFDu3rk\r\ngLecsjIBdTZz/hXQuY33w6G17tHkoPMl/JOtpgWMDDcBE6sEHoOWth3KM29J\r\n5EHHrP0RygHXDkExs0EyMMQ0xvfyrHy5Gd3eXsWU66Ekqec/QKlvu262+g6w\r\nzMzP+Uj+z9y3gypndCKe21wYB1WneY4NvnHNWbJCHeuR+bSE5kAfI5ypjmvd\r\n/IldwZfErJyULo43xF8ONoW1kGRtNcJAcs4ZAW3Z8cIVPNqqBupTBeSjChXU\r\n0VqJ4jCzWgBje2aGDeSUws32r4wnWh0K9sxUu8q1jpZkr67L48I2zjQnUczT\r\ngMX06EGHDB1JAJnjQGiQv8cbCgp2ImUl3e08zf10RPQeT5B6v+zKteMS3Sfx\r\ncB1Qx60es0l3v1leYWz1fvQxsHyzsFpUEsw=\r\n=Jvh7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.20ab6f5a8.0_1672342878108_0.7682978807374077","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/card","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b9806f623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ab1f8a931a728a0ec3a024d7f5a97c466deef22","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b9806f623.0.tgz","fileCount":23,"integrity":"sha512-X72TtBVDw4AalVGrUSMO3F13RplhPZyl8/Xyse0KXFAOuUw4Razgz4nvnoe9h3iMJ4NamE2cg6lZJbLbdKz0cA==","signatures":[{"sig":"MEYCIQDoC/A6MkcEqK4cXXEt28bH0K/0EUBDRbX1okqMBDbN9AIhAOeR4ORieyuG+ZLUFahosEjtEAkE0T4wtXNbsmCgEKpD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh1jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/OxAApH5zFAn1Pr9MVdni9y3nkhLB2NRAvSaIjCk7190pYv7NKNB4\r\ntT8X5klBB9Cc8B/vG8BZ9kn0YIHerO7VVvO9zz1EVOmePwvL8Oln42xuhZcd\r\nMgXhORZtHMOgKivsnp/FeUdVO3i85pYQFs1F8FWCEd65/wqWJefmBOs4EnAd\r\n8kQf60LzmLlWQDqilEFENg/DXibVXxS8idEF4Rd+pcT+gJyyacyLhpBS02NI\r\njuVDX9lUwtQZZviE+nKoGqFTVuaq2d+7HK6ChJQARKzmCExg8B9PELbERjzG\r\nd3j6ltQa/P3uUu1UYaucdAotoogGad2FkwXaI/0/KPKlNWBsmd6n+3/M2ByW\r\nZuyoOjFASuKxwe9WY9H4FoK43jrhkOv64esoTgvYbZEXiUPH+71Soi2MYboP\r\nl+k+f3c5mw92hE11g89vEWaAaSs40DFCC2A/9vfRDiVSsDM5a31bI4oSO4p7\r\nwOhNHpvH6X1NF91PUmdjFUHojqUMC584NYXhgvmpZ5c0JFVpguTDL3O+IzKg\r\nnm2BKOsWBpp82kvOjHfZf/8gs82FiZQwpyEgqhnSBnziqpVLxlqpSFuoLYXx\r\nYSlh/6blvVeEY3+5lbG0qMtplkXWqen+ChbN1Xmb8knJTVAKh2AjOzXqSnUi\r\nb8773XtawZrDGjKns3+oMGU5R+lcKQE+HlI=\r\n=cnKm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b9806f623.0_1672355171373_0.39927554870266335","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/card","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"494bb22f9bccbf9746ba56651250f7febe110c1c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.50c9f550e.0.tgz","fileCount":23,"integrity":"sha512-dXE9s25rNJhXV+gwr5sr2Xcv/iuQEtnS0bAmQiz6fXf+1PcS1yewtpFOLJi0y1bSBYrNbXAvwH1PnFnL5y8+vw==","signatures":[{"sig":"MEUCIB/1QJat4AXzNWGb1uvUWiwAGYMUZbQJ2+z478Dc7bq/AiEA5ftkG1Jg4VMD2+XU0QsWHX1sQBmU2VJ/YGVY9h5SMOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE4xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0cw/+Og8MJzMzPUjfxoL0xCuiE12s0f3MSNO2diRqrDPIBmFz+ize\r\nwLVOrBKZLn8LJPM1CgMCMTTlrQg9s25hPUp8rcYVgciez11XbkOAtADYACcR\r\nUwy1dezakspMnMlPfPlbZa2jYQWgXnz/PESiQBdogOOr8QIhUoJhfIxm6cgc\r\nNzLqIFQwCE6nXqQ81jFeNKPDa2WfnQMaF9IFIlmNsNVjF8Uod5nAzzqvFRmd\r\n4eImp8b1zjBpBpAwP4RH4LeVqtoXqk5NpQKv30RbPzrcLkT5D/ZMMGvWrO+t\r\nVbccSlMK4dRWEWUCbCe1sUhuAVCpy0PPDXsAAXtusnQF7gXK93IH5mq9aGrb\r\n24Xw/btaXw+zegQbt3KYsn2SMdytmnGHybPF/L1AR3gF5tYaeiEVJLN8lmIs\r\nRXZwVyP78HMg/7PfUCWvD4xIaJ0tLJf8xGzqj+cFsRLcAJuoIYUgyvzvAA+Q\r\nNEiaJqBlHJwMpW0nEW1awcxS70+EWSAZU2HWFbxu3U/iVvXSlp62Z62sMfhq\r\nOBR2fL3C4G6xS095bS4a7dF6CW9OtfyWVkAFD6RZQybaCuGu/AW6sNjsadne\r\nwM/s0ahkIjcCxmzqa/ZAq0UQlYsIemFKWLttHkpoXRvJdi0ZcdhfzyXz/MyK\r\nPIqwDTHMScIp1NouGHxb/yOVieBVudroonI=\r\n=Y5R8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.50c9f550e.0_1672760881308_0.9648900040191071","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/card","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.af490a848.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"028a9c049cfe1ceb23de3da298f5efedaa98cd46","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.af490a848.0.tgz","fileCount":23,"integrity":"sha512-lPZO0IckEuyKWLmuJ/G5RaNa7mImk3BMlpgjNm0uyoPjtmlFFPzj+zsJGmSG55NstJftStzt+zrnmJfOehY2Sg==","signatures":[{"sig":"MEUCIQDzT/4EWW9BWnVqhW3X2OcMjFFIRHonvJy8brIBMxVj+gIgNQES1xsI6DIPsKmIMYbrvfWva277j0NLbTMGbC+m1jU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFB2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDRA/+IZyMqUNJXBvmwhd+6o/DDgBLrxnH4gUFHfjGWebLG08vuvak\r\nbNY0eAKn0mp+mQp0DzbcdqOGJNuL3TqiDBokYS+ocPrW/5nmG4D55+TrQnu2\r\n+DTX6lPVdVgBY2dDRYUjGAWQaHjdtI8za9bkYPUUSVGtwF84oleBLrRUz7jA\r\nBlrkYZ2WJSoa52dbp5WLYzRNz+HvKTdYvksfyqiqeYEGya2jtQ6+JkmIA7LT\r\nexotid+skADod+bh99p7tikV8k3iaX9tczAvuXE9uKbAlhwFwcOAbTVXUUoX\r\noE0VIJCHAqKnup+AfEVIR8rRBtdNcvgI9Q9bDP3H6HSDM1A4hvOCYlgbNKhk\r\n6aXVZUDRpokMLCCnjWFgAY3wtnejodpjrwCa/fxB5IYZa0unX2gZ5T6Vy0fo\r\nLutEPJUxX5gjD/Wje+Kpeql4NjYeo9joEUme1ZOgT/XsuqEU8khuWwifOj/e\r\nIfurLF2RMhVyCvXJaoqRwafHYGaAuwmrC9ksPp6FfOjBX1UmJeqgTMc2TXk+\r\nUNJ16UX8pdnJQgDNwMbfNpUgPq6svGrCHTGK//mJzCV1waJbiT1tXQV0NVFR\r\nvfz+s8NaiuhUgJi4BK4SoYDmZtlXy9+8LbMimxBBymRyOQQjcx3Ujkrm/2rH\r\nx21H+KdWaLe4X+NTwdk9yiq//rN6mDedlZk=\r\n=oJN0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.af490a848.0_1672761461782_0.6189962117045926","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/card","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcee7a1367548eac22e9afb753d283cccd78f201","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7cf487c98.0.tgz","fileCount":23,"integrity":"sha512-MLFElpv4Pd49+hbgVszTueYKQf2fZyDdOH5xqtpCUoIO75COamw9cEPxkyjT+t8/zPcsAzAzBJIEg9zCS4camg==","signatures":[{"sig":"MEQCIFN725urfY5WpKdrdo9X8fd0yp/2hd5Vol1K2d97k5y0AiA/bPnUgIMD1k/Jds8gp728rIgD4hRJP7U9mF8uymJ1AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGg6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Mw//Ru1orKA8TTCKKu5vk2EAhUt8a3f1mWX32rmripOgJHGCrfcJ\r\nDJiM9XWXKZeFOVGQAQnQEwvnEW+r/XJ+Ti0bs9MKn7VJxbhVmhFY6a1PdNra\r\nV3gDJGurJ6tkjOnyHt2KJWyyD5el7PtNGUQ0mJfdRjml+Afph7+YmlpfqVca\r\n0iDfk5tHFXbSCW2lbE1OF0z+UxxnCNcMVhv3G/dzo6nmhrEVFWWX8vQ7e+0R\r\ns7KO12HqzTb1F97Lp2TWukKQ69r+209m3NKKrnR+PZ5vZSY/Ixmvb1XXs1Bb\r\npcIXbhQYHqG0q22aq+fL6jKXxPOip0nV0bby1PNwhA0BrZg7bcDxJQT1AnmV\r\nQ5gKGR9okBGB964ppE+k+Pex2GlAKd1a1lg1mj7IkKqo1c0MmJ/Pai46Ox3y\r\nxZQsG2IepRRKrGQKAbzNz/9oOa7YikgNhic6QRZA/eACtD2Czh1LFlizJh9S\r\nI3Fpn/clzwQ3Czy72SQ0twAcoqZ69L+wft4nijuIlWbXuJul3WbdVc20rvIe\r\nOtMnRYh74rx9Y5KK2Shv5tzr7z2jYPzUmjkOSb/HpEPUyCb4mpFv2L7NkzOw\r\nssDxrIV2nyTXBbuZLMo2//EdpjD2SrS3R7XAv7WQYHWEDSFI/jbUSTquNnWG\r\nhLvNf4FHiIP1mEeEioK+INzjB4rHYMhkUNE=\r\n=qAR2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7cf487c98.0_1672767545651_0.09798083150917547","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/card","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fcbd5c3b22033756a38ebff1cf94215050b1bba","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a52be2d5e.0.tgz","fileCount":23,"integrity":"sha512-jPlTUh54gruUsY8jOROv5OzTN0hiC42SWQOU8KenHq6n/Nwyt9MU2xo8lN2YPdLqLQSVGMBAFnuZi3SbcUIjGQ==","signatures":[{"sig":"MEUCIQC35ZgHGAnOzv+hglNxENs1sVV5M2DU+R1+m6ILzSRnNQIgGQY3NgoKazrjwLT62jIgF7BkE5bojZt6+udsahtvhTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouOg//QoNdwqnl0rxzNb9W1M1B2n9gbKTQKXD8GKQcrpiVl5Hr1H2h\r\nhPVfFdvCazrCk+wECDEDWUv5XcHC1svg/OUlhzSt6iH66bTZkIkTkHPcdJ3A\r\nh/UwMOvI5FcETi3BNhhmLyx7ULCsbHYHYyiAHZh8H9xZjzKEueFVpn0skUok\r\nVZX8Gz0R37cBg+rVpwfYHk/iMiYevDpTZ8PjxW1j+Idmjd9Lupq+P/vji8Yn\r\nbqMd5qdTHA4uU6k8qGY9UaexGPSJHQM+AapHlfXgoBGBae5nAvqfYLeEz3Ue\r\nprk5Cr+wz7q3aaiejl7fmaJ5koSgUSKuEay68amUeh2bQeXEhmWS45+wUOjN\r\nkYvqdrZE2Yr7KCSkPU/Wr8kRPkNscy18pr1cj8N8dsUkWdx1jRR8km2+Bdk9\r\nuzNFLnkSjIHGBDYvH9+De9jt89NFfs4jdaT4bekpDhMxCgkwiCSAsCTotGO2\r\nZCvc1Jlb6If80bijU95kOxjgxxkm7ulujbYtwt94jBIG1AaGHEhywK3k2cPB\r\n109J45GgD2J+ZoEfyoKRTJZ/IuojV6WhrpAcldxg6W6Z65xnx2IL2Z9lDFpF\r\ntgsyDnqkILedp59n+8OwErE4Ivexu7RVgvNO01flpwUAUh47x8+oyOAWNdj8\r\nEARGRppr9DUxiaqOmVw8qxsazkrEZ1anO2o=\r\n=Y556\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a52be2d5e.0_1672773209252_0.00287705212243039","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/card","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc324669745e6015d8a05426cba7170196446eac","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e38ba17c5.0.tgz","fileCount":23,"integrity":"sha512-Fr92/GhRthbnVlB6ZKHZZ6jf++TW4nHvdMauDqKch3F7NmPOEa9Z+5HDX0czUCb4yhKCb+F2KcdoM3MIXAyy/w==","signatures":[{"sig":"MEQCICI1h5zQZQHd94KmGhfEfvpMeuRMYsDkk9V0/P8yZbdkAiAWoDnSkCLcNxCtsZ75duBWRrl7DeM8ai6Per67a6STDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeghAAhdqbAfyzg3fPLN6SM2qh845OTylYqXaKx/5ilBopBx2TvPwN\r\nrRai5bfZXSOgSy9tmSxSblgbHXmom1MrLf/TZ4TExKz8SLscCK0CpdnTiOS1\r\n6Dvf01p//9n4S72ENpn0O/GWpCi+awfSj9t40STF6j4yN2M/baMH496dXep3\r\n7FbrzoHR9N+MPVa9fElDsvsicT5Hasma+VVltgDJgDNsejAHoIKnZJP5h8cj\r\nIdw4HmhBbfeQz3QQEg/JoEOemMdvo+OHm2DeMbpThQfFY85ekRIyb9eqMz6s\r\nsZfN/GwJDRgem+LQMEzRi8osFwQ0UO/lNG3HsKweuJVmItEz06dz1v+hP4Jh\r\nMHSLptxsnkpsfgFLRqyN8bZtIUmyRL2qctr0Pd/WfDJRCwfbjGJHRBrvYCtN\r\n/1dkWnXzHrJMygoXkVJrAl6m/JybVl3gyEQ2k3dBbs5/dK92GCGIYq5VEeZz\r\nMAWr318bAhwYNpOakv3pEkQPWx2QG8h+zvziqm2EvNuX62XDi3Z4lXeGuL4x\r\nE2kNSjBKAMQMuG7k0IJWc0SsJjoQRZoyPM+srGKInex+NCnB+7l9bI/DO/AH\r\nLqY1N69POlHzY2pll3Sio7WXEqql6IOFP2HjsqIrwJALpjHJ3JskLnA7tqk6\r\nal28khx0RTf0O9Nyz6DBdc1fFiXajiWjhsM=\r\n=Yj3Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e38ba17c5.0_1672785196855_0.607071503512268","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/card","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63e79d14effc2eca67d3510db82a625d115a039c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.49041a6c3.0.tgz","fileCount":23,"integrity":"sha512-z6R0H/DiOeKb3/0Oas2HkgugVh4TwjB+PI6iLYvCT7V88c5wph0/kgh8pvWFfSULaK5X0Q34IgbeuLdjKygJLg==","signatures":[{"sig":"MEQCIADmp4AC0iPggd+eEF1Rk5r7e/NBOBnXEtJIAbNfO3tEAiAQoM6D08yS3oKNz3qFq2hG9wAjg/0AChkxWAqkZckxOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZiqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX+hAAhv4TWlWIhvazojeqireDLQB3h4ZYuBbbJBfJKnsi1BvFq86D\r\nX7G3+LzipDNG6ugeEGqK7pxUmC9Lk9F5LtLnoa25TdVYm4ESuRdPwYGMlDqC\r\nOKLDU2O9DBXG5rne5fGrskrmGe4zvMmIP4EYiLx8jGrds6QA8u0MfQnzazeV\r\nGHI98Z7EIXszIUfQsGcSdzPAmONFIQjjlectsUHr4m2yqLiUCUS67mJoFYma\r\niLiOsyzuodYjbZUZ1vgjHj8VqQRjGIlEYJRquGfsQzzG3odXKgWJuEjE3Y//\r\nSsAZtOoQBsgX8AkC2rIp/W9DDVcyDVGMkLKo1ZxJ0SR7oDQcYCWcJP+QnhrP\r\nC+yMipEZ/55hUu8jgZRGpujvZOSQCeGxVLkebOFiJnt9l1fsqVbcOtHHyZ0J\r\nWJLWuz6QODXDvAKvd1qKD8fTwAjxJi7rR9lfeSTnphHSGXbeSmfZYNhQkP2K\r\nWtYrit+08YgeeS83byuA00W4vgNTdbRvXLG1uu4tblE2J6P34Cz5TaEkn701\r\n6eSaHQ9XKriyfS6q5OGf09jR95wqC+bB2+r0QNrLJamBRjDiG8qh7/nFNOzm\r\nnp0sIJS4SZZRiecprEZZMiF0dxRQRLZPNx0mSlFO1hOoiSnvsYOQVDb5ZvWu\r\n1XYop0f8NYc9bAuKAwsVE1ss7yS4He3HzDw=\r\n=lKwT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.49041a6c3.0_1672845482188_0.685815436221618","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/card","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c492898c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cae1a857b281bad8ac34f43f633c0aade3a5eed","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c492898c2.0.tgz","fileCount":23,"integrity":"sha512-85gyIwvKrkQQ8HPRvYH64fK6ZZhQlj22OnGrsQ5Dm7iy2uKg+uxjY8bur0WFvD1jta34k5MQybwmChyIxutePg==","signatures":[{"sig":"MEQCIEwXfcLJtDa8g2BEVI3Q5vBwZ6vXDIwodixt0Rr30pspAiAMAqV/uGnSoiZAg5Kq1HZOrI83OqGsVwypeQQEhNDuXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbl+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwkhAAo+w+tyKsMX/TaxhKe3GghciLF24JvQXlN3LYrll/23/2Q/yt\r\nboOjwIWUttmeMydyOsSN3pd8QxtndehawBffddOG7gkFTyxQN4vjCt3mj/jF\r\n26VfT9KQaUsgl2ri+C40WLR3QIpO9oU9xeG4doWSXBouogsIUbMyFEWiuVZL\r\nHxVQC3zX6r3V5Xul1z/pe8S0OUUtZjfPMuO83toF9E1NYEWrf0CWTpuo+hq+\r\nS3dCHUgHjN6RuoifzDBswxCYmfH46mCm3nPpjnODnOwV75Ikac9GNb+htfJr\r\ngCjAOLSK31ChDTGtEW8U10kqcxql29dXDdQfx3ELhZbPiA6I0VgVKrd/UK5z\r\nGmPlL1F6948ORj7SVgPka4Oq0+LcgbA2W6GL+AdmxEV/B/An3StYeRFnzZnP\r\nQMN+1FIUkB1slLyQm+ZBEP7Q31p67/3IVebOQVLCoWQWyL+GAJrMad6+waox\r\ngyTwTZI3tntokw82s3wDxwYEMV5sXxC3w6m471vnRMFq+N2c8lXJmXuhBAYs\r\nBFF7JOvGWVUJnRdypunB4gk4foI1G9JBP2F1ZfDSVvRgIqus+4R6f5q9dQUE\r\n/eQYKMbwWr3b0136H60C/4DiE8jLjDqvuPzV6Q6tgt0NBKGF/7UBnTcfsraa\r\nrDeoiJ6Z4R1kJTtRlae8/eAcoytXCf9Sp8w=\r\n=wOUP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/tokens":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c492898c2.0_1672853885909_0.5255224097829134","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/card","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3b0d8375f2d2e2eade00fa42213046a311bc0df","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d7a2277de.0.tgz","fileCount":23,"integrity":"sha512-zBf/FJY3X8Y4hC28oW6NGfo1PJliySXeGf0blWtcTq7FYOLA0f7BJFNgf7Ron7Z3bIae4WZGo52WIDlJaY7eVQ==","signatures":[{"sig":"MEYCIQCnG3tBF4TWG9U2PP/thcM5oed0iET+mdj/pcksMNPMkQIhAPWIiVhbeJy0uLEa5XpxWX2+BB8lnqhitlTk52yE0N96","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIsA//dWYkpCSkvNp8yNZtmB+u0PVzQpWLRD6KtLISAKicj5DIK68+\r\nBuecJUoNJrufEVTT7SYDe5Bl3NdPgjjBEwi8wr1+7GzWgVHQRwijkETPpGBA\r\n4uRSBmBXAOozDte47B4RzvyU+7g3q7C+FIK2TTM3pHl07QDw71XYdaa5YUGH\r\nvX7QkhVb3CRFpiPmU53ZSGkr6EHgkZUbquCGiEWvbSYqIPYl6xZtkJaYWFR8\r\nYV0NhJqki72p/raiFQyiIONHvM/y6SoWq4bRhhJKmBfx4cW5g3kjXdzZF2Om\r\nUY41N/LoePP55hqOlrRxccdp5U5or9Xfaiv94N4kFrWunU++sVJHlD7pBLQl\r\neUrDI8sPiXBCOR1TqcMnOYo445nt1j8pLUTQJCFzC4rBMNLHUFzt45A9Jeuh\r\ntn/Awm14cRUY9+OiITGAh6ojJAvtozqNhC2ZQqEzHDbU+JQoYJwXhOz/8kGD\r\n3XdlYGVgisUHtuzEXj3r0+ji7zYTRYiASMvnD3SUogHoDTAnfjwRoL/9qHRU\r\nqMgWQ8yDe+ItvRjW5IGG6kEI/bt/n/qwXW6POnL/rg2wcxZ7rNSYTBnAUK5n\r\napLCP4OM2JUyg3FfXm9JJzeNQNV1RX6x5KyaYIVFyOwRb552fm4ghKINbcPx\r\nBUWAlxlZ503JGY8ysWfyl76/SdOECnDr0M4=\r\n=fzcC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d7a2277de.0_1672868158831_0.43700236374353296","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/card","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff6e44803822bb6a8d5ddaf0bb8575efa14e4fcb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":23,"integrity":"sha512-t+fe6ICrFzY681+qGUwHrzHGv44Hn4xldv7VCQW7jxzqvz3pa/w3deDYnVdrzLVHLntzvuTbvJEzcqmC53vQFA==","signatures":[{"sig":"MEUCIFcwh5sfCB/LQnJFOukP0BUx5nsQtKdX4sJl0+UB0PjXAiEA8cLqNtSWtRI9j1lrcJsJf704DTA3o2yXCHei7cjNsn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSYQ//STaGruKwt5Rz6emRsGxRSK2S2dlUWwo+bxqULYJ0wubGrRmz\r\nKyME9vbHfq1MJXbpo+NTRq0tIbJKqvRKZEkACv3NzecQaC3YHyG6Qmy1ASYa\r\n29afKYUBmjbNLgMo5VPvTvKmL/t1T8vNDHZGH7/XYPsn/pwJTxMylxtsSbBV\r\nxOzp8dFjTH0viueSB4/SWlvXlimws0EPV+wiMb9039eVEpyq4il0LXtPhlm2\r\ntANCilErVvkn1a99WTq1DGTjoIV3BW732FKBJJQkFdrxy35wOKf8LORYzboN\r\nJb14zYROJ4K9jQ8FnQVSHroQjGHxrtNa713v8AkUCujZO2r4Y0xqzKRl+wja\r\nRJvHz+xoUqjc8ubr5MZOuxhWXM3BIUWSJAJGGXGVAXDw2eAqVFHoNo9YlGMI\r\n+pM/82/9kl8sJ7L6mbhVrUnxpXeB6hHpups6AwNcTB7AxVVc1/x7GPNzWz3W\r\nocTilxANlJpqtbIs4SKcvaL1n2bIM87hxhUwCj5PMhzpNsgLBh3R79yg+Fxn\r\nOqknpUlezR0y6HPz3SCtGrFryrzdFeeqnN8vz3fkF7deYdJL1vLrnBgitq8t\r\n0fqciOt3D1I98dvQRy20APSVzi+X0nRaGFAF5YP9atmyl9WYP0uWDmtsXiNm\r\nNVlRKcttui4h3pkf7a/9xbgtynK9MBeRtEY=\r\n=bbqP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.fd95ca7ef.0_1672880586293_0.8290384335684928","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/card","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab979a1f2cf2a4f89448e8c5c909449f33b02619","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1eb44faf9.0.tgz","fileCount":23,"integrity":"sha512-H4uf3HQuHYBjOE1eAWXaD8SvYnaXrEqMNCsUJwG4WZfTj0WAN1uD522iB1Db6y3RPioEPyyqnbjDUksKT4JKAA==","signatures":[{"sig":"MEUCIQDGOW60rYvsdhp5l0rzMjP76UyOJ0L1IgIB7DZn7xExwgIgebjozvQi7vLuoWY3aU5TPmBdc3g33SFmvIYrA1d/X0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn4w//UAn5vWElvjDwsYar4b4ftTHpQWKlLEeCum0mka7nJ84h1ByY\r\nwgBojlra6nrlAmLu2XASTastKM/FJWxCRqQCHLuGJttkXJQRq/xvzpwDkN7h\r\nLjOPOsSEc850jEA3cOR1Uv7HmUKnNCi0CaOXE2o0dz4BmsrsXGrUbzO4ksKj\r\npIQePb/kIS+fjmcN4zlExWIdiNFQpulv0KQSj/9geCyxglXy5hfZ6+/PnHRb\r\nHOoC480ognIGzrEuIiWldXMHbZ8rtoxXNdpc61QCAXEURAzaYMQusYChSfMw\r\nZ78HxrZORfHRcN59i0yCVj43r/4BvF3cvFAn7gUwZvHhGlWliKA41Y4kSYCJ\r\n/FqfkXTtgzh0gsyzztfdgIdVosndMvYEaWwA+OYmjjOxtBZyqxk2MEhc52a3\r\nuRYeEg86Y+kVP3h0ahggA6R+MtkGTi/UG+4yqhYU/Azga9A2KElooLD+BeOd\r\nF3e+BoVyUUitu4hj9VGNowJPZ8TDCc6bMXRxU3X6rPvUBomvcT9NU+yifZts\r\nYsde5JhNM8WpQ7h48Mpl1RiuLt6VKMmJ5Be/bKUJRZG5U4o5NapR7tqLW7xd\r\nI9Yc+ENRZ29562UMHGlG8au4HesolH7IoEw2rHBw/WkIaA+tAzFqfeIL55In\r\nK7w3hCIvTZ6GjOscYuGVzMRAc5UNEJ+YYyE=\r\n=dywq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1eb44faf9.0_1672909780905_0.7149111042584226","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/card","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fa31a890c4516efc46091d45e3a286ce7c8f78d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.adcdb7db9.0.tgz","fileCount":23,"integrity":"sha512-Hd95q22NT57LWokoOFuIiwZF9iSao4zY63La2xQ4IAJ+gfkcMuk1JtBxBSZMeVQk9xevd0lN60KItNh+Sfzllw==","signatures":[{"sig":"MEUCIQDuxT2vBBAn+hIHHZPGXdiS3x3ccfQDzYTQDabSATSlZQIgbXkVE55Frk6TuS6wdC1iHvsY3HwfXPnP/FSpXwiG+Rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvlNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpokA//ZF0AnPZ6VUknBjqReEIzApOyoED1TqoHlobLceZx0zt4XbmZ\r\nBp9z0Jbh9J4/BZQftmHRPJXvXsZD8ORLFbjwHqzJwHTA8zzij3u7VFdz7Phl\r\nK4qCnWA311Xa59OL938jfmhoHImj1yDse/NUwm+NeVBimHfK0HA0gTdRfOwg\r\ndTu1SpER/ggR4NGb5x6GGqAQ69Owl1lSlIYvNvsvbSdEFlBu7LGB9zlbtUbt\r\n43ieHyfOw6m+ykGXsy2VdfgcknOFgIuSlW1W5zF9Vg+OL03dbi18YKw9YK2N\r\ndqC5ht1rPMNvyGK0aGVO6H/qanMaZmM0h3qJ9RhIoHGsefZd/IUEmO3Pjxf8\r\ncOW9cqOkS+mdQRTJExOy9F3qS+hpvNVnhVq+9LPiEWR2LY5mt0zdvjqYMeR8\r\nKU0Nnym5HGVLCkcQovX+mYotkEGYEfptXwj0TIpk89gPspqqT1KTa4XyskI6\r\nBoFQl7n4iHK0jxeIFDHbtAr4BnPJIUcSY6MUtlN4BJ7pf6IapPNjHAHa4/5y\r\nv7fT751/C1xpTYrVP/HP9wmPMOwdCpkzZmEC2f9sbiK2d90HtCxrtCrigCJi\r\n+310GXHMAmYkMOoR1TxaFcybTeZiMNYK+pXlANhJ2tqBicNqegnL+bbThfjN\r\n94csiiNBUDsf9V/n1ZjdgdOP1cS0HZkPcHo=\r\n=yOmk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.adcdb7db9.0_1672935757108_0.7869312358873481","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/card","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.067af7eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2353a3c27284f8d879a0f28640d3eda4d1d3f8d3","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.067af7eff.0.tgz","fileCount":23,"integrity":"sha512-vQcqPDlEZWJ3T+1RZJJG+GFrXA375hlpj/WHO6+sTwW+BnnlEdCli2FPK6ys6H0vf/vupBt6ZABoVdQsNJx7WA==","signatures":[{"sig":"MEQCIGP1c5O/JsM+uSuV4ISA8/w9/urBMxxKuHjorMSGhWbQAiBKcO17iXVrktBr/YfeXZhdqZs//Yeaq5n28z7ZSIf4Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx1BAAnLR7hb4uQDfwNJL9BGdQ1k5g2n8XirbhJ6KF8dKJwBLBT8/D\r\ngzhftO+/yVZlO0XIDxdwNWzJrj1B8qRC4M9F+O3T38xBq5OR9rjgjjD6b54m\r\nfC0IY7gQFU22WxPuVCOR6gCdjy1aAtuORQCHt8LNRLwxGfj4HpdUWcXjnTrH\r\nK7ElLQ3TqsmhP6qvFJ/+PyEiwZ/E380GwJ/PlkaNYjE6uR3fUO4ZRy/T3Iuw\r\nS0XeFtjgD7B4urSbu5Apzsl2Akl3b6CtpLSxEcSwLbd10R/D4hSnzhpvU6KD\r\nNX8SzCnmejK0akYIPseaF1GPPkj30Ou2frRyZBdUBVHKZl53t7PFTiMGvF48\r\nKET0sy4AQ8qolSqgU+T9ErPl3Dn+MFoZ7EfMrWC8j9B2teLS5Nufd5uqmq0I\r\nYRX2Y9PVAY7sqds2kI/TuG7c+woUSHAQivnNdwfV3OxI1Dv+Tr5+ryivJ3Yp\r\nXW2QMmV/IHh/4uMXZfYynTRlqkzzjvedl2OkhWsy6dQsbWnnNDGExkCHGrJm\r\noK7m6EnnC6gmX18JIsU26FnzMniO60r8q7dCTgsxczO3q3SihOqgr59X9TjB\r\nEyzOsW4e8TfZogiESYy4tRrJ2BBg5Brzpi7ExnxO2SwwQTeCq0izwsJfozXS\r\n2bzM4GmT3YDBoGQk4D6pbxZJp9SP4nA0UJI=\r\n=vjF7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.067af7eff.0_1673046986355_0.6499726342318042","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/card","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86e66094fa946eb6327b1dfd6d902e9eb2867019","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.21d1196a7.0.tgz","fileCount":23,"integrity":"sha512-yzsGGJfdUwcTdJMDOovD7T6/bKaueLaxtyNA4/GbLd4HhB6wefl94aL2rDcUW/CGBrZf0l2r5LCNuG1zPMzPhA==","signatures":[{"sig":"MEUCIDIQQ3nt03jOBdF3qJuZD93MZdidnkS8yU+hiGmH2CKoAiEAo7rJk/yZ/N4TBbD146/cafZgiGzEwbG+rJjO/ObC+k8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojCRAAn8GP7UH7hdUsh0Xp+XICYQpjMJMmYJpnJUPLQdWThlQFFE8B\r\n4WLOTZYs8K7JH3fp50ZWdPZXF4J0+f0vc253HLdPWFPuVI4msU0oGHIHnMeS\r\n5zK17zp4vdLjW9jFvpw+RiCfAepzbLyFbeOCaCjKDte87ccwAdnSpFEuBdWH\r\ndvoea7DTn2h4Trg0j+MzymgPwxbGoHHWUX3l7uluMRUOtEnRApPdhxkrGCXt\r\n5x9nJ6dHHBw5aS9M+bPETQn6fHat7LotKmetUVsaV11doXFRcnnZIRv8KUNj\r\nH+f0ghwlMtcD4QzSELq0jgZdrcDesTqnHRTLChgbbfOmosfw4IbWZNhLSxgc\r\nJMc1F5tF8u764drw1mb9NBbZkmEsjN01gUFXFtKLNBJt8RLH6Ubg02omtLxg\r\nM52YwinH+Mw5xibqBPc2ny+WioG/SdlKJpS5hpDQjmiXmEQ/iAvmgm9y1ltl\r\n1HlIuDLIaqzJRFgBifKsn8E1DhxrJbDT6I3bZqhSIJB939iz3JfQrmUJSjE2\r\nW6J1BPhwucyDQukI5fN+PHre0prM1VO7YhkOdzZhKCQej/Te6h++QK7+5RZ7\r\nu+dGBUOQMLowD7vA1Wt65k1M7E5KdmoafoQIEqSINUYkfuegLEeDkebyx1dx\r\n831fGFmIETfpvcc7ytVH5NQW+2PPzd2CbWQ=\r\n=v3Jg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.21d1196a7.0_1673261043014_0.4870330114773098","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/card","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92a26061ccf591eaa527ec4d85ecbac5547106a0","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":23,"integrity":"sha512-7TOYO6z+ZWQtkmNY9PfiZ6uyReQ7lcw1j3osGJCQ2B7XBW1Yy3aOOBRhjXZYAClp8SjDXW0gRSqIyGbRfbsFVQ==","signatures":[{"sig":"MEYCIQD/EJui2AUhiqpgZtIGjS03vpGGdEPuvT6/66c/VagcxgIhAOlbDOWbIqlP+BYNP8qGlF8rhlBsJs/Ylo8+DHf9nAE+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCWQ//abo+++3eBlwYuc/fqYO10drV1awbMy4NHUQ8IDLL7pNcq+vZ\r\n9Iu5UBV1j5VdqtmA0mL+pnfQvm40hldGDJ9l6A9OgcJQB7Cnl4Rm1puh/K85\r\nv5bRe+27nMaCA/FxwsljTHichHWejDZ86EpZlBx7V3t0WYo9/pKh6XIwYNXJ\r\n+bhBzXkbI5mOzvgz0f518Wy82KPUKKfq8uDQeSarvLB8iOSAzQ3lPLEqWFlW\r\nujb0EtkzgVce1+nISwqrooCd8g4p4YxFq4NKBIs966gstPI42gMF9U6u5BO2\r\nr+G7Kxfnxr1rlkrhmT/6/9SOP+Lp8GU1sUqJK226EYfvw9OwxJUZWK5YrNvz\r\nbPf0CJRx8Tpsey8s9Nr/72P+k2hsfnaOMBGcqxirrD3S8Xn9gAmp2z5u6p1a\r\nuZAj39yyArI6TXJ++hXShc6cYmFtaHdhpVETih+FniPyNgaLFf3Yhy9pdUay\r\nrwJgtDsXhkIFhks3pm83Xln5dwx6nWLNTh6m7IJKTFgncMxSwlQE2PolVhti\r\nsTMD6ZJ7ufvi5q6sRyDj+Vp22hT0C120CCvhmjlE3vER/mxApZ3pvflWx4Rd\r\nyRcf6fc+iRO57EukQ7DYswj5WFs+e5nffIyeogR//QNnte1V2VHde/jJqcyd\r\nY2TRBNUGdZdTFvSxTVZhCgNt9T/bnd4jBeI=\r\n=o5ge\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8d2d8d3c4.0_1673303058244_0.7067393683114569","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/card","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3dbc7e8b0e9a458bc255374873abba82aa099cd","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":23,"integrity":"sha512-mnz/nh+m0p+y8Ebjq4s88mEvu5o4Hp1d1MZ4ozEoxitGYprk+BBoYDdhysOh9/O46J8kNSv+MiRXU8Hjq/cebg==","signatures":[{"sig":"MEYCIQCgzEBDEggPBveQ8VXG2k8Bc1u8LySD0yco1gfIzlFhhQIhAMUy7DG1U683IuLez3PJoi4JJ4QlZzf93pw1hXN+akA6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZImACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPGg/9Hs8S5cpv8GrQexy1kYnrwzcQILr1aCYwsJQ+1To6MLMKhenX\r\n3ucrwn4CUwWu260LhX1o7zGNAxK+ZzhiHYj/1vlI4jYKRua2rpnx2iuZf9rU\r\n9uk53TB3RmuHIS6vmkKQ23qcaKI9NsbuzbbU/IheiaUMC1QGVeNFX6H0zf9j\r\nnQ7NWUZnY9n3Ibn5W5JCNKwangkmVwQWubym4hRLHBE1rszOdBqwZK59wNUS\r\nKXBQOR/k0qyCd9KMGMLXj2zCpI7vGt07mbaRqnjA9F8tU8zSKImtIepn6r4C\r\nB/40ZkApxVkGfbLaBBtJvg8iNQY1E+J5WWVQkoIEc3l7U4nTuvY3olEQHJT4\r\nH0GMmS1IamRIzlrxwFHgmaATKMvnaxVqkmHTp4P8Wp2r/YD8f9Ux9rUfuBsd\r\n80r0k4iFIlRbWBkJZKwlZNqR2qq6/S37KKG/1Of8o3jxGF3TT9HXKQfHbQ9f\r\nx04YkngvSIuPfKkLVsAc/zAltxMfqPpWictKXY7WLQwQAlR6JybzQyu8KxBD\r\nZsGUAnMevAqSbfulPf/zRADNv3MoStpuF7gEvztlqE1gmmgrlDjYH0ZzJlto\r\nLZuonl9TPdBRnFzdyPrAsh/8pZPDhHIvEvpKVr/Bk8UNo3FAGOwzOvAKmrUY\r\nR6unICOhcr0+f6cbYz1oXyXCTHt0iEhSqRA=\r\n=yWpT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.fc6ee6c32.0_1673368102372_0.7066868804181818","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/card","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72d73c6d667d7169534495d89bc3f3cf70add377","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.73537ab0f.0.tgz","fileCount":23,"integrity":"sha512-aiBogI0OH3t3fASNEd010nrgKngi450Q7cKwlxxKsi/iCLKu0YGPPyBXM3Iqh6buPuTAnW7NVWqvngw7T+F8vw==","signatures":[{"sig":"MEUCIQC8bMyZp4k3t3U3KV54SUixlID5EDMB707sSzS2hBZdswIgfiMh2c6Z0ow4LCm8yJxfTkHL72OLq/VPQoHIw/9UWKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvapoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4gQ//TMlxmYikxHgFN9rL82Eyv5WjuFeaj4SDFhHjfhRChKgobiEO\r\n+UGwtLROF900sxDjwM8WU7W8I1T97aCY8wtuscnAQY1WCAjLdUDJc/JbXCk0\r\necikBHJocG9E4DcFdLoqujzsRppkjuwbA+FL5wJ1b6BF93Z7zFgZhwuu0Odt\r\nBljsER8RhV/4WhhzcSJOUFRYQfvThX2sM9fw+AT62qbP59SxI2ytEgkQmB1i\r\nQokNEAVGSeBSMGX/Whnd35usLJpzQEuXVgHKIRxlt0DCKbc2d2zS7zuNXNq6\r\nMWy3k8d7n7Dn6UpeyXdXkodhY0klSF40IuvvYNks9d3gip2gWzZGkI9WGudt\r\nTtpfVZmTb4Wd6Y7bNbMGLc+iTBYLhj+eLuz9h44dI1Lk4Is6aWHASId4OpFp\r\nzv9ocG/I9W+cIEhNRQS8dDwubaxsZxQoQsssdNU5LUIWk4YThnRb3mqStptb\r\nOIFzhmmqxLP3/YEwYemUTxhLY1MLKZzI3K1IMFc9YNG8fHpI6M7daHYNEiGF\r\nn00Glh9qWzN1bc2Wt7KlYCt5V0uLUpWikDaLWB/GLxcFzhi9qbok8KAwDBeD\r\nf8sCDIkTI1yPZD06LjPC6fZvEYh5Un/z4IB8YsuP/co6FNbrbp+c3nLqnqmv\r\nZ7b/cv8Y051j4azPgrXUCpAXg6w48wK+x9Q=\r\n=xzbg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.73537ab0f.0_1673374312612_0.9163201455735868","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/card","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.684e33d25.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c4007746a93422c9a010d27dcf25d7176edd72","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.684e33d25.0.tgz","fileCount":23,"integrity":"sha512-xhyB7XX5KkEiCEqwSPkl58ZGYL6xFdnY62zimyBXJRG/Eaa0Swj3kW20hVCpt4f7c9Zmp8Se27rg8vnKmhvO3g==","signatures":[{"sig":"MEUCIQC2vFtMPn0TmSvC9iAuspKKXF/2NyfVgMYAy5Q9GMttVAIgdavblmLvpf9PVHUjz4akpSceOG/31NjM5ozd5SxjGgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbocACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTQw/+Me6XDid/lXbJTGg24bKEp2VtjYzlbEgFNWDNWXV1pOQkHi8a\r\ntXF3ZD+QVHpK6+FzSpHmm+GUvJ9RlMehDqyBlGJqqRj6+ZjAbBnzqhdzASd4\r\npBBfjKj/Dur6djZbzm7aFXmgRUQ7VQfjL/kX5+Moui06QF7L1Fwq/h2I0MeQ\r\nx67y7jeBGcMGMuLsJpT5+kvQV1xsyF/2Fsu9dsSsqr7DrrZmIMLNXUQai799\r\nDxe4rm9pX/yVIdwoo/LL8qAcy/O1198al5MFNrywkWxtCZBjGnke9nWDyjko\r\nLjXZL339KDPujudUMp3zJ4ZVpalV6jf5zp7WIsYmpG6/LU8BCraLaS2NfDsV\r\nrwXB2LzuPKFw5/eZNIW5Jo+UV2mh/9evdifA8YqN4DeRwwNu1Lty+W72jZO4\r\nE/W5v/S3P6WPgHuOQ0XU6AbCnXmX1VHuYK8C6s9uJDt6GBLjgDdF0IgJsvxU\r\nvJzFvt62I6G9AYPIWbwF5yKnsyhKNKjIZ1TmdrbUs5iMRb+UVHHYQ017Wfi8\r\n7mjlxeHUTOkSEZL6sz9RHnSNY4sAnOYt7bWonWVbI+lcZnNy63iS2YWlGp3u\r\nsCXzWdN6dTZL+Ozs6MeS5RZ0JOyPDCaEOj6uUFTpXCeAIF4w3wNY1+zSH9va\r\n1mrl4y+JF2iwFObePZDfnV6VxfB7L+UsSeY=\r\n=Tp7k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.684e33d25.0_1673378332201_0.970467851272665","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/card","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f581c8f5897e3f5140fcfc8065e42b11e4b2a564","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0e89aab6b.0.tgz","fileCount":23,"integrity":"sha512-n7/W0xoSg/JsqD6aEgJDXt94DkRQFzApEyfy9CqVF2R1xuyckllRT7TaKaHf+mFjco2WhL3/k9C4t2KZb7qBWQ==","signatures":[{"sig":"MEYCIQC1aMYAVfZSuoUcALKEb09AykmfEWq/urrtGbsGUhcRRgIhAIbpm5Fhe0CEfQqBdhmHIvMaEizQw8x85qdDOtKqb1EM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuFgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0zg//VIDqNMg0/5NDLG50S1Yizl4jlGDFL8DX+CeSOrTMal05YP8Y\r\nxwC8HBzqtFrKBTwPnL2hOPVcghO/JYiU634z6gpTL5V0R5uidBagBdIVKQdy\r\nV5POzlT+O7Qd5RyjBfvh8tRicu9NKa4aEgALnT0fP7N03+m8tCjif3lUP4JX\r\n+LDoUKfxV/BWciI4jUMAxeceP2SlHxAhqCieWPTHn+ElW+znKxKGy6PFHl9X\r\nmOCLBk3R5dC4Oo/2oNJshPcZZBWD80hCwhz8hwaZGU+pbk99O6y+ZVbxzpqt\r\nmFmxKyE3ot4KGLL8GWchBsuC9vDRdHapvj14WwW8DOXNqTGiUicaWVgSi7j1\r\no58UPtVoklLICZ9QTYGDzS1uMV687cAu82HOlzj1bckUjcmvkqvNx9SCa8yh\r\nEA0/r80I+Nbwaer/fGj9OxL6vziJQ8CSbi2AT0ggIQF9Hc4vgxymxo22yY/G\r\nKLH3v3mzb8nxwPuEhF7eVY4SHgK9V795iDs3OB43gJtIPiOcl7b5NFTtKNqh\r\nSAiqXsiFNsZWDkzAFUd5pXRDjg4NlgGQd7HiLKjdMtMVaAF4i3LvCk4NXJVw\r\nm1LVxkpTvBMoxAGZsR3wJmqhzLr2wDpX4drOWuDiJPpRPP/LCuPutWRR7sCA\r\n2qM/LgvHvOFUVzA+Xh678s/9o8rD0QoEiNQ=\r\n=Auq6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0e89aab6b.0_1673453920603_0.03199733791145909","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/card","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4b7dcdd9252617de486f247205557b093f7461f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b0103d10a.0.tgz","fileCount":23,"integrity":"sha512-FNfT+ToxJg0wP7YxC50pjl/0+hDLcdT59/s+VUqaK58JxOCPZXbdta1YiZ2XASOhUohLGu/GfTEyJW64MxUskw==","signatures":[{"sig":"MEUCIQC4xJunuzUDlMxV4CauLufADeaKG2/JtQVe9jaltHljQQIgQdeNsHBuwk4kPHRB4cIArjbQtkvElNj/H6GHueG3cK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwpLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+2hAAnQOKYoir/Fwruyo5qs/gsJ4Hme1LlpAPgQqBcsxE5eApmZ5W\r\nTeuAQDpnC4f9jV+3hzlotHcA64J2+A3XMKm3MZCblsNQCg9A4PFLyo/ttsdo\r\nFr8LABx5qknZjxkErlHvLaNjegtkN9vMMCBXVODS9YrXKDkSHgidMQVtS8O/\r\nB/QHcP42rDck9SM78asxN11gwGy9Q9y3RVIqOWLAq419cIHdjH2o9doTCvbT\r\nBrEEPzWQupeKTDWi8vOf8JpGUg9fxVWpb2SpxX8rUqupb0BFkHw9gGgAf/K3\r\nqHucLeN5D0YfiU4fiar+0JecY28rq8fBBe9fIAsQmMCsEn5J+cHYuOXmujVv\r\nKP4zHS2IcSqCb0ZLdW07natP6FCkOQmg1c99bUqaH9+3Ta95SaRcx8Til23Q\r\nwig54Jj3+F+cDffCW32W3g1c4DWRljolNvKbdFByWWlHP5pl8mydWd4et419\r\nmrIf1MJPE/cR0WVgFmZKsXfVwvEnw/fNwqy8HYaL9tXyBqJELkk2gusWDsR/\r\ncWt/rl40ERuZuTMzX6CRrV1WkJZNasc4yX9+80rrNq+Lw01pc/lZgo9HVD0L\r\nZBdzOAivkyrcDqvnN7v+fZ2AjiEuj9A8LYSpJqOBuN1HGU752r/e5djBityj\r\nynGWEDckrifsqDI9AHsJnF1xcDfactmihbI=\r\n=NimL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b0103d10a.0_1673464395684_0.6269674794594435","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/card","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26c9d289577390fcbac9244fa82f27ef14a3eced","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.50e7a5312.0.tgz","fileCount":23,"integrity":"sha512-KfTw9PrdNYnK16ZXvDpchIJ5R3aVJA9t70oCyiiefYXsZu0ALpDYsUKO9R6aVds7AZtGsUjqQ5PCF6JtvhMQyw==","signatures":[{"sig":"MEQCIFyJ6lcbn3SjnsGUiMcQPvE1Pd7rib9w2mbE1Jjm4JOJAiBp902efxh9M7vLPB3OPxHoHe2d5i9UjmCPn10IQik+HA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyILACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWJQ//fc3KUM0Wr6S0ReJK17zoWIN8U+5Q1PFJQpc1fY5v+0jGooay\r\nUORZiUw/zMt/WA92MtCEOzcCQELUNOYtJqbPgjfPdwLxCC74/cVPPCCzjeov\r\nkkA09IQU5MDDkXCuT2v3lvVXvikUSfLBMzA4eCru3Mcb9MonPWNtlU6huuR1\r\nzyHyFJlV/zIunCObZgMFnVjrSn0pvES3qxVGLvQeO9XGb/oXoh6B/HTMxZqW\r\nRXj6Fpfq4YSj27QGpu1VtWLM9DcV70FvoOL1hzlY9BRz8/8sUsITISgPEFMC\r\nhmKOeoDnA944lWkUni0umyvYliS5Hv4yNrbRI1N8rlXI2zKlAXxBRqh4aG7T\r\niuRFsMSJIBHF1r7LQXwa5fEzfiNkQcO+ociSRtvZmFJ38zVnzJNi1QlHe2Xh\r\nY8jxtb4tXjmtYUZLhqeZfLH/bJE1Fx5bdIc84r2gOuPtdR7Px9rFQI2/Y5rn\r\nNrzqbSHGrRxPyPCnLUKTxQ/x/xtXRWqoal0P8CyNmSywavh6+m2M+mcuX7G7\r\nydx6e2mdw+9BYmuGFtZEEaYHI3VCm3xvBe/+cnBMLjSueHfWVDNBATWFjKXv\r\na8CZgP+eg404GqvPdeLDFVFrwu1RMcR96PWzfC4GxL7/U42JUGCYg22MUVWj\r\n0k0OnzXT202yKm+2oV7pn8y/utazpDp2UPo=\r\n=DYf+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.50e7a5312.0_1673470474918_0.8735330768683265","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/card","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.202823f54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72604da5b39c574f9cb467af376e1e4b18adee6e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.202823f54.0.tgz","fileCount":23,"integrity":"sha512-0bigzQoTrgR8iAjxrHofXrnvDRG+4BYKrre5VG3Tv5JstNIz7xcoZZTVu7Zlvlvy4C9IKwuRqq8FsWYNn2OyEQ==","signatures":[{"sig":"MEYCIQDAY4iGSnvRr+2gS5xoz6vnvDx7P7m0hKAnYp5MDcAOcgIhAOAbXdiBksWh3McnktK5udpwkkwfWwrxmYXN7I7iLjqW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWpRAAnfExfPK4pGXBiN/KPNd5Fe8aCA0tX8I7cS4Mz5v0AmLCLJiw\r\nQpDVvji1Q//tWDqedMu4izg1EABrRSqV0sg86o9P0+eEAIEfGRUsqFrEkjm9\r\nQmna2RsWJzWX5QD9TeO3ERcCAgOQsbCaOcI1Uwe4IEmP9XsDCn+mM1PRDN+h\r\nIEDLqoixxeo5BSRxRiTFH/iYavT9l7K8whkL5jf3pd+ezRqByDMS+3DxtwaN\r\n4eQgv19c0vcexXGlkGnca6bT6R4p7+CTlqUpdpSceTZ4Fofw1z1GotwNHVlC\r\nxEKz727K2mRoD2LB+1gHFegWQhSGf5uJDDxql0oHSzMw9fOrbingA/NSEfw1\r\nxzjq/r8UelFBmW6UVvLvntHs+FnR7hQRO/pLWXvk6x8ULjC7/0KSCjUNMItY\r\nGHh9Inp+WNGB6ysKNyZBUEoD+8Efhc/GIUY7z+C9y6pv9Fo0Pw/D/Pv1WX72\r\nfD4iXyEqQ8CRB4i4KMCXYvgmFFTe5J2u0wm9EY63vfUJpsr7b0IjIUO9e6TG\r\nv0/tcH9qDAUgzpzQC9WJq+LxPnGuw4813E2QhO6iAULKh8XW5L4sBHMr2rPY\r\nwebLSkQeCYe7Kq42vUWixVdIl5UES2EDDDh6tPwEBCqX6rxkRYgYIc5sF9RM\r\nH3hPPZAyGA0BQPtjC/nil9MkZGbmRvjtkIY=\r\n=tknB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.202823f54.0_1673472965001_0.27179279442965476","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/card","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8bd7d810aa92baeb4fc48bedc50ab3a917f19c2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.199fe2a2a.0.tgz","fileCount":23,"integrity":"sha512-SYfVSwLNADHlcoiqdIo0eCdyH8YIoLUjue7YAyZLmuPG3G2uq+ohcck1I3VXmQl4Bbid3h5jpo8ORt7vhiYQsQ==","signatures":[{"sig":"MEUCIDkmDyLvhRx2DChygTY/n3HuWzsCqnjipxjq0zQP2MF9AiEAgNFrCv1hvwlaegoCJOrPp6+M7Lmaidn9CrVN63bEyO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzBwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQ7A/9HIkWsNM/BnzUoY4N86TXMa9OuwjWZAfO2IzKjsAWbmVN0jOw\r\n3YW2mGt5N73Qa+aTReCi8OX6dro4cOSEhtyxzBW5Cv1tkHHqTM1kUK3Cs6vZ\r\nWb4EM1rH1YQo7c5BH4jE35N7bVX1qK3tCjCR45EoYb/9zToqVlyrkHKj0Ec3\r\nQ5ZMBlrsK4VNnK571x9ZWKnMOohIRIzpFPT+HfkpyZQzS1tN3mXmBT7Fm2XK\r\n+j+YGkLEjtMgEiWB+jOiqeZW8GmlHn2KxofoebjSUa7Lrdp+pbvlWL9wocYF\r\ngIi+idWBShWYSChXqCYihVI0XZfyVw42wjf7Sb19QevTAjggwqPzWE57JyqV\r\nDq3wKcKtTHJYswibgJp8hU+pLzpGL9rGv8sNSaEgT2o8uV7s4sWVXj9Hezdu\r\nB2GrRbK2U7s1MY7pnJUMzIzmCR6k19QhaNGoZWexZR6nUS9VijJK4d/kb+eN\r\nB8EJ7H6cRjYCwX9OXVIyNcVid63Z1dpmuoAPcAIJrBQllD67/fT5SZDcGaRi\r\nXmg+yu7+XS5PDHBZq8kM+cJwCbdYvy+HGVn5Y7jJDIe6pe+u+ArLFQwzvykT\r\ntIfvzrEE6qO06pdkee/fiXEVPsTwt+fovUwhtydmhrTxc6hboqBEfVeBkW8r\r\ndojSoOMzkSTvPOXr1ibGc+qAykbXyBCTC6A=\r\n=GPIA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.199fe2a2a.0_1673474159780_0.3687142520980944","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/card","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c192b4402a3c44b12f74061ddb5c2ff1830c884a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8c0786d6f.0.tgz","fileCount":23,"integrity":"sha512-1Li0508J9Wk3gcot3Pd99AQlGJb1vFwWkM9R0qFn8qeNML9An9TBQPovkZsk3SeOPODLZlR4ehQ37s/gRWEo3w==","signatures":[{"sig":"MEUCIFpdrfIydlGL+jGZVSLkOsF6ljEb4cp2JfWs0V2lrpOEAiEAqppVvv/u1ngukqywDc3FzJ1EoKV7HBe/oueh4Tr5lR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBr3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpynw//Xu9svP6q6jSkqxKN1vfvye/rdDeKgphAmcSz7W1SZ4ZiO4tt\r\nmRBUX/CGXRC+mhMMODxeisXpCZWdfjWSB6NHuO+Jw41oBVkOV/vHIQcDdLkj\r\n27ogixqrtrIND5EB8aWwoBtgoLek/BY2F4Ccix3EwoMvfE3XstnkKeMgioBz\r\nV9v8aByiYpdEO/7N1G3QFjhGNzKzAZfgLHEVnWRMg4ZQHwZox75A8gBlvV0o\r\n8SFDVzshcniGGUgqYmDnmJ4L5+Zbaaz5oQ4To2nXqHFdw3OxtCmrkSp7Vj6m\r\nkkjfJvv3yIgOIkOeeYCxX2GjX9fz8exY5cQKwgVQeg50jMjMS1+dqPnD26TW\r\n3D8qlMu0nQSCaCxU/jmL05HyPsloez1nM7D0Ec0Szp9ZhyixFvgikEVzSOt7\r\nP70MlGaJNgV4BZsozwFpkQkI3P6aIRnpSgE5Qc6DtXfJJkp/lFNhNBiIBrhN\r\noJSdPyL4QLFt9psm4dQzEj+AEb5bePxhaslLKJwTJ20v+bpFTg/v3tV1nAOj\r\nxEpETBkCS2cqy8ZI+Uo8OW3upfLPQIRVdpOJjiETauWaX559FR4ncHG7NMws\r\nTePDYUBELJ+277OxcO7N5OozDjmIEbwqkYlomT0nAcg/U0clnvRiRN3NLRpE\r\nCS5/sYp7YoD5APItaPU9eU4Cnk2araivmeA=\r\n=PIOt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8c0786d6f.0_1673534199455_0.4595938064508669","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/card","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"343fa40cfb758c2cb16b646ba35cec6a64dcb886","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":23,"integrity":"sha512-BwHmKBvnLM1GN9+7ILGHp39g092AZ2Oqtf9tkCLgiL1KjiFOrCNNXLUmGrJ511v91EiL8obf1AmC+ybyWfcDBw==","signatures":[{"sig":"MEYCIQDNIKws0qpnfBU+TxGKQBC+PFzO0Yup4WNjvllVXQLamAIhALzpL8ikuq8955bITUIOehQTrItPXDuNBTAwRldW/Vk0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQghAAl1ZKqU00pP8xypOf1YrvsB1a5Yfp/iABKVTAIAm7M+MQ2Vl1\r\n1qkLiouh4legl0IRCiW7uOia0xmCDunG29/LCiQaBXAGPSef2i1YwSXuIu46\r\nJ1VOVSBkEtP2Xyw1aENgNQwNopb34CLuSBfaFyMU+1zgrumPz0PMhFFaToq8\r\nS7dHuTIsLiEuq83b/Mu/xylqCuPgDUi6UHdK+dLCg/6M+xGu+2Q63N7U3c2Z\r\n9Rc4HoasdgVrlXesJnkqXGEShLyJqo6LonzArdqu2i7/h2QcrzWEl0z85ycg\r\n3Pxo/4NZkIf6YufvUuf46aEjOHjVHHkgfrLCYbwtZgM746DsXq5U6wD3NP4+\r\n7UF/pRedQdgFOlawTRe5bCJiq0Bpi4gOTsYWbUn6TXjr5neH83XmCoNl9J1w\r\ni7qNYMmoT4awBZw4og7eooS7lT6JAYt4BTIqKvBXjK1DT9IfdMvEmrd0c3dU\r\nYOWIBi1fhBImztclhQ6khFluHZKjj/BJILZ7LT5rUgSJcRye8rPb2u2pjy/v\r\nsucrdDAXJlbKEygy6l6IQNrhc+2YiAtBcEeSGrRrqKYq6JJLmFncEhhk8mjD\r\nKi0xk1tcQDpN06pXFwcl6ugfY1AZlyHOHRAVEk/XNW6TVC1FeXoK3JGe8XWG\r\nFvd7HhOiuhPhxe225+VzWMMDQOYFh5m5UJ0=\r\n=xJEb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8a74f7c6d.0_1673983488694_0.883232247871157","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/card","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b0a9fe3c418faba56e88e16782958c7d7331fb1","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b4687fdc1.0.tgz","fileCount":23,"integrity":"sha512-AMMxck2j2/n0Qp1TzdCzI9DHUEwvp4eFah4CEFhtxUnwI1v9W3ByK4badGmUZ/GG+M098L/bya16vRlXPEu54Q==","signatures":[{"sig":"MEQCIESmsawHOQzKhpfAFuoiqpslHqCwNREDVVi+EpeWQf22AiBBFpcYX6XMoaEgVwZulaUHoy9qOmLn4qGSl7wR2m2Tog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlqA//UbRlrcUvHw7GBLwL09vd/4VIcp06rFzj2ib5riM+qRu9OoS/\r\n+C/8Ca314JuUjanWwVkX95CHenSR3EfMadhaIn9MjNonaTjkmBoJsq0EiMTq\r\nuWyY3KnYUlOTqQda5EgJz65NB55w+JjCCzyaYTbmG5+FI3vNaawBxhkvsFXl\r\nxHrU1J4IoKVDSjVddUYQS/dYu0FI/eeodIHnvFdZ5SxpR/w0wT4J80UdxEos\r\n78YKajH8UEkfeuUK6yQ/mIL2VEWFpi1HwA5mXTNQyVkY13x8P1f/jXqQ2EBx\r\ndp3B3in7AjPEawCMtfSK18kXwL6cpiTVaxc56GF7aOWJDsEuGHkT9hgpbkCR\r\nvqWMx68G8/2SEQ0wcFg66GPkWdsdS8DzPZ4CpGvTvmsCxbKS5+X97PnZX/IB\r\n1uFgTaY/SfgBFxbiyVOwaFkrQIq/XxvZFXwkeAIkLd6JiFej2l6l2Oi3VNqN\r\necqhiytHArGOar9HiJC9CDBV33MSMquDUeQEMTsqooUIMdzz3vmDSxQb0yov\r\n2o0ySggg9T2ZJYl8W9iOMoxOfltdEogXaDDX0uA+N3YvT4yiZaXdjNND21ZD\r\nCNbhxX6pnYN3chrmPfSwS4qTiBU1UpMFOEnnnLA9bhDMiR2vXn0vNFKRGjR9\r\nbrKkNGfBYoxSD+xHaAr1bQZx+f9bSOtfukc=\r\n=DstM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b4687fdc1.0_1674157776504_0.029108725920817813","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/card","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b836b9892.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"491342631fbe05ef3b69c2c74adfcb8c0fda118a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b836b9892.0.tgz","fileCount":23,"integrity":"sha512-5mkDi7gL6tj554m4Id6DmJUikE3fs4Nkm8/UK8LJDCwiHXb5Qdy+hagKlpdcW7WxQCKfUzPmjL3PzkuPnpYzwQ==","signatures":[{"sig":"MEQCIAenckK/GeyrxDnFIoT2TnU6gAGzqcYpl5y6ygvzPQg5AiB9r8BSBfdQpWMYS8Ens9rbVP/78a4UddJHVLfzl9aD7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGJg/+J5jGjwhvCWpWNdnLLEDSbKecFhIyUeY5VAh2JHdDakZSaQmE\r\n2Gv8QsItgKkV1YcJMcW5yhJpgxLDcZY5wy24pjd94KJn4dVleLEFjzGZ1ZEX\r\nScZgxBEFIdU6bRxik6NpCvytiN4bsgnYkcjrj/ZAX3Xepzz9Ragh8mufKTg+\r\nMu4RVkNdsMV91DhD0DaflmagU5UUZdmpBQdOxecrnLO0sIbLgvvJMmrkiedD\r\nxmmuanou385BXaTYOKjs2QbQjCCKQWqAbJEIUHNMymmFP+PhZhxDC7E8rSyK\r\ngYlm7UvcS4NNeZlJKF9jbJnOG0Crnu3KpyeWfLAAiCe9B6JGlmcur9E0bbZW\r\nqPpm6NJkXRCT7Ck34lEyvk7yT/cVbhJjKLTSeKiiJNiibjyxwJSyIbazl5bC\r\nqfdcGDrUdO0D7zBA6gbvZDNzZc9FBY4dPj1CTAyzvpF3Zk5W3SZtQtjRCaVL\r\nlbOakag53rATBEbJEwNzjSOGGJ+7rr6yhQOtIzirO5WNSPS9QqYJ8HJLwRRM\r\nI+xWccKbOJE+l1+mli7Lou3DOf7ZiFMfFwHIMduwtAOtJVoMtFl0AtsGdoMT\r\nOQqt7ZVMtEibuiqBoea1JEmrAAgTfIJJFewh35C6DutfWILMHhvt0Z/1wyTF\r\nqwRz93VgcN92OOd11SvKrHMXUa9Um+Fjk8U=\r\n=og+c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b836b9892.0_1674599968045_0.6223371661250015","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/card","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3485e315d0f9e340c0d6a6cf1013868d5b713bcd","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e8912fd37.0.tgz","fileCount":23,"integrity":"sha512-sFf8zzhPT0f8r0G/L0qSbjzna0PMAwiKwomqD0ysFJ71sKbI+T/vpnsMZ3JJgB0sEzad8cfkixeuMWziT1fF3A==","signatures":[{"sig":"MEUCID2mTKHouj4tJo1HitaaVv5CQxjwF/vn97XoNIe5/lNkAiEA3F7AY3zGtdvFidjkzm0ycWWL8FBSiEO4AeS8DZpkngk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sarACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOoA/9GCPCvW0Ap56tQ0L3VwWkOZzGd/uzIlx7Xz34acSRPBrIAxt2\r\num4ryGtFcS3F0FpxnEdnhytdqUPvgYuHctQZSnKxgBJt8WEX3KWaPLNxpglA\r\nOm2KlnnKpxfWyLCY9ZxHBMsozoP7RS73/6s9A/dXvVOUBgn9hx7BjE+jOuIp\r\n3/TWlSc25tL4sYGXX/DeOXyJmdo0rVm/FXauhW30IoEk9NLGGwcgMUFFbQAU\r\n2rQOoOBxd3GEGN/N+T155eYmENx88v2864kDhj08C2fr/wmpYEg7+HanSAg+\r\ncBTHSLhhHav44gU2boBM5pepLuzkMp4IRWsxCDI4R6PuFdVYuBc876bTsys8\r\nXfXIly2ciCicn5RPlt96Sh3xUGh80kWrmZunc2p8a1sHTnj1o6BCpsOlb603\r\nfn8MblpLnZWDiUGIerekezIyXtU1uRRqBIPLWcbn+JryIj+yCwoLazEmKiMB\r\nSMcH/bPkPwR1neuwxwON065Fvzq03321mnS75kthjDHCYR7thKv7jCh9XIqS\r\nS1W1yy4CGAN7wxK7st3rTqk+grU+hTxlpC57hQ5xDjN1FR7zVX4xMuwQTSuN\r\nSS1EEQqO8K+Nyy0H7OYE532AU4vBh/AVSl3gLd0DgE2Ocu5HDUlYMWl0vbjl\r\nAJH3m7KrYUO5d+DnzNS9DIiqbFYh9uKQhTA=\r\n=0N4T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e8912fd37.0_1674757803642_0.457392854721852","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/card","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11939f9b6f064d2672ea0b6bc1bb7a40fe7a2f58","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.16fbd30ff.0.tgz","fileCount":23,"integrity":"sha512-0veUahoM/xU/hYrpAZEEPgHODhUSbW3wUkwJCqMoAWf0AcIy613KWoCPnpgcyX2MxPr5xQiOZ4vUv6nROjennA==","signatures":[{"sig":"MEUCIA6+021f2m8BfcYZyxQT4CgmCHpNBQfjxkDdys7T7SWWAiEAiGjHl339shcLkpK8/4LXKQiD5HgAmxtrrIE0PIZelJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sf4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWjQ//Yhu1hAHnnMHNMouXZuUPpv5BbtPyfejlbWKfin0KaBAnwBXD\r\nsv3b4Bu4G2WIpmxD8IJg+oFWOSlcS/6MDKFJN5JTNeE3javnpD+wvjwJ7B8C\r\nJz0G/AOyAB7XVD//B54UGcGBUgCBGuZtrKREyIyPtnS5ZjLRZ+QEW7a9tRig\r\n4HNq/iLuNnE/3hwBwCTa05G+Lwl4zVktaLQJ26YIKKRBQQuyCbYR4jbprCpe\r\nU6ihM3+drYZyNxujU91OOdqCQfyrr6Yn+70k3eCHUfH8ySv0roBc6roJu871\r\nrD+KCKE8SNAsjo8yEdF0+xAwyUzczSNlz5+DrszvrR9pYmHGTYU6PLMb7ANH\r\ntDqB4kJbZeIXZTeRUJHFrvSb5BWrmd0ZhxVUIXqQJaXkZ7a+8emYg/TmphR9\r\n26f4YWoebPwXWkxycIh5uTVFUXFViVBL82WyM1mbSqlPvhFX1BkoW8IQxygN\r\nIzGxKar2L2Wk8mOoZG06iSP3nX6Qp3iT+lt3eW6pa5T/pqPCbe1XwJCIMaXD\r\nK7mw/YSGTe/dM9Fk8qY5jsgptHzfRnnDIH2K4FA2/Dyb1kIsZYMsSgUEMSqT\r\nhiTO+7q7sJpE3ULXMi8vMYGc4TytpHj3/Urqqf5SlPimnS8p5u6vU/uOPaj9\r\nSeiyvq33f7HmBNzbvTQeReN7rxiK+cdK8YY=\r\n=cIbe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.16fbd30ff.0_1674758136268_0.6694735782054699","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/card","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.033ae083a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d36d5ee2a36e85e7334784f7170a652448a9c872","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.033ae083a.0.tgz","fileCount":23,"integrity":"sha512-iTACDwaZN69kUs6CySHSLrpFa40XH+ryhyyONtsGiPG8f+PUiK+GwSBtTTL4+GEmjHMJNaXm6SJJFEbYSrietA==","signatures":[{"sig":"MEYCIQD9TeP7SLj7jVMpCHLlHYTDsNbeaiifb2fJonFnRqQ1FwIhAOCBVObDinqUu+tLtdRGgHwoEuDQE4zrPvccNQVQevQH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvpQ/+P/5zPFPXVJ0Q4vKT1WObkYT+SMk6zoMr/3vPdZz0awm55YJB\r\nOlts+dmPbNVikwlwy0NhPy/RSTmqn5hT/h8c/fyeFnIAMCoHXXD8kNtEC52W\r\nv4qsSZsfZGf29sdmiAbc7iwGSFnhjtu89IiSzeWS12oQ6vcRKyH+PdBn/nsK\r\n7qMdjGZfh1T6pF8BQRsmvxmTCp/p9UHgXlp9mGNjva0dK0UvDHcRr9pZCzxw\r\nhPy17VlrpWchW7LcYwOuoqYo2C+uhFqOj6nOpNocBvKFzHnyW1v8uyMgnni/\r\ngCRH0clkwUlslmKEk6IixkP+KCboBEqxyqxZbpLW5itCK2XsXo+e4bWh3eT7\r\nJbxs6UmUE18as6MALd8vXG9NhPFK5CfTwSKtx8VvPACgq9QLq13nf51v9VWY\r\ntMMJir5ySgGwhDTLvmOZ8hC/FfWC/CD6KDumPHK+5T2qd2S7qSVMP2fwsz79\r\n8MShvMQXmV99Oz1KSYDiXsyCMlAfZVbYziEAjJoSRPwMIVN7xPveI7LdtWst\r\n/kf20mHFbexymRkpTUlHbpOjYhqE01V+nMnyL/240tk1SJSRrA1X3nRkT73h\r\nkXMPABnDJFBuyBj99nTLClxJmrFOMBzEejlhJ9cXDjgYcGTlOFr/s/xWhL9v\r\ncQSpQRPY2lavWJ4ngRPuT0tUOgXwHjH1Snw=\r\n=yQWK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.033ae083a.0_1674761231396_0.1966085519326175","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/card","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb8bf651d4999468ce4f8e4f87c6acefc255a9d9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3a705fa1d.0.tgz","fileCount":23,"integrity":"sha512-OTqDTA7s9mV5nFvr4AfG3QNfqRefI7Xm4FpWfk4ZFwcnmN89nJqfudgoCfxUi/BzvUAyF3ONOzXaTzyGLkMTqA==","signatures":[{"sig":"MEQCIDfLeK2SrYb1ijjHihi7q6SWucfkAI1FKqyLgQ1esUKaAiA+21/Qu5/lduNB4pzE2v8Bu5UG4/A8PH9CVqi0ye+u6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FOnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Zg/+Ouv2hk4mp4AVNAJ8izMFiInwnQSNc4UMM2zuO+pl5r4+j9Np\r\nFD6bKGHdIjjGRzJCti4zp5spyNnh8lVaTS5T58hSfxsmvI/UC41JMfA8gXTw\r\nCEqBpJSWVHd5Tu/Z0rkMeF6nWvIqI5k4pkHB/gtWcIwYKvF0ROq562W3XExB\r\nqcGvYy/JmXMqpsIJzzSYsLQq30Qz3T1oFMZNP1gu59/9Rpm6dzhbE/5UHGOP\r\ndhMPwXwG8Y1zMOJ0bLhTB9yGvC/33KtXZ3WEfDGypk8pQFLHJTro4NvWgo8w\r\nvjZJDLNjzEdWGtdI7Sk6W35K6AxXNjdMTkmIB1uDf9ij8V3fwKDgCirrM5h6\r\nzg/gNNKoYojP3EA53FUFyiCIMtiVjysR/0GqkYwIOc4ALvHzqKaqaja8lrDz\r\nkiWZHIg6v/8QUMDV2RX5iasrczHD5vN3hczOyyPmkcwr+tNKDbnyJZBkGksw\r\nSMMKrixQqtBZV6vI5JBTxnhR+6bixdD4V0eYst3HA+AYFgEBSI4wQDR5Fb2W\r\nprQr+gfQaUq1onLscTIYRLNFLtcoHuwjXtiSOyvrHRSykBFsMrjDPqf9hrwL\r\nEi+BhhbHuoaVsUlXDt//A5v0EFuxGSeIo+Dko52qL4wBHfGy705GnSIkXAPe\r\nFt3GweiDnsl0lU34FUeIvj9w/qnlYGKfRZU=\r\n=nWKp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3a705fa1d.0_1674859431295_0.7074482721726574","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/card","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c80381bcca5a8d13803a2acc57b4584117a131c8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":23,"integrity":"sha512-51Q5uDiL0vNL7EM9ACV3S8ZOXHe+qcRWZP5j8jcl5wo/VV61pfpIyGJgTKNaFTnMQsFooxu9Kq9Z+dqpSVbdgg==","signatures":[{"sig":"MEYCIQCgYyC2ZWRwYf12B1GsxqM7lpBu8YzK43BcR6J68CDF+AIhAJqUK1JrpIBem/LVK7cgzAAcJreOIWEIQ1xzStZcm5NP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrgjw/9HKpIKZDyU7BTF4I0A8BFy9pLYosHVxxEiLrVGAxyFMG0+ENV\r\n84wCFfiqjVvswKUAKc6tgDpiNtRrb7GIPO+WEvqwKQBkmoOr7lHQiy3J2ovJ\r\n1Z2L2+Xj5HZpv5f3KkG2Eq+7fTHzpJMyJMjI+sazx6N4hH/DKXMFhSjpQuj/\r\neg1VOlZA8JcIWIyJbvXYGOTrU9sJQer/aD7lT8gU4QQ4ClkT6XC5hgtoRGM3\r\noJo6yyCX+a+iCd8kyYmwl6UFIOHaD3qFE2Ri1hRCT+ILHKHCGSqiOx63luyy\r\n1aDZrv5o+uU7o0VKeIoZ5z0+IP2/NKmGJyxIGlZnyhh1N9XMqfAVkTdfYRO0\r\nv7K3G5oZQiJ5iypbmU/f+Oqu2k6BdgyKLkWY2QbsDKBPKUoj8+oDHI/9iglA\r\nj92nuIgr8l4HGYNLw/ISk9cavSyY6h5mOf/rzsfu9yD2nJbQmUQxQAuKdk+X\r\nZdJxJc0reJAovUZKDAw/vot3vqBb4qmMmZJL+tLrt3l71NEZZaun1Za6P0kz\r\ne+INTkHP7rjpu21HWXQVNxcjqjDbdKOzN9jkQfxz39xMDHmtzU/DSPPTb3Le\r\n9yKZ9zhhPDuzp6qf3IDkXz88icVedfmwUv5EmfqHcIFWY7cbmabmY9jP9LJ+\r\nnkPWMM97wl2V2Eu+pOfm5/3IaHI4J8ScML4=\r\n=0T4I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d6bea2ff2.0_1675179020463_0.501375883166687","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/card","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9516882134d9e8699ca258dea22141a6123891e7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0c94182c8.0.tgz","fileCount":23,"integrity":"sha512-fVUjxw3AMkq7/XAOhwbvEtVbrQpXUc1V8tsnUd8aDqDVWWkSJlXEdWxBHa/KYgsDhRk39JoaU+/MwieYtjg5vw==","signatures":[{"sig":"MEUCIBBqalqjKOmo1LEc8W4wqPluuPPu1Xgv1srNLnjZ2az7AiEA/kg9UTuOJbEIO11zGNbv2YmDgrVZI8PvwFPeEn+zyoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qT6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2Yw//QSSClh5qTQP8WSEh8fV3E1Vjg5jLBlWycAWcFyq5Y9HOpt/J\r\nHTjSw0+3ZzZYZJkseTP1TMFBzm/jBY7ZEXX3Adk/ZLECFISOEbUDE7TmwZ+s\r\nVnPs8bx7kw+/j/wiILyO7D+Ov4ROPP/cpWkgAnQzY6tVpVHdSzs7e1yC6m94\r\noBO4ZODVei5y0BJRJoKkxUa8rOlcsklfN6pLw9FYofnG/GAqFeoM2wAlhesF\r\nHUk+qOPGkqqUVPq6ehhLhUBlyr7XKVXoxBHMMIKGIJDJvU7l12oh8+7XFOFS\r\notrl1+zAeADNCDEbfwiUpZ5Oo6Z0E2Z+d2EJV2uC3E96/+V5dTkxJgflMU+t\r\n6GXuvp4QgzfSYBhSVC/UEueUpO2UK5rjZgB5Ew92gZ3LEOqOWJ0/WEBTweVI\r\ndKOob+Jr1fg45TT5buix0jsMwwbnI4tbVVFgGm4WBvAx9NtBb8PL2LXgAZxR\r\nAbyzGdhTX9LGScHvEiS5ifkv6AXzxQ1hl6z8hbL7L8oX7+YSs10i2buI9Qhh\r\nLZat3Eh9UG55Up20aLwwauRpJpDDnGDHbs+Fq5dPB2WOZz+1XthUfce3aNLZ\r\nNLwNg5+89OqyEUDsdVEIrkqfiV1j2rkZxOgB5WydFt0fB3x6B7fTktg35WsF\r\nG6jWrTevvowtmQIxTH2Kde/7aHcpTTkAS4I=\r\n=q/bW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0c94182c8.0_1675273465925_0.2370624939331405","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/card","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.15b221540.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44861b1c9449938a0d50a66bb5d50ff75b156f3b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.15b221540.0.tgz","fileCount":23,"integrity":"sha512-c2OvfCkDWVZlq19c1oh+KKhVZe6a6DgCg6Lt/eYogFkT5iD1x24VQK/KnpkeA1qsGeeaO9M3J7MECFDfDxgmtw==","signatures":[{"sig":"MEUCIHumrKSI3KMtzebUt7Pl+OvtowKiW5J05oXXzow7hAvRAiEAr7iRoFBdXDzc5E0We2Tqt//c6ocSYhQcF/409twTsoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qbyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjuBAApIeOhr4hUwYm0BdV6o1jH5hcDismSJmv8g+f5T22nsDyTNjF\r\nFPZjNNkOgzDqpz6MqYaAs4dUn1R/+WJKwePbVGT0isn6OuMCdU9W3dNBKOw9\r\n8IIRPJBGTOzqfd19U57P28bDRDfe7N/v52I6HARm6JJYOoUtmql25hfldzR0\r\nSSGFnUUEC7B6G87XJ5fNpEwOdA0uOJB+Tv82qCbyDXjzDaFkLC0AoLFvO77g\r\nwoCrMHNl8/NwcbJFE7SVZsF51hCT8QMyia3rtjebwxxT/QEyYMXAc2G8PgFg\r\nEg5BGWjr3cH8LtrXGEY/G7GpbvJNXsx89IgVeUXkZNcFEgakD6YiWEcT8FTh\r\niZNv2eaJkwc8FKs3Q2TJ+1SW5rDZhfhQ9Ege4fM0jTCY0vgL7ZOlQy6s69SJ\r\n1in0FJvbss/64/xOtMqMEo4sBIZriuHHV4GquQTlqwXP7j0FSTD1l8e2/sFZ\r\nVlDBpFrbajuNSi921MGGL4mmqb5WxSYRdSTJdJ5oZmHoYFJIgpjXKdTLkSGY\r\nWepz4sH1D11pm1FUhYd/8RpjyVEz+S/xem2NRssKpBPUgtAOMOJI4FFZHKw3\r\nStZWn0yGskkOd8LPPDwi+7kirJr1BN6lpmCIIufcZHqL4GTwXq4rb4su/8o+\r\nF3JOnJHpqgrUY/uxKp83mqy5raiiSGETwac=\r\n=J7Tp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.15b221540.0_1675273970642_0.11094169873675397","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/card","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9d64ef282403d5bc308a3f2f7d4cd838f558256","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.eeebb8bba.0.tgz","fileCount":23,"integrity":"sha512-to3+OkY2KCg7trI/p27kr0ewZgTXNmcwKdbQWG04RW6QnZ2ypck6PfzC3m8TJcereRbkt6iPgGv0p8HHruwttA==","signatures":[{"sig":"MEQCIHksNbBosR2wNVEfeCBfkvAhlQN2UZQ2Q7kw4bhR9sM+AiA/HjZ7u9/tS+6P55UoQC1wYDfXXpbSfg+HFpKAwt2D/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q3lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrewxAAnaD/j8Nbqh2unGJ77TzlP5PHXoLT1+7UE/pqYtRnMZH3kZQR\r\nC8+3m1+dn/apn//8iK+PhsfbnbqMSvWwqJUgWdOtwPe2Meg5D3gVhTtot48P\r\naDTY20OZZBVSVrQJPNJa6z2fe7Apt63yudifdpzyJdx4SunusRAr7MoYmldY\r\nUYbtMYRctK5M0n5acQM/W1cSLdRg0H745dWWTbLzr6jXKX/dAis5wL7ocjwm\r\nIw/nNjpeKoCZ08bezEUu8SAMWGKCQEig5Hpn0TYoCF40iCp07+XMcwYZUSB7\r\nmMeoYBlmLm5l6BMoWejP4Sl/P+AT3nhUGd9ugSUcGphrjnuptIUWc+nm8ndu\r\nSTK4XudwqMOcrB1kMjBRuZEDyuhQyz9AVcqLA6gPPTQ6+AGBjCEuLWU8noOD\r\nO8RMXQi0jpaz1GnObgW4tfPwimPvJ+Vs1EPClc3Ud2uXLPAnIkZuXiwzVKb+\r\ntnP4wPApjAX9sxCgS9SXOhV/9looPUQWDukqxOx7QEVs9raRp5EXskxzkj3F\r\naNshBH/Iy1G2WVDejB/0tBIFbSsX56fD7RLng3F0hfFMstIKi5FcJy0hYkMN\r\nRJjyGjIRZFAX6aPy3jcCLpAY0glth89DlwSYVyoHw9wustBEmJBn/5Y70I5h\r\niyorjhOmce6HwM74YK2Q7aQ/Xsdpo9UZXYk=\r\n=aysJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eeebb8bba.0","@material/rtl":"15.0.0-canary.eeebb8bba.0","@material/shape":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/ripple":"15.0.0-canary.eeebb8bba.0","@material/tokens":"15.0.0-canary.eeebb8bba.0","@material/elevation":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.eeebb8bba.0_1675275749383_0.6960650164384308","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/card","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45148c5e752328a647e34f508d5dd6808985e30","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6a4b3f834.0.tgz","fileCount":23,"integrity":"sha512-29GNMr854kLBlU+S4Xg3WhLS9Gb/2vRPOG/eaVhLnzZJu/dJ5Y5lVMzaKcY4WtLn18yRXTRViN2WEm193hNStA==","signatures":[{"sig":"MEUCIQDv6g31Eg1sNizOlCVrY4nkFiOa2E4NvVcq0xNxfpyrIgIgNiEVs7LEncLie0bl3XRCaHo3ORX0pKCMlCRV5aMoHEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5IQ//Zd//xVRqwIYDCzEdC7zH+LZaaOPqRdHaxj2ihQ53ZhcnhpFy\r\nLek/sM4MSh6Zt9uenbAOTD4G/ImPSmjaYTipH48SisxDQOSivoE3kjDv/QWw\r\n3AtC4D4C3+vAjdmGYbv7xq2yjgiHRR0+JlTVmJe965tjfraKvpr4N9UolALI\r\ns15um1TXYUTGRxQCBH8xLN7qHwe4GF212ZNpx1FGVb/o/xrvEKhR5XnNM5sy\r\nNqjEydRAhM+f4RfgIgiZsLzy2GfmWydkLLVIq59EuKaiEOdf5ppt0/pnbOZW\r\nOJsSh7C4S/87bPPWGTjb6OA2o54dsBVYwzU3nzZk/EzZ0qJ72vNhU1iUfl0y\r\nhtW7IFfU4BcpC1As+ddQ50jy+ix0PVHuzcNo89XplAUhuqyWO9QPhgxebwJ0\r\n8M3kAas6pO15rG+srZbYVET6GxgjxdcezdYUXtz+1i9OcPIdyMxBurMtbwEN\r\n7NtzoKT+WYRqnS4pKhEXdaycIvoJrl98n8vgi/DOUOC09DgfA2gJkWXsW82h\r\n67dayOZpOCg4VvasxrRTpGbdCz/T+VTBjtF9gyKn2CZ3+6oLiAiJOTPuIXTO\r\nlmUFdCEifPcM8z5jcBJ5kaGensB7tUV9942/5TwQdKRZsJhDVqPyBAqpnNdP\r\n9rJmO2mJxhbMqY6Z+AEpFjJq+vk+PCgLckE=\r\n=bpNy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6a4b3f834.0_1675277921057_0.4643179637130448","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/card","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48bbc25b9c030ab6193db14ff0e19f8d164bbbc","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b177b40e2.0.tgz","fileCount":23,"integrity":"sha512-drIyLVYVTmiaT+l3+Cwx+gEgKf2Q2k0MAdDwsZM8RKK8c2zJzoqa+pK/waTJgWX6L9Ny7DlnwTDv77CTEOOAAQ==","signatures":[{"sig":"MEUCIQCD4dggbUIhtqN2QnoXkmpGy5gkABubi/1Q6mLnO+DaygIgb3eulEtn6f9RO+fcyyjgUh9pJeOCggNjziSQlCJ/odI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y88ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaKg//RXmAafhLPCWSYp3fdjEbeqGOYyhtdAvp90x/DfPcFI3rLGwN\r\n45gsK5+1p3FpfJbZYWrvKb70j6kShbVCPw1tVrQQHrhvjH1LlmZ97gLhJRyS\r\nyGxGip51r+6tceLqq1D+DuGGro0pPdXU5HyL7Rf/b0kV7Q9mRIDeyUSyWp4Q\r\nBUR8tAeb9JI5RknaXhedwkeP3+YwbdxgbcOnwoBV0ixIFhyIqCrZLbRkiedQ\r\n3HuHn/PH+zPsdxoaFL/i9v1jjJUNUpw1I2PQdk+EJqUVbV1pg4pEyu2nNBrO\r\n5qMyQf0o04bJMU7NTj182bRy3xjH5CmqVRj1fy7V2v1F742ADY/X0BPs6cSF\r\nf1LCAEWxsbGm/waoyBSTR/Cw3SKlU64xAhV6fg8IDoJYj6eRcQ+nrfl+Ox/D\r\no91KDrj6nkjoWtIBmJRzVtJs7+JFzoSCUXskZ4gHRn0ncpDfXWy1cEn82Frd\r\n0QoT+CnPhzqREP0ZMNgC/LUvTvBGEqTX3cx0CsNQpXXKSCxGOsu9Qd1q++jz\r\n9cQ7G5a7ya72F8q4UD+rsZdQO+P/YGSnWgqKoWr0mheBah9+32pevc3t2yLz\r\n81OykZC0SFYs9Nuj+rM+LCWfc+xF+Pmof/Bmnq7SSYx8ZHgqgzqxJtSHURj2\r\nXTzeiVuiIeBjZaBEU8A9ViwH4EjBXxkdY/o=\r\n=lIUq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b177b40e2.0_1675308860157_0.785106849345397","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/card","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d9f821042.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"105c7c023c7dcebbee7ac49f4bb4a5acd764de52","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d9f821042.0.tgz","fileCount":23,"integrity":"sha512-d42VCqniHK8XepHxYxYsO2ZYSvgJMS/3JqYDvkitoNGOxl2XkfD9ozVfkhZ1CiWDOrG1xZgZ7y41+SrPSVoDXQ==","signatures":[{"sig":"MEUCIQDX04d++mx8boZRR28YurMhSwWKNUnKzqXTqb1XvODwvQIgVEGdXNjr1pxGJPOvaPTByMFTUMWPXE99Sq9EMc3PUiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3Og/8C69m0ss6Jd/HdnKdPJod2xQpsNrAxhtwe4/7MMFwoqxSySWP\r\nCe0o96wqoiplaL2G05e6L+DM5SvEm9mtL8EUR4CI/cUwmwAg+SqoYAwHGzsd\r\ndJvuq5BBoNUM5Yw83zoiP1L8bF4OWzIhGnSWupY1lxSysJcpJrIFzF3/rt2A\r\nwbZb0p2GmmhrlBj4F7eSU1Ft1BJRqPfAI91yGqCjmIgU8JgzDiz3+owVDI8P\r\n3imK6x07dKuxq1XAg+M0628F2Zfx+bVLIag6uSL4M84+NoNw0j3SvRz6HTdW\r\nyOSgofnKvtrC9x59P+FO51mmg2dO/lwwofU1m9mGCC3eTZKEduxXZ3rgIDtY\r\nTUe+H0fANvdm4gyWqwVoeseEq4cpGE+L2Y9Pb4Vi7a3lR5UbOm2MGyoL1A4+\r\nn7PdrwFgT8tf6KqrS8m+xWMIsnwsDGicXS8CITv8bZhaPR7gZwhhW+uPb9Oq\r\n8crK+ELqA2zqlpdhCRrjkR6oq2F1FbnqomMOEW/QBr1/iEjUL9xfLkBZ1o46\r\nyDc7NCNj8/f1uWG8+0S7qA3e15NUPKF2ZoHJVI5HsROld34SD73/QSb0LCCh\r\nhMpwCB57fVAZ5cr++eGlgdU+8am1gyD8HA1Mgi5sndqnjNJOvrmnvMOCyV+C\r\na3HOJS/vLFbKw+SmbViSlahm2j2UoIlNeh8=\r\n=cZe6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d9f821042.0_1675359512235_0.14504059663703228","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/card","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b5b72007229a089064488996df5f0a5c8efb42f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.47c7deb19.0.tgz","fileCount":23,"integrity":"sha512-GJIeiV1ejHsyyu09ZPzzO0pzBd5LMy63N/CHMJTb/Q3F0YgwC9Sf6ZbC2kudivAMwgwjKDrQMbyEesZmKz5ebA==","signatures":[{"sig":"MEYCIQCnvsXI2572p/9OJbKeXJ21u480Hrj3FC3RGRfuj//WIwIhAK5x9c/I41pW9unfaAnd8C5D3xv7BCT0pCKD7qQsZDhh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M83ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIAA//RDS34E6S270wJntQuMTz6G0osoGKE2XmS3zQK5ZlZYwcMmXW\r\n1hN5BMs5qJDlHWHUoTDbY55VRRzy6FL4wVNhMQx215RzdVBuJ+4aQsp27Fsp\r\nVjIh7kBGSgq3vf66gi/G4f5oGcP74yCcTFTlO3DZlLmqrGst6w5qMXxKiqwR\r\nq+fbTtuVedAQNR5PGn4Igvq0I/XKuO6vgjT1novo+VBWcQqd9dIsy3OKISIG\r\n4VaYO35mEodqcs0qBdhsv39u5j9H+zihTzgLJmY4lvYDbRweEyld5EpxvJ3S\r\npD5zyPl4cjfkgcjqUi03wIDm7oK9bJn24NzSNfG+J3gkFjB+q2YZ+VC9A4W7\r\nfDQyfx9GEU9GxMlBRv5+NLeFNlKPL3wQ1rt7Uq4jIk3ZhTWp1VAZPuWFmbam\r\niJLER3ca9hN7ev0cv0WOTESyHzQDvjBRdPUur09w/gextuT/mRnscTiwMk3b\r\nBeWLd3GlYVtUf0FtecUECCjRGgXDV79aIeS77UO6u4FWMfkgWAR5AhNireV7\r\nkkOWHzhtbW/uKb+V0H3pPN6Bw9H6huxV5h4v69quOcwZapc+E2kRRAev4f0+\r\nd6A8ONI36QrgWx7aXSWPBuSNWmKVrMwj42k2slpt3PeBwAEdeGBBwsVv0d4w\r\n2d4SdvZMGURVJ+vaYlIjFS0XooQBIbp9HDM=\r\n=eBmZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.47c7deb19.0_1675415351631_0.13081196404910167","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/card","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35e152446a1950d86e5cbe3ce744e9373c6aee5f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":23,"integrity":"sha512-JqJ8kgjmbjRSQK6NIOCIZd0pneq6LzdsVPp/nXqbh5GOoj1cUpvfY8F3BZ/XomIsWLRu9DcPBHXpffiG8ay60A==","signatures":[{"sig":"MEQCIGKc8CH2aT2NzivvmO+ehGRgpOMPeiJK4WbXwNsu/AkTAiAakbHX219OY/OvnprotYnQ0N/FdTQY/B8uQbjjL/hUkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr45Q/+OaKMiIu8wGKPGU/BbcjGY3bQOmbXAye/DVhvLr14swMmiuYt\r\nSMyfUtOFh3e+80OcUnV/C/HHX277qvlrx8JRpfsrp24eKe6nRPUUeqBMhyHq\r\nE4Hxr50us1IufNDGBpNEa86No1i6wolkSZOskb5G9jZUlvMGbs5fiCjpNdwc\r\nUl/OepTANSIQy2+qa8J9o1sNr2emx5O0VBowxRlpLDo/yU3w0WkDQehytYA1\r\nqc2uZ6Cakv/3puDajZn/Nc1t47CvCKqkK+vmbnuq98WNoVOVr6Sp4piYeFzZ\r\nlziLwNUxlLsZzdA+qOD+qDskTOjRIggjoi9uhau0O0VlYu2mXeHmsfPUZb7B\r\n0AcnSxrxW4Cx9LbSjrlLYg9WAXkrNyLmpBRt5PCsPFlbnh+TwY2MsDgQ2wbo\r\nzIpsplxs1gji13NAQ8k3CeEzfQxwTpAnJ9j8NeJ5WDoSMN2lxaIwYCKs70HD\r\nbGkvb2kJYNu+Am0PE4zr/mh1VusKG9C5qoNk6onw8Nfx4rWcF+rSKW6g+mIx\r\nCw3ULV0Xf4+lUdjwwItTVpDcaDzhhgkaeXX7q1YketXumE+Zv2YAGU/l5mlU\r\nIK76ns6fw7BhJ+2CV2mdM9qqwTiTa5fjdpQIweSFqb5pbtjNVDr0T9hHsvqQ\r\nTONoyvDXLqcN1tYq3NFlSwFTVVk/+SgPlRk=\r\n=e8ae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a16dbd1a6.0_1675491286113_0.8787000310404347","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/card","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.93416f87a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e14340bbe027ba0e2052d62d0a553ccbf74062","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.93416f87a.0.tgz","fileCount":23,"integrity":"sha512-HuH/IAEJbaSQY4QRtUMJzpvb4768nOdzfT5BMloCIRxAKwcWikbpTLBpmyzeZtX3AzKal3cqaOHRWn+KxE5fXQ==","signatures":[{"sig":"MEUCIBSfFrP3L+BrsmfWWN1PpuUsJLIUqdUxm4JXx3AsWwavAiEAjJHx4wnQRra2HKmP7tL9U3cBoQ291QWVqyKOkY1VdjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lEmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNfw//WQNjOPBWDYQMc6+gsANsfMZGBbLQqQ9eT/4IeysF6KOoCoc/\r\nq/TsJN8R20KABv7HT7BbwdWiovrebUIH/dLD1wTx9CAfurMT9W/3YaW86d/2\r\nvYWUbDeeazrLQsbpOLFib+vZvIqxE5pNmojoFOau3nSS8tjrW/SuuuY8IrUu\r\n2rucym1lL87raLaBXBQfa3fvTjJg11gjZtGnfZKnZgkitJJWKl30cltE4S/A\r\nQ+6M9Z+U8141hLIaRETplJ32VJ5F+wiggbuuJVUtAHJj1jtNAr5JIvl8qMrt\r\nY0TW/JWaCnbuMNiIrzRN6+YvH8k9xJe4rBC4grQ+cNyFUSyzYFk8cgPvzDib\r\nlTwfVF60bbUOaGCC4Z3ZcqfqFl4bVFeUsrNs8LfpJmU3oHVQbp+Wl5TpcyjK\r\nusB1Aw+SkzJCEeWD4p7cjl00mYNb7rT9UXYRok4rjOgLcmMpxuVItj6ztdzT\r\nGO4rLlDfLY8GvGkgw8PkxNBWnsr3aqi5w5bqN0W2DRVdZ0V89dpc7Kc9s8Tc\r\nLLXoZgJqySW6mvDjeaIa+Vo82ysd5yhAKYyPxKsmmFzb5FFcegIjytU+QxFr\r\nzLZeOW1NVXXVZKLgCJTfV9b7QDsyYXWgQPGqeRllf7lA488ZNwzSrZk17t5h\r\noofWuNbNANYyccElKddbHTTIWmb0PNhulWs=\r\n=dpXS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.93416f87a.0_1675776294623_0.6434553165168833","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/card","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91df07b0a2382db60ae6ce4bdd267d4627c705b1","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.49b8e7442.0.tgz","fileCount":23,"integrity":"sha512-Co95DbyVpPv/SEGwAsbSfpTcpDKhLGQNDhfiZtMUXP9/CVLD49r/BFbSILiqrLvxyR7Ae15flVKTRKVok1olkA==","signatures":[{"sig":"MEQCIDFic3NtihP2D5yt8hBEMSzsUzQSeFy0nDuArIGuaEz5AiAWcfF4XKaR8xFSH88z17vgFYwmatQh3oIlIIBSU6twGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4to7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr0A/9FeOY+/s/5lxyFRoKm/TKQzCRBc95OY57n3ASHWg6ROn11Qca\r\nWLYID9lWnAatWpAmZnkIsso0VzYtpOdrMIKcPXoHIIPui676yTJXDwovytQC\r\nEnERpOH6C3wYbq61SHUIi66NEuysyHuks/45NMJJdwtAmYdKl1d/lPijQ3XX\r\nn06UxZlMgpQ/+10SBExQuCj1VaXllmthyxqHClDfHD7g4O2SSI1Nz3eWalhm\r\nSF2Zw2l5N+yMu3SNHrQRHEojIB9jAvXZm/Wnb2kB6FuZLMBpPlpB7s07wY30\r\nP9heVOONLQl2zpuw/9jiDTfAlyiflB1Z4YE98b1zlLrT7sEObJMMi82u+o53\r\n9qSdRsB3dcsYriF8glemMWndtpwXUpADEQIorOAzlc9/tvvzJDog8eNXw3/v\r\n30c3TDn/4znJCiHhnxpo07pwGEKcjvrtSEA+/+6BklvpHAgbXD8904ouF5qq\r\n8YiL73jTCuCRwiVmcG3t/ZKbHxDxrRwum68UbKIjH9c1RoSjMY1UR+Mo9fft\r\nxFMMvPTW4lxh0SVvyoi3VuEu3uT4iaStait/qj219bw2oFNmQNDjeZhp0Or0\r\nEueIvAXxWL5nx9jmKQ2vddIFTTQhPG4CxDA8nggVrEuYYEmlucFCeIsW8f9F\r\ncSS5uZnp1P+zwxmnlY2VAXzCF9Sqs+2rtd0=\r\n=uJag\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.49b8e7442.0_1675811387150_0.4536790519747085","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/card","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.de38de758.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdc0b29ddb09b411ba7955756f906a0cdfc086d8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.de38de758.0.tgz","fileCount":23,"integrity":"sha512-3qvat47VFkczgdix6Yb6u6C1wzK84y75SZ+fOL6miE3uaY0C0gznQUZnrdBehYnK22xZLUumsF14fl9HDu1uaA==","signatures":[{"sig":"MEUCIQDCsCBwNNba8piUtNweFXba0PUgaxsAbR+8cb3ZG0/UowIgONO4u0XKQLuv8IJUtKP25eq9vHP/ln/zBfrqX+y3Ifg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RRwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsIxAApGmenBqe949jXBYKgVlc1lsgOi3zqHMxIRPBmhWZDrKvNnIk\r\nIc59oYpt/pK4olFl/JMTYkgj7SI4tqJOUaR1p/X5tEGWosDpzLVUGAA/VM66\r\nIpb8bxW0gf1+KeqU8lANctn3bftTZRbFGPjJLSF7OMMmnzUJD+W1qdfIgXLd\r\nWdLtqMBvpiMqbXVPOaOzMPSZMEWs5qw/wyGBAUhDWkkmk6naBga7OWlMqSbr\r\nAHxplIKyAJgzpM/rXcSlDBwzLhpg9G0B5Et0f6uEnh5okDXE0PXkR1aMVlnJ\r\nZ3htFQG3yNb+KfSiXuQVt/jU9Qq3c2JPO2YKNJvRYbx3GFxbQufUplewMCD0\r\nmQd+hs5q4W3WWyWyESP7Tt9drQxTJoQBNnyA9yp2QorKlqhmU4R6xUJayGCS\r\n7RXTHRXXcM4vBt957cveScwfVqztGU+cKJnHN9K9fmBiCHy9KhVM1qQxvTYq\r\n9XFooeNAVLNxFHBiQGkp9m2gh+dKjyrUIpskf5BGydqir63aPUIYQHloU994\r\nX6n9kn/jFP5rJG5DjNdB27kKQ4vhLeXcS3ZFEIN4PNcdauj0LfpKDK+/gNsP\r\n5ycQJZh+FStTmHkdQlgVIhRXa4o+zsR51seri3wuQyTN60KDDs/zPLf5F9YT\r\nq7yhE3Qh2yGm6DJG1/bhBQ5SGWP4h6SzPGw=\r\n=qE0j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.de38de758.0_1675957359733_0.174397457481563","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/card","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f0fd24f320889572c67afd80f8241abec47723","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4d62de70c.0.tgz","fileCount":23,"integrity":"sha512-sS4ug+VF0RWUbe1kfW67YoFwlqmVZh+Tb7UUOrFF2XVrzpBQwXNYXKuecC4R90TU50cH0nzDq3j+EoO6lkqmMA==","signatures":[{"sig":"MEUCIEWG1TDfRXmEmXE2F4oRTDcCabL3ZS4T7CZi24wig7pmAiEA+6sYXV9fUP8r1dOh31xiA763+fTX44fuL8ZvZ2khIDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W2nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOHRAAmRNSDtpHoI9+GNOX495jLMdlOYBM5QmtsX8YJXUxpi7A1j5q\r\nidDCL/nIssI82VLEcpJuW8eZy/7CpAh6pX+EjVW8cO3AavcEWBn4Ci0tmHws\r\nJdYPOD+2tUhBlYdG9Pl1zB040ex7dInmzQpIa58f/qi/H4jnIisWRa9Scwcm\r\n6+3ctnK+aaHvpWrnh0ZoMT9zLhpGjTeMautHqETF0kLdXqUC7qHNTbpgRavW\r\nmENOHeJj1wNP6+KVxSJE0et/mRFIfN0dDEwBasDk7tVsSUxCs7Wr7Bii724i\r\nQzpRI0E/92SYcYudrrgScnFqnjuMMzKm8BWq8BZL8czGm1mWucPBB+ASF+ai\r\n697M50RUlJgERsyxHBgnHD88EtqYFolJhVPi01QJjamFwVhQDBvVvpiKxtQL\r\nbsL1ZWAmhkb/CznbWbIwbMjr30gd1BAabkcN/b7YrAbi6iWe16lwacMaX1So\r\npbs7w0xmoqfjD8Z/3rfWZIOfOtZUwtnyyAlEz7V3QyaDRAmo/DaGJ9Li8hTc\r\n0I6aJrxlOalPr2lMglXSQPVRCv/iC9Sc+C1Lmp8c78baNYdOYojdLZjGlmbe\r\n2vsSiYBJJiJmSDOMWrvasFEfL2mEYQQA6UftISYVfMHT+cdm1CV0hiyZiYk6\r\n8s48JsmM6nh/js7eIBC30e2vAG6YnQG114o=\r\n=RTOu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4d62de70c.0_1675980199670_0.6591089817387783","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/card","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c0859af0c0fa401bad229b80aa00424083a6d2e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6fcd8d418.0.tgz","fileCount":23,"integrity":"sha512-cLoGp5gYBxE3zOWMWoY6oXH3Rpc9qPjuXbW8iMKa6xEVrc9GX3wXQ5d1t6USoC3XD2gPMHkkjmY+oLuG3E51tQ==","signatures":[{"sig":"MEYCIQCYu7OP8drxZUAhVas6zlu0twTtu7laBDvWLL11za462AIhAJztO9SAAPawEF5zVEraoKDSB8AA5wbAC1UtfEEBGjnV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iPuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe3A//apdf1TMqV/9CCUtjtmbdufHI4P+aVYUEsnEMHlgVr++y2Ddt\r\nky17YksZpHQjvNQ/jII8IQOZ0wzuBmKk7MXzCc1ggw+OtAkBQq600/9HFHx9\r\n0znPVYOu65zfy2G5jetTRk6/3Nalmh9LMkgwOBilEFbHjbbLvYLea1tyBIqv\r\nRbwbkFhUMjXp6MT8Q73eXhIj46HA9f3hHScekpJ5lxKqZ8DwYVLW9VcljWtC\r\n8hFeoPRCsIF+kCLArm33nnhl5xfN4PhSiwkU70/gHTw1AQ0KzLZY8PthcIE1\r\nrtv7PFxqTyWRQKwcVOHBdsSFVIKe4aeVly3rmG/apxDrHKudLdELkqB+yQV5\r\n2PQByGVPlTNEnVhYeYja6foOjm7G1XrdEH0ri2yeq1M4GSAPyPun5lT2Zo28\r\n+gCgiW0GY3TI/E5loj6XAykFtK9/FX5JDS4CIjGsqLEtuPyRH/xeYx2NosL/\r\nWGTsTDQ5WWDyIeSq14DPmdzRgY66goSeDbMSU0BKhDrkK7um0TXrwoDmmDKE\r\nR7DP32yKoud6C9NvpAnLC/qvtugK5newmR5smi2W/TA4SNudQUPwNNrV9C4X\r\nuTKA3RPbkApdXRhL0tnEjSdoqfLUj+/invf9eFYy7dRcmgF7Rr65okpMxVn/\r\nXTGKHUL795jzhPIU3NJl49GWcKzFI05LXUk=\r\n=ldD/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6fcd8d418.0_1676289006701_0.6013108983206283","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/card","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.066d9439b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e8c995883e99af14796d3cefc6c81b3df471a6a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.066d9439b.0.tgz","fileCount":23,"integrity":"sha512-l/UH8hkumz41zuw51ELns4ZClhNEYzke6V0xotSjuIZprnNId2K9RHOBO28Cbz9Yjn9CIXo3PBui8ePfUCkEzA==","signatures":[{"sig":"MEYCIQCPfJIP75gHCV1sCtiNtAz/v1bXXScfNP8mazsq0UjaogIhAIWGH7mImWu+N1rk18xJHHd4DXki9J2KuLD6OxYS613W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TlKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBHBAAnRRcLLLi7Ibjhc8YSNo7LQjNapD9G2O2jfZY4oLY6Z+5J/tU\r\nGErKBwedltzy+16iIdX2XmIB9+K+kSmtx7PYo/CHeqzcxFTMyYi6BRqLTjTZ\r\n6fbTlnWiaZkb8/Q0cmfZhElNaw7ndWhAuXPcdl8vFiInW0ESqnZW0sOJ+My5\r\nnB3rra1bEstZS0YV7pk6FtSs6/xTW+0dkU7c8YFrwxVngE/abzaIIme0mdzM\r\nJKNqRop8XTq6WQ8CooOK7CA5wblzcTYDaJcQ+Q+he5q+9ykhMTy6QzT2NUuT\r\nGKWQ6jFKxnndFxbt70Tx+tsyXCweB6Kc4nla0eE2eaP+YoTaJvEj/hTO0j4K\r\nU/AloWOx8cNL/gybnLLo3ACnG3LhR+BXs1hlie4i/DZZRTRttFcWnvMzXFeu\r\nXpdkJ+gJQZwZ+QS9PWthGzhOT7LP5zGMWLk7SLSXvtz2/AahlY0AUp2u1SDy\r\nNh0liM/RZsmVB2CJQQJ4ktyJaZ4AJrOi3lTazvDQDDFGUFQkM4wSxTemEOIL\r\nH8zIhDYXMbH039bPsMVtXdTB0Aw+YpysoDdndlMLlvFRcOifBVFQjQ50DmwO\r\nwe97lhevI+l4Yn7DYvopSfZyk+ip7pabgdihs/Gw8XA80lJR9MfNea6uDCYn\r\nUA7nUJ8uJbvhfMmNcPctInym7dEbe+KP1lY=\r\n=gSln\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.066d9439b.0_1676491082097_0.5917459313755631","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/card","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d5c70a06d921af43e2e11aec5b4c75fadc8c787","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7ab32468c.0.tgz","fileCount":23,"integrity":"sha512-/94SYjiHL0XvZ2FM5MRbDo2spfUImL90f32Co9UAxyU5hzOmfsr+jYX5pntaxudrFnQJcr2dNE7jLCHNH2Gedg==","signatures":[{"sig":"MEUCIQCnBE042zPQsAKqtfK4x7K3r8BJt+tljDSmUjOaKyrODwIgIRnk8jrrKjKnLQn6GFJ/W6PnaR2sx4CsOBcYv5uyk+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q6wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBLg//T9BnBr1yx2e7/cf1YB8zMjvsycmzoQxqFm4OZwML8O23Spr4\r\n/ric8BfwnMll5sG274Zir1gOT6On3dlYOGV+MpGa6L/QD/68ge3uVMOnBc6K\r\nznwTHe4gv/Q4/U3Lu9zQZXJ6CvPz5wj5zvbHAG22fF9vZA8d6JoRDfq2TONM\r\nxfLrWou4ZzRzBP6Z5HbQaW28Ufa9JUSx9L8kAIdiqrMGuOp1r3D9HzQe0vin\r\nt+A/4H28Oz8EZ3CJyQEYbUVlYcCAl+b87LgSW6fAE6CAsccdcEAOy9J8xELi\r\ns1hLJDubA92++o7taG2YZe77F42Nn+vQIFdbx9ooLmy/uHanG2AQX2lIQH/x\r\nSM92/Ib/ywqcEJ6+7x4hFllSLEJmVTubCibV+OjkPZAhvOmQnn/4Eomj+wr/\r\ng3rlfcESft/2pGRUZIjMauti1akPrDQYE7tIPRbL3ccDrvTLkmI6XiJ01Gyy\r\nLFw8GNcdzHVb3yZC4VHIcnXmr3mcdDHDmLsNrASaudZkgIYgGEZc33dA67pk\r\njIWgQw0M6bYMGbKlqcp9zTBDXbanZxekYVINhkq7MzZf5GKrhlRX1jiDTmoU\r\nCrg44ng1uKh3v0nHhVnFrfF3twaPVMfhzDXDslVKAxeom4fwy+DNg6173h/b\r\nTjBW1hIGYvmg9vYH6y9jg4c8citVzGScVes=\r\n=EoeI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7ab32468c.0_1677004464164_0.7731843049575611","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/card","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24a286f7ea4e7509a52430eba80fa87763e31bde","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.fa27ba61d.0.tgz","fileCount":23,"integrity":"sha512-XvcIRuXggxel1C1JQ7vd+UyqG+W6a6k0KlMIXB9jTp6n+UAHiGujiE4xGulEHVo4GCpMc2UyXpH6i/dfBRI0Gg==","signatures":[{"sig":"MEYCIQCvzdC60zceU4mwMgHER3YUTEvt2AHzw6/fIL5vv/tD8gIhAMhxITNppQNX7s4DharbyIlcS1iewN1aK43DQuV3Bh8q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NhXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZNg/+KSi1nzDfw0nszp8EColbZFTRxm8ldV0nUEcqwnvLnf+xrRK0\r\nzA0pWsnYIMfB5/qjkmeOhK9GdiAogEUuNJ0FRKzr8w1xlort4VuCyiXYaMi8\r\nazQfk3AX93elaDruImJQPfnSSKSRKa9S/76khSvRiLYy/mOsWMOgNFcQKGdf\r\nzV67DN2XXT6OodzwBBl2kXXosa2hKH7lQiEmhKlb4KTEJ+RSHFQcD3Rl7LST\r\nioTq/mBzIP0tsVkCMVn2JcJalMeWM7hPOksAw05zKgkR3GFfrFs1u3/F+FjY\r\nUan/Bq10FQnxTokZxbCrzllV+mdujHSosTTFzoqY5bWB3AWjcXyXFfg4D/iy\r\nFoH8OaAVGArQDSafNVHMKOwCXkIzV1BTElJXItX9KCtJqWpwQbwIjvAZTfNX\r\nlh8qTSYCGoJVhlzLds6JRGiSoGzmjXLCMeWJVgJ/lSEaCIKj6KXXNOU4UA2Z\r\nsQgLnXqdhgl3DDpm1uP24vp6EcIT/dqXD0N31qetbPGXH/gOZ5RujG5QiIU/\r\n8jn30ASy32xdCeB7TvYif2g3V4vKcPn8CuuzsWQtMfppin7Nm12zlsTBYmY6\r\n14t2upKh9Hw7oXWwU+mwvfHK9YcyST9/fqRVWXX1a294nX4jo6Tx6gyLDuz7\r\nc01rNwvRigUaRPIzUQWefcFaPLZo7YSb4XQ=\r\n=KLvW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.fa27ba61d.0_1677514838969_0.49523453803970585","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/card","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bc188cc7abd28413f18c971daf6428f8f11fe69","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.311ab4d4a.0.tgz","fileCount":23,"integrity":"sha512-ed45rGI1aFIFTCDr5DdDhUfsL1VIn0X/KeE2UccAzfxkeVJ9kXCbVkddlBNIKZa8o4vJTNKCZJT5K57a7A04Jw==","signatures":[{"sig":"MEUCIQDAjL8Q+tLrMKN07R4UaPlYdvyxLHCj+tCwYVorVrt/7wIgb3QF0Tar6kG49/G2xB1OfP7dwtqiyaJXC/mYK5uG4q4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXcRAAj+3zTS5FBATdOz/2FkZIRo32eV//2qPHPLkqM84tFyAofr7t\r\nEYZwg8fiJ9qIrERqhc68ydz5DxQ5pAD0GJT+zYEbpLn78v5ewUMB7ULDRM/g\r\nVi6PoykO10TMU+MdCeqdh2zBqiCShBtQCQhPJVQOUBrAAqkfghaKHCTnN4ER\r\n0CMDMcXH1HyvHGyE1wAjBHvwUiqiAZu6FVIY/rpfSwQ1T+wXqEbmGGaHTe1E\r\nF83r6GNeRIznp0BFdAP9S7FypruVYKgkx/JW6hpzYG9/OSzPlEt5PHq5W5oQ\r\nK9a2Dm+Xnvlg5ESFBECZy57+lv1WMORIZLanmzRmCoOAJvlM7bCS+ffVpF8u\r\n35qG0tApiRYteFgQg4rowzP95FlGGYTfKe1MtQ8PmIYU5xtIoBqwV0j3HPgl\r\n2Y3sepJn7AXCXlUV/wF27ogiQHlqbosy2Bhr9UTB8iPZGq4RbYTP0u+JoiRr\r\nfG/r6da+2vPDP57Iky2bNhk3STZR2A7vCILXSLmgaX8G3ltDHKQ0OSC9KUT4\r\nshjgBwpQf5xhKT96EG6grWAb8EH+4PGZfpO7I1b0tfclmwmat9Ff+m4JBFvI\r\nMXdmHr+giD1TmmGuMw1GUqXLUHQmW4De5hM7NfhdAb8nUWAkaSf/xj4LL3gT\r\n1Ac1+CQqclwpyAhAgrCnNV2XiNspNeLolno=\r\n=XKKG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.311ab4d4a.0_1677516096402_0.0010809629392083409","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/card","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.901c83e77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9ef49565cd252efb15cb963045b34678e09e19f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.901c83e77.0.tgz","fileCount":23,"integrity":"sha512-KfixAI6/yL2FemAnQJiiAyR0rOkiQ4/EJDYoCIFasTZrszMaUE39/BUUfB5ADHPntJO1D/V85da9+r2rcWHHmg==","signatures":[{"sig":"MEUCIQC6rlxHj5sbXxImTMmAqJioYTaW0dlxQHS6iONLs/nKsQIgP0YbTBfBCdu53wj7QPCeXvV1R9Nt0MUeIma6TUrVZQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PEhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYwQ/+KRxgnLoQgoLYVtFRoJmy3rEqISsm6JbrZpzSJwzyXtW1Jasd\r\n+TCHyQSEBH++l3yS9/VC1iq1DLTH57yThEn+AdrDBaETVJxqVwRw05I566OY\r\nvHuIHddcnfuOSUzi1nSlQ35N2oSa7t2wqoASJ6yw+XgiwqhUDuUOD3w4wFcv\r\npZHImI3FISDSPK99EuqP1I4jKNt+1wkM0gll8rOmM9HIAJ9pLhKmc3rvTRZo\r\nk7ylmk5K5x+V/zO3SQ3IfYbm2URh7WRTNOUeAm6GxY7wEfWV4wxQkMboOIPL\r\nSCgzZblBcOBHyjwiF5w0Lb5++gacJ8gsYD1AmzLntvJIWadwGZxXRzPdsKpY\r\n7RZfVv8re0IFz3xKeRbPDynWb5nsjVe6z7r5j2tyLvyxl2wOHTHfJQK4NdS6\r\nB5GY580tvXYlx1Zl2lCogggpZJLKgOglaXWXQiDicdyrZ8HEcYGM2QG/W7vQ\r\nDvrFU5hSmpxG7dNuqYhjNF6r9XvIC51UAbl+jCOjZ5fjU/zRm4+aOY7XO8lF\r\nIqlM/L4LOz0YSfd6YrVgHC+5Y8gzWdLaKJ0y/Yh6MRAZRTrW7bZbI7SxFi9f\r\nVXEX2sp6bZRTzgpjnZdBszArSi4Sf7QE5txfLOWSqcd76LiZ40ZQ2cjK++Zc\r\n2hAkuhgOkR8EEdaXbOzHJFhdZWrPweicQ84=\r\n=8HCL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.901c83e77.0","@material/rtl":"15.0.0-canary.901c83e77.0","@material/shape":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/ripple":"15.0.0-canary.901c83e77.0","@material/tokens":"15.0.0-canary.901c83e77.0","@material/elevation":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.901c83e77.0_1677521184888_0.5100906772401168","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/card","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18604b51801240880699de9f8a170b1ce34397d9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5cb8e2174.0.tgz","fileCount":23,"integrity":"sha512-xrP1g2UizzRoHXS5nJJ6+zLNsLbS3JvKSwsGn0+Abxdc5P5TMjr8k2E8ARzQf3uCNr4TnhXnPh5JyLv5ctSe3Q==","signatures":[{"sig":"MEYCIQCfWbySYPWIAs/rqw7Fne/AQLiBSO6qffjCvr1XK3dq7AIhAM0wzKTO9vIKVFA1Xn93yhDn4N14TWH7UoILmC6FG8G0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/37xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxUw//Yl/6/oisALcw/25HLGDtLHnkj2Zr+7ol9At0TtAZJ9HazDYY\r\n9SAhiK1skc49iLyC0KFm1uqCiGppyzeCMUqf/WgmQr3jQ/MsrUXJF36ofPHm\r\nhPlZ2leql8LHAnbCl9/g4zucwwQlIc3idLjIYFmpbEdpdmPieSxH4Qs6Ss2j\r\nNqSjIib6i5UKMDtAY15elzCtg/LjB/PiTf6BrjdjWg5Bc9b+Dc7KjKpxDIBT\r\nLPGsJ7DqXmshAY0eaEN8igQG+QkX+dl8sQGtPtIEH41Gf1skq2Gz2OBT8MDn\r\nV0nFJZWY7fiyYdMyD86h+syPQIf1Vlot2RQeNzZyiV5+k/aEs1wu3+Jvz/X0\r\ncjUSaoTyOKbjFvSqscILpszJLuzASrJI8dTGq3lwPQCnm/qXoOQAJZyAnylD\r\nkbYkFx5SVPX/cXvHrbioDX5z3zgsZsINJ+Cjk9a4KOttsQ5uXrqCWKv2Wnky\r\n4LXd+Bov0gZGi7skVufkOOgz2DDk85VQCTDpKivEMZdyqe+WEWxE782V4qal\r\n8dpu7sOvE8NCk1S90goDH6bhI0F5hsuQrV8Wc/4hPBbS7C7oI50uh0uF2hFu\r\nB1Fgqf4iOQ2U1Rf2r4g279Ow6DROj26dzxXwgD1r4eApilo0zT3IZClAu+qo\r\nk3F+tRePQ0UVQROF2VwZC/GSeY19MLosvDE=\r\n=ob7f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5cb8e2174.0_1677688561242_0.9689536067417048","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/card","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f32339937.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"542fdc0326a421fd969478873a64d30d0da443c5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f32339937.0.tgz","fileCount":23,"integrity":"sha512-5U98dlb/xCVSo1vvc5y0wZCbUZTbKotq1AV6CY0kdWo0vMBdYDDoRCNkyoEcMVkv7zpfx8/oGRR41fu/Gl379Q==","signatures":[{"sig":"MEUCIQCFk3RLyfLgvCTINLKoXfejacN+s0R3/aTvTRpKwwIsmgIgNqmc6S1iEKBOf2hOPV7OzP3H8ChboMEpo50R4qqKNUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgOlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruLw//bJRfOWhmoXpFKhdk9xlEp8zO0R24pNlM/ZZQhEWeDEaKWpLR\r\n3uwz/qy7iI3+yYM8LH6tV3ZjeXWufm5A0Cd5sMIHrZtLwff/TpokyaHYMNGU\r\ndTJ/U8OiNHzBFhnj4D8Hbnm0ergeTdaJRomIgSk9s6tLfmpevFZ76i5D7ePt\r\nO0VePhOI91owGUjrL+Qp/8T3pdQSNY2xAimGstkxt7QtfuCJKsrl3IucAFlh\r\nlYJjxbNIChZYYFeLMGEAipgLMcttHHXEkz2YuQ5qNdxxYZB8csV1PSeKOwFt\r\nQgrE50gB8Bk8qcg5SmuQB1MC+RmEEvjAh6KdZDpVh1BlWCK6Tg7jya1Fi2wl\r\nNm9o7FwiWc3CscGWX2OMOoUNgCgUekpXBYbMOqfykTwXAqc8fX7cXwqmwmbz\r\nbVPE9Z5kpLbIjLZUx9MKbZy2F6gAa3YXwq2b+7TJnsdPeaQS4thzDV2DeOXp\r\ng/LDoFlQ6fGp2vrPnhVLiAmTZLa5XIwkGq+2hXCcnBrRjUcL47Ear+WuwjwR\r\nVw/P40L62fb76F3lDzdmvk/vOejNKJ4CMBnmJ0Ub2bOemPDrgKk9yL6rERcf\r\nyjETOlHvBMRLZZ5X0TJAl3uoWp0vxharzrzX8iVDXxNvaq35MwVUcL7BwLCd\r\nrOFGBvQAAM4qHQle0cWXf7sjfkJVwUjMq6A=\r\n=W+Lc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f32339937.0_1678115748941_0.5910363206994735","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/card","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"073d41bced89af817e3b85a39cb0aff6ab903949","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7644d63d5.0.tgz","fileCount":23,"integrity":"sha512-94tFMYzb3M+hLyJShGRW0W4P0C4Ow260cxIvM0nEfE6jCrRCWzhmHnh7sxtG3Eb4Cy1Ut+ZuF0QjNu19T9sHWg==","signatures":[{"sig":"MEUCICTG5pKKzJAXLXyPl3kDL1oqrp5AjRjk3yKM+3DZ/em/AiEA6k75/r/e4uZShEKCvMdWpDfuRqeY8j1PXkz8N3o5/OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAmw/9EHc81xoTCao06MGCsUrK2ckrE0XjqPt++3sfK6FCWCd1Hkn2\r\n+70sOAU+tS1apZr1O1dKHGfOH39PeSkbu+94n50/oNR+aPQg9SIqUxvNcEHy\r\nwrKMc0YCy6hs9ihYF4W7LU/9IVRuWqc/vnmUKJq3aeS3ayTVKPHyL+l8mvpD\r\nrRlxdo3zovCJLhDEoSrGnfZBeOIJ3arGZCV7LCX2TtG+i/630U6X+JuP7sEn\r\ngOATEPDxHcjobXMggzOxJn1sgIFBo35XIsmiGFbUUGICFokl6KW1Y/mcwSOI\r\nlHYQw4ULLGJCSgPE3tvXUNAFvyjJzWfcZHY6/kHQgK/outRPQ3bmW2rVKP4m\r\nxAhqAapRqGePt10EBiu526MyNSGFP+OVWY2JxJ5lFVVcfQdQNhufZ7MLXMgK\r\nJA6vnfgB07Z0UAPUMCIvy/Lf/g+hPpCWGrDYnXC3XmLD0qcIJimM+7Xl9kVJ\r\nuk+CuwBVolMU1dDzhltvLU6DGVhvYtjlxvBoCgHIQjv2Y8vI2QDVhJeyg6db\r\ns7Lm63MJP7/MD0z6hE/CFm5gDigzTZd6vAJR6SBk6R5WgFEUrnf5C0D0QBlu\r\nXVzOFWrWv2rjGe1gIqpwGdvx8dNJooWIXK+NRmwSAt5tSrrYaHrZElrdJWVp\r\nzlNSlP9Z7/KosmYtglSc6XVm2u2PrL5cEq0=\r\n=uHqW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7644d63d5.0_1678141661870_0.36910563398450225","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/card","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d96330c08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51e85c6f013846e046ce30e99ab644b0d7ee14a7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d96330c08.0.tgz","fileCount":23,"integrity":"sha512-Ux4H/lTVDM387KC9B8d8cm4ZpX6v/uKk7lWRXd7vThA/Pxz5rQF2C5DKiiP7ie26UeK+SVOmVWI9or/gI/qGNA==","signatures":[{"sig":"MEUCIQCD9gF9RyoqL0DtJe+QPU2CYGenPf+DYq8pZjFkSxGnkwIgEpKrTAXTBy0E8dDKO9MZUQ2UmocU0b0u4Jgyypv3WN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzXQ//b9Zgd+c4874LVKz8dlOZT0matYxxAj0e8M3DJNuk8kNb5tvb\r\nJ0fz7R/pos7lfHlQg+7lasiZOiFxq4YYSjDp7ZzL3xftncw7JxNtkSa306FO\r\nMqGhHHu07a3MEQomAcBi7Cd0FaSM9J9/jvBUjGxip1QPVUXfIxqUALxmS2KQ\r\nmJ8Gw2RqeXtKsnSC2QVKBRoMBD4TIkLW1XyGGPYS4mSb4a4JEf5V8l65IIHA\r\nA/QPuUQY8uJcTj1Ot1IhDl8m47x3rzstS3b1gUDvCP6aTRUGxc49KZytKTnF\r\nLU2CwD3Y30uSgwLZUM88iOMvKrFIM9Futnnb2wxseB4NgX+WQDTqQiNlNG4g\r\n27gZdA7wbOSKv8dfQ5imO00umNAAATRPhalvI4d8vaR8c+C9ZTuNL7HGrW+K\r\nTRFAA9b+pJsP6eeo2iOsOXZuImKUcW0E5C40CqrKPYTzzT5Pe6X+ZmPp5vSE\r\nRm0FvWsJPtg5B4S4XiZgQ1i8lBHmhQxz6XZBD7tHB2Zx/wsL1/jceqpA7JV5\r\nM49B+OlnjMoHtBKv+p+NKQB0XIdna2U1YTw5hkbOEBubKR3hhMhZPohp0gpq\r\nTrDhmo0JurfCjbeJiWD9DeQCR8wsnpN69Cj/reXNP8ZNbFoloj72XaDhxc3I\r\nRYiTenqYNdBIE2Q4009G8Qzk/SYP4LHF47Q=\r\n=0Y6S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d96330c08.0_1678275721372_0.21901944424235875","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/card","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ddf0adc78a901ae212609daef4c450542abd041","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c99cae77c.0.tgz","fileCount":23,"integrity":"sha512-v8Wgoo29qmggeB0nlw4FqWDGXCrSCIyIbrpHTm0/zpZb4ggcBNLTnUz8k/aSR3GYKdlt+Kcp4dzTqUB0mlHF0w==","signatures":[{"sig":"MEUCIG9xvL2b+GldW90ta3LznRdeJ9yN4A1pQxwenPSA0QzxAiEAwE+TIRVCOOvrg+QiVcqPen44OzW/UQOnq+ZVxrRf3bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqypQ/+OI4zBj5kYm+lDpXkj8EsXgdT9p9q3I5t1rezt+c7fncyyTrD\r\nD7/SsGIPbmcPsGrsLabaTY77bJLnvIrua5/E2mDI4i7GysRX/0R7P9sNdixD\r\n7sYjrzM0oAtRFLKJ9mki9XTID2PjxH9z4PP+1gUkpy3hb/B5sPzkvsZ31yzw\r\nFFPinH/W9deKA4IfuWccy47zLYb4G3pKShInCJjAzp5axoV1zP/p01Y22lK6\r\nxwz14D+Lc5BVgidY3TuEGofHIar9WrkVGVxvPt3Bjkp3yCfq16WbSIyqD2Ks\r\n2WcU1Uq9a68CER7+hirH1SUBjPfrhTkXNsvAmoMYHQ/Cm5ctxHQfAxqKvUUu\r\nYhIk7OGfgzy9udVet/U7QuC59P+gAp+Ece/XXEkZhi0Y6SCSzq3f4BGtUu/y\r\nhk184ClmQCwsH2/S9J7Njhm5TciBsDo5k/TP+FPBENTXXWPcVdC3GgPtZiWu\r\nAhpHVIIMPrDR2WDYmFEaSShbxgzG7bejfvOvZhEhadS7nCwFDCVJzGCsk+4Q\r\no/90xOawYTQwU6aKww48k34lF0hR5uj8i7mP+KqT/CnHz3y5JR/F4HL08cCi\r\nssA+xcW1thGcTcEZJFdRQ7B/ebZJdVmp+rgh0WnAjw3CQHAPTzmauhmfGP9D\r\nvO3HSn4F8zikl3Vc803UkR6uDDTpNZH8aOE=\r\n=/HcG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c99cae77c.0_1678318990332_0.07650133420945338","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/card","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e5455491bee5de776a47fcf38f5b355e18d7834","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6023b1cd3.0.tgz","fileCount":23,"integrity":"sha512-89Ir9ki4WqFPfHw33wISFPPUScTD2DwSoyN9n/ktH/2hx+A1CvTGQu2RoL6Wh/ZNTz9URlbJzsZiApfrm3hoNQ==","signatures":[{"sig":"MEYCIQDvwS0zvCZ4AqFNfZxLZlOUqKhX3jUXysaBnGhTYr8gKwIhAMyRbGEOdcaDbKTxR02Mga3C6hmgCk/NFz7YS9ZROJ6Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeybACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoueA/8C4zyVt87ZXQSWyb0OTljTIQk7zHKZkaGs+FJHxfeu6eNsix9\r\nS9I7aTUGNtuM/b6W7wuw2Xc9RhcAz7f/0886smoapks2ac+uyK/ivwL2UaUk\r\n/2wCXP+qe+b59fhYqTdjx9BV/Fmgdv3oB/sUBzirqvJfworCuxyXxXaNpLGD\r\n9RDlsDwpzDSGSr8kg0oxTYMrXn9nhuhqSOCdNlzLwBc2TuJvFZQu7U8jO39x\r\nzhG+sZn8/ph/K0Tn/CzJ/b9SdogDbExr+H69Wio9xS/N00UkB+7wMqkqTrB+\r\nDkyI3l8wM/1+Dv7VwoZURw2r4iHSovU1peAvm/F9A23NmlO1YNidz8DNCRlQ\r\nN3+81W6RiZiwWaAPdTXXza13DjaTJs89c7pK20cLGcq2ajAM2VZM8dXwqHKX\r\n4sJmU7PR28iwLerLOTQt+EGEkMAHP27hAf7vBssh8G40AScey+QihJoYWl+R\r\nwSixOVJyGk3TcBlACa/UOAbOLDCVxjHVkdHwZEW9+ZQZFA9lKyXfvKZRWb3T\r\nLP4Chv9aRC8V7h3dw3ztaZhzLHkS2imMimYMMpFa9SkuKSLBxG5DgoVyzmuU\r\nC8/fYBDf0gu0je6/VcCb7NGuSxE0i+iNd37vuX66pBGyZHDXQrkswT89FMYl\r\nU5PlN66yi92xPDqYc+MkvdeozpeVc17ccYs=\r\n=tioA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6023b1cd3.0_1678371995409_0.7763789204615341","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/card","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.274610c77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ec30213849bee75c78ce28f5b026ab46df1e9c2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.274610c77.0.tgz","fileCount":23,"integrity":"sha512-W9KE3NYvYNnUXdtDVJ7BRpKGv7i7/rv81JflSJhlJ9eufl6uTqhZG1H7OxG9it2rNhLUK8oJ9GvATCNTG6btuQ==","signatures":[{"sig":"MEQCIBlqydqpsv4/dFs5Mr4JdvAFH/HEjL+CqL+bNeEiKgU2AiAVLZnG89hgyuyl/qnL4p6z22v1gaDyPqXLevWBwcAouA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfQtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHCw//ed8xGt1tZXxhaSzMdepuhwOWobYnLidROKmF1IJUpw4zfhIk\r\n59NWGrjGCTAhEEOJWPXhA8+4P37zACyXHTt/P0uSfyJ7WNFdkxbXWD04dEfp\r\n940/Q1HxjhKuh38rVYpVb1xZW6FjQq7vVOF6QBMBZeRaG+A3yJrMOiTKkPKl\r\nnjouOrm2xhbpXQpwZaFQc+FIo22suT3P9xYpBcQ7bDjBNmJCd6riKyQw/rTC\r\nd0BnQUVqNbRNmp2M/VUyRAl2fj8Kgl7hKT42zBtQlaooJUn/vvZCxEGByWx8\r\nIf2EO3bF+kVGa/xkQJWgb9K4BDkmk6SExe7mHHkUe1DfPISxeE/AgrwPwNNh\r\nn5XstpzDeDQEb5mL6wGlFnt1u4x1fJK6UOBy9jU/Utza3XZ4eHDDtJasYyb+\r\nz/KGLJfTXXJY00vXVOnr9a7fdV0mnJQnxthonj7hdsuCkvYX8SIFD5PlwBy7\r\nkizSBT3nNiOoGNn7k6T9B4aAwW/LDS6Dghx7hv9A6+Y4UifdEkj49kSijQ85\r\nm+RegfpJEpMYJUui8fNAohyXx9S8gRGfmcKNeFEzDpdEb30upTipSg3XiqxS\r\nX8W33vfEDZ9cUfBKlx2UOsJo8fTLzgFqbc7fSqoIuKBkcwQRIz4uiY/APCKR\r\njuDuR4vVpwcgiPQtr/dDKsIIkI2t2p8FuBg=\r\n=C8z2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.274610c77.0_1678373932781_0.7925404149268758","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/card","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a274583b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54e139da7456f84285f410701773c34b5d8a5afe","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a274583b9.0.tgz","fileCount":23,"integrity":"sha512-aJkSgFOjS77XIcxYjs61PoI9LT5a2cFm7hFOoXFORKpGLJxSRJnEoV3phLHNRr2lG0ZRgEjrQLqxQJdopJsmIA==","signatures":[{"sig":"MEQCID0qDRjRgVb344t3DZN7sIwHcAsDkUhbldo2zhND0ryfAiB9Xbf3FiUs1Dyl9EsL0LW3NFUsQOBWwn3Y4ttaFMn/og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjow//aPdImb+N9xZn4eT3gJqpfdCW6DyVEH2ndHrNu2QuoctImh/G\r\nX82GlAiCB24In/FPqvxSBwS8sw8xQiGhL9jZx9AcGocMllJ9XvJGsLKQe4He\r\nkZK445X6hOAeCQXloIh8+f2gLDk7kCz7/sRYDoSeCsnjq/nVN4Onorv/pRN+\r\nvyQ2HlinBdNF+2DWuSaUb517WM7VFVd1GfobwVtajdk/0CHCSL1dzY2TUaBf\r\nCmOQnKwnuPDga1MI/lN4yQawncxKfdaNwxDIXeH41k7BLRQ2PH3VlatraSU1\r\nQMttNOMyOfWWF1eW9VELJzRhT0GoWDt3T6+MNTVN9GENEZwWN9Jj+3M+VkIS\r\n4srodhC5nVzhkMkJ7/kSY5b3hANlIlI4zwwNNcuZOGD1zGE0qgJ4tWOeqqoL\r\nkBpU5CwcStUfAYODmdppVh9GJfoQdYvC1l1u3vMMdoJNfthaHHdT2XkH9TPG\r\n1E0MiacD3FBa7MltlrHyieYGlov/txtp4oPp68lILXji5ydLBuYyZMP4FSLo\r\nfSj7UK8hoKuyFlmLu+DokAuwHRckq0eyNxeHb2NYu7KlvU964NE9908fCvvC\r\nzzFEbzksIlOThlF30CvAOO3YGHsuG/ZUWj40Kxf9VGZ7/UfoHaPRFuSBEu0T\r\nP24kHCQuLKXghC2UezyJTmtE69zTZ5YhLgU=\r\n=w73z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a274583b9.0_1678391572022_0.29791248756086475","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/card","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.da22ca960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0ba194f035fb65397909aec314a43229910ca50","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.da22ca960.0.tgz","fileCount":23,"integrity":"sha512-ha7yD1gq4NaFcYUcZEHXjlII1YS8BEt6/i/WmmVWbpCUopS9XvPL51ICLCE6UbIZzzo+0yur6LAbXH0bH5OFdw==","signatures":[{"sig":"MEYCIQCivQzf6DERbW5/fVoBYBJGAeM2eeE4LeGY9/IE9B3r6QIhAKju6/+pyxostPzJWritHWOk41LuiFbnubzva0FMNYOX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjCQ/+KPCk3IgbZL8gj90b2+DgL1F7Wksc3WWXjSD2ggd8/2zDCksa\r\no+QJUjTImxsNGJIE/xkLUEUGy8oPh6aVbZvNdtp/x4nL4iFkZezji3YEMVWl\r\n9lxac8QIxyJxn6J0t3APi/6saWvSA4CqiuJB99WpNqMTuPHDRHJv+YNxYGm9\r\n9hn09fqXozcxxI5MfVlU9jea3wS7LmE0Y/By/a+kTQZ4E11ojjkHYG0yEqks\r\noSKxpn5t1Egm4+OAhiEIntdLXZNaJhRerF2vdjMb+zCllSjrH74mugY7v4vo\r\n7zB73hWaC19Kz59db36BUa5FxybEFj5Bi1GuTQK8feAAndPWQMmPEkPfPN1y\r\nmhnrLvZ+GNRIpBzj6iF3HcSyr3c/XbTDmMOkW4SrA1k9z0EwD2wy/ZQkQ2nZ\r\nsISQeuYtyiMXINfsjYezOJ7b8gymXqrKw8av7W4LItpsb2I+g5dDcWRy2dPw\r\nPbIpdxjDuIHsdPARczmd5fFVZ4PmFm3EGVJP8hAx/1P07cgDv5zutHVhBXN5\r\nsxOpg0+JIIS/C/sANowLbncCC9weWALdX2QTHogyC5vO5MIX2Hup7btI3ge5\r\nHTUJ30vFV1i8cRrx972E0LaIPhmpnKD4HQvp/mbdrN44d+VLG2d8ca4+/D+0\r\nbPFSpipa7Mse6ipMFxbkJUqFjhQUy4lTLZc=\r\n=CPS+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da22ca960.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/shape":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/tokens":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.da22ca960.0_1678393109367_0.44776618177788885","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/card","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc67a7b6d52f284d34f5ab5c8ba83638fb3a8deb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.304a94e8b.0.tgz","fileCount":23,"integrity":"sha512-sM37L3xJEUXW1SA8Yxk0AruXEZA9Tco+uSrXaQdEWzeC93PBpuMhLwoOQWZf7noLETY61gOXc6oh5xcN2DEtwQ==","signatures":[{"sig":"MEUCIQDK4pvmxOhzB4DBKGQ57SEYGfuNPA3Z05Ryd7WsCKuXGwIgU5pDd0ToBKDiahiHGHwxjG6qDxBNWlpphUJo/FwbA3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkVYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI6w/+LX7YkjWTmKczjvS5u88C0wjKXkCaLuvDUrJtPnOfewQ6q9RF\r\nYrFKbHK8oEgezmJWpqMr7pYlVWYoK8cvxDe2sMKXekXe1f2jXRUg+BKlOqVo\r\ne8Ekdy3Ra40Tz0z62qiHcCtJt25ZHcyeSdNKFqRlci7ABWJPZoNGea4gZU4x\r\n+mKbecIDrNr59InAMmL2FaHOueqUf35CxrLBPMdrOA5ZUVKo+PnE2ROT1r/8\r\nfJDkW06WpQpyJOcqd0Sqb/45s+grD+CBqkNqDagM3HMPo/ybrTrmWdQjgJ1Q\r\nnHRKzdXA/h83RXDBD2/GAHnYFWhIxVHQ9ohpBkMHcFQz2Bw+1FlKhWDj6Fd/\r\nIHF8m+LB7gN3aqYMExcFkD4vuHT2OVZLbrDnzYsDJA2wKmcg1UKDRSBaURWC\r\nWfquot8UA+hqFPhOpgAYvRjUVSpAdZkBExoIekyNIuUhlVLjvrVY20xjP/dj\r\n9E3EhsfJEn+D2LwSjzs6JE+PNfG9RxlABGKtbJiV+NelMBpJ2ZdPr3SQpTpF\r\nch/jBSEtcULm+EERSMlbkDLiemctdHHfshj4UpcHDpJFK2ktKtaJcS/18Xb9\r\naUBtnCbyehNKEZXAcbdJHYHZFEQQx3d9/j1K69kwU78H6baJ9zvS2YyzJz/F\r\nN5qMCSwzjC4ZuIiH3oBptpQuVIoHl1L/CNQ=\r\n=oxUM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.304a94e8b.0_1678394712216_0.7081665294988848","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/card","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6c265915c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01de5664ca57c6005040239c3ad10943b15a175f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6c265915c.0.tgz","fileCount":23,"integrity":"sha512-35FZT2aLyJrsB24+5A5tC0+7yEem8bzNFfRC2kxj3gYORSnbFReOZrxLMqM/ZLNSC6GAervNs2+1AvpQvp6uAQ==","signatures":[{"sig":"MEUCIQCLfiGAHYZdB7MB+7uIVl3QDIumMBLIQUA3C1zxDDW6pgIgExR1m/B7DHtHZtKg5Q+fH6Wl8fHAXmnmBXv700bsbIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClPxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptWQ//ZnKE4nsccem3MQEHwKe0y1+aZrj1WKS98gAMVlr90HzFWrsR\r\nusRLrm5NDSk2NPo+b939Qq7AutcLqylvpUZo8L6FFMMmqJtostUvTztUn9Od\r\nTR6+0+E4wwKXWwSyiwFfTQY8hyIJadtPiv/9dZkHmNnfUB8MuYuXlZr9HA7O\r\nseEyiOqSQn2YoBEcugAoWTmhINMCcKYPGra37hTXt3kVkrf4vtLVNjU9q5lW\r\n5fhX47AXQJtky0wjKLvnbBSkzz2PEfs5NKMGYGPjC6/KoUoRo2N7ShajbUUo\r\nC4063McjcPsABC/mYLIf+qwnJ7A5dd0ksOso9QE/XiVEAvuTRjiMq1GSSaiS\r\nznE7tKlaDc0hfae0nqQ0sP7KQVr2xuXTOOAUNHcOCPt9mH8m2uAKbOERtwfD\r\nO8CIbJMpsH6f97P2z/aEMM9QRs+8A5Nf5cFqHBKlo1QlaB2SG8ugaY7wytMv\r\nihzHladjXgvvWYq/nlSy/bs1exZsFysGU+ICdboUc/wgrj0VAgfrQKNJsaK8\r\nmP3LBsQQf4pjs+qhCV7m/2Bi0tcnxNIyJPfY5VZ2619pPkxW6gI8z+vbnO5K\r\nAm6L4LBor1gzpxGTwESSLy3h4eaUVcczMZ4BWU8ZtwkL8ei9S5iU9m65iowg\r\nKiOXwBvfnuGMugAnsSvYQ+KQ3Yk6LeL2bfI=\r\n=/J+H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6c265915c.0_1678398449254_0.7558518985111922","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/card","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.de5224633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af117949ae3bf7d3df893d339774ac1213803eaa","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.de5224633.0.tgz","fileCount":23,"integrity":"sha512-vwrvK2bMTV+BK/tXeGVZ8OkmHjrqIWEV1z8IBVKKamWTKKh5Pqi9LCC5RnAlA4NS01cX49erPXQZtKVJL4H6Bw==","signatures":[{"sig":"MEUCIGT3thzQuvteo2xvf++eYsqs0s83GByO8eA9sTZV4rnXAiEAlcfFq0tbQ6+zngU1wIR/aZ2oJ3r/Zup3nnECDVvdx2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnILACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE/hAAn/T2XVaA9g75wwmpwcUhtMcsZKTzMzuIl9Fjl7tlaZhg1liP\r\nZc3azyNZq7Tj6ctu+0Qia4vXo0PWo4hQvg1p+HGFyS3IzXMR/MqfMVSwofXN\r\n9Z9yZgUCZhrp1wp7vGWt7ElyV61nLIB3tj9Cv6P3Rge8RK5bWrq7Y0+b8C+t\r\nEM9mZBxFzNbC2QY0qrFXgLfvpllTjcWtSWojwvW8togAomYP7HSv2kgahG2J\r\ncT78zpdelSN2ksKq3q37axvfutQw1I/exjjMrrR5Y+7M6MdU1oUcVXhz+TCW\r\nxrVQMb+FUB6PfqGvQfvQbesuJhGK+mIRbcfahwDZ3K2Th4GRMT45i6JuS/r4\r\nTDH9k8wWYTS10qOy5ryV3tDzJg8TbVPvq+dS6zfbCLIFKMPZVfEnJHaWZe9k\r\nPMgkQDMlhbllR0aGmwV0dF+Fx2fGVyZ98IQrgCTSCIdfcAqt+adOzhz5WR6/\r\ncxdiM6tVHMCMDRdOu8EeeltOZPu5MRsySvYwOh6/uLXKhnFzJJQkh1NNoMO8\r\n+7VMCDzG67ag+1tlzMo5OWH564R3cEuVnBQcVRrr5TeXlrYL54N5hFgKj/mz\r\nJRD3RVs84m7Y+rdlElvtujwqB2lbq3M/AaJkSexIpNhKTn7VEvcYIjBCfIzA\r\nSyDRzZ5fChRMaI5XB6PRqYGED5kY4bIIAvs=\r\n=wC8N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.de5224633.0_1678406155655_0.8591360866478599","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/card","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8879557e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4f2db1d3998f3c4dfc230a83b06f255cb1b144c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8879557e6.0.tgz","fileCount":23,"integrity":"sha512-iO4OQnfcde+dkjOWBa0fzahvkDmFwaH51l1t9Mr+iQg8j5imwieSbX3ua6IoXVv5UjLKljsdjhy5VAhFkIuhLQ==","signatures":[{"sig":"MEUCIDqwOMn8ZxHMGdGK3Xo/0sBxtJqZazbwQN36+GfHSk7KAiEA/6/362PUWkE3G9t2C14kJzQQedrbw0APRLCS1Q20d7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/3BAAml/lHL+H+zWcwx0BuBXD8+2kcznYZh0h69nCwXYnUwnadVcy\r\nt336rK/d9ZmM7Wsc85VqXiEQiSLrIV195VyE9jzkvZgDOEnm4pq8kNuf2i++\r\njMJTpJHZsytXAL27aj7zQ2P1XL/q4kju2R71y+yr9m/Z9rZZGlZvcHCTs2/L\r\naFIwT0+u0nhd6a6sTUTaPcvgioT9AJ6C7HFp26LJkOCb5lRJYYKj3g8BUy3A\r\nU1JLjoq1Akem+5bygWfxJo36NLvxkieabp/buEqaF+sIkeaFegF+zUosJOn/\r\nTGcy/J+p46BgyESCaZAAk14dsOKxuyvQXotuCfMB9grgEA1uLnxyfpvDIddi\r\ncZ87vxZOs/kAvIU3emzpJPC1IS7Un5gpxoeM2iDQk5Ng9Ad4W7fiyzXPDnNs\r\nDSLhGBlCkO85XOSZMCHgNAJY/ed7X9oVq0lTFBQfHqapY2u/IQn4cOdtEI2A\r\ncxr4B2eiZg48G1MfCO1XLKzgkjKavyJlZZDVBrwA120VDn4DmYka9vEmsa7t\r\nzsCJ3Eu+GiJNmpj3M6YptYHFEpIQlKXKiALqLn3dKjQaKfbRPCwbxRgqFRW8\r\nxNwxIw2gN3Si3eMU/pMFQrvvVq2OT+gG0INwT19mIVPDZDuv++WVlooKjqDZ\r\n/4xg06QkDJZR5bCo53ryt4DgwQqqqHe6b+Y=\r\n=yNac\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8879557e6.0_1678457286024_0.2557583434373789","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/card","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.23073a303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eab466b09da9b87dbef62bf750132139eeab96bf","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.23073a303.0.tgz","fileCount":23,"integrity":"sha512-nmSn9+J+ClDgnZYNWhPEC1nSVglOSYF0naN5gg3jz+pe+9JxiYSFvR6C0HBN3i2BNVgbTwIb71CJgQHIALGB2g==","signatures":[{"sig":"MEYCIQDcPakBX4neMX9wTrLBIZ39E8PKAEyN8gn3LdGqIZ0UigIhAOXd5iWt44u1vgtfW/J1LuC8Qd6Lw2OQK2uyI3pa1T9N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCztpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT2w//dlbAgELW2dBniTJzzUSvgSpaGmEIqx5+ByT6PoW94EMWwC/3\r\nQDr+RnWDxaZ3qydNbkab9gisBxYXmVA1In2nfnbLN/8Lc5zVLIy8PP7nCgMY\r\naG5X+SVgq4SFI9C5RnBsVkVEPbf/gOgR+qdqpqjNGAh1RVKZhUStPohOj3kc\r\nrKENzhdBW8vtFeoeKF7WCjjhiVADD7hrVLlzgBjRJJdQ8l1lAFlnxXZ9xPly\r\nCUc9zVOM/rhvvU4GwTSXMiHNJs6KC+SpqsMQGwflqlgTRbs3h7xNqPXd1gsk\r\n7I/WSOsiZHZDGQVpNNB//IRkkx38nTBjTys6kG2kPU1wMCMz24yUIOJ5GGL/\r\n3SwaIMS4g46To5qajP0CSdSMiq0Kw9XpByPaKsRclxsQAM8LPPb6SRgzsPwc\r\n+S8Y2f1FUbNaJ9bJsxFUg75y0uoQCy+gzbhAC1KN8xRBx3KkfYTY0Xb1K7HI\r\nX8AwSizEs3czQ09L8JomK+Ek+PSkkPN4xh5hxde/PqOzcG15LOvRBbNVYq4e\r\nw29J1XXP3luIiP78enwJLzr3Tcg5pslZ77e0PBDgk2j27yUB3f51Gopvp9TW\r\nvArTcv3GLV86mCnH8c54n6hBbf9x2qPFu6M2bzhCjaF4nl2srtOXKYnQ+Iee\r\nzDHbwJVUpRPoXRBnSATU7o+sK+CkmZ6G2bA=\r\n=kYxS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.23073a303.0_1678457705492_0.8509085652861543","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/card","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d73a953e4a048fdf53f4c80e9e874d17285d61cb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.51c7d4014.0.tgz","fileCount":23,"integrity":"sha512-dg+uu76qhmZNEMx6lG1XmH1rF0pJQj4JOaRUNu7MuNfmTH5f/gGIfHXraeYewas3MFt8X56ExwWLX6wPv7ltjA==","signatures":[{"sig":"MEUCIGt1i1A/gYGKigdw8Lc4S/lpjvBJSXTyznfpZoPX07H7AiEA1ErOCINHTE/XSCMYj1dSOOJ9KetejRXiDnZz1Zqsq4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC18mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/SA/9FkdPpJzy3A0pxOBB8ZLmZk1P4SIzA9K1/4et3p1HMEWNyaKX\r\n8AzIEqLqUbpLIqF9jsQdcnUvPHLgEAQwmj4Yw6EUoFHJV3MWTYATsS5QMfMg\r\nL0MDiTij+RG66b8+uZZlROlzw/UbTO/khwNlrQUDSYqUlKejVMJzRwCB+QGp\r\n+NGaPmb+83BX/rLGz6ublxItN37yyaarUdpy55rYtIh6erGxv3i01sgXJvv9\r\nyX/3d9dyNIBcKbVoFVAZr5y4Eo0JVS9pbG/VHqhUcRJjTMIb7MEdu8N6Zyj9\r\nPo7GyLowyJuzjuyg1oLzWzmGQ06J94i3wMDkmeOBXN6EFG8HOqBjAKw3MAYd\r\nKb5Z7xaiEXEJyJZL3UwMLEYpmKa3Roz9az9dth9RW8uxkA/BMXyuANjEUeXg\r\n4aCSC1mhENmn/UaDXsppT2nQmORU3epTJyOxMF7i15Fqgt/yuxMGeulaD7J8\r\nSCMby9A1kg9bT0L9CxTVnSovL/UsfPgoi0HALRYUvI+Spql1woebDIBtcrK+\r\nhNRKmSsVGiXM3vLruMxbwuenxj5YWRQYU8/RLE9FsyrJxWCbcWSkQofNjAxM\r\nHCxjmRglbtlLsxDbeyp2jbggctPJL5DjOcA0qffrWrjteI2Dih5xMW1ui5iw\r\nRjomnCA05TW9njSVLVjw0CZPD++5veP/5So=\r\n=yJYD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.51c7d4014.0_1678466853757_0.36496587121070134","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/card","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa962d786ccae0a03538ff8fca6a830fdc4e19db","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1175a5be0.0.tgz","fileCount":23,"integrity":"sha512-+XeNlcOuyaX9OLZsUETuEHCHqorG7k4xxFybvebmJoUB5AXJJQun9U/M/0TlpQ0md+CaDIqmE71Jxmddneookw==","signatures":[{"sig":"MEQCIDDie2RDGpABD/aLsPgqQfY/CX/8CXJH8+9/Kn6pr0fWAiAzbs91vTv4rTiCNIisxkl9OhzHhvHanRef+RqJ8t276w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5eOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX1xAAjOE9L8CCdDvCTIwmTZrPcmGcqUbLWy5QZuf5xwnoaU7TRrPh\r\nwvgL/DkWZouPH3fsdjhrhz1JIk5kVkHEj96HT3fS9a5BZaYG9qh7EhA+KN7x\r\nnT455XkbDBxlh6ku63o0CWHtAVq/fKywWUFro11bXJhVnnpGl4goZVEmkg/K\r\n5Kllzrxn6lHkB3DlLX/p7Kw4GophvX+Qxy1xc5WCWCckDDeQVVQYWvcqbkgK\r\n45G/qiBQKGli4J8s0qrPt0TkQjW8YNaXIs/pDJh3+g66sjNozj+PWuz46fqX\r\n2vMTR98BIXorFRc2B2u6PniiHCAgioonwTYzTsvVIKNHdOA38yLTTRoteyT3\r\n2ksG0GTtGzExeWlcM6NCvIGj3ZNBAb3a/hCCK3xCzzXxh0IK2f9DwIFI/ZRB\r\nerNjyFVMFriQ3DxTdSmS3k1adUEQKJunnjPIOvKQl4e8nApoQEywpgB47BXn\r\nrx42DupzRrR/WPh7fsRB1ohlOwAOXyGvVJrTRk8ktId6wGmq454boo3MeeT1\r\nF+3HjAf75TpwrBZp0qHtWLtk1aqBBMStMuGUMZumvfbI9OZ398znZU58rqzC\r\n1iXLn/5RRz8m3xYQp6NhiRVuiZceE7CotoSKJMcT8y6GZ2fkmSYkLEHIqSCW\r\nDB6ffEPmmb3CzG2h1vxOz0w8y2aZ7eKNnFw=\r\n=MWme\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1175a5be0.0_1678481293906_0.7495857488051718","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/card","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"163e88a5b47377ae80a78946924dee798e2fcbb5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7adf3af80.0.tgz","fileCount":23,"integrity":"sha512-Ysa2P+W3TPFg2x1/ldz3fGlCMGHuq5POutAsoiA4ruiyf9t5Y3U7uF+3WNQN9RqTShEbTzbuHIYzec6Uro5vTw==","signatures":[{"sig":"MEQCIBiHJ+KN3m6VP4wEY1KCUHmhRM1sjiIIng14N9HIq2mvAiAPwcUEvTmKJn1gaOSG0v6luo9c38vO3TMF7z7vR360NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9h3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqixg//UsV+I5/t83U/12rAEw6nSZMFpLGiCHevE5vBN0CVeA2HNTag\r\nyFZYeeQdSCa6jw12MDgBH9iJgc6zbtrQaiT39v2LBidCDi77pgZku3KuZEiX\r\naKLOvJht12puyvcBfWxH+8UGNcNshUSnKVDdxN0VxvElY07bJyjq3wanksKZ\r\n3DLbCnSoQfrCnd0Xoq9AzoeGG2xNi1kFjGtDX5V5fXrEyebaOD1OH1ZAGMpX\r\n2URDa9ISI8NLNO80h+ABDG3iefIOEJHfWRdtEsNg78LmhBrG2jm5LWnjU1Vh\r\nQZhqs2jtI6gnhRH+Ni7rzDI2HadKR3gS9utf9WsjaE6tFjJEHalCWocCeddY\r\nMhaISjCvsgQ0Jo4hR9307ULIw96NcGoiZbd5weQ8m63Bz6EJaNvVQ2Ay0XzJ\r\nfiXaMI4UaUXHzaBBbLSTHU3e2jah6U745XYvylvnjdgTzwbNBRxtp2Bxt5Ek\r\nq6j10K5MLtmjFY2Nc9yJ2AitvetbIztnnn6nBoWxRzTn4FXC2UER9ORUGS48\r\nP+dw3Ag904a1JYL9OIscj8DJeRx5PpaHL9D5xqUz7UEU77qh7QLHhDFWi9df\r\nklM3aa0aumbhfNjLvt6aCiw4XdwyMu2xFmXtYEhiLid/AXV7+dNAJwo1WyKS\r\nClabPLtTCgGFH8GK0wTiGfB8QqDBBKwp0P0=\r\n=fg54\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7adf3af80.0_1678497911411_0.26516222562567426","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/card","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.82554d770.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a491b8686dfa0b1404c600651848397cf7308316","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.82554d770.0.tgz","fileCount":23,"integrity":"sha512-XQNxqgPB+ifyElTDONtWGA6LcXxxxlBDk9oBUkdpAWXUB0+DD/itrNmttqBsumDMXqB5DB6eh27EuPHtzaCupA==","signatures":[{"sig":"MEUCIDK60D8hD2hYv841ZUo1mwh2yDIlenD9mii28GSaN0plAiEAuavnsPNhGZxTHjH7kn7sFdrx1m8Kzk6tkTL9ONJQOP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRwA/+KtFCfOxL6gFXf/x8Ub8DQ/BnXNlc/hV72rkMLuEEatRHmWYh\r\ns8qBlrKIy9GW4HTYoqQSdUNgp8FKpjEsB95g9IqcDcSVJjzNMdqhXMoWbukC\r\ng2Xhut+8hZLOk7dEzwOmtA6IEqhlN7jda63xrbpdbZ8TU+PgvdcMLdDnYRp9\r\nJqB20XtUiIdvX0ladzNjmR2kdAT2bgEGSt4eMQM9nVqjt8qn6HegNUQtifOd\r\nrjq+ap6a3lNNIOhfXQMH9i9UIUSbbQLQic7ilyJ9fwsnWbD14/ZttVTO3c/P\r\nRwZlGjI+KvsWhbb4kDFoksEycyzGqaiJekuITA1wT24lCTLwT4gnpKLrkmFY\r\n9q3BkPeaHYadbZlXUU4YKmo1QbIyE2YnGLxQ9CL1hjJoQZEHcKykH36Sc7TJ\r\nyeAsuegvdfdezlP3hDFE92FBFEZ7AeHYI6qD6yxnJSHE6Fo8ZU7xyn1sdPtu\r\n4aZ4naCP+2502VCl/QYHU3GiVquf9GlhdUFEUwKZ9QVco4goyWCZ3Rv8CpSN\r\nfeQntAeSni53wrfMJlK4+eoF2gc2hzHm8yIwvX9xBOdJbmBhpdYxTFOyVk1J\r\nsvEvl5DSrTy+r32lC4DfIEmDNyNpCNgySSzLYfpNoAAxg91xERMHCygnATFt\r\nRlsW7moscLcqzxGQ0hLe4dZRkvs00IcCz6w=\r\n=5O6Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.82554d770.0_1678498646738_0.3509283864708381","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/card","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef332c3cfa65616ba4c3cb3b3f7ceb5ec50c27bb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.93fc524b7.0.tgz","fileCount":23,"integrity":"sha512-iLYNI0RFHt99RRkdGLMM1VP1E4XC5WjRz0RbuFzPd470RtnwyH9X9FfnsHAjB9Nkfm8APdfaDUu2GZQBi3tBsg==","signatures":[{"sig":"MEYCIQD1/bhNp1ovW4Vi7rofTl5G8bYyRw+lWBz5iWVAzxFGUgIhAM45959WEIVxbuopA4WavmkfeclANuvW/N77eM/neMhs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuEkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqskw//Ss7nHzlobO0FM5IdqXP3rySVnEUUZNaHMr5Xj5aA8jPFnEWg\r\nUo4mlhFgHOsoo0Yq3Mnwtkr3zYr22+UQP8J/Nl+6jTTTdk9S81RfvkVjLaRw\r\nvIZqo00rpDltoUR4mQTt6Dw+hmherOSGaAJv1VCHdL/EuZZhIpZ7czCpR7TX\r\nQJuSN+UVHj87VzrWhpLgq3BFcqE/4Z9Ndug3QLNvCzDDAxDwkDhoEkl0awU4\r\nzyderpDS1VJ6VMY+xrsskBYfbgtfN8H6aHjWe6+fAu/9JdzvrUwzXNLaQl/u\r\nT9lsHo8U0O2PeHq1w1o65YuT3RYeRs5FEZiJbNSI3731DeZXvBLwI/AcocSJ\r\nMNPR94ZK8VngDB1GClEN4H/subsuDglb1H9JqIp2gFqUhC3kEEB0gXRSmNI7\r\nYVRKGLwv6odsFsZOTfpUUKidjwVbq0PUUqqfe0BSV/J2T6pT4YS/95PwNoqh\r\nKWdvHxZ2qz9J7j7TOTW37YN1bs9BplajskGhUWDPnfb9Ih8t60qT44HTECwM\r\nezjX6j2rAaDYjcnbF/3D1qQeisFmSgQrbddeh0Xy2CyGRx29iWPAbUjzoYu2\r\nGGfaINUYejRrLSTYRmz1uxlGo2YELhTRb1DyoD/T4MH0b1PaInzL8+4P9ze4\r\nvgQGF1vm7+UYPFZvy+fOZvoITphfAlzuP5g=\r\n=q/5d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.93fc524b7.0_1678696739758_0.7711843389597586","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/card","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4af4f4edc22418b8500fbe462144fa36c9a9fb5b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.50be0fbae.0.tgz","fileCount":23,"integrity":"sha512-eQqB3lJto2gXCkfYvWVS0I4TQAFpZ2b5CAaoRochgeZVFLIXWQCJ6DQvUJtjo4dw1AEImK9TxKUFlGZkO1AoUQ==","signatures":[{"sig":"MEUCIHRBK75qO/Evqc4bSgb6j18fa7sgRG8I0sQlvI8nzPgDAiEA3wXb/r8eJfcCvOtdnhnXXyXy5lwgO9ir+5ave+RfwCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2D3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxNxAAmTF1dX83p2YGOphTKZGw2W1S/uCO/7L18KO1n9OYyGG4uJ/Q\r\noyAw9E7+kigj/BGV43T5M2UyzNBkDRl/pqfg51WqBv1zppxhl888ww66rigk\r\n4Bn5D243qT8fIGLCRg7jjAJq4uDTaU8vlrTmtUwFLqGjYdTiB6uKU3AJWyiU\r\nzM4aDeXH9QB3JlgOi1khkih8d+wsyRSmu/T9dVmrxzObifjuDH2Kp/FBJbk8\r\nyD+AzNirFm+j5ZTXEpzqjVRXuaIP5SrbmZB0wiMGG1mWfaVPrYCiCkTlpi1M\r\nIJl3X2lvSqOUAVQZNRaoaoqmTdPVwPqJWwAGdMYEYb1vvJxL+pdGJ7JK/tOD\r\n0VXWc+BSqU24wUqcb91PEnTTT6/ayLsehInjWyjp1Sz1o8iY8Gqd7b12rlpd\r\n7AWTZMnW6EAnfq4Pm2vVojs35aSf/Hkj1UbwNnWvOkwu1RRCIh6v4d2WIIDT\r\n3R9LyuXBw0ddRUSSmoGwZrMh4edgYRE+iLrUFr5reo1efToteTpVgIqS0mxS\r\nqUiwj/8OcksDRGV+4d5NQs70xj4UQ1W+34tSLhOsCqGau2c+XDXuSVcELx0X\r\n+x67LUjLtawbofgk8fi3+yz1w6gqkuqp/e4qwMoWgwul8V45kQsWZK+g2qxk\r\njfdMON6I5nhQBtQIpYbgdlSlnNP/QbSwAhY=\r\n=HKfw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.50be0fbae.0_1678729462857_0.13059126320551573","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/card","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fb3e57fe88ebd4f84c7e40f2b48460a90c272d7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":23,"integrity":"sha512-GzbeqqJMqKauXuV7gpe7M7gXoeUfnpJYsTmAxCWscLtUcv44OxUPiNSyglE0LWMSdtvUN9W/1n55pJCDXVgvDw==","signatures":[{"sig":"MEUCIFExbDK8IhQdGp9Wsdj+y34l5Oh8lH7RYhLj4tt3cZIHAiEAp2l8T1sxOhalnBgvS7LNvNUoEPFDtjTB2ASzCveS2/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2G+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowehAAmOOhnDcMLMP85Ltw7iUnBdQQbhuxdi2aJeravmyg8ahyaw/4\r\nxB5k0hpdpy7im9Pk5Wedf/S8vEvY8iUIpapP6P9W/bOvwXsc0lDEAdqACEoO\r\nLVoAN3KCRrWEJsUnDKzJ/uGGwEf9RoVgCrm5dmNcKfYsRNlYGkeiiaLADq05\r\nW4NQNrOzdmNYD2HKH53MC7Js4TMBe02CHxPPc6bdFrc6/L8fTAk/ggWQfQ1D\r\nAsxlNAmUlOZEGw9AHJkSwaZ/hb1xE8szpdfsFaDo/XW6shIjraSr2mwShoQA\r\n1nXUaojC+QQYSZqS18p0SP7diuVsqvZGc+PG0GK9o5lI9qinDESu8iSZfppa\r\nc67hshtb+eQXN9H37u4GgfPl/5tf05LR54FTevX32KyHuHOKAhC4m4tPk88j\r\n8qe6vP+rF9IeZYG5EycMLrZn5LIFSSJd6gw8goBozGA+yuT3p2lug1sUgt6z\r\nZeGdRZzijfGkMlBXkivbCPZmtz9nh7L0vsSBotqLAJ6KHHmtoJywQx01fJYZ\r\nSOOvlOMiCjfO6g1OncUv22VQMEx1afwYTfInkXvR1/ZphAEI1CWNh2HagRHC\r\ny8HcYHuSVCmkp61tpYUcMbvm/shXGg+u6dZdy+7GwhFM5saCKkkADb1XW3s2\r\nsIA55Ums3vyJYzjHyL6FLhAPaXwMYRdKGoY=\r\n=x5l8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6b5ffccd9.0_1678729662673_0.5040477015586144","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/card","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82dc8b778e5e2c1ac8e02415631ed3502b356b26","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1c8013f4e.0.tgz","fileCount":23,"integrity":"sha512-hhDObmBGPlSq2Dh9ChaKx6C0ulv7JWcZzBfZZa0gUR/t5cx3ZlGrrwBbQTsGVEGJgzr9KDbUJFjNJ1F1XAiWdw==","signatures":[{"sig":"MEQCIANsmjaeoN6aFXjOvP6g4wMqfcWnCaWyJ5wVZgSgZoJ6AiB2Ur0ibZ06LWMLIikf0w9ASH1PTLw7lWNWUurGewU4Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmplkw/9FE50w8bSzxUFcNTx9wHdzpE59DnR1NxkcQKF/0y281Zlwrk0\r\nHJHpI+HzxE1fYNYQKkz1Agsh1XPjXmCkPaU1f1Zmn8Rf/zcATgB/hhDmY/hk\r\n9CxaHeiscbPQbF101KLoumu0+fdQqgltSHEcpNV/wImFs02lypda1LrXKquk\r\nTuxAo6wjSp7f1q+IbxoYJijsWcmyVOapzoRZqo6/RfnYsRQ+xOlS9rnNdUKK\r\nkPqFEU7Vt0m3Oka5p5J3m9SVCCjVzro7/O+Ggu7YFkqKNJpyVAqf6kyX9RA3\r\n7ZeSGzZPghqwY2DvJkZmhsyUZySJVeYjN3eiVAsO6W5jGmd0bjbOhRFeGjqh\r\npI8dc37fJo0SPqXGOAJoHOifhfMR8Knx8f75WgeHKPIMT7OLqQ3HKsjYYRxX\r\ndvApnlQqxqapZEwJWnK/IuEP1RHFwOsVCuSSb9DQJd0aF7ga6JCQSiLThEMS\r\nPD3Alp+IYUZ0yuFsKdt42kC3N+D4BM3EHRKLv2rfC4TpEnAq659gVpexN5Io\r\nkQtHyhF+utbuwLhUr0P37JFwFa8DOvY90jpuY60c7X02+O/Pdp7JPA493J30\r\nlt6Fxn2m0ZEzK2EJR3xBrODfgKkedjwtZMbd1XB/1W1Smg873TJ5hzzQ3pEH\r\nhNxslXUiaI/77Abd9pEtElsuqFK/VnKbDSE=\r\n=j0Sx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1c8013f4e.0_1678730575635_0.19951894207492038","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/card","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.112715df5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c07361212ef982d691ef7d4e2b527e9c49e22fcc","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.112715df5.0.tgz","fileCount":23,"integrity":"sha512-cYoyU1GeLTYUiDsYjZk0K4PC8b20krn4otFq7ER6QER6z5A3tBAFuUrNSULVu43oEd9ZwZNFjkZZpy7okFpTOg==","signatures":[{"sig":"MEUCIQDlr86a5ouOyDiS9n1Drt+jFAIWT7AswcGlT8h0pTL06gIgZp0QgyJrlCxuO0fn7IZ/VAhfI+65190sgB9Uix/432k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkrBAAoz3PSv3bgwjrnQTmujT9tKBXqi2nqCLdYTZ7I9Bl2WfpoiDt\r\n+KtNzF0lM3//glyZk1oTPZiWOGQwJcLUkQLsUY57fCyQ9t3v3CDVxA3u+9Wy\r\nF6a4iq9iU9kjrleCHrAXQX6CfZSQnahzRQgB4LReOwPdYWfDcLUb56P0T92C\r\nKu9B6PdNZ8kYz0AxwhM44ffQjxL2MK2vsMdCTIXwMYejdKuR3kKl/KiDRNH2\r\nl5F8qf8nqGkvGEkONbFX77kCD7VbOxjKkGvY47UMgAvJCJ92hlEd2DMKlT04\r\nZm819FDBW+6AXJBQ4BwYFAZqx8B7R5rrE6rNYjMipM1Ihd5kix48re7hYeiU\r\nMojVqd8Zmgv+oGBu3GPx1SDY54xqyqF28buVbj06inlssTBZbJOuMTpHZ1km\r\nwSeqEJGjWNvUydDH0nYyX8mkJJPhMtqz/Pg0ewyLciJSondOJsBL1Q+opwHZ\r\naKSFPJzHlx2z4Jho7XKScwHq8xBp9e4CrL/VlGSdXU/CfBfnoQxNDy5emuUb\r\ns0STm2hJLJpS23fZ/UKGsopPGXBCbK4bcRXKDdpPh9uyvSLELXAstn4tpCEZ\r\n5SR9MLjjqZS/XfWShsRXYStWYaQpHr64KndLOXPnt/n6JsfM1YvqDc+CB5c4\r\ndg+j5Pg3s/4QE52jDY5F9luzMdL5EtbadLk=\r\n=8Wd2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.112715df5.0_1678732765154_0.9246996349251726","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/card","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d250911f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e096481c0fb3bbcfbd8f82b9f0007e525bd5d26","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d250911f2.0.tgz","fileCount":23,"integrity":"sha512-dTq+i6XDcqDxL49irnxDPP0E86SQY+k+NAvkOCLa9dnnlOtaRsIKQXPjcv7Y2Svtqpf9DJHHzfqn0KdXFfZ0kQ==","signatures":[{"sig":"MEQCIDj6BU2Bpvwk+Jin5MYA/SCVWr/H7PF3LWJTHx1oic+LAiAHgH8gLE6Uf8pJY0Fsyxuy5mC9pnGIFqkfl7Mqrs2PGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3obACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqALA/+O96m15pS3IGKVYLYhnTqVev0mGEvWepqcJffPhnqkLfpWX1l\r\nDRe6Lg/kRuhbPcoml14mliUjq1dIpo3K8EhfHGqFcrT4qfq2hTgE0fzSUeDC\r\ny6VzTHaC4D6XbDa/n/4Z5gmkG3ufcF5GqSOSmQlLeInPUi/0b9EJ9v7M8crZ\r\nlr6GV0qGbI7mgom5OF+pH5Liz8cQdE91CMN68f4h+Klr0UtoMICdWJAN0Sw/\r\nwCVXQ74+FohHUFX+APv+/uIG1Xsg9rfH2kLROzi374DrP96QqJf+YbxAXQBA\r\nceXGkEjqvh9079KIOWclEA/oahMvrxxVdmtZUu8Ca943ap1DLnMFNaryoDCt\r\n489jVCcmTAOHX9ljAg4Muof/AKzxSlbr8tGil0DmUGjkSvZ9Dgtk9m6UOzgu\r\n9LLEjfeH8pzyyQG6RCw8Dw+vaVtdvmBfjNq/heU3F+G566r1NgxI9wm+qHRQ\r\nrx5QOJ+s0A+G/pFgRtYGAhL3yWzkrW9H+o1u78F2XZD7ASDFLgaT2XHMdpjm\r\nainJzC/Y/G54Cjxh70wH70aiE2Lg11/zp8spZBue1msJzRtMR04kPbTd/KdI\r\neZ75sOJLBRpzcenRdT9+bhgYWfwuYriqD+O6gSFlqp+uJnR/33B4VKHMeH7F\r\nJwKU2vWADH/KCCOFwlXZZ8XDeq37tKLVvtk=\r\n=CpvH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d250911f2.0_1678735899595_0.8125786672914599","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/card","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e286dd5cf3e68010cee8bb03dc162ca29eac60b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7cd925c12.0.tgz","fileCount":23,"integrity":"sha512-yTkOgcmyaJpKnZZ5G+cycn5iEDXWUh8ShplVz/lcsN8E6QoScEuZXYGgyUKBXBgpzd77gFziamc7VjTLERXMuw==","signatures":[{"sig":"MEYCIQCtcydSETHoUQ3asRAjdMnaBbODKoFBpiO9UXMlOztK9QIhAOhkp9e4cmnLG2nRyIJaN0aQmK86aWculASLfEQ/JJpA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3vfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+ixAAn9aHOK1k7coOlQjLQ29IX5kKSVIhB1PYTfMFJDmXensb8Z9R\r\nPVgehgfi7z8BHFBqJBDD8DMAS4luFj1WuFFgfsyI3MLRptmsCLiYnA98jZs6\r\nY1r5F55YaAXijXuljuoyNNKJIZqwEZdxp/kfNWQNC8y0vyzEFpXd/+b5r+hm\r\n6ek4fQBBMKfDSdAXrjpD7VLLPvXc+PQ/oyZDBg169jZJmO0wN7kt/fgJ1xyt\r\nTd4FLxnkFz/L/5ULTMpCQSkUhUSUOHr/zfvR+58MYAmI7hjb72AsCLfGdE8u\r\nM0ANZju/qo75OlU317gAyN4NUfM2VQmpFPwd+DNE6Hull/6No1Gwf8psK4rq\r\nr8HO6JIQjUUlMpfdf2YLKOkUWxxf4vTvHfKPcODiKBUce6ge+EuTPbx4hFDS\r\noU1mNtNpJla6RjdFnHAZbywoXrQnpeoKDRY2mCINLwWx5L3AXXSNw0/+dLmA\r\n9JF0Ro0d/bSrqS5c4bfO04/cT98fuHpl3teijLNrjDel2xZ4IMuMq/bvBtIm\r\n66J68RgEQJo/g8F49TjRXhX6PnALpqlZH90Wbt/AucBpQLFA9SP34XwV0b7W\r\nDFfmZ3oYHEqjZBo3WRSYp6icIkNy2wSfMwjVDJO7winCTYzeqwbQ7IhUGHTM\r\nPMjZYrXZP6CegxP+lm+ZczrpmWsT0Qe0p+I=\r\n=8P8v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7cd925c12.0_1678736350832_0.9926851563471968","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/card","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdf35723f239760ef374283f35b7a3b50cdd2a0a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b2ddacf73.0.tgz","fileCount":23,"integrity":"sha512-cGYJ6dSrqGjf4xqbUlAaBdEBgqjZ7YezsmMPqmodVt3jsh4cihggu1vwyRzpShGua9xt4OE1WCviRJnvmWcREw==","signatures":[{"sig":"MEUCIQDYqkzv8fG56bvQEyjE+Tjilu74BXdYeGnzHq/IE2b9oQIgGfTRO0Fs/FjwfRRogbwt9BIq/6AIvukjhohxrYJ/ZE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3zoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogiQ//XOyibf6jBAdP86mPsrB2fDLUcKohniu/YkXjjyuEdxP/ytoE\r\nKcp7UJBuSMAFN+YPJNceKnXdzGdq8/zpCa5c+iq1u+4lVwWhFXV+r+NBko3a\r\n1Dcmhj2Zvo/5DNf1H9UTuxOuoqaeG6T9HTSyxvL1forCyojK0WMxxqL/tzzF\r\nk0LkhZZo9dODwEzuz57HCgsKA8o5wfYhUUSTb0CAd6/5qXImX/UlK5v1Edqk\r\nG7bhgGZh2L/hRWyyldKRZELGMMGKo8bCrEdxrtf/H4N8zMs4tuavqdxQKLKf\r\nT2pmCu5DojFdoFDj50oAD8bMUGRaXH9n2x36HRckFCZkmGhxS4QSx2eV0ear\r\nMBH6EEWAAt6FWuJ3IXnwVm5VJwktZgshMwPkl283gb3Vtq7/laDdDjotnMHZ\r\nybW9vMMI8ZOIiaoXD+9nih0kEK2x1nT8/5ySUOvVphotQOMSs1MggtdGCJq7\r\nI5xWPSTBvoaC2maKfnByJwwUYkSwZJHXu5RHkarLT+RBMUrxp6TtmeOR9ffq\r\nI1Si44xo3FhQl6GtYJd8gaZjGgRdZYLyP/ugVND9W0N4ciBmtoF37dVVNKhs\r\nOhxsATfhkTWABRv2Kj/UYCfmVl8la9gDYvGgIKpT+9kfV4XzQJTm3+aevW/0\r\nsCPYM02EqKtT6lkQ16quApYZG3FCaLIr5XA=\r\n=XNBR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b2ddacf73.0_1678736616684_0.48530659488777794","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/card","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2554285227685eed6af25ee10f57da035dfb317","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.989ae2ecc.0.tgz","fileCount":23,"integrity":"sha512-WyD+zo6y34L4ZIaOKamJClFhh0HWQkwZkheQn4LCl2bPUY9l5kKo0rmDi40rMVJwoV2RhpSuxBZKjR6X9lthKQ==","signatures":[{"sig":"MEUCIQCsH1N0kpBi+4oIrsVyAF9vltZLr8iKVVdGEP6Aa/NXQAIgTZBbioSqsg2TDo/TaUe7R3lfH2VHVurl9bfq+AnGncw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiMg/8CHKqpqx9yIdg2wbMcMmgICPD5LLLe6h7McA+/QTjyhnf4y+P\r\nmjHg/lGhJHw9wGw8qUrfAEvc06JwtwTqXxZ9yPOb+BA3Nl1Nm/Fqx9a2xqxu\r\nOjkWTnxMZYXEFbUhNE84N4hKpLYLaCq/yf/w6qNtSmFsK+9djkmJ3MtQmcbC\r\nV3qnxiuJAn6f6p+bYo4nX588xEK7g1l5CWCKYXj898UUECakea+Qi2hLL3K/\r\nP1K45MO+BY+z2MhBTHmmNb2jDhRKCKWiEajLKQ/8XEdKqYKStCqZKf3/wa93\r\nUf0gGnbHUqncYbDGNq6g599/VrXrq7R8KuA01jmyKA3kMKMCD039SGqh8yy+\r\npls6s54VsPVssuP3xeD3ehJBRrMHZg5NimRWLENNvx9RAy5dEoVweuhc/uFL\r\ndnscudRInxMBXffCidJlXw3eFojEhEZB9AJRHfs8GqcHO0sAUoyFGbNbaDSU\r\nABh6ucKq5eOtlPvDmH2IBAPj9ic6SjTYQF/KGN/N4ZCXg1YmLPrW5HrKmWwj\r\nv6pYX0Opzl2g/guGPMDE8cVa1RJ8C23IqsdD9SQCz2LAbYdv5sYCQumodkPZ\r\n0yCHlMt6qXp5L+9kohNWgxJOSRUj8BWK7PO8w8WxF81tt3+CakiopomVrHeJ\r\n5Z4C9sdGgVJnK1s3UHJLsn6dPrIEor/pI28=\r\n=t5AU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.989ae2ecc.0_1678737169357_0.3258547505086089","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/card","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.89c66483a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9661693a26ac905fc33ca6bbeecbcae15b88c715","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.89c66483a.0.tgz","fileCount":23,"integrity":"sha512-qxbzXdLYUtA+7x2o7ysRApOQ059b0ryTD9GADcXA+9wLGlHQLTfOXsCIt8rdZl1350LHqcz0jfGr7pysrlntHg==","signatures":[{"sig":"MEUCIQC2EeOhBDXHyUONWKcnYZ6Wl+hGNE/TJxEuwJdb5VQ0fQIgDdTb/mWvC62CsLbzYF29/ONL/U85ZI/fR6q768oGW/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4SlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm+BAAoZymDNftp2q36eXz44byPlBWv2d30+pVsNK0taqy621KoJyh\r\nzTGGtFl69M1T8KJqgnDN3tI//2AqoYkEbSzPoEMiUKP04ZD8bCDmJD8fVxvc\r\nTKDzDtF3/NNAH0qdkgX/UGKqyziJkrCkjsP3WzxvgUaOQ+K/aHIYrEdPkeqk\r\nd17Ein6JBNmD285rLlmkp+RZwfutI2JbQYOi+lhpF4XJjMf6p5i4WWypHf+p\r\neHvkJ40MArQYdLDwrR60PHnvxA8WoESgRNmdRPO6XpG1XBGSBZu1VNWnQNmN\r\nsyUCSYuhF7PP7ruYACyqE5Yyquari42wjSeInCS1cg2c5/SsLtnLcxJY+dYP\r\nFBEF1hJW6nxqb6HPK6dKeVxOcmhl65auGzVy6KanVW9A8+9HHFImf8jU7A/j\r\n/94Otoh6fq+HA/lGWXEf+ypEGbXlPU8z9zcSmXfcl2nlHM+B0nLQovBivq0h\r\naLjJ+ga80Mpr+9TUOrcFW61Tasifz71BvHa1v4b9TF80mFTGcy5OnNfSZSRV\r\n4AKu9k2atpfVylJYeSzkyRwUUIpVIu4PkEGNu74wQ18cRsA1R9dKrYRVWLSA\r\n1I0rqBsUO9XuCL+nATE6d4bRG4jGYZ8zJH88gpExJjbaSOCWrMJmEKyLPHMK\r\nvilRV/LPHaOKTw5FpTxshX8w7D6X9YguM4M=\r\n=/hov\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.89c66483a.0_1678738597188_0.7682230546355893","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/card","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e0da818c769be372e8454d9869cfc65a7aade67","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6a85742c2.0.tgz","fileCount":23,"integrity":"sha512-J+QSSWHvhQdu+EydA+BRbD8K/vijvRUJ8/v++M3UQv8j65FjlOMt6U2NxOUvchRd26PDGLGiOHMd5dX5DGcz6g==","signatures":[{"sig":"MEUCIQCTH+g9XBgUfzUKfgpVOYj1xnsfzc8M6e+bjnHna/4mmgIgItkKQfigVp2rU3DtV8pxJH2om/6ZC2KIoWPS40uoPJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz/w//eujeHEUAAO3qsj5NZBcATp58lm5OsIig/1HfBpCD+BaEa9OB\r\n2XgPoCBPJr2ZJDeb+TTr8dQ/2f4WWnWr6LUf8yz1LWcf0aTNdo4vQCG1pq+m\r\nrurobVcjYJFQRXSjy3EpjpRMnkl6MILGb5bWnljPLRBInflbVFVzWo093SUI\r\n+Lh2S9yCTu2l37e9FakkvaHJhhhkFq5xBjd+gEizJxTWrjsyXt5agRvZTZfj\r\nHQ4TlvVfD+IJ9pA8dLlHekaMV1x+iM/zCDe7wwVq0Fh+m6Ul6Fm57H7FsB58\r\nppzOwxX/2M/xtoaSolD5Q1/2+HfhpWz6B634NEYX0GUCd7WG1SgnVi9NBbt6\r\n6VwEKTR1k5tojmXvgIVj/h58w2OejjSyszzycLlVYHjhckYbH2nBC0D9mAD1\r\n0qZZK3NRTAX1nd6PWd2CRrVVzvG1Dfj70iydzCL631nNutFlVOiHr00TWzen\r\nkOnxAL4pMNF4A8zW9GxK9+e4DVeExO3mFgURYplhtWCfMyGv1F4vt4BWYbk1\r\nohl+zxll4SiiP6sHmN9FFXZienltt+CjEEH8G2mVucVPIiP29TTeAKk+96Z5\r\nc37rGKtyjHkR/Lrmgqx8+UlCmrKBagDvUYkRYNVrIJ5uaSJ3BxAIXUiZFkf9\r\nacNq4CHvi9qQUAqOYT9MnENsBSluy8pEJqs=\r\n=vv+H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6a85742c2.0_1678762050730_0.7390026773493714","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/card","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a19f926cf74f9c5b387cff890a2fa2f6358fabae","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":23,"integrity":"sha512-ZiAWpQeiqe1rvTK1eOQ/1WEEs+FVUCDFhsNGrUyqtjAW8s0bXR2EN7jfG1RydpLFspzQ6JR4ytbp/CtW/2OW0A==","signatures":[{"sig":"MEUCIQDcjUIK9XqUzfprvd0zgYYx7Fj+xTb1ju0GNFF/unrtywIgO8/U5KSU6cLDex8Zh8iBCIDwIBA8+WITFEiRmX5GD/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELodACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRXQ//eL0DBvNDTI5sqCAomfeTIlf/J1s7v6vSimbbH9eZChOfR24S\r\na/baO57IWrbItsSR+BQ8bI9iacBSW8rx/p+o9lJEQGAxuSVrVkmVNLCVI2zb\r\nZllselV6eufEITWi3mN/yUgZoenpC+ypEhPZ+8PtVz+9E9YS2lMmFLfNfuEd\r\nnZBXfLqEtHFpDwIW8m3To1sqeRy8usJq/p6sEOCb3WN3LRRLzhRac5b8Kv6Y\r\n8zKfQ54Fb5ap15IZvsTZUvHBMm99V5LpzraBbkxtgiRtbhee724P+JfDQyN2\r\nAgCEH/nH1bKweFnDYcRdR1PmABKn/rcSzPmnAf2HEPNu32ch3lFcVeK901p6\r\nClrHRxznDu10qiR8wfhmWgts8hjp5jO7JHIjmTQ0ndl6LXmnWq5bHqSPZDFJ\r\nb+981OU7gduv6DWKyzRBnyfTu4RCautrVWyrV6chuKTkqoa2FIAZw3Hxa6aa\r\nnZcG1ShFflA0JkYCD/AzsGP2pXiazzMYh7rNZT+yj0EDnZaULQQn2vH2+AZD\r\nmAjWHOskSr0FNs5aqZ+XpXzBixACLu0g6zWlN9UG+FH/5sizlZ38FhWjCkXW\r\nl8Np72kbbTk4jxnY0m2l22eP/AbwqbLaa0ey/j8oqbi1Qgjpy17XkpiGvYKz\r\nejzCebfVXlKH9hQ4gnM+YT/M5D3gkBsXDfk=\r\n=j3Py\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.bb6cd78d5.0_1678817821168_0.4411539663588231","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/card","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4920c2833c3a866602c4b32fa5a27824ca84c24","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5f94aa37d.0.tgz","fileCount":23,"integrity":"sha512-2WhRnrrjsO8LBQys1tii4ehj5LozpMELkAZ4IvEa+5lTuwZo3Ql1RrASD/2T1CrWtYpbRz8IrYPVOhMSfOkP4g==","signatures":[{"sig":"MEUCIQC+GxL5BW1eZa4C0H48pxc78vFhy1EKbKM31onGsscUpAIgKo4Kj7HOoEe58NYxiji2q9MO2htQ/RFdSPVhdUdytQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELrjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeSBAAhSYVrxVvCqUXkUaCFoF2aBx4zaciLmy3uqDQ7Id8dddY0FdN\r\nobSdd5Am7rLIJBhz4+liphY+gUdVX8RSZYiHfoZqdt44GXaq/GNARCmxvsL7\r\nb8OdQyyYE1/P4xu43u7VSd4Z/X47bXdKzmIYdyuEUeA1ihLgMixKbDtacRyE\r\nMqBf/gsooCbjIyut9/bz/AzfHgWhPDAHK7U0gd97ipVkG0sIEPzvD9JJcQ0K\r\n4w9W+dwF0Jeg1XSs048Un8ylUUrGoCc20xKoIMtGhGyigL31MmdCIzpBd66Q\r\nRRmI4VewYfYEKN/TVLWOcz7IzNRDgw0+WE/4jcZBTQFv86mNJYNPHOzMu7XV\r\nqhRqpp3gkhK1Z0KrlPrX5kVsLHiJNjfZBXkTIgCAO8d3337bDwjDnxbXXY7d\r\n3qMkInUQ2UV0p+qHr+ojBk3EWua9Uxk58rKvakWKOEfSZaQbMcB/qIbAEfYZ\r\nAPBrxe9ZK3O4NtPYFhUsP2CHWzTbqcN1tJJxBHn6tmCEZONiEnfPSHXbIodf\r\n018IAZlTuZ5s6c3oFoygHfH+EuQ3FibD3GLtnaCxfHhTpPMxAuFkA0reGh85\r\noBbusmz9Et+9Zv/zOGwLseyOdpOS5sKP61p6igxziAmVGdWb9kRb8z8wuxHf\r\nxxSmj5Ckef+ZSj+tWv0c7HNrRKsodCpfE4o=\r\n=0kLx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5f94aa37d.0_1678818019671_0.26736170098038836","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/card","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1bd317240.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f035a587a8cc91245946d4b00598ee88ff4a35c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1bd317240.0.tgz","fileCount":23,"integrity":"sha512-xPDWT2zF/WGVC8EGftuVonpkS7QVd0+Hlb8tb+VOSQsRmTAJwunnWF3CdrN9ShBdInKQvcU/FYbv6sCmal2aNQ==","signatures":[{"sig":"MEYCIQCgoPoNdJPsjFgUIvWv8NIf69yO9CQQVWxpBn9EBgMSpQIhAJoxCVam6mdzV22BBrUjKmrf3ewV7HbTZRBMvmWaggdA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2gA//fSYHH4JJSHf8KpKUl32kacP+XnDkWrb/uwobG+Aes9qHGeFc\r\nunNmwjL40DWk1o26aIgK4w+xU+YAWo/RLKr33S3XSqvFsE9b1YRdsPQGWCNA\r\nYq2M7h3gcr6Ih64Icjq+TJmoUgcYMxX+U6iAVl6q8QdhKKNE+TyL44Ql9rdX\r\nQRx3ZSoJQd+OkMhsgtRVTxxrz+VY91SVN7VaTRV9apxfR/ZKDsPt6iAw+bLF\r\ngmvUHS6UrS2qC0S8FKdE4zRxRsbnpY6KQw4qqQOGJLF4Mxf4Q/Mx57Qprm64\r\nW8/MyyaB4TRStr7tzlw1DG0oap7ATR90IfPFlxD5LeI3+8VtbjyEn1t3MhWS\r\nGUFfxgGgAhCmvw7vgsaHVFvwtQJArYrGV6QHVTAXE/EufiqyS4pUEPw6GDbJ\r\njZZvnZawQZS89hpJjpGS92zkLwtyn+SiHHrlS2pH7xrI6va+sDSnIuRB5sHA\r\nAoEXNS1OZLt05l7XZCIapJfiGRkO8ACNelCjfnAmYa1s1DGjwcWlidyUOcD1\r\nVX3tR0ck1ZzYkzS6cLypUr+mQu5oq7DFeH8UV+SsydfioK8j7GGe2Ux7+sVn\r\nh3hZcpzMIiSE7IK/17iYRUs0uqA4htUST5YjwAjZ9gSRch0MYzTjsRzouK5X\r\nOkpcy2HkRB6fnMcO9Rfe2spZUz7o7R9pvN8=\r\n=W3bm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1bd317240.0_1678818252042_0.35647749046964305","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/card","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"940e5113d79a84c04b2d4b9e6f3ca4a82c29675d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d441d2a2a.0.tgz","fileCount":23,"integrity":"sha512-xMcZZBHg7St5j0cp/okYUCZMofVn6ZIGDEh5ZVSb6BPxbnk8OvL4LNC3T0Fo/f9Pv57Isa4sEzV+0aE1MJ6VRQ==","signatures":[{"sig":"MEUCIQC4u3UqgOj4XyEF/OUe7c37Ztco/I9kGSpGGpmTx8mGswIgFa++Pp+VYq+wI1L+NC0RhZGoEda+wccanoee4OgvnH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Qg/+MEMrA++AmW2tIeTpPWKkGLwFlcpbJjFWhIcp/ndbpHn7daDL\r\nJuDTaB2XQU5KEqM9dC4QrLxuJeSfznTLORlcJ1B+H1sBuAU26xddMTaWdkep\r\nbqgM9K3hYnQ763ZucKT0VwOzegUQNpyue+aqhQmKp5cBQyP5oPk2vHEdsjiE\r\nVNEkAHJRtRvsusCeV0tZi5qqB2Xu2rMnFNFNA0VhhG4L5Nv4pdK7/0nraTlU\r\nHTXtTNYH30Y/R0WURnV48P471Opc/peLGpLUf2XEnwTD0lxzDdMK5ETiL46u\r\n/Sg/YTSplpm4gaHPP+ewQgGkHLr5qsBnncTkh1FX1GDVJvkcyo9NwGiWIdVi\r\nKenv0dCrJ42hyEqXqaNRfRcL/P8H1f6w6v8JCXOU+fhQzartDeXIUGfkwmfH\r\nO6IReBhBaxE05h6wqH0MVPsfxorMDMiMEs8+McRWNw6C1ttoa9CqZflEoAtk\r\ngFTDZ1rS5b28zHjPpYJHn6NRBZnHoZviqaxULMUDPQr8UTZXk7An/oXDh7Jl\r\nKz5bklbY4gjoHjHdTddfojgQy8lfsl1v9zcm8QP+eZkyJISE17BE4wwGp1dG\r\nyeyVYTDmZjVsg/Cu8xdI+soS8+qx26o4uwCBFiUk+WwJ8vFQuzvxMzoCIKdb\r\nP4WeQEOsjum9nxJ8hCAA6awlEhgGA47eRYU=\r\n=IKUs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d441d2a2a.0_1678818409825_0.26454243845056724","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/card","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81200f9b11cca062a6f8149fd1f1b9685f31fe2b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.fff4066c6.0.tgz","fileCount":23,"integrity":"sha512-I8CLBHEAkHv0hOKLzISjaKdg1ZrOBlzpZTh/qctwUzd/ax2IDz571HYxp+IWBzNxaVxRcpyt32G6aRKVkmXIRQ==","signatures":[{"sig":"MEUCIQDRx3IfdCVU/J7VdiBVuZVUci4HcpTH83wBGLMuAin5WQIgX5WVvPx5a2vThi8V19t0bqtZo1y7fZON+mFbXJPA9TE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGbw/9HsApR4PHr8z2g/nkucqnHHv3UkeIwso2JDZLd+s9OMUkUq2L\r\nTIEAFeIRIRU8MgQGwDPjQkhjtxoFdyQcP8SjIiWQsaPK6bdTSj61TFXH/YKv\r\niXo17ttIVCLOdNvAGkDrxUEFjyh1/XxG1NtFG3eb7+n0JbATMTUOlgllVlFc\r\nBxEYvRwYx7WjSiyLXy70UXjLrdF+z2g1ax8i8+i63L67oxuG9LoYO0vZoZL1\r\n5QUZ3tE9C8MS8T9ZxwDEiweBDYwEcUTWkzWMJ/juuZtYtbZ6OkS2rpuZ4bnd\r\nlwc+VGhHgWW/OiRx79jPlXu9k/TZNJgBBqydwk52mwyujQmjzQvMJlRUzOxj\r\n0+cKr8mgUyDnwnF28EBdXS0ioHqVdtwGjrZAE5raMnOnV3FcnsJv0kBQ9JlH\r\nQH5sPxN9NGRT8npTxvEoRKtgZMWNoC9nzqkaJqs7EVQ2ceR5aaOQ+78rXG9Y\r\nQr54DSntO3ACGvktvFI7PJ4R4ITw1ZuzD4lxexXHNCsjRfRCr8zSyHoQDQKV\r\nyT84L+j00y/xdoqFsJa/hou9GeRgcoUAt3ndWdEoZ69oPTpRCDeYfqix7b70\r\nzSDJo7Nz8LZb88spc38KSw104bBw3kXnobl7RAejbj5u3BWhvZnjE8utgrh2\r\nTUdI1eUhBVfgG1bgyYMAqhR1VNqF8p7snk4=\r\n=gfxs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.fff4066c6.0_1678818454659_0.3599534781408449","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/card","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.87809c710.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6bb21ff34f8d5f7b6996d2023db7ec2e2f794a1","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.87809c710.0.tgz","fileCount":23,"integrity":"sha512-iNWExaVgYQK6soe5qzM/nKZpmxsZTo9e8a0ej2X/y4wClIQMpTM/nmoCGBmI3mcq6mF5dsCT72w0pPLrNg2T/Q==","signatures":[{"sig":"MEYCIQC0wKQEcFefXXsdllx3CdFGUfSvKcD1dTin51Nx1p528gIhAOHcfmfbFSYDXdkgiVSEXyk4ZlA+fkHKAXBX5sZLQ2Wo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP5g//dTbtQjo55RRoffc3cjIlQWIQRR9L1mYWwgnyhtH+EGR51WMq\r\nEnyfGMPEIzabSLT3JmsrH8dQ5WNLxxrauVLbuPkiBkFA/GYgLf12X5GHwAfT\r\nVSVkc5jjgfLK8krmAs91tFuf35gJ/VXqd34aWl42MPziexlJH4Ik4hHEMXCw\r\n/Snh3a8BYTvlCnvesja4BJ1yMEb3iYgLHGVYzjPrD487ql+/F5jWcl8wfcMj\r\nwAtyzBIX9IUFS+ii8MDtozKlG0esQ967e5A3+x8nYGvOqBcdL6nXg/PUy8bv\r\n4aINENa6xmcjaZdszRdEQwT6aYr4FwmjObC8FcGHypnVoH1rTja6IIZR5yrN\r\npJWEB5lvZy5CbVe0BXR5x1/ynkapCuiTF8jzuJl8wRb9dPJOv8d1maPBCffO\r\nLthmOTHHuNsiAxypt4/gKAsqL0uubBmRxQ9GjmISqTBFynJ3hX/VgPGjaLrA\r\nxA5Iq9Xpi576ng58mflVyZfiOitP1ZdEU1hTggUpOm59shnbrikvn5cvPcbg\r\nFqRoyBsfsdayBKdaBHOCutxiHxglXzfoOctSNfCf0yYTw3Bg3g7x6sF7mFNH\r\nSB5b/P3TJL6HYiy2BhcKcgQjfcKcf4TkyMw8leLxKoTRLtnFvQPNNao/qIru\r\n3s2oXYGAZMkXY/Y7BlZSCztH99txWmc+4+Q=\r\n=0I2v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.87809c710.0_1678819415241_0.29487185317402953","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/card","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.48d30012d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1483fab5f78ca162f83e6f0b03236ba4728f221e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.48d30012d.0.tgz","fileCount":23,"integrity":"sha512-RZZauiMwwCw0dKMSx5WUUSlh7TCL+CeupXcIpmzm5vx2OuDPFPk536ShVov+aJhy5HHZUXivu5fa1bWuQSpGUA==","signatures":[{"sig":"MEUCIQDdnpQfmA8ebd8lI83bqtMFhM8CblBFwVoQI6aCSZxpYgIgVh9tziSiMGJNMxYaWOlBT/dvyRK8HxoU5pmNk8r/5xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTvhAAlUKWeVDzUrCO6I7DamQoXP86v48COepyHUN2ADgWPXMyb5Bx\r\n/FVDuQ1CDpiQ2IJAfwMgQSzdnNGnK8oTZRmH7QthDCUeDyEvwCTjctP1nQvG\r\nwB1XwT2xwSl0D23CBSux6wsl9flHR9BOcr/siH9gHrOODb6MckHXkwsjT3MC\r\ncTVS/1NjUEkVCccruoquC2QvfmugiD4y99aXLgaoG4Jc1GrIUJSsljwuZgaM\r\nht6FP8Io5yHHrHSO2F8wfy1TDRShmOJDsbZl74BqGsmDC3XFMxNoAofXzbuc\r\nnun2B40VhOjALOibJ0C151HeVswbHW8x62vhz8RSq3cvNRaUTuoqHqGS+PWU\r\nlpmSTCD6yoh69bWt1XnRUzv17RGatuvQ9VlHb10dBBH3eGQ/qLcByXjN43dR\r\n/n70/NYkj6/sYO7h+r1NvUTh8BS2ZrFQcaNPlLGPZG7zVoqL5JGXk0kEShOI\r\ne89FQTMN4EKumj6q4nckgHKP/NdJGaevm0H6xr1lKmBF2U0iRunb1vXukXUP\r\nZpFYYly2BtrMC+7Rkq3G30i9mDrW3gQvMCmoH5ZOs51kKV40OvlVVtNjwD7O\r\nJBFdE2delx3b4WDcLemZUDD7yx2xVJ6+VV+9sqRmEzMPw6PtxRikPHdNnrxM\r\n5LIC1hO9UBdgIi18pJ1sPu/efGNHv806uyI=\r\n=nmgW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.48d30012d.0_1678819675820_0.03569264129156835","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/card","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32c371f22a5072af3b14ba35a702b54147e1302","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.419b23cc6.0.tgz","fileCount":23,"integrity":"sha512-4bl6UmwpPwkBITWSrVmvX0rRizi3JOotiSg27d0UXIgvfvvM0LBZ28yxrOr5GhQHODH1Ma029emzubsGjOpvXw==","signatures":[{"sig":"MEUCIQCu6p/wZLmPxGR3SIUF/m94sPkButZYDgiZ13+xkMnR2QIgHzvdV/419nXEWBxvr1Fl5+avuNNmPHX8Jq6aCMMXUok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMPxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBQQ//YQ6VYce93mUM+xKIsX902b+a87DxovZi4wNhGw0irXgYmkNz\r\neA1LMh4DsTZXhBuACJC3UTHjS2M/mX6G2wiOR9Vj9/sfUOigzlZBQJmywgm2\r\nxJ4Zr8S+21bf3VDkO/lfqOHUZV9NL9uEj1s3gsbTcIpxOZC1LeP0ClSgDGCb\r\n6bxPLrpeFKU34bhKAX0MFBIbaHGHb8HItr5POVtePDDeaqPyxIOcbQLJJtJq\r\nZMB5yNTHyzaJ7dl+Go1zIFoGSQDIBEaokp8wk9ZqNbSWc5fnzYfwRb415Cp1\r\njTxlr6TO6yvaAGrILX/yG1jTKuvqDRvq8ym/EtZKdvH+juQHXyW6HMBWZ8EA\r\nOHGZDb6d2UcyzFhAjO4S+Gu7vtLd5N6ZVHkvNQb1WylyllpDc7Hjztqo+jwq\r\nDDS2iT6L1eafdc3tOCo5XFq06O7zoAYoX179WUqMl6e6v9Wt8rCSH17e/tMr\r\nse0UvX6sx/Wrws0DQLmWhTTqjXnXpyfXbIPsxrhABvr5IrJM3JSvLqmGYZP5\r\nqBPL9Q+ENqy83UvB6okq+VBr6Jxmw7xCS7xt6fLfLL3PTIGKo1Xk7iyGmYoi\r\nL62dJDA35HlBZP/dQ34xb1BnGSlZj0wwCZ13P6FQ3Sh4my7EZR58lY0vOKTR\r\nm3UIX+XWQRqMyJcdxaXTmaxeFbInON+LAmY=\r\n=MXGk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.419b23cc6.0_1678820336912_0.519062760037025","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/card","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3495502520d69e5e38298877967c9b31ca23a7cc","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.bf86521f4.0.tgz","fileCount":23,"integrity":"sha512-V4s5e9xcKfk0/jTE79wDtG7Oold5+RhnhKgnZS9pnT69HWruo097XpElvNfTU2KC/dTkvl8MaYmJab9u6oU3HA==","signatures":[{"sig":"MEUCIDqh8HER/uCbiabPQd+IsSF7nu7YEDeliuTa/JN2Bra6AiEAr+GpCLb9gcHMZm3S13mzu+X81qeD4nlcKT2I3CfgFbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj4w//VO5GlmoWCYeu5JsPZ3/nZvF2ZIgvqE4ro7oYingTC8yYYcpS\r\n2HiHqxcJdTv1g17h0BcJA2j+ms62DGAQoMM1e4lW17Hrhh/H3pW6iuzawfjw\r\nF2gzd/7QxiEDHXgTN3bXQiOrWpwYO1VQ3HA0waPauboLhu0dq61ARKGbMhoD\r\nbX6kRtTtC1VklokJKfI8+j8H9xQFKrhgIYMJusOHQKEcYY9Pn//iwAyzCK7X\r\nZ+M1Rg8e+0AAjXJH6GMztfOy72q7ABU8MI+YnrY6ZJQgBhG2Hai+0h4s+XPj\r\ncKOBGfzHuZvacQy03wu7qf6YM1Dy/28Ic8NqJqO0hqAqAn4PcCaB3VPJHDAo\r\nW9leu320D5Tv48jNO/HlULxZWj5KHgHxn8Nafl6IaVUF24DZLgn6XX+5vtaa\r\nFbRx348hotpBr90S8/VlaLcskZNe5WKn5pWltbF2kShMsdYEntjFuUEzrLYq\r\nuCXGn30Rj4qGkqEl7rSsoczn3euGfYu1zQdpv6biShHwAXcfbRrNyh5iuCfe\r\nvg7pFLIJzmwcc2G9u7RcJdONpUHF+XUFB4EEwYu3WtyEVGF3grOvYdE7gw1c\r\negbltirIUhVzV6Fu1gTmyNeWoGvHUDQr6tq9slyXRUkebVrTpHtZKDbSyc2c\r\nr1NLH9NEzxnVfpWPvuOzD8RV1oCkeFiK34I=\r\n=b3f8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.bf86521f4.0_1678835614677_0.8687464630081911","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/card","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7b37a7e83b8c9c435fa163c2e2877e4dad3de40","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.11f3d280e.0.tgz","fileCount":23,"integrity":"sha512-lz5bkkVyuEwzheVc9lNbT5zG6g+Y0krD2jOH+Qy/nCpVs9VDsua6SiXsR08zX7v7pCZdIDpHGoROYMCB5tKI9w==","signatures":[{"sig":"MEUCIQCcSgvq8cnaT+iTPj9Mo7pTFJaLr+NjlZ+Tpr/3s+MuIAIgYFIGdHlJcheQwDzBCg0/vzqLt+mFq1Tl+Lq3/ttAwCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnbA//fPM2Rn7Tt5oMk74HqW9liewgG+iKy+JDzsG7Hva+qdJpWaAa\r\nQylcCTimJU9EHQpr30TziyV8E0bzBOHrng/x5304EjN9XMiWm1jmQ/lc8eUH\r\nsKUtfIJGjhMTRNcblCfF93hzTAbQ5MKX/2AzVmbs27gbQEmT9EvTZi/HHnjD\r\ngKEwwRK+XGhtB/kOrGGm+02PvZ9R/bEL6NK/sTuKBEmt1vPdS0W99/aQe0PO\r\n3UuTSxBxq+Qc6iQb86/CvWOVl5Pi/UeMkKSXv/a4ymQDhgJGDyKcayEwKUAb\r\nBKl94kdEATOn30J+32UBk3RXXE05CPwZvgayvpsRReccmCy8rLfyBV7+ZEFu\r\nmUZDPHXTPM5aG3ZhCvNyUzrhZwJkdPqU7Hf20vJxvC8CkIu+1SXk5iLSyte7\r\ng5SEG6bKUiOcujqx+o3KF1qA4dXWJmgb6lwXmOVW0WluNVUScnl0nWPJi+wb\r\nuOTjpPqTUNBmiHjkHFT9N7VIzhawVCHrnHnTkSNAR9Iiy7+s1Z36yzCQr1eU\r\n5MvX37FOsSV6apOF7v4Qa8cNkLi3GC6qroy5LY1rDtYWz24ePZVV9kNc5ik5\r\naCpAi6ff2ClF5IaZF0erGebn7PPVnLg0qPlOZk02L7M9whtG3MedmLE2TVwJ\r\nnhkz4yk9Rt1HhhnYm5xccXcf39thH2TQkoc=\r\n=ajpK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.11f3d280e.0_1678839085223_0.4191059289140251","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/card","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b281a409a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"445292ee71802ecdd2d332dca49bb07ec440f81e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b281a409a.0.tgz","fileCount":23,"integrity":"sha512-WsYtH+0Ct+58vihnkPwPnuO8rxKMmPTTX1qkTxAAIYWqkErxhbpEsqapEnvD1TPRBAnyb9Q4JkioDJxgmSnfOQ==","signatures":[{"sig":"MEUCIFN1zP+lISLHguCpWBfxDOWY8CJA8nofhmGYW+GGqU8AAiEAxACSBz0NZiO8SUVhTmAfDFAWbcJXpvJNtkbxZOrAOxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdASACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkqw//WsigWxCGAJdUp4yhAQX8VjTpI9eGXLBdfP1wD8tr3o9SnctR\r\no484d89u9G4yrjo9XM6EOcmmOWQ17dWupbXmxKEmQmB8WEdKuBJBv3OdPdGV\r\nDxG74D9/PgsAEqKUuNs5vIZKZ3meavkJoRIEkQYUy8Wt1P7pev2dcK1qJjkw\r\nvY0XbOyVsWmUyw9Q9MTewIWgVIXncxF5pe+m+v7JSt1JLX9TmDseHB7ghSCh\r\nijgd4o5AddLVAErkkZu2IX1xdqckCxnZsTF52pOtG5b+yJkH5i0IZTOlOQhG\r\nykq5R124d3nGN4tUYEL2DIOgXo3qjbvu9H7ZZFJZgITO08ttgKGnHAjPhVae\r\nbktUdWBlxGuHrBg0kyRC09O+rgzJyavrDtPzO/AMZ/VIy03yJy1rroeGr+/+\r\ndpCO8rpk8ADJD/kq104F+J7Ja2yMIWxYvlOcUD54d/NztfLdMHCc9CDbLLY/\r\n4v1U/PIkEq60/8kMzBDVqoq9PGXZgCGe6QjuI2zXT3woHLs3J3vRg21uTpA+\r\nn1X3bjyblUuqXsTEyrw8aIK1KLbt5YntSbPiSXCgHihsQskLw7XVgV40zprp\r\n3bqwSQ0rtYAi64TnnI1EFv2b/vvLpl1lQ0x0faaaTSimpjxb3VOb7Q5VW2Dt\r\n2qTvZNk+T1H71E8vQSyR7cRcL6jNMygCg7s=\r\n=y5B8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b281a409a.0_1679413266421_0.8681278230373191","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/card","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.39e473690.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f67eeb6e0bde8f3d5c09904b3aae8f3fe5683ec1","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.39e473690.0.tgz","fileCount":23,"integrity":"sha512-oxhGrlLKwaT0KSlMwq1QAXqsRa5q/XCV7SN6v97j2lhJxC5UrA5BfUM0unoC2jTJ2NS3JHgoW3qJ7xtpkTkCVw==","signatures":[{"sig":"MEQCIFM3EKqWJhVox8FyKqJvfsXfzmKq1WtZwHs5TSekwNNNAiA2/RYb032FlY75I7+3apRNYhysQI7U0oZfs01Ha2bAFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe6nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol9Q/+MhImYITLsnFIB4I2C88pOlmgxIP7WHFsfNi7afc/crhkPLem\r\nVVJC36q+hxCxeyX6JJpfsinogLbW/CdOH9s/ynDHuNRrb2/Dm0Km/5/ucwHo\r\nF22CdqFwWhmeezDlKjDaQ5BRWw3PxkRa4eIPNkUKU5BwPbt6BvkyvWCq0u1K\r\nG75FU48GH8bDVxQyyT6UKEJi+9DJ8sAgl0ZLGq/zFFBJyRrVnpUxsv9wXpHp\r\nV5Rs6vr3ynUlOo2P/IWY6R/cK1fisPTP7HkBFcfUNp+ZlFPjNbsaNYiRHls3\r\nZureTUnyESziXYFT8YdNR6rxjWwz1MJ6cM2TRL1C6qIsW5W6mR1EmrAtzW+Q\r\nL2OvCkBS7H5Hj0Ptt6JQuB5Ix9ite/czRJVXbQa2kLxfqhIfKK+HgO86rHbq\r\nT03UJKySZeXLYqZhTBXWy0DUUJgGqYdgM9A9talsQMLYVuToKhFzkxPd/tJJ\r\n4vMiuNpNOfMBhlueSAxCckdORmPfDuAzXbX5ba7YNatJD1+ngt/b6BHm3h8U\r\nE7C/WGPbGGkefnVzWN5nNp17FDcKV1yK02ksG20W+ADAaF+SMm1WBuGEO+ld\r\nySBwDEEOre4a89OZ2QLkotJsMmWxoIvDh72LYMfhQfR9SqXpq7NqIFekwK5p\r\n+6TsszbMnV7oBTDYOl8qTPVy/qi8zqJHhrI=\r\n=hhNS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.39e473690.0_1679421094892_0.9789030306948776","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/card","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45517eb5415773b50c9ff7b30b21aa619acfa369","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cedffb44c.0.tgz","fileCount":23,"integrity":"sha512-6UIudLSKCYUkFZdJBIJW+TPfPah3G6W1r//kN6r4VjrlXi8vv4/90+Cj3HwWAg0jl3tSEmpGdnzZQlpDjnDTvw==","signatures":[{"sig":"MEUCIF0Jst549LJOSdFDMjnkFrL5hbeOergWT8wi0RtrHLmZAiEAmseBEsKYSjm28jK1WpbfHXq9Ua0OqwduCln7XayptkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNvQ/8CfFumhQbO9oYmPyDpjZLTvJkdwoHZEDKXn7rkcEwJhs5StTQ\r\nCEXlhr3f4de7hp2jk+Uq/3uDVXt5hlMEUGi/bNU8P1LjoPjcIJj0kWeDZcbd\r\nxjV6PL6zuQBeVdQWKkJK3P7FBI6gY9qy61GFnsfrSOK63iUOkbtZOLM+IQt0\r\nLdhGL3w8EEjOok4tcuM8WG0QfuQXP2bvDB3DYgtZ/MsHuWQtm2ej9W977Jtl\r\nhh6pY0nIDiaFdxkY8KxCnuV26oJkEBzPMntQ+hN126jeDKzdwXua9jpRXPgv\r\nhZdz9e1sjz3r73YfoKM2AoxYA+rYxVYu+PV239u9nF2Ja1GZcgHvVe/3obxf\r\n9DDsJHsTMjlnv9chU4VkHXuyjkk+RnkM7CREMQHz4dCkqQQbR8ojT0lTLUoA\r\npbcRUBmixlWwAK7xIG0dc63jmJbKgBQltkQKI5koLBWJA9I/yqcLs20I9kEl\r\nnT5XkNX8C/TLYzdhuLzZS0dOzsKfaZNKxNFnJ1u+z3KSiQ813aSvJZKXqtI2\r\n+ELqnOHW67wbHeOTJC7IHtZrfyyjaCSap3ra8nh53b+jdGydna+ZpS0mttPB\r\nyJWGpP4jJ1xNEWVnMbYcxuqfqY0UD5H2lHMWrt6h1w+ZIbRyrq/Ju2KHkFnf\r\n4DX14Ai7f+D1lz0pw2phUgq3ypRj60mKZNo=\r\n=uVxE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cedffb44c.0_1679421509588_0.6516866958670806","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/card","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9a5fc9687765a07d5b0b4af78170c57c6308c43","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.36a4cba99.0.tgz","fileCount":23,"integrity":"sha512-c+FhH/8A1l1zbUP6LKFx/Em3IJh0OHQ1w1xh1loYquhj3GzxV3TbkMkrBrYLhaHFpJ29SS3W5BSPlm+veHB2Ow==","signatures":[{"sig":"MEUCIQCs7qaYcHq3RtACUjygTQkS4pm4lAfrx9E6xVICIGW+GgIgWpVZQ+7b7PKr6fCcGaxWrX1yuzO/7QjKcW+eVSBN0S8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9fA/+JdEDo6qHhiIK/800mjX3iXr74R2uj/chScbWSrXtaytKOzLD\r\ndRnx39iaXiZ39Qqmc1U7Raslizj0jNLIydVNHqhVNjAWfkW6gIDqeur7PA6E\r\nQ76rBLQQji1HqqcCIHPdvgc+DMM9Q7ULJaQjax31k/YPY6ui1S/K++K2ed0Z\r\nA4r6SUbHsAEvHMPOCbeTBDGwmvoLGSoWSH7c0bSsVQLVj4CzJ0KC5GiV5XwE\r\nKcwcY4c0MV4R6KdHEtuccvmGagqjLgYQWN5HjkmELaImqAHxTnjjYwXqSoeU\r\nysZaIIbRnoaqIOxMVLAe6Q6MaPGrQED/xacAshLVufYxf1Sq3eCMfkhyLU7D\r\nBxtH7XOUOXMnEr82EJKIzbYrI+Jf7mWNObEHB//QRIDpPep51oYm7JSLWOsX\r\nEL9uwlbMzfxKGUJUHgSscTXlhX5Tlc3KLUMhkORPDsgNhr2+VOGn4owdh3rp\r\nt7PZslChAxpji5FfG3G8FzeRVVFXGaB8+ofi+WD7y/cqIHtjroKe7gWubRVR\r\nyEvlwMOZz35BATKeywRAW/sDwKI0nAEC8h3iQESHOuGw3CTUc/aR/bjxBDs0\r\nrg7QTkCclS4WcM51mgM32AV9p5rVER1wgZeUaeAjuzkT12uWQBqDDRSQuPcR\r\n2hbB7LhcnF0Bjz7i5ZdfczP+MukpRkj3A9Y=\r\n=sDNY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.36a4cba99.0_1680025815397_0.12064009795941","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/card","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"002860fec47da260f5e6a2a41f037229220cda33","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ed7e82ded.0.tgz","fileCount":23,"integrity":"sha512-NAZDQf1XGYF4fkA3vbrHDW/1P4K0G1jpl6n7HLRgyDYgCOe4X+KnKgH9cF5Bne55Rq20qgRTjJWhSG00MfcgSA==","signatures":[{"sig":"MEUCIQDcXObaulZY0GuweF+0IcKrxrhi6ZzLppsioxvEm/zvZgIgTchI3UpY7Ard7QeN9wpVDL4GNg7Uh4N/CfCLx9piso8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI09lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPPw//Thzb0el5OZVcNW8/4K4WKk8hSaH30rtjbzICb40GqpEZ7Kx4\r\nxMh35RyIzrmdgEnNA49td3zk5YZaE7SVpQHxhz5JH5zQnoqT0p29bAFng1fT\r\ncKZLvXew7xn1e13q/vLMGIgj0dobfZ0N23JWOKTM7zrCSS2FGU7PvgdX5AhU\r\nqqxen43zc1IYSCc9CpclZAsKrmyEejHj+qGPactMpiHU4JGA84jIaNUsmEDf\r\nGO6JY+vGjxw42cG/D+SRFzT/M0GjWpLX3J7JRscLhcwdZHfm8hYfJ1eEtN3T\r\nOkOLmH+ylJ+Mzje/V3qZRt+hm8U+P3jWW31T6ftirtw3X0wXUVpunGp55ETo\r\nGhTRWmUGJEPTcorUYJ59V94J3FluU5K77nYY2RRB7QSbVSuE2JE6AqL9DZ6r\r\n5a9HwdvssHVDfFlNgTZY47x6TSs2UgywzuxdC2EkVENowleb0tLZjudWUHVZ\r\nXv+wyO6XrNNxmQXf0ThrULD29zbzKvXMnHkvd3bP40KCzEVGhuLyIbKVrH/r\r\nfaGxRjKmXOdTpFlEl92m4UFgvRRyGNOA+4EvjCYYeC/wMOsjlgU47wbSSzxH\r\ne9ch3Yr1aLIr6U6oWIhf1FnxkF/HaIpa5BlcdrC2QgpLUbITc1s2PUUa8Owy\r\n3zukiTTvpJLbbod63VI24jfyRpIlpORJq58=\r\n=lAuE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ed7e82ded.0_1680035685437_0.43272836243632384","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/card","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed24523fc474f1ef37d172e028a0c23f8a5f35ee","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.55093ee1e.0.tgz","fileCount":23,"integrity":"sha512-PwUPsiIzg9xqQMm5A6LAgfE2K9d4YQM2+5q1FpJhV70avzbCB105FH6M8Ros9h7Zhbcw0czNf0e9xgVlbvf9Iw==","signatures":[{"sig":"MEYCIQDrTuuWV5NGjUyP1dw/fGpyXc5q7YIeCu1qEiTq4kDeQgIhAOSUZf8rd3Lm4uJE1jJCUBn6fCTgs/bNTodvkA0WR3/b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIgWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI/A//W75ZqTA29T4ujrmb4OowlbMv/LZwMpYk/2AOehoG0rcvBSiN\r\nyAu6RwS6LLAIiNqDFDulDG59fk1/2TYTDE60S7oMTmlNAwn8Dr1Rydkt1w+j\r\nkgmlHA7XMQEKL+cDmNRUs94VYclsf5gfvuXWAWR0bnTV06qfVoR6wPoF2xEq\r\nxu0MSPIstWNPlv8OvmDTbV7aEFJqaFu5z/PbSYYuglvO5q6cgJ05vGlfF7dn\r\nKm8O9dRFxRYVOf59pK3ifWzobQBf6IWby9I6NHhBsdx4wS0cKfVa9yEpzOi2\r\n2AH+u4+4fgCp1AlbhQW7VGgh/l/trSYwrMGkOxcPEqDivBStet4OMiuB+f2z\r\nITse/sO/gX/Clp+YJsh/DLRHGDzRB5k2uG4//buXGKQ+kc8NvyabYbEZOn68\r\nlEFyidGHUf7jeK5e27XIYC/EZrseClT70a/FccnNyk4VjFk1ayEFJLJa4m3x\r\n+ouaHa3RPfvlxIqmWiSAuJrEnTW4TG6BtITcaGjtESaYtTMAV2NaELRxhurx\r\n7DcMo7SfGGXeTI4d8TCdxTErr2TN97o+PooyJCrjmERWwM7Ht+adn+7WrOGH\r\noHs2zpA0HgRPPWiAwal65d6Y3heDeyR82ryefSmbCY8/gYfSefpHoR4Du9Jg\r\n1HvOPkyftPsRg6pfw4c/e15N+DoxPz/0oDk=\r\n=3Ecw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.55093ee1e.0_1680115734622_0.6885452215677519","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/card","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c8742dc3f2b25f416e40ab9d0ad6597ef337fc9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0c53abc81.0.tgz","fileCount":23,"integrity":"sha512-k6dJVDB53l6YAkKjLMPBrhOQTX8haQGZIA12rwr0t8gSW/4kT96uN8yc2ZQwJIX5MwieKVVoYYNrk4r24vM4CA==","signatures":[{"sig":"MEUCICw2tbMv6CRPR1aRdhIiO11kK/zFq8HE8qzFMV6424TaAiEAg3ZWbpo/rZjvAC24jXsB/khPMs7j+HHGc3Gj4S86hjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3S+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprDA/7BOC4r71i1GZUuSmm2sAe3gu6dvR+xAVR9Y/BpjzmEZZnqRrL\r\n0Is3ITz2HfRMLXAJUgZn+qq6kblAxeZ4h/S0jstZx37Ou8szDCZBY62aA+BI\r\noCW3Fxq6vx36YfDx+Tc32WUYLWcvcH3UUVsJqDnHpm0Ws0mF1K/N33t9nd6c\r\n6ivHlCbGkOomeYNDjlFyVoNSHvppZyrkWuwMvh4CgFEQgUyrvdhs/XlVc+8C\r\nOy10o2dEcjocWki/qI5a1cr3swGZBXfQqSWF93nULKlBA4VAQwgrHvJy02JA\r\ndjqTLB7tOVJHl0CKecC3vtbzPBd/tNQ8QOFK5Tmx8AM9w0NFmhfy1jJqCRT/\r\n8dpWOhk/KEGO+DulRWxxv36YFO7Ccv2eybDX7q9hSoUdBBCeaS/XeBx1fws7\r\nUlGvWzKGJjRfyXAmkLd+99bF0CEL1s/uDAifMFHT43byePG8+NJsJJcfb1wZ\r\nn/XwIXjPJC3ZdrKt21rq1gubP97SkQvmyVGfvrPH+lEzlLT2mqG9XH1KA6CS\r\nShUTnFez6EK6d9WMMh9DrsnQV2WvZbs34DhuB8TMjxwutD+Tey8ketQ/2yaO\r\nX9Q7ScHPVtoP1KNh/8sbGS3b9kOFWwgMLGz30FuWxE+ak+jLoBJG2MxadLiD\r\npzxK7priPE93ASUuBnFdJr6taxH5qfWsVMY=\r\n=/j6a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0c53abc81.0_1680831678479_0.008247162736691571","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/card","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.51311e69e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67452dc1d789248a5940fdb0b66241be1ee35acb","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.51311e69e.0.tgz","fileCount":23,"integrity":"sha512-/MCRiggQFkPaIoQedaBW5tUF1AP6jl9QFiWF8RFOwYtLdoePQftv9Wr9kXFfKPFn6pwMQjCJxD1wpvz8v0VdFQ==","signatures":[{"sig":"MEQCIElitudCQuzVuUN9htAyXRLy7c1eJuZAGJ0BBNUaf5JGAiAo37/FuVPuZ+Q3r9zcIU50usLsBJEVKIL5vGfFzdd+xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWIRAAgGNwFSyZfai1IaIRDKKrBxf5PyZ/zcxC9dfqaf2gci/PZJYP\r\n3528RwQE0otonF7Xs4lNiVIgsTkBmNKcWibqC9uJEiaWa9LRFu9lc87xCsh8\r\nR2awGKog64rj4wzp0PTH2dh/ihMz7Y9quyUobalWii9CdA6Wf2EgKhzmZHeG\r\n2XNZOp/lze+iK7zKQAIzoGeaOUanTSb8vKXEaO38Ee2Sr33eXjGA5WpOIsZD\r\nnLmgXz1ekKS5q+kb5exFckmYAPALSqHNoFDN72oGcQ7JxtnnyyUU4itN2YcC\r\nRiq23SnIxWtuq9DKxmFHUDkw59N+oXo7tefje8OZnt39lLSyM5QMccsA32yK\r\ndHTVcQUOJXYG+NOdvuzrPbOBZ6+9rmzUkI4FYlWTJnk12E0TZiZRDHF2K8LH\r\npJLIHv1PdnMJGgqODOfF3d5A/7MpsoU85nVlEY76TKLszWPSqR18cENXET5X\r\nBD69VlI7hBVL9e/Hj1XSog19JsgIQNPNigxtrKXgPAJ5BXYxW797EyX7TV+S\r\ny4Wl+0ap50rsbYoFFu6eMQL8n7IegSuM4VpzJh/BLcJImKYqdqDhPvBo/vUV\r\ncJ2LlnYJAglSj8Oeb09Oaqop2wIBpQ8DOoVfgII73WFMT0mrahrA24hYo3Mp\r\nJzZjVEGjA/EIaKuC6OvEUC30NAhB5tnRfrU=\r\n=hstx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.51311e69e.0_1680890881629_0.07511675496360071","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/card","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2414bd58a050e7cb9c77175e3022e3ebb41d8fef","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.113b1a38e.0.tgz","fileCount":23,"integrity":"sha512-fpHMj67ynWM1vyrzaZ+8fB7zQ/5Gb0d0BGFj9XYUAdH3c+/qz2RLZsUTrCO0ICQHkTSFhceeDx/QkWtrgzuroQ==","signatures":[{"sig":"MEQCIBvzZvyz170hM05dMSFQjmefwJhwIEb+KUfHgJfBoSU7AiAeyZJIywYnDcrCqpQ2+KlW+om9ysPXjDpRIXeyc8OZ6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIVzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv1g//ecDD0/EOMG0XR3RgMJFLyQq2mL6hFVVs6jlB/GnvrB6U0f6d\r\nw1E2ADap48NR1Am3NHvBZfnRZfgaNFu8rD9tnAXxxKdasPssZAdc9emeqb9y\r\nrSEhY/WISw9Eea6dEHwNAHvQJKx9EfyXcerb3HNgtsG/tPGco901EHIW2qiH\r\nAhfDvPd4Zococ4VYyZHmMkWQETWZ6aHEPgv+Osf8BO9wV5V7rsYzdm26/5cf\r\ni7P2txE4UsRZbq5bIhJTxS1Uh0FmOkVmUxX4Y6AGCB4wTCf/VE1ZNi1NM/Gz\r\nkKSoU1G2VR5bsl5U89zqVCV8n2Mk1WKGmbhFx+pjOkXmDsj80cbsmvyupCjF\r\nGeMr6xy9xLJ4Hr8n39KrooaRBPpPx6yPxy8KQiEPXugHIpGPRHNDAcW+05RT\r\nY2FWJpEAVNYNHPi4ctZ8HYqpI9H+p0GCWHAJX1xwL9RMIy++21hjLJNJHr13\r\nD1zaGDi6CckfWtSXedEGHeE6ydPfuMQze2NdVL//VnIoPMBlAfR4p9Ir8Is9\r\nws14eEHDTG7gWoObdTMRgg4epqGc2VOvNPz2jY1DcdnpQv8ODSWq1jtHIi4B\r\nvVfgZPE4CMnJZrwTZt/7odIAoGsIfmjVIKtWe5azyHRVkr0CwoG3bJiqdSEs\r\ngSXLEDHuPbjh6JosjoOXUPOsxZ0mvtNpvXQ=\r\n=Uy16\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.113b1a38e.0_1681163635625_0.22458520723551856","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/card","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ea2191426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5538983622314f022921850d26830bf671a231a7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ea2191426.0.tgz","fileCount":23,"integrity":"sha512-KhvdxjbAImMQKCVx9xTnlGCptc0Fo82I1ZzgejBCem4vXR3+qzuufC+Y6ao+nALPk8YUI6sih6aL0VCindiqMA==","signatures":[{"sig":"MEUCIQCkiDlcxSPFLqO3uUAPLiIa8Fk6Y1gqjehy1UH13OkEmAIgH/WMLSe24UvVNd1GEzvhJF0cUj99QssyYZolqcpQUqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdd/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyFA//QKenZePs2p0FHBWMNfvPQwQLiPa+hcNGdkjxHnCfZJXdqeXY\r\nFRJFBMBCGTGWnkjR82bfrbCvRbldfcmu32ueC2xoHm8+eEdCVcRmHnOD/k1W\r\nWVx/vNTmb0WSxAgdSNRYqoziwfciaIvIHyl1/+sxEX3B7HFHt+LYnEMCxvG9\r\nF+hRdQ5+q3c7+fh7sGo/hny30qAxXf0rbCxIWfwJrOqoBbk+XIA1Zw2j+/2q\r\nEjlxu2d7Nx5l0Q+vGD12R4r0jdBPMOFi22bMgkRCpz+NsV399AsssA6WWxGW\r\nV3PszB+s4Qkb9phA52WUvJOk/le5omoP3aw0UBYTim/CJvvtrEuFPDkfAG/i\r\ngDAovEwGOf7QuRHML3qkQw27QeTjARUG43Tyx3GWxlFBoKUyv1f7zd0YsSTj\r\nYK9g20i7noyORNLmWkGwRCRCnXqbQ4Mr8kdiLRNP2NxnxQ+zDf6LR+DEXjBg\r\nuwmKKHaZWDpw/acueewGMP99du2j5raYn/J8NiyV94syQsYPauYUAKTUeEyv\r\nvP1BTxKc4+oY9sfQrN5bLZ1C8aXZ3BqxwuTAECyj4/FFKPlhaUqQvHOwyhJD\r\nvzIANSTXR/TGWNu768rHjI7a/9wKfiwGSwDVrooG975oeM3f/2JMfXUTNRuF\r\nT9D1tO2jVTarxaN2NXfC174K3ozP6Zpz+NI=\r\n=UW3e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ea2191426.0_1681250175553_0.9947324149283754","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/card","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c882c5ded666208e18fbcbe9db1dc1c4083072c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5a5c38538.0.tgz","fileCount":23,"integrity":"sha512-JwWLisCrxKrjqOrNtSRxhNR4eqaFfoS4XTdKBor3jEhx/H7wAgoMsNu6+OsEMJtDu4nUJcZGc5yTDNzHH55KYA==","signatures":[{"sig":"MEQCICAJd2x177xydyfakrpEK9awjlVIaD1U0opK8zzamm+zAiACcUhUmZ8Q3TS4jRqA+mB1lPJNw7hBIBRD9rqT1HGnig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCCQ/+Jxk9Rk89hp2sD2gjbtzK0WI009Z8sSIlGzU/CrEa6awitVFr\r\nBKAgrKI119GdYtwsg7ApXpF+u7xTGoaEztQGpR8VzDtfmWjm9JTjIqbEdWcr\r\nC62c/G3LllUm6/60aSu2DF06gxqJlH3O8/ZePNdGdmPg0Be3weMo+kczM3dB\r\nzbpBOc5bJhtXRsFQECqf/XzJAOlyJ5eTW2RndKuqoF/RtZxkY/iYWzGcxwuS\r\nQhcrcP730qo4Oxl9ioVmuQ8tns3Wnx0EWukgVf8+aWry5hH2o3QuL87oLwHJ\r\noJSAWdyXmTMKH9ZLgtVXZ7nngN2D3m+USWMT200MA5tFILwLefoQ7UB+rkl/\r\n89jinvLIjHrzXQSFheVo6SxzbcbLSQax9h66Fx0fIih3Z99kzt8rHxvKuauc\r\nGIIimbb9UpREygWycb6UH3Fkq5S79Nu+Rld6idP1CA3zWFuFK/MHizSk3+CD\r\nXKx55SrNT7VW3YLVTkzEcTC4hwOgt/0MNBiteTWhXClUvMycd8tJEgdr+yaI\r\nJkzqF2MkPqe2bIj3npMBCkmrEY1w44rwvrOxMJLN705nwZuLCIX2ENZxn+NS\r\njkT7RFLXFuuXqr9CeqI0ciFpVqyrEC4/u0rtPKqGkW5AkY6jYNm+M5s5gsKW\r\nRBOEJ21YMlF4A9nimR4X9Yr0pLUhaevdTqw=\r\n=Sy7U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5a5c38538.0_1681252228185_0.5713307865805264","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/card","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d92f871ec53f4f4829561f9c918f67f5c67e66b7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":23,"integrity":"sha512-/dsFC8UofwblpH8zXAWTYLX+rPLszvs5GDbea1+tzQ2j1FaaBa0XHs+bE5nHG3V/L4HcaAal0AOHzPKzYNnyiA==","signatures":[{"sig":"MEQCIG/nOaeCO3+h9QvsOQo17pHLz1GyMxkSlf0HMCkH5B3FAiBChHvPeI66zT9XDjxDaXT3uRpGCYZuid8T86diyeTL9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNed6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWdQ/+KjrnGalf7hOaB8GjLYUfXw1uqZWHUGaxTbN7wuNADqky2RxD\r\ni6uSH1zjFcTQiB2r7v8qL/yMMbwji0JOvm7+w9Qv+8Q2gXqTZBTFAc4eyBhP\r\nrnFcvxgkL8AhO4BDJH/FVFYZIF6WtA6imTCIYp9PCrqQkIKIdr/8NjzeYNag\r\nKI4I0HSDg3LLcNfk4eYtmb4vgSS2ushOyPLCCP1KQCk6qNWxSa+LHoP5ddPM\r\nXW8Pdxp4NIe6Om+KbXkKPLOBs0xFFaSETBl9iC2tAlf9NNQoAWl/G70nJdxt\r\ndqYbaQG5AfOfM1KhpHuFP11VKkBTjPs+tuTvzJSyFgFGsiifTwHCq1q8T2mo\r\na8ppSIkcXCc/saBa+wkOJQsaIyljwABkxiqblxBGBm0R+pL7ajFqat1wYMBA\r\nrXCnKLENE1G2gwpZFC7x3c9oQM2MCgMIeSHCSE7w9qFn1z+/g0Zjfko0kyLh\r\n7GwHBOd3eBUkj7n3pzCCD2OFi/7b6bzS4WrAipPRHn/d/2802Bbax+pjUNpE\r\n5veXdg9aFMdbDoHav/t4DnqNDJA8rWKEol/rgL1h8jHpCr7P3St/2bTqqIHo\r\n0OlNi7kogB8Kdbliq/uD+0EvPhwqJq2YywhQZxhJouYKicLMb3jzL3hLnZ1K\r\nOOnUIaETTuahBE80wKrjyFPPw3Ia9N4pDk0=\r\n=Aaql\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e4b5ea7eb.0_1681254266246_0.7285358657060874","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/card","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6651303424ad3f9272b42fbfe5bd0da989bb293","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a094dd9c1.0.tgz","fileCount":23,"integrity":"sha512-GVjKD9otZ5wu7WyVhVz69zXvlqbhXEtq5wet6PThQWBajvVQ+ZpkgyXFZaahWzOsNQ+bseuXURd5wT7kmlL+Dg==","signatures":[{"sig":"MEQCID3F7LaR/ymMLb9mlMjzDiMM1bbEBNZXSPgwYAen/pVAAiBJy7h2aoiA8r1blQ6LV/K1ZLssBItHEGGKQXzqHr4x1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdbeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohHw/+PFJ3IsR/PI9QrsDvPXgJUrU4/MH1DwcG3eXzbKLgCHe+pQjU\r\ndL7q7DHhH64iCldO5j2KL2SPICXTduSzTATuZAViAQ/wepLnM2IW8SXexQs0\r\n4W+Q/rOfoM60qpPafOoSNDiVFkcN9Fd8Sy6rsqpdDvjZBY26bhiLIgcxukhE\r\ntGYk23d9zK9yBqLa7zcfr/ILxcpP0oq6HZvFSS7WEYL+RwVEsTUpteeckHDV\r\npuMYVmmbOygmzXw3zCrd0vQ43ijzIqcw3aAVdokuF30Zv9aIOJOamSN/GoXv\r\nFGCkcKNAQtfuAjEieL8La59sYIg0mG3APiL8Cd9GXE+wqehqcVWPiJXagGHI\r\npLc2MuMnPJ3OTUnmaNgxOn+6/aPBd1+1F333VdGXavvoiDcCxXhdzeyPzuSP\r\nQ7ErBXxbciNEcUznpsghd41O4hC3Olx2R9lgE3CfU/pV1sRcYBIufZGxuX1L\r\nkHOOrYJWcA/CHKONOoquf2H3LtdDjiJPYexZyu6liwM5QwueNZXZJ6UNsee4\r\nt8u44LgrPqjjwS9wNqCLsamwCdYRDXZIhp7ukrtHTDs8Te1uU5YUmPBou/r5\r\n2cs9jn+/wQzHjOly5w+0HHGx8x9gnz4tq/m7DM53DOqKZzNK7O3Wga5pZFKE\r\nVLZ0IvxU+cPI0aJT0a8mAlhdnmsmglkDVRI=\r\n=53Is\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a094dd9c1.0_1681512158166_0.008495002264830687","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/card","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f771b091c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35a90c85fda296d2cdf93d7d5235e44b48b5fa19","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f771b091c.0.tgz","fileCount":23,"integrity":"sha512-cwfwNsWHrHURcSqAgScfcgPf4epi1Qxo8VqyJXLqL2ZYSbZg93a2m95LLsuPSudiViZvmlJqLClJJp3dcVxA6w==","signatures":[{"sig":"MEUCIQCGrC1gGD3H9GJS66NOeqzwpMT+Vc+jx+nowNyLmgPovgIgfj7s5yLQf1/QmHs6zpnf4okNqvhw2+393w4kd0No2BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWftACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv8g//YZPNV70F33Yng6vlzK4ijOIhKmI1DDisAQOIed1EQmK5sPaF\r\nG7D++vtPhbeu1znBiplTBCJdyMJ/jZBIeWN+AchptWs8pQeEwyMbPmvCXDEm\r\nGu8lK+7naIVADI8DC9kznNgDWlIU3DjvihX3bvUZXtRaAJyCjV09rUmOGRFK\r\nmDBEUAep7rohj9VlENu4vWoLWYp/SsTV+eQrUnXla5noWig/cjxEA4btOqa9\r\nIvZHXbGMGVJlscdDn/pVlj79oVI2Nh9Wdv3q11AkrjRc+HFc9cxVn/4UefD/\r\nM+nFkwCFm0BAw+02JFzOq0Z4ZSlfZ5x1IopsI2AtaU3IZ+CqiZJLpE56gtn/\r\nzuWlDGlsl107J4saDQyS1qD9i+KVlOaE3kYbPvKC0qPoOnzuV/qff1OGusbV\r\n0CwTFPi26p/cbXN5TClzQNaeaen9kl8FwSW8hHY20kyKexsNTIRgJUsoZzhG\r\n0AXFgHq+FcBHytFS9UH9CGeeaHtYLhQC/lJJTYtKkvrGEiP2hAO7eyANJpVl\r\nH7Y0mSegdWm0Ei4xk6aSqK/dhYRX99dKjf6Qs0/ZvnoQ6besnekr9gilZiD2\r\nW5gIPCaih1X1aYDWCy/Y0aHRBLn+dtzl+g6PA3LcER0TjW8xXzErmOBjUXlj\r\n8r0wjqdKEV7M8jC3TkCUfHaLY/HXIdLs/QI=\r\n=Mrst\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f771b091c.0_1681745901247_0.6981354060512388","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/card","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3fffa175d891b06324d564ab3bc35aa3dec0d6e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.79b1b612b.0.tgz","fileCount":23,"integrity":"sha512-7ti0CvubsCiTrncxsYXIOP/gWXm4N7K1k515dHrOi/+0G5nKIT32rWMI7/IRnrPVPCc2dGUGOpXD1aMY4mCMPw==","signatures":[{"sig":"MEYCIQDJia7wpUyASp5oIrnG5j8FRqUTeO6HYEF+PHIx1wGJcAIhAK75mOqkjxL4SMQLWBL35UFeGqOwd9yHUp2b7J5LT1BP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHv/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru1w/+LuaLlgaCr3R4uT1nBBrqtbneeB/GcIro0jFm+9edRAgtcarX\r\niqmTdmoZ5f7ZU2k30E12KwAtusugGoRdluopeJS8lpXlqcI3sYORBEIAU5bp\r\noiuGyeRRYXYLyUdGMqp/h+rWlwFOsSXavPGTSDMSnrWRyFPR0Iw8XgaPODa5\r\npmvsQmCBjpDfRlc7jUz5ETnVtbaqYxCZGkCTSOmioP64dufu9HmLpPLeKJuu\r\n8/cueGQOhvhptUJfb6fv79SBfKJ+akeOY57rABZiqzxBKKfvA6OqiOzkCuza\r\nHCtguOh9ysx/jQMjIAQwPd0My0iJGY62BWzO2ZFPvDfUiUaQjjx/V9e7sfSz\r\n2VEgKRjzjec5xJDMtQ7n85RnqaqtO0hd1T7A38Ja/E6yo/pAPDZ5Z8aeuC87\r\ngElwPwS62yGOKubenNBsSUhIPLjo2Yg/HrcLmT26fKnPk5GvN/a4GPnL3gqJ\r\nyz4HcqfqMk3tGcrcZ2b/O6MlolIAm4NBBzt1m3O3qyB/9oB0w1aGgbrcQ3W7\r\nEzQfY8OLJ8Bv26hzipq3znE3zo1wm3fuZuGFEslqDshGndldIbwn+DOPdXZG\r\nbpzHNtvozO+o2VfsO6daBR/mrzrEoxuhkQr2rlLsiYUWcVVsYqeyL4gNY80O\r\nEdh2zuhnK6Xp/DCkqJwSZTZLZvgAHCt0nAc=\r\n=gmSd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.79b1b612b.0_1681947647052_0.4809532293478773","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/card","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2faf5a2652f9229d07866a427a751843c700f89d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6f50071e5.0.tgz","fileCount":23,"integrity":"sha512-PETvI/OQ1pcYHI2QU4Q1F+LMXH0VKNWL5OPQp+vhNv3dDvZ5/hNf13moMx9jAkYRTLFFC7w5EF+zZMwI8E7btw==","signatures":[{"sig":"MEYCIQCe7ciL1Qav0HJ8HuVKMzzphYjgQvuF/MbOd5jvB1e7NwIhANdR4hM/g99yfVXs9Dh/k2Lky2fpjNs+EtyS5c2kWUrA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX4AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVuQ/+MpCscu24bQCoVrhUImUAR4YRnrdveTUYKLE8SX2KGuPPRF1O\r\nNewnfXxMYvYkfCXcmU4t4zJDnBI5xvQ6lHzGqh3ZpzGkTeshWJ5ZbS/Mt2cj\r\nsQ7JqcbtdcsJ3fU2J16WRKTP/aXjiokUgRcSa9IEYvuMueLmBF8+c8DYomJ8\r\nYIl5SwEduAQ2y1nJZyZnO4c+hP5JFdB/dct4aMx++z3P3a7aD4BzW+UtySpc\r\nuYebzAR5ahQfR7wZtxD/lycPVAQAjkUAqthU1DjORQ5STsgDcQDxku/IEU9R\r\n5ONCvU7tUMsu/qLNzi1xdXlScPCP8KBfmW0dVDtSpC7lzDkK/hi23bncixEq\r\n1ZV0CwXc67eIZmrlPKm+i3B3BYQBN84MM7ghud2FDjE9zLwmOdJydFNYgDEl\r\nYUKSD+5PjTtD3B+cMy5G58Yz1LIgm47eKhIJmqeM7pDOtJUayfUNdHZ3Ek/I\r\njdP3Myb3QLvb5Xcx8d/JhF2shwfyA16vi/E5LUbVq49DgdnoCaJwznkBPHRf\r\n4EsTEEaO2bbCe2Zqk7xHNTf0azcuzxC9iaOj6Rid5o0RHTLLQ4GDaGPkD7aP\r\nqPzxxlpTbG2y8d1HHNfl5eEMTt3z+qpIb2R3Xk5NGQSSU+Ksr88FmyyAqjEu\r\n5XVHsYBV8ko0IVraj4olTvCfTw1iq0b6YlI=\r\n=WCVV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6f50071e5.0_1682013695786_0.27640810870118315","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/card","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ef754381c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9080fd2a69013648aa245d7dda0daaf6a8c88fa","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ef754381c.0.tgz","fileCount":23,"integrity":"sha512-9zPYXLP0c6IZSavmGQxEDwCEgv886jYUUjShVw+Z1d0qZOAjaxlMH8ZcHiE03fIiuF1jjAdKRTpFxflC0jQjJA==","signatures":[{"sig":"MEUCIGRsrJLE0oW1XBYA2qg1K/HxTDGWKYIDk8lmWzfGziU8AiEA+Gc4rl5moFcjWcGuC9u5B3R39U4rCnr0epRm/9quf/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuu6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC9RAAg8ymw+tttSlpeee02F3Grg1cCtfqc/dkyP54kc1owHbzXhyw\r\nQqiUWxTq+hAmdv6T2E1yoB0ZMtB9712GLMJHX5y8QYgwW8M1kYBD7ha4rySN\r\noHqUgTqUpDqeRTb/txfoiPy4m7ipGRCe0pLEmZvSDyL1bQz5b4NSj3ARwetR\r\nqLN3F7u5SDQzXC7TpHYX4w7pcrx2zSv8KNLeB9gQBo385P+C7ObNi0p2+477\r\n7+JSPWQTnB/lD4U7tufg1eOsZ38gR5uTCiSs5VcgZR2A8IjRPzJ0RXbRu0Gs\r\n1zmnb5pQ5CtVBwV4Y9G0sH6TcIQrJEJAAT6B4k82Vbd1c1G6xNYLBKKGOBFc\r\nKrfjowolNM/YJljZCZZ/ytuS507ezVAdZZQOIPw4nTDn0/JrCPayNEG4jVRE\r\nzw04Lc23TxB+r01yJLcOlLxUjW1d2AY1WeRjhVPKLW0I2oZRg5GIxhpWYvsu\r\nQLYIPxT9EOKqNmrvZYcsUrjxNc/YU8WT3XGg4Ytg5O3IL1P2tfx0rS5TLoWC\r\noFZirao/iGsV2DOw9AdncWkCKNGI4oJ3z6R+zXVHq+N5xm/2xN8KaalctTWl\r\nTmo9dS3XEMSexvZmklz7VruVRq2O5o8rS3XsL6aVMrxrdn7MUK8VCBD319Gv\r\nkwwz26miiW5XOh38xI8WCh2NEzz6eNl6/CA=\r\n=SH9I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ef754381c.0_1682369465897_0.1731929386700919","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/card","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64810f66b4276f466c856c4d2ae54849aab90f90","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.69ebf61ea.0.tgz","fileCount":23,"integrity":"sha512-M7q1AxiBoehX0uz8Js2O7qzVXnq3adCNTKM7sAr/jjcPp5aPLYzMdPJgFZ6p9agyMHZN9fzpgIeK7NiNDlRD+Q==","signatures":[{"sig":"MEUCIGv4oP0OSo49zlPdVOHGYfQTWoWC7JIme0gEfAG+Ce9wAiEAk+orJK/WU0x4CjyvTWqBwrJTw1QAQjboz+521VOYJXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq8jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZiQ//S8ZmiXJ5+2O7S5bJ/rnrPBfk6s6JjnTVpB1E4SaNpRHuuLf9\r\nmOEB6ojng5QiC0LzhcawT9etb2460JMrgkHsFq9W4Lm6ZokkYO+0ta5zklkX\r\nOjhO9+squt917UgxK7K6rDRNxHIS4Q0pgcXfT2G8Avd2oxJYTclahLCdAr/X\r\nQwTQEHs8ULi2lwak/wWBd3YdT7FPJkomb+2euJ+/3VcXYHl2Q1WaSvI9O14A\r\nznpTSknshaVJOmHwSvlSVd1V+OzSH1xWA7RGPwZ1Q4nQfy/IHbt30b7ed7YO\r\nhxchGMbMxhmh2JEgpDQDkA7kMyRTpsbYjr7c9wnurrFBQoTpG7Qc8BLYvlB2\r\njCgU1r39C4Bi6yuPOaNRrQOcShfzH8IxF73tvW1GndJnCadH2zp8XFCZw+1g\r\nuebzJmYJMtAYJ0YcvrmdKIxfPBTQy6FeIiQDknj8CGspjVyO9EZHOye4vrmX\r\nd5P0dWS/G+6BpIQCcgQyTVwNvC5X90Tw+us2Ugihb2Yz5boTeh+zKtMLsKjr\r\nFz4YtpDOsJEkOk/cKXVxLPIbX2M+MLxKE2FKCkA6ln0eNB9R+qoF98TEfv9Q\r\nfmvDwrqXf3tttq44zRb8Xc06p29Rc7ip0h0f8NVHOQWiEAV7aKYbZ2Xk6xLt\r\nNy4ZS2AGQxnJmzZzDZLl/NeLDquijRXdOBg=\r\n=hcLd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.69ebf61ea.0_1682616099535_0.667549203570462","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/card","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b90be86de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28b2d2373e113561c25b29ea123adda96716b201","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b90be86de.0.tgz","fileCount":23,"integrity":"sha512-zI7Gh6vljiYjzt5mVoButbMP0WHdvWFWmemQ0jHd+dgVklwikn6G3upCIzXJP9lgNIeua6itcdRZQjcrhZev8g==","signatures":[{"sig":"MEUCIA1ESET0skl1RWXwj2JcT4eT6+S+TV4zxSsOictjS8BuAiEAiWnGmarY1oSv9n1dLZ7fVW/9sgL5OLo0TlKrW0HykL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLYA/9HGNArwh1ZOuXLc1iGQy0/HqCRVw33ygXrEqV44rTNrNGT0HZ\r\neoWi6NZkVcTI0OkY/zx4PtWvhjTWRp1bP3BF+nzeuvvk/FCDI7aMqESRTS0I\r\nKhlUZ1WwuhvzgNL/frntEWFYu7KzE3TeW+sOaYcoBzWd0fqKPrhlnsNK94o9\r\nl0XGs6CY8E3M+6xeoExeuIrmfpTTgjNC8p9IcTCiRWsdwCLsd+jRFFs7yRZR\r\nZruV5XUaOyX9HmtHDto7tSYH8dwDz5YqdtACvpVzZ+m6gFIyXMMF6J1vfvza\r\nJoyw2lpHI+TRNX5cnJP6PRSYht/q6cH1uAeTgEsZvuxCTnTOcQ9ls3naD21K\r\nPGlO+XAfg1SUhTJeqd5qYQR1o0Eq4HmqEQbo9Bmva5W32x+s8ErI/GC9pFwH\r\nOpGrgA88UdYwDzcCmtqHn07+eR4v3EGGLcYhpbv+fSlcn+BzIZs6xsCITOUl\r\nbSld4Nwd5ogMQVAH/yEVcEFL8uiL2ROwMUyEmZ5yaEzLP1nXeptfg/lIVT8E\r\nBBM3gogLANUEwg17LvUNH4v7riNyN7S41Qj6u4mxHX/qu5Qj6nwQK2GZXiZX\r\npAPeTVfCMZ1fvbJwF2TrGnxkelAgXceAkcZ32PEPXXGi07LyZmusOc9sMx+x\r\naMyXRsFU3hHVTwVDE3Iy4MnVDta1O/ZTSsk=\r\n=TszR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b90be86de.0_1682727706238_0.5809482533237056","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/card","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d16549b5abd46473952647096f6b105eab6ea375","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.51f9c0c28.0.tgz","fileCount":23,"integrity":"sha512-scGd0XzNNarVk8S0InGbpX04ApYYoRND5udDx1vRtU2jzu97j39dd+cwusLWtrtR+FGrS7C4A7yA08NI9BoTEQ==","signatures":[{"sig":"MEUCIQD4+s84Vh1MGupNJ5mUOJmRsWDbQHCpt4uirnoDGaeECAIgFyy7PFmIwPnbyzchvokpc6K6RaR5vr7IkeExHpENk2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGVkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeTg//RQ3kEHrq/DIkL2tT2zabXHwnDmZYdkn50D+Xwjw0PibZ/ToE\r\n8lrU5Y8UtjfvZa4f04dyjcPT80+DyqkC4ZYYxIKvsONjEH0BVBqlK2M/Jr55\r\nGl5gAfHprYix1eDGpdj5BPfy+RQhTjTdrYx9uV0NP1AkLE8e+3CFlSm/cViA\r\nSVv22V3TPa9lQ2YZ18YPTlYAQMejFSQWsI0lV/6P+V43MftXvhx3Ddl/yJ7h\r\nfvP39HJ9bZrCi9ymEg4z2nfiRqGmlatf+z8dofINGVEBnHqtpS8tsAXr2FcM\r\noo15gQuLgT7nPgxQqy3SpjRHuIsHLzWSqV228plUewY1jaXg1ZDkmXS62QiN\r\nl32dJisWuOPMYytCh+wkLWJRhxXmwxVyj5w/x8kKqGPTqZbNS8iQl9WVqTY9\r\nlnzObJpEo9VbJ07W3NbgOlLcxBxYfDqOxWTKQL71ar9txPQqzeAEd/onTsqt\r\nxTOfzmPUABFboVWyd/Zhr7eBdBvkvmzVYBz6dPjtvvVClTjHC+FWFiMnJuu0\r\nED4YHIqFtzKBNT0D5m+dy3frpHbt4Epc3v8uD4XYNjYBMwvy+DtGc+hAEiMX\r\nYIBUHXaaPeeOUmxWQZ6+WIzzcYtB2tmWEeV26VmfR464afV+Gv8BT1o9sVls\r\noLyLMeLhIt2bsnxhgY3Z9sw8GtK7T9NO48s=\r\n=LK1m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.51f9c0c28.0_1682728292184_0.7483829845364764","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/card","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4e840d685.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac2de9a3b2ae3aa91a8f3999066179583a05f17a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4e840d685.0.tgz","fileCount":23,"integrity":"sha512-PHaWi24p+z+zmZsUzSP+cE9Ur/8eAyqP5JiB58JK6rOrTER38rS0A0EJMAVh2JI5rLH79Q6D/EvYQQgl8GPICQ==","signatures":[{"sig":"MEUCIHKppaK9zcH5f9I60CP0kW89VjvoS3dO0jbzMzClmV0nAiEArcw3+4pDEtDNFkf5Mv6lJYrKZWmHU58q/wsCJoSBKUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4e840d685.0_1683041623726_0.5602783224453074","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/card","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddfba4c3a2d6ef3c3a45d6897d55be8f0d0bd10c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.10b8563e4.0.tgz","fileCount":23,"integrity":"sha512-lrZckJyiX5t8JfkKlJ06fYuNwRYF37cI94/+5oVqH4jjXyPW24ftLD7CBvBif86n05hUdfTYK65fTQc7fV8Eeg==","signatures":[{"sig":"MEYCIQCaqJ63/ESTm3ah30wjflr3FhN2l3AsIl33HuUTN00mLwIhAPrfjljWIXPbnW+9hEqb2iZDHSip1Ne2nFF1HsA8Dpc7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnvg/9HRnuOFQXQt0q0/EmbLRe2qGUXl+VlrF6O+0yCMowu9QC479g\r\nuXK4XoiL9vko+nC/Z+GBksrLOHVCLlj8By819iH5duWapA0pCH2ydJXvveMo\r\ndkbr1z5jLMDh6s7vFj8eAIzUYETHJhggj8Y4O0jC0R0oDGYKCs+QdsuielCL\r\nr9gFC9o9xtC0AZ2NQ7SW0p+uSFgdWPKGTGcL4bRo8HKnIWsjDxApKpTNED8K\r\nl03gjPWcHqOIKDnOmGqZVAGy8CG3Lk4rc+s2pJVbRQtg8yJSBwr0dbLWMKkZ\r\nAhSwV/NEf1MIQk8uBEi3g0NuNzzV06lg5DF/IUI/iKbsHnBd5HBrMa1KejcP\r\niG0GfV3hahMkmFIjVLrPUIcSVzVhwdHSvbgqqYnBxQuPLCojnEo44zr0jD3t\r\n+4I6ER7AoUEMYh/EnFYOBOu8WXpSUncSHZOZtvkozDFgZOBWr1hiv1xXUTg1\r\n3apIc39amkKYT+S0huN1LUgQpl4bIppSPjtG5z1zRm4rYHXH6FF83JnbJVGi\r\n2GLvR0Pj8m1g7Grod6gNWFVwT0nG963TokSJxJ9jVN1hGJhpBzEpp7AKCCLu\r\nK+zFWtJ69IHBnLMgqoO+kQbJaN6FdYcp8YpdBB2jyaBXcuAzeFX97OEPoCjP\r\nUvnrnpku1/JrquBEQkZ2RJFOWuLjE7AhtEk=\r\n=ZZtN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.10b8563e4.0_1683070918508_0.9484408077024045","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/card","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f80769126be51811ffcff13b4190ea61498e94","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.736b7fda4.0.tgz","fileCount":23,"integrity":"sha512-Clys4DR7v/27UGCBjrIe72df+bzLKas3CyD9uLajDqav+MBIiU/y5tZ1BHOHonyVB70WevS+A9gSEQLjRlIS7A==","signatures":[{"sig":"MEUCIQD5wF/8+VP7dHAutn99KRQZaDCNfZ15v/Vlw/YthaC5HAIgMuqGsiuTLWzqQ1ydfjL/QXPvuOCuTq3zbkWnAvIKd9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnksACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5RBAAixwAdGuXthj+Pral7OizC0ZZwuUeG1SrLbJ/FHXzPU3MPfzg\r\najS09A/dHCVSFITj1lEN0hSNCox7OpxKajUMTgUOCF7YnX9z2zB0+9m2PasR\r\neAbW9n1FxyJwfeTCjhhsF/MAnL5bDAvqmaQ9x00eSkR44B5qOe7xSEoNcees\r\n89MlGFDnle3LQMOkLDVeVAd/Cr1IgWz3OLJLketZHStLrBMtF9rstpQ6NCDx\r\ne76jFMP9YtavSrLsMnfI28QRMMorP3uIKNQdqKiMWtGjtZ2NYlrOjbiI98lK\r\nXdiBvezG8uUrxYuttrSXdeTDEOEijEMJ+12Gg23cwPEiY11VsbCa391Emq7u\r\njxAOqrr+nAFsnmBfvzRM+eHMmd1PnNSrHMyJDJJdyggssRQHeD2WKaYHMLVc\r\n9ROKaD+fyG032oPCCsKopeXVoM0zxRneh25f7+l6Oav4Mp2ZX2tY309Z2bVW\r\nWcSZocvyOxnb9yaAta1QhuopyFxO3vD2hQpWFwdlgx4UlVY1JFFWmqDAA0SD\r\nu7m7JHlrDUv/pNZpKMcMgD13xEaQIugg0kkvIT7tKRhX/G0T4dFq4tVej6EJ\r\n5lwi1iM2uQWViLixnLlgEtoevI+wP4rJR8G8NKGgI2h4+7afExrmqlLHg9/A\r\nq/iv3GCEOMGnJBp08+ecKEyk7JAHur296x8=\r\n=hiAW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.736b7fda4.0_1683126572733_0.4914508338878598","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/card","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"362b2f21ee99067eb9f7696b7b36f7d04a7354b7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0e533c5a1.0.tgz","fileCount":23,"integrity":"sha512-CZch8CCA4ryR7IJ/b+yYtCVM0/0f1squxLQwaoFuIn9so9/mtKYM12S6QEFpGEB64OS0qkmefTtD0pew3JfP9Q==","signatures":[{"sig":"MEUCIQDmjsQaR/y4TJx/U6OjuRmdTKH3XqnSLH1+im0RRA4SQQIge7yeKQ45kLoCXOKTtW0LfrbGf8pE0pKljU67lHxQQsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0e533c5a1.0_1683305785931_0.27655289359052726","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/card","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ddc11931f676270d1e31b05a920b08eca674e6a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5f01c15a2.0.tgz","fileCount":23,"integrity":"sha512-K5E3Lv+8kmPSFpqAtF1gnwrThym1rpfmRSIXHyxQqqAmj6+8VY6S5ouLmLO0PR2kiu4oovZnia71J3r9z+dBKA==","signatures":[{"sig":"MEUCICc58XydLlUAaEIAgrrzXQeN6bZ4natuw3flq+gO6qOSAiEAnhBjpKbYNgKoM2JhQn8wZNfODJT15Up5t33MCmrwozE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5f01c15a2.0_1683307584622_0.5078403971916496","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/card","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4242057f271de1e9cd6567f9a7f9fd903b6de691","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3b5b55e31.0.tgz","fileCount":23,"integrity":"sha512-i0CED1wF9mUlbE0Ck57uiwKtXaSSWaHAJ45djdT0HjlLHXay3aEvyKQTjjN4+clgHjL14UiMkrSEM3/cmPs/Wg==","signatures":[{"sig":"MEQCIBuLi89KNw8Bpl44RsS67wA5Sc0sXzSHNXfwqZiO2M+MAiBnzqgETaPdyHJCHQgP1XjKiGUmdfstQXB7N2aVERCN3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3b5b55e31.0_1683311960524_0.6554432776853714","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/card","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d0788120f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fdecaa63c48c8af899711420680d1bbc1b51511","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d0788120f.0.tgz","fileCount":23,"integrity":"sha512-mc1ufWvQ9bhtt3zFhkgu0qFgcz4/VZ2voHmHylzHnCPrSYWA6yaf1YWsOmqYoOGWAq4tOEi3dAAHGFEhYBgDZA==","signatures":[{"sig":"MEQCIAaB+BXDRw9PpbfgzjwIl2Pwgl89uqWLMtlZA27XGwunAiAM1q3fiI7fzFgZ1wInS0zZ7iHhCdMVlI262oyJLhVcQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d0788120f.0_1683620593062_0.008250614128736844","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/card","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0c75fb844e04d3d9fa853093e6aaa6a8bff087e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f52358dd0.0.tgz","fileCount":23,"integrity":"sha512-HpMPokMZgmlsb+eJvpWsG6pWe+KkYXwHxtqfroEUAPmBVNdA8QMmx/QBVfPbsLogEf6rZqHckSGIPSVSK/SDhA==","signatures":[{"sig":"MEUCIQDmzy9RtHOPkY+H403dC9rXIxD5JWy/VixRhscVi4zeeAIgNCBjYTnsVZJbh3BLFv3YielTsN70tIBIymvjcOGRwrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f52358dd0.0_1683901836201_0.8127152565366682","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/card","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"296c6adbd0218f422fdb0a43b30d773f04d2272f","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":23,"integrity":"sha512-0uxEwM99TD2ZCv94mv+7iSySbBScj2S/niVdzxLqPSqtvqqh3dpgXCN+1lTDEZnPy7Au5pIdbcRwbao9PjzLeQ==","signatures":[{"sig":"MEUCIQCWxXVtDNGK+wyl7PRkk8nfVQrXxnwpB9WXv8DMOmlCpAIgO4Nu/H9xPinhqP0xLo2q6VTFBtX6WYIVpdf3DwiNrLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3c3fbaa3.0","@material/rtl":"15.0.0-canary.d3c3fbaa3.0","@material/shape":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/ripple":"15.0.0-canary.d3c3fbaa3.0","@material/tokens":"15.0.0-canary.d3c3fbaa3.0","@material/elevation":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d3c3fbaa3.0_1683914463495_0.5234116282219363","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/card","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d17f7a9bd1157b52196fd014dbd6ddabed2bd33b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.576d3d2c8.0.tgz","fileCount":23,"integrity":"sha512-lBwgu7wHjvS2LhiqsUBm+m6MEYMt74bON8GV6XCHXJYJK1Bvr7W5ib9D4KrOrEg9U2ksXK7i76b87c3yCuIRkQ==","signatures":[{"sig":"MEYCIQDPAXE1k3jUeZQ7knQ8dpLzQbaWiHvfoKnoe59WmdW1zAIhANlc9UjXwAbHd6IX3HxmkiLWvYc2D38z/zwawPv/QKwy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.576d3d2c8.0_1684202409591_0.2896435767260441","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/card","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fcbdd0126537c40d584a8fde7791d74b2c4cf10","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.19bb36a46.0.tgz","fileCount":23,"integrity":"sha512-l4x3JU2FB3QtnK/rRiPhiuGssb1dP+++U7qYSboktwigUxEiXO4cEZPQcZFUl+j4uPCs0FGSgHBG4fFt54WyFA==","signatures":[{"sig":"MEUCIQCofVmPNeY3cZq1WkhOWdI05/MklEPWZmUExvqFW2eCQgIgfgLiD2MILahwjHP9zeqxY8n1g1rk6NeawKuwJXopjGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.19bb36a46.0_1684266849494_0.4247423562493786","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/card","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86fd84581600e6f10e38d2a90d10c70919e454e9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":23,"integrity":"sha512-1+wQ1QHiC3QE/Ah38SN0vPXMw6IKAk5c17wa87tzQCq0bCd0U5adpoG2tjWllIGtS2r1IKkhi+KECbcTAvbMig==","signatures":[{"sig":"MEUCIAwgJWqsSsk+sXJ5r2hSgtbXIUUsbbVV9x5BstTqFQSrAiEA8+Tb1fqEn3zLeN/nkLtyTgCiMs124KR+zfeVq7+yhic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.aa5ac7fe5.0_1684776356102_0.181630233042265","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/card","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6d158d454db460c3394848519cd64210ec1d75","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.90291f2e2.0.tgz","fileCount":23,"integrity":"sha512-8Z8KQDmEIwt5IK0n+9C9Be9p4mWLKBXILbH+c6XcMCTemmUxH6cTTax1MwuAmqBGuIq3WE3g7qDpdzjFLTC2kw==","signatures":[{"sig":"MEUCIQCGA6ntLWC9T3tXLeGk9fTwG9NJ8n7mOK73xZCGfq1k6gIgBFMHGbFdAgsKHQDHA+FPhWhh+0tN9dtCE6flam3YddI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.90291f2e2.0_1684863767329_0.5033837653665922","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/card","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.446734f27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ea72dd21fbc762a14aeebeb5b0e8619cfcbbd8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.446734f27.0.tgz","fileCount":23,"integrity":"sha512-roLpcqQxAvfbjTaHZsxF+bQRSCRjzXcW/+lM2L2ejMNjN9Nc4oOw5I/UCo5/qyMyiU9k0tAjKXwQsqk/Z9zIFw==","signatures":[{"sig":"MEQCIER8xdLE67xnQtN8x86HLn77F3aT/ukvjNSMPDdko3ATAiAZ5Uz+XltwU5w4ZzRC6mklXcVBSqGK8JKgaL6gBYfdlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.446734f27.0_1685483302701_0.3857118879795556","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/card","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.19de312d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a39f8aea8ae230b3a285b352ae8c70620c36153","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.19de312d8.0.tgz","fileCount":23,"integrity":"sha512-UYESvIaTtXDLNTOrFQk8bWT6NRFCa4Dm3tCDftn1xenZGMHgAxmU4K3Y2aVPCqxY3k9r6Y4JTFO8bR34Mn5rWQ==","signatures":[{"sig":"MEYCIQDIBVvMvIOS6q5iB9exDo2yL8+2aeIF+P2Hvg8XN8C/aAIhANW7RomF7SISgl9Sl4P/hXZqZ39rCcuv8xaaSokGfqT+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.19de312d8.0_1686071911183_0.1437169508299112","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/card","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6081d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b72ecadbb8003bf2c286e8443baf72fac1a90a57","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6081d829b.0.tgz","fileCount":23,"integrity":"sha512-5F7j+UopN1saiWk9yOMOzO/xg4QCtMVCgguBP0lZ+iosoS994Y+Z0OFWiAC1jaBpOWNqM0crlLEmRD8S8QC38A==","signatures":[{"sig":"MEYCIQDishfxdR+xtJJ4IQoWF2mPVp20ki836ridVbGpRQC20AIhAONdkDw2ZmUG5toBAXkI30WzXg47Lv9MjAmyXrviUFb4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6081d829b.0_1686100448608_0.35538380199168085","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/card","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"433eb706934f055ecdfaed5444163bb3da832d43","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b26c34a68.0.tgz","fileCount":23,"integrity":"sha512-0eyMs91No0hFUKl1J42Y0XfdcLCBUxKEyOC2ycFOYPDehZLrsV9ClT3m3A8690j+/k50Qo9mZ/nV8Lkn9vtXqg==","signatures":[{"sig":"MEUCIQDKh91yyCGpD0BbDrz7QK0yu7cpqp4BkaxgZzLt0oXBeQIgNFPTwJfOS5eNdupNeeIN0AgP+jnOcBpk03Hf1rzTJnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b26c34a68.0_1686169102209_0.33877804682302104","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/card","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4fe911371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdab4bdebecebcaea54724fe03a0e484a8a376fe","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4fe911371.0.tgz","fileCount":23,"integrity":"sha512-yQ59XA+D8hVkYFdDfWzeIqnicr7v7n1d5aaYco/4O1OoVcJHKCoC+GLOHyMJW6M+BXf6vNLncxNH/w6HG5XHCg==","signatures":[{"sig":"MEUCICQjDgHZDsIaczBRSXIS51Uwwru56MVY4JHax2IMpm6xAiEAr6SW4/L1yT2aUwnO2lq+R52V4VBumJpwLivSp907e6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4fe911371.0_1686179168486_0.11492314850164376","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/card","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3eb400f90a70d7d7eb7c0dfab4697d22cade46b","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a9ff9866f.0.tgz","fileCount":23,"integrity":"sha512-OzcK+/X2zqoyFnhYBO2ddABICfvDb6/WQN8nicqFy2GHl8eN9eeAESkJt0znw8nmSYlBJUWscYyf2ZD2Nl6pbw==","signatures":[{"sig":"MEYCIQDJnatdyI5d/MLA0zSGZlvmvG8OrTZbtABBt7QMERjS/wIhANizdnaNmPCV0p3TH6S46K3PrZHNUt4TAWEecezDFDis","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a9ff9866f.0_1686656303831_0.19584163847395408","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/card","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b994146f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db05467020b87c21b07a647bc304d2bedcdcb378","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b994146f6.0.tgz","fileCount":23,"integrity":"sha512-WSggGon91HcDhJyatnYLFkoM9glkkeJjyjFDWrcJkwN1rdrPJU+GH+PNjvmArz5hGv9WkmjDjhOdAuPnL4Mb7g==","signatures":[{"sig":"MEUCIQDaV4ST+58odIDc6y5g/tRZSSuPLOsCVj0RBsbOmSZNhAIgEz7dRqEkXvY9NOMdAf8bY2vP7vl/l9LalTEJzX2/6kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b994146f6.0_1686776638157_0.9494400586497509","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/card","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa4db750cff3df370a08735e4c916eb6cd8ae980","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":23,"integrity":"sha512-AmFkl3Q2TVBcO/KMfKmeB89iHnykmikgZ00s2jMqG6HbB5dU/pBnuSXdiFirBjrUuhsQVI28jrqWwPNZ1n31Ng==","signatures":[{"sig":"MEYCIQDqaXMp+PWO+DAb9EcGyYBvNaGePgcIHMidUnyGt9tHegIhALBuCjACjN+X5bLm8XuSK8cEBSHY2J27IUnCwdC3cO+r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1fb4b1a06.0_1687892241549_0.845789463298561","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/card","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db0e84f07b3ff9d2df424db10a70022babd07c61","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c64a2776e.0.tgz","fileCount":23,"integrity":"sha512-7mzJAAX0L1ox4vzs0YjmYaNqvlU8dwIvk5lMvfu7X6K74GOQ+xhL8icDUUx7j7tJBMmzdpv9Czu/s2vEwki2mg==","signatures":[{"sig":"MEUCIHKGh53jyTGYPoGaZLAGo2/fAbWeRusclPDVubIbaoD+AiEAljp3077MYhAzliNRQ07UZXN/FZDGBLSTcnyAU0pkhis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c64a2776e.0_1687897007631_0.10868818291550508","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/card","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf4c9ca3d538ea340e0fdd9503d0ad997f886b4d","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":23,"integrity":"sha512-4R6O1XlYQ4dXAOsns90JrnLDgl9W2moxq2iRG8FE7IH+HlokvzKFVD/nTBemYDFA5YL8RUWy5EV7oNM79AIXCA==","signatures":[{"sig":"MEUCIHJ68T99PFbUsHVDRv+a2zmgcddeh6t1uW34gMBRMMrfAiEAr5pP/mINwfNEOgOzGnq2JA35+j56XWVLG1ja3wb0gwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.b05d9eb7c.0_1688055832727_0.4537014660100156","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/card","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f71e4d992fd13ad3a1d4981dcd10d5732e021bb0","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2a9697dc5.0.tgz","fileCount":23,"integrity":"sha512-OmT1EbfSN5RipLK2yY72HtROFz4/veR8mmzXHblXuONsaAxD0JPRsfJDah65hz3WnPi0XPRAaFUA6rqPWTMXyA==","signatures":[{"sig":"MEYCIQDK8oKkMpZZolX7sfaZ/+cZmyI4chG1lRWv6YJq/IW4rQIhAPkKUqbedcDUQIvanlN3rZoxWlkzZCsxIJp4pflk8aw4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2a9697dc5.0_1688163242182_0.6128673430094311","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/card","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f3e84ca7ac9d99782f261d177f2688d800ca044","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0c52adeab.0.tgz","fileCount":23,"integrity":"sha512-E4L5WtV/Mi7lMBrXK3h0+wjMiWISfk9gYwyxtjD3CPOPKA2adw6SONOBSQp946dfyGn0ng4kBuylBQ7Joo3dog==","signatures":[{"sig":"MEUCIQDWPP7inHgf41gcpk3YOvH6rAeLVkzbzrkUzztRxTLTnAIgSfuEqT0bfIQ3EX6UT9fFVhFeD3igxDQsYMIiYQm8408=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0c52adeab.0_1688574359642_0.2733943057698214","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/card","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.83355c322.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a4eabbc55ecfccc289fbc4f18a51bc699691606","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.83355c322.0.tgz","fileCount":23,"integrity":"sha512-SQ4svdy6thi3RQ7pTGLAacNj7T9nyxjNq380nRqidWYsnBxmMuNhEi3AR9ZtXHHgX98oyfNDlUu+fJjUlh7rsg==","signatures":[{"sig":"MEYCIQDg4tpHNl4O9ffQbhEngkscaiAqzeg7i6MAWQUdA3CekgIhAMP7QqPlFfKMiZVt2IGxjmpwVR/qs8qzsonHBAjHYBkb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.83355c322.0_1689001547947_0.3313439157028757","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/card","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"772ba3d7397335740c3c2058f039be82696aa884","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":23,"integrity":"sha512-nPlhiWvbLmooTnBmV5gmzB0eLWSgLKsSRBYAbIBmO76Okgz1y+fQNLag+lpm/TDaHVsn5fmQJH8e0zIg0rYsQA==","signatures":[{"sig":"MEYCIQCML8t3EFOHBtThDiQk0Pw6Ch999MrmJvTz8trZACZJdQIhAJ3qlXptehnijfaOo+J0QZJxAmh5Bi5pt1s2qMvtyvA+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.bc9ae6c9c.0_1691097665289_0.4408593076551328","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/card","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"094277545edcc816cadc03196c5da274a7fa5cfc","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.3c44cd956.0.tgz","fileCount":23,"integrity":"sha512-i0lGYGeYW6Szu3rtzV1Ozfhw7xiXaX+PwKEOgjCx7ISJPEs9apPlL09xh9yPZBjgy3MwZWqAQZan6VsxLyMNkg==","signatures":[{"sig":"MEUCIQC5w7QJ0lzQ2LiptNqrLocLzNA4RRIxbavSz4l2YXHrnwIgCbL/9UMQu/Lab1NsH5rSjhAOlLNCuVvBZcmjkrkoBF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.3c44cd956.0_1691430447161_0.8483035596924031","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/card","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.02702296e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65c2496dd1cdbd7583e2b04b4361493b89e35563","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.02702296e.0.tgz","fileCount":23,"integrity":"sha512-DZ2m0WSqycB0n723Hho7FKpJATaUYpwyQPY8tDE0z/ZqaIjkivYfPXt+AwYNIDS9+wgY+z92hcTRhj+ST5recg==","signatures":[{"sig":"MEUCIQDmxnX/1LpELw9VdiK9LbBBoH5Ti7dVwPNbQZeMOv/QHgIgLWS9B2PD7NyLYTZ1RLe4lUJyUFp4V+Kf6R2cz3FqM6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.02702296e.0_1692965106414_0.6259236636988987","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/card","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.872b65832.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3994347dbed21ef3393e2c926d297a9af77d6f04","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.872b65832.0.tgz","fileCount":23,"integrity":"sha512-XkOBVIPebny+tWCtKQzIR5IQrXXdux1U0HMNP6CVTKKETZ/HLj3LjxVSB4/Wskp65iUZ1irn+u6hh7yMQtIzgA==","signatures":[{"sig":"MEUCIAEFPFApjZbenvPA+73UiHyWVCTfAITnzb+3aHs63kteAiEAsHHiHmwfy0A1W0iySQPR0fXWoMH5XMjL2Yv0a+eShGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.872b65832.0_1693397609784_0.3929343802657195","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/card","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"913d155a6af74eb3d7ff6bdd76d319adfb4db005","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.89b2e4122.0.tgz","fileCount":23,"integrity":"sha512-Z1ZdHMskdzKBFBNLRz6mGKL3a8ckG+sbxWOAjccHbhTuewKYyBs/IMYo388nLqH09494L96TfI1STFH31JVGUQ==","signatures":[{"sig":"MEUCIElNbAKc9maiythNl0+u6dpr3XKOvvn5dFNYEERKOhA1AiEAxZ/oDJUQOdfHHfHgt5orL+21ZytZl+bkOYz0xfK2phs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.89b2e4122.0_1693498017506_0.8499949212167497","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/card","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7475c51dab5e5a367331a3357c3c5ab4e1799d01","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7a3942e7a.0.tgz","fileCount":23,"integrity":"sha512-xJUU5APsvLd2RfBREnKbaSAQNo3cM2z1DkUOmTXJuRjB2Dd0oQuq8SoEKFR/UbOBAGOa+VgISwzL2qYtZWShOQ==","signatures":[{"sig":"MEUCIHSSQkqMsbeRIqjQfNxeUWFUN8lgiEPiCj3ZATma8roKAiEA/rh6TpMmkxJ9wqtiCtIndQ/+xrkNjqwh4cAIck5as90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7a3942e7a.0_1693507197949_0.3620054051406092","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/card","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.54feb3020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2404142aa165dba8f29a84d19305e909a03b77ca","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.54feb3020.0.tgz","fileCount":23,"integrity":"sha512-6OYNMDgyddzWkacSOceXheVPPzVagZhimZnqIxw7dJzHkDAXAAsm1m83V9m5Mgy7TfxjUREJnPYMLI2t5letQQ==","signatures":[{"sig":"MEUCIH6OMdGkNfRfv2RKIbotinRnBsdsxdSiqdj1D/zINjd1AiEAtvct2MdkrOK4uvt056HC8AXpGI10cUkYS4q6BMJ0Qc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.54feb3020.0_1694466317173_0.7495072482010341","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/card","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"616cea43018465923931cb9c829f818795e28839","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":23,"integrity":"sha512-9ffpfCa9YDQfE41c0DtS44M7sQvtWtH6/XOtJoKVd7MS8OAdi1FI3IbS78AkgycmEoWGmWcfqfwM/vNeDoNAyQ==","signatures":[{"sig":"MEUCIQCC1mlC3tODVloVX5DjFjs4GtrcI2Yj9wrFP+11FmThgwIgASPb+QB9GritKHLrvWyrPShJFIF3DkPrsl13KGAhBVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.6cda3ce8d.0_1694483114231_0.13377736313404087","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/card","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.205b20b36.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c522aeee37d44a8c6fad4bd92c874eb656995a5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.205b20b36.0.tgz","fileCount":23,"integrity":"sha512-+ACQFSaDM+U6f7mGXXFqv1/ECUfesEgPVqdC2TGaqLOSfMjj2+a8LC+OWcn0ZKbA0d4INXHGZ+EjJ3+kR3Eqgw==","signatures":[{"sig":"MEQCIC7ISkk7gfTM9/3YT7J03osc45E8d8n6MXbwx7LjOGkDAiAT/C5BljwEf6W8SSzFoKeCJoxLGTuRdM0870R6lDp3kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.205b20b36.0_1694625488826_0.9544021768553876","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/card","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.22bf82024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d0d4f955a08a93bd01a4251a5bc916392b09bc5","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.22bf82024.0.tgz","fileCount":23,"integrity":"sha512-Fwuv+Xz1JZlfP5eXygYBYsUA9v7SwLzlHaqS6CypB6ISp6wdfcLR6708HPf1o8/paqbF4TYYPmzLgolomfWEYg==","signatures":[{"sig":"MEUCIQCOhUnBd4pnD2kTfTkLTXhA+EQUehZOBCmtkntqlPscuAIgWEqRm99Ep3M2a/XGdP+egrbnOyvWCJtQrCTkw2E5aD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.22bf82024.0_1695028323679_0.39345589477660603","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/card","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a246a4439.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b195e66485fb450668eec12c3ad68404d659be5a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a246a4439.0.tgz","fileCount":23,"integrity":"sha512-+rYUnBPgv5QVF6BeUs3toIRdSwFVohGmjk2ptTXMZkKxqAJt7Nr9Znbm3Ym2hD8GUHJeh3pyGFvEs6rG6JMYAw==","signatures":[{"sig":"MEYCIQDXtOzbFZedD9HoriPy5IZ2y5AEoeNoenGId8ROD5lOyAIhAOWGDvf1ipKQNGXPybgIudOtrkODDK8EJyZ7F9jcVIl7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a246a4439.0_1695059171267_0.6758084966754461","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/card","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d153db62b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f66a70dd99a78abb808b580c2adb55d9e2e90e68","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d153db62b.0.tgz","fileCount":23,"integrity":"sha512-UglPvcpVwXJOPZXnp8EK3vJLSLGBZb601d98CcDEeGdSPbqC0evbwQ4aHQXQ29lhbPWZ4fyLhcwrzF927I68Qg==","signatures":[{"sig":"MEUCIQD/9laq+kurOlll82Mne0uZ+mEvYxy+d7nne+1BU64pHQIgAaVtmemLOHotLjq5JbCdNBJVVB7dS7M7G2ubM2WvKeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d153db62b.0_1695150913353_0.1925502504104717","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/card","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9419e6f4f6fa33d728f1b227ec2793eaf933427e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2528c1c3b.0.tgz","fileCount":23,"integrity":"sha512-mLfYTaMKirIHuRw7uwHDOMk+nFM/f5GLopbqkWUYMV19OXklxNa+wj1X/+0NMezwMgT6oT0qL4gFg7Y98D7+dQ==","signatures":[{"sig":"MEQCIBoP9a5gbk2OurvBt3tS3W7/u7vPHZG9ttKUnMn1oLkSAiAaG9jqr6dmpJ1kmsrh589rJUw8xc+R2ERK6nZlN6S1qQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2528c1c3b.0_1695233198931_0.6626545849167116","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/card","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"553e60019e52a9f70579deb0ae12fa978366a74c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.1728a6dcf.0.tgz","fileCount":23,"integrity":"sha512-dQJgBZ9b5PLbAtV9l1KzzlDdnRflQ7CbmR3kMpXVel1SE6Jcnt4Hr1jn53JtQdcGxUm5JkQBUUbtrsNydcbITQ==","signatures":[{"sig":"MEYCIQDp0sSxgwiJr5OyKuENt8Bx5QMYVqX7civNaVJ7oNF/EgIhAOsbdpoUQYxYWf5W9w+05zr5vKX1m45C0AdEjVmqqcKy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.1728a6dcf.0_1695691397895_0.365271407080767","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/card","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f2e4f48d02c0cc07d62ed915521441ade0bb038","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.ebb636f3d.0.tgz","fileCount":23,"integrity":"sha512-rE/vNbtB0q11soHZ2h8oax1KXOynLHj2KBDHeQY5tf9RbuOQKH1cuvWPk0HjcNy7hJfjpbJPVW/+qC7S+TGYpQ==","signatures":[{"sig":"MEYCIQDTQBLZMvSxqIoRmJLtIooFiKpzE9xCJAlmVT2iflVq+QIhAK2k9opOvzWvj+8u3UesfciHfQTVnx0oFbonWdzV0xWY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.ebb636f3d.0_1696016669303_0.5873338717782655","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/card","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0acd9acd606d186f50b809b70ae07dd32e9ad1d9","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":23,"integrity":"sha512-BE6KDmbINnk7uWPNn73jYSHuT26ayjcoMQKqRRWfEw/vzBI8tAAjCRxU9B5o04UYGdrcj1twWMtUJS8z3OvdUA==","signatures":[{"sig":"MEQCIHbCLOXHeWYigYIX2Lc02Sm3NA9A7cTstyuXaiguMLr0AiBKbzJqcIYhvl+pmIXZSbe6Ome57/y5NqjtpDdfVhwx8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":281930},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c0d21ecc9.0_1696880211701_0.5821364088299876","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/card","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.127a44b28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01b730f6e7a23cbc5dcb465bf5be0f7ba66678f2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.127a44b28.0.tgz","fileCount":23,"integrity":"sha512-taJCkZdTqiieXYFozV4v72363+Gp0vHC9z90HnheapDhKOhnYwAakPNrcKmA0jwgH/iVl7NfKXdjFxkaHi++fg==","signatures":[{"sig":"MEQCIGSRi8gDTKA2Y2LmpbFFn57KMKK520Bllx5fr3OHJeRMAiBp+LTQ7bttpGKbo67uZLd77oKpC8si4XEErI81PXF+GQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.127a44b28.0_1697140822892_0.9747624994989499","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/card","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.0ad128337.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7a28163d4e608c183c2a3527183533672621ba6","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.0ad128337.0.tgz","fileCount":23,"integrity":"sha512-wxnGfKkA3EvCwdyw3cPScJfSyVca9V8sTYwp7tCUh3cghriX/31fy+183ParxtvFjwM6YKx9sen0f+vf98eeEg==","signatures":[{"sig":"MEYCIQDeO6y2DfZl6nUWjHr8h8LMp3oxT45ViTlqyXrp0cIVgAIhAOVTSzOnzTiEHy31y+czxxuyHJtnNsWQsu0tf5B7nQN9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.0ad128337.0_1697741521705_0.35095278752594683","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/card","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.9cec94097.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9236eb88b592dfdeb4128804a67be2e5fae92a1","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.9cec94097.0.tgz","fileCount":23,"integrity":"sha512-Mk3Uq6uQgrjwXz4PdvGULfH5ewHpPBCGSDodi9SOBdWLBOgUYc9PulxYAk8Vfy/6ScwEbvyheXpugjeRhnu23Q==","signatures":[{"sig":"MEYCIQD8Hdb7VUew9hy7NTw0YiykvhQPNHN4Rd0ZnF/TW78nXwIhAK5o4JF2OuqgcSFCI0cSdx/w4ddFJgE6RQwrw1zBCBT/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.9cec94097.0_1697756964954_0.12250677405945454","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/card","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1850e3d0831e16c2e1ed80e13bf18333e739fe06","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":23,"integrity":"sha512-swP739MZhoLXFBRoBWgICLUKkWK7xUfhgMIpz4BILSySkavI39IKI0ZtKsWWEggHiv01q1+x79rarJlu02L5UA==","signatures":[{"sig":"MEUCIQDNNhr5vZC20F6C7bbltd+colckTdIeG+jKPRkCMO3oKwIgbAPaa7jPgaJCcCC8JJ0vtSQ5bkL8CUK/6kgZ8ja9VQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c51a0bbcc.0_1700081918841_0.2913274482022423","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/card","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"502c1a8ed69d274310ab241bb7f605938017c926","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.d76666ad4.0.tgz","fileCount":23,"integrity":"sha512-5+PCT3RHGfgJoQ14ZDic2JfmQPp7YO/cu9OvG8xdBWBUQZ9SpfH3R7VhoxOxXWjCBI9SAAGsIpcbMF5opHJysw==","signatures":[{"sig":"MEUCIEHLr1836qr2zospqEfKQEYOmSs9CZtzrQoH4TrECthRAiEAmtwVFTbkSI2k4Omx/mzGJ+YTPWkULmxPDbNqNVIISns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.d76666ad4.0_1701123183736_0.5262930574010201","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/card","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22a96a7aad0d039e9ba23f0b6f866cf9882e5cc2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.8656bf0e0.0.tgz","fileCount":23,"integrity":"sha512-OxOmVVbD0wTuUnyFVdLKgvzsDCq7n8YlVq8+VmhyMDU2jqlATlMCS6d1/NiFP8+Luz/C8VWgP9KESlx87RRpWw==","signatures":[{"sig":"MEUCIDmFvfxxinXDFgQN66NwYpUVi2TFdhW/gW7p0Ojfag4QAiEA3Hj2eT8mX4KoQ9HV8LUVciOzrkluxWw3BFimNJczUvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.8656bf0e0.0_1702415915035_0.8960798741280969","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/card","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ac82035f7260ce8b8337402d2102bc254169dff","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7f224ddd4.0.tgz","fileCount":23,"integrity":"sha512-kt7y9/IWOtJTr3Z/AoWJT3ZLN7CLlzXhx2udCLP9ootZU2bfGK0lzNwmo80bv/pJfrY9ihQKCtuGTtNxUy+vIw==","signatures":[{"sig":"MEYCIQCs+HXby2xYUHAuK0KJUlvNDcFZB1aak1/l9pbMVjwlWQIhAMFeCOZQb4ZhE+QH9UmAqQ7OlMt3kOW+dbjtQGByJUic","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.7f224ddd4.0_1703743742186_0.2783752465094995","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/card","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6558d56f1d19186355d94f22b1325af3e3f68ddf","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":23,"integrity":"sha512-0OI1ebetNdvUJw6x5M/QvGWY6Bgh70AnyAryNsYdA728BEgqnuEhcPGezHgWcT6G899xj2ReG9bkfcytZskZ8Q==","signatures":[{"sig":"MEQCIFP1CKoP/Rv7nksb3QM8AzcM6Q1bsPsaC9uBqq9XsduuAiBc9Rp/wbu5NzZ/peQhDcB/BqZ/UlTvnyKCBbR8wWcxRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.a0b8a90c0.0_1707333566743_0.21796885424811752","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/card","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a4774b7e02a88031937dcdb6ba40fdb95463cac","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.e50b478eb.0.tgz","fileCount":23,"integrity":"sha512-GqFVWwXsRYUsIWa6BgIOWHye9ZblIH2lDSpftqmgD+M4JeMhrvy8sCbEGCqQBYR/nsEmcPh9kcdV98Uy22qNTA==","signatures":[{"sig":"MEQCIHEy+M7ujbej+gs+AWqxzYC21FpQ5jgPR4K9lIvQ15oRAiBexLmO6vlgW3QK+Chxb1skU+n+f2T4AidKWmmlWHJBtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.e50b478eb.0_1707415677279_0.9911076212103518","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/card","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f83490d06da1969c23363851d34f85a0af3fc2","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.c43b3438b.0.tgz","fileCount":23,"integrity":"sha512-DSSemvQKi71Okm4cO/VmCXVjJCp5eNObqPqrXLy6XosflpkrH1UBu9DrMynuclJ0F/jEJeShe9j6bV0KxASXBg==","signatures":[{"sig":"MEUCIHLQ9qIjAi7NcDt2PuQebVG/NSNWHVfJ/7TzBzhti3sSAiEA0n3nVqdMVeUrVCUkO0zvYTmeKVr+pZKyAHH2Of9yjIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.c43b3438b.0_1708719450417_0.14465207819635317","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/card","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.819498d8c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72fe36eaf9d703f59024c16eeff8276ba0fb0c14","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.819498d8c.0.tgz","fileCount":23,"integrity":"sha512-L8OJns58c6KAHu7Hzl8OCurTNqGpFouw97StXHZ1JK7JTaDsFMn6YynzPpKY/XQGgZCiPLF0Hd+49cgQ5ObUdA==","signatures":[{"sig":"MEQCIDXBKEnlRmWUhXKMYzm1GXzj8/k++jh6ZGT/s/GZEBKYAiAxeY+vGR+6j71J2z2kPcmK20bcbzqxBVo3qpSvRIHW6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.819498d8c.0_1710515691885_0.07080367502839247","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/card","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.453a6248a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1342796fe0e2c702daeb07bc302b79481bae412","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.453a6248a.0.tgz","fileCount":23,"integrity":"sha512-nS0PRjBXM+HKyLGQerJOxxM97TKxFrNYfwF+XJGFIKCz5kSFFWEM9FOTn3VLMcffuUc+SNn21tMoHa6ctblA2A==","signatures":[{"sig":"MEUCIQDFNIGBfllUiG/ltR0YjSrrW6PwYDwTa7v9jTfCvtSUUQIgauxNLpKxRqr3BRVYSA7CCxI4h/CGT7dmOpJhqP4hdOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.453a6248a.0_1711386810893_0.7061291037419379","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/card","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b611621cc4955c4a4522f478d014ed1d1f748ba7","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.68edc03c6.0.tgz","fileCount":23,"integrity":"sha512-G70X5uBDOeREL2m7RsK7FcfdVtanLBliTz1MT62yrSHct6Etzdtd+UUKW87e/7z5+eRQe6BRqqLMCISe0CUWRQ==","signatures":[{"sig":"MEYCIQDhQnFCfxgTMgadvZqgi0Ri6OTwB38Zlcfm0487KWR+fAIhAIDd6pEEVAAFrfJjMrfonog9g/EyuI2/XsJBThIU9cIF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.68edc03c6.0_1712603158728_0.11157443170412384","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/card","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"116d9f2158156755289ce82f84700ef9df1894e6","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.5bebc0064.0.tgz","fileCount":23,"integrity":"sha512-9d7vJ/8aQFWfY68gKfhnxJ42TNttCuK2AgwywihZPQammEvfUf3YTiX9okw21Kz99USjdgC/4Su1fX7zmIn0LQ==","signatures":[{"sig":"MEYCIQCT72Optvd4OhFYslg/BisQj5pQPWniTjf7CD8Q8O5o1gIhAIOHgcs3NrSs9C6HvFY9OD8lUbTgzUn+lFJMAy5HKl6T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.5bebc0064.0_1712871647575_0.3448863128580313","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/card","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.311f29a60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bca367a01de6249d2fc9aeb308202eddd81d349","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.311f29a60.0.tgz","fileCount":23,"integrity":"sha512-Q4iGcpcstFOa7vcV/Y9H1yvOi3sAG9quY5Ihlgi0gIlHdmLUXQS5IRRQEWCYaprhxJtq6on3644bCs1eS6aNig==","signatures":[{"sig":"MEUCIQDVSCV3LjIhly8HqHSIPnLWU1zng3k1hz3rVyt7tJF8/gIgYtjyydH0GMrdSrPNNN/rV7XQyx50RPbfjKicEudDpE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.311f29a60.0_1713895190740_0.49836846773203525","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/card","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.65c10a622.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4cfdf2e547684df9b000e0e5f43291a97f7b7f8","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.65c10a622.0.tgz","fileCount":23,"integrity":"sha512-jPrKhdkfZitdRf9GuzWBTBqoF0h9LMQeL2D7ZerQUtsvVaYkGtRusJ62repqpogXclMbRQ6V1NDPqdU5R54FMA==","signatures":[{"sig":"MEUCIEWGbI+7AnYS/42VSYlzW1JrZIC3xPB3Vgl8gWYfK0L1AiEA4nWxwftJcLiYNaBMEOpUkFrHOolpqh6baHM37BWuBas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.65c10a622.0_1714070929363_0.08024185863026734","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/card","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c86e5040e77ae252e6aa612429512eb215f67e","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":23,"integrity":"sha512-oShaBhU5O6q62TsPtaMC1e+7omXGmj2UI5q6fhN3b2O8Yw0yKdqrxOzmu0OFlzZQw2JqQqCq4ePOu+ogLTvTIg==","signatures":[{"sig":"MEUCIE9FwXAtCiNEtyw6+sr+dYIe80IcrMwja1BhMC2ayEP5AiEAwcKRjhGNNMpgzdmNcUsWWt9+0QRnu46lOc0ne9HWHbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.4b35cb7d0.0_1714651371849_0.2662076601779191","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/card","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8edd63d7e560dc447b10bdf8b2ba2e1fe012642c","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.f80ac92b0.0.tgz","fileCount":23,"integrity":"sha512-JLoF5cxA8bsFPXmNjjCQ3JDauVNDVkl5iNXRxzalt5zSrrVJzy1Ghu9EzopkqnVqcES8yHVIQPswct/85+R2ZQ==","signatures":[{"sig":"MEUCIQCTqLp/vI5le/mnEkdXnGn0PaAb/qKZ7KQXO7k2i9RjpAIgHtHlRr1D1lLuhzQAfOORa86vJjwLU2dHGz36PnCRqY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.f80ac92b0.0_1714651984649_0.9753656724364799","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/card","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f1b7de19a993e13254890bdf21a1a4b6b31dd6a","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.2f5b899bc.0.tgz","fileCount":23,"integrity":"sha512-SX4V6iPabg30RJ9Avkf9sOZLD0es7sJSUxovAgGdReqMkg0CO/1s4hhqmQVO5i1mu5FJWJiJOM0hMIvbnhI5Zg==","signatures":[{"sig":"MEYCIQC0/IV2fnh2RUGUWryt/1yrNxozl6CNh5v8I0zjdAwpOwIhAKhyzSEmDrXS0pynzoPOK8vdygCDf12Fuh+J+1YZp3Jy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.2f5b899bc.0_1716213365347_0.23337951353950181","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/card","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","card"],"license":"MIT","_id":"@material/card@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0045c041035b3bed5472a865dd2c03b662d06278","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.cfec83c74.0.tgz","fileCount":23,"integrity":"sha512-YJ0yEXSnWVWNkB0CYP2o+ir1bohEYC+U7S0JKBx0bUWszbFbaLxLGppQk2lY5t8Vixfi+2imRWGNRigeuagj4Q==","signatures":[{"sig":"MEUCIQCp/FzoFWtL0s5u6KBM0jJmoj3UhsOqbGXQqqruBvd7CAIge7AScHGQ863IrQ1ZCpYHya3oP1WXblCKvpbCCVQ6C2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":284563},"readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web card component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/card_15.0.0-canary.cfec83c74.0_1716231399197_0.8765230273596682","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/card","version":"15.0.0-canary.423edc3dc.0","description":"The Material Components for the web card component","license":"MIT","keywords":["material components","material design","card"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-card"},"sideEffects":false,"dependencies":{"@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\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\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\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<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect 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<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show 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<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\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<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\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<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\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<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\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__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. 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`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`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`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","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/card@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-vGbRFxL1L+BzvTSOhP/cODfXbPiZroM4uSwRzAD2EIr+jGzHvtgmuFCZVyI1zXMFtMP2XNeE5Q0Vd07lYzr6OA==","shasum":"e500e0e58833c240129d9cc316330c80bc571fe4","tarball":"https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.423edc3dc.0.tgz","fileCount":23,"unpackedSize":285264,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtu6Ma0VxFWYExkjOZeCnGSgFlG2d9TB6LNDV/CqyFxgIhAI/Zwypnw2pGTgQRZbJgo690gGTYw+vLW6NmdK85h6QP"}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/card_15.0.0-canary.423edc3dc.0_1719425517106_0.7164031632385528"},"_hasShrinkwrap":false}},"time":{"created":"2016-07-21T00:00:03.370Z","modified":"2024-06-26T18:11:57.786Z","2.0.0-dev.20160721":"2016-07-21T00:00:03.370Z","2.0.0-dev.20160721a":"2016-07-21T00:55:16.406Z","2.0.0-dev-20160723":"2016-07-22T23:56:11.544Z","2.0.0-dev.20160810":"2016-08-10T10:38:31.852Z","2.0.0-dev.20160822":"2016-08-21T22:20:37.613Z","2.0.0-dev.20160822-1":"2016-08-22T00:37:21.387Z","2.0.0-dev.20160903":"2016-09-03T08:16:30.378Z","0.1.0":"2016-12-15T17:54:30.348Z","0.1.1":"2017-01-09T15:57:12.925Z","0.1.2":"2017-01-23T16:49:35.392Z","0.1.3":"2017-02-06T19:04:40.666Z","0.1.4":"2017-02-21T17:27:33.387Z","0.1.5":"2017-03-20T16:26:44.139Z","0.1.6":"2017-04-03T15:27:58.589Z","0.1.7":"2017-04-18T14:51:13.945Z","0.1.8":"2017-05-01T15:43:01.590Z","0.2.0":"2017-05-15T16:25:59.511Z","0.2.1":"2017-05-17T14:28:15.588Z","0.2.2":"2017-05-30T19:04:32.048Z","0.2.3":"2017-06-12T15:53:16.291Z","0.2.4":"2017-06-26T16:10:48.505Z","0.2.5":"2017-07-24T15:49:14.000Z","0.2.6":"2017-08-07T20:48:24.534Z","0.2.7":"2017-08-21T17:27:46.107Z","0.2.8":"2017-09-05T20:16:04.510Z","0.2.9":"2017-09-18T18:35:38.161Z","0.2.10":"2017-10-02T21:11:42.646Z","0.24.0":"2017-10-30T19:11:19.852Z","0.25.0":"2017-11-13T20:02:22.112Z","0.27.0":"2017-12-11T19:35:29.714Z","0.28.0":"2018-01-08T18:55:09.280Z","0.29.0":"2018-01-22T18:30:55.819Z","0.30.0":"2018-02-05T22:02:11.087Z","0.31.0":"2018-02-20T18:22:58.095Z","0.32.0":"2018-03-05T22:08:39.696Z","0.33.0":"2018-03-19T16:39:57.288Z","0.34.0":"2018-04-02T21:51:52.135Z","0.34.1":"2018-04-03T23:39:43.843Z","0.35.0":"2018-04-23T22:40:06.053Z","0.36.0-0":"2018-05-29T15:22:05.566Z","0.36.0":"2018-06-04T15:37:43.030Z","0.36.1":"2018-06-18T15:40:18.046Z","0.37.0":"2018-07-02T22:13:54.389Z","0.37.1":"2018-07-16T21:19:10.485Z","0.38.0":"2018-07-30T17:06:56.235Z","0.38.1":"2018-08-13T20:39:01.103Z","0.39.0":"2018-08-27T17:40:33.057Z","0.39.1":"2018-08-31T21:36:26.452Z","0.39.2":"2018-09-11T16:55:06.777Z","0.39.3":"2018-09-11T17:18:55.038Z","0.40.0":"2018-09-24T20:01:07.023Z","0.40.1":"2018-10-08T20:54:36.354Z","0.41.0":"2018-10-29T20:22:05.082Z","0.41.1":"2018-11-14T19:29:32.703Z","0.42.0":"2018-12-04T22:54:45.750Z","0.43.0":"2019-01-07T19:49:09.128Z","0.44.0":"2019-02-04T18:23:50.559Z","0.44.1":"2019-02-19T23:02:47.338Z","1.0.0-0":"2019-02-27T23:59:32.238Z","1.0.0-1":"2019-03-04T23:33:25.235Z","1.0.0":"2019-03-06T21:08:13.725Z","1.0.1":"2019-03-11T22:07:19.345Z","1.1.0":"2019-03-26T19:25:55.393Z","1.1.1":"2019-04-08T20:13:55.481Z","2.0.0":"2019-04-29T17:40:04.813Z","2.1.1":"2019-05-10T17:25:12.149Z","2.3.0":"2019-05-28T21:23:46.966Z","3.0.0-alpha.0":"2019-06-12T04:06:54.324Z","3.0.0-alpha.1":"2019-06-12T19:02:13.799Z","3.0.0":"2019-06-25T22:27:57.828Z","3.1.0-alpha.0":"2019-07-16T13:29:12.045Z","3.1.0":"2019-07-22T22:02:45.537Z","4.0.0-alpha.0":"2019-08-07T21:09:30.524Z","4.0.0-canary.0":"2019-09-05T04:37:54.806Z","4.0.0-canary.1":"2019-09-09T20:20:50.181Z","3.2.0":"2019-09-12T21:53:33.779Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:37.030Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:24.399Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:14.150Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:57.452Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:19.499Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:42.548Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:42.250Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:42.129Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:50.320Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:23.418Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:54.556Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:18.799Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:14.750Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:03.269Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:04.891Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:44.197Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:23.992Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:35.969Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:57.704Z","4.0.0":"2019-11-02T18:11:48.718Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:52.879Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:57.542Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:54.682Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:23.556Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:25.642Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:34.777Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:54.736Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:53.078Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:01.600Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:06.694Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:02.389Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:45.782Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:37.188Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:59.809Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:46.992Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:09.815Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:18.740Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:58.178Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:41.544Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:16.622Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:01.254Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:37.514Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:15.735Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:57.331Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:20.178Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:06.595Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:50.726Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:33.027Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:30.433Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:30.852Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:11.425Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:04.920Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:14.074Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:32.145Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:48.748Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:09.458Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:22.419Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:25.172Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:29.378Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:17.990Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:06.244Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:09.444Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:33.583Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:20.694Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:20.598Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:57.051Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:58.511Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:58.036Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:16.394Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:48.917Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:54.049Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:26.375Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:19.354Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:34.422Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:42.057Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:37.254Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:11.811Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:30.211Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:45.164Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:54.758Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:16:21.807Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:24.957Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:44.138Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:26.975Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:15.248Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:50.935Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:17.847Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:29.216Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:03.615Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:23.288Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:06.390Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:00.143Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:41.258Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:29.168Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:56.869Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:28.707Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:49.524Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:26.537Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:23.776Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:21.245Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:27.736Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:08.514Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:02.960Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:27.827Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:31.084Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:22.068Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:33.354Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:04.911Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:06.196Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:00.427Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:28.037Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:44.447Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:32.018Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:01.270Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:07.493Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:00.108Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:12.872Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:31.072Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:13.950Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:31.569Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:42.033Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:05.319Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:09.300Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:12.835Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:51.945Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:27.969Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:26.904Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:57.920Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:09.499Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:00.129Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:58.749Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:45.461Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:00.364Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:31.747Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:31.834Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:11.786Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:41.544Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:44.314Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:51.894Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:12.336Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:38.444Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:51.220Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:25.039Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:22.400Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:47.071Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:59.210Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:56.687Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:39.475Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:23.004Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:21.593Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:34.070Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:29.300Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:09.076Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:45.449Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:51.203Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:59.000Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:06.899Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:30.063Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:19.742Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:21.575Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:10.082Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:23.435Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:48.371Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:10.171Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:57.073Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:45.158Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:03:14.445Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:17.979Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:58.850Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:23.969Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:37.088Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:32.881Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:51.872Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:06.054Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:35.888Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:30.177Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:19.036Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:08.959Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:36.536Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:12.503Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:19.254Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:43.913Z","5.0.0":"2020-02-14T00:09:02.141Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:17.069Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:37.415Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:29.273Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:02.862Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:18.988Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:39.323Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:00.170Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:39.970Z","5.1.0":"2020-02-25T21:37:56.248Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:49.731Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:54.027Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:24.832Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:01.185Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:52.114Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:40.446Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:04.580Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:59.635Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:12.642Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:33.122Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:55.863Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:17.696Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:36:40.344Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:17.421Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:22.672Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:14.415Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:25.740Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:58.443Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:36.399Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:58.232Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:09.936Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:52.238Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:39.077Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:51.176Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:24.572Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:06.197Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:12.101Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:22.734Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:00.949Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:20.429Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:53.667Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:26.255Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:30.711Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:16.760Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:54.448Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:25.393Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:46.446Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:51.440Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:37.968Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:14.521Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:42.006Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:28.721Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:53.568Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:15.679Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:49.176Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:26.303Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:57.570Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:41.811Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:56.459Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:58.950Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:23.372Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:23.202Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:20.463Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:47.229Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:42.491Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:11.143Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:25.228Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:00.952Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:56.150Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:08.509Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:57.439Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:31.676Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:00.979Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:22.354Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:57.354Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:14.626Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:52.829Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:28.532Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:57.849Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:15.818Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:04.472Z","6.0.0":"2020-04-23T17:26:32.806Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:43.686Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:10.492Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:05.864Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:52.702Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:57.640Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:14.115Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:06:56.865Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:30.567Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:02.507Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:39.195Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:52.476Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:43.117Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:36.524Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:47.734Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:34.318Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:51.393Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:36.312Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:03.402Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:25.248Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:33:56.382Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:06.993Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:25.127Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:28.581Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:07:53.261Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:09.227Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:43.506Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:28.372Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:22.396Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:42.814Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:23.439Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:34.443Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:06.863Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:28:59.992Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:29.179Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:12.658Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:04.632Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:08.314Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:13.769Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:45.385Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:28.231Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:38.213Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:03.576Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:01.081Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:46.736Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:17.366Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:10.796Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:31.584Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:31.627Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:47.054Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:42.393Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:10.669Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:03.889Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:50.658Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:09.882Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:16.391Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:41.252Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:42.390Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:02.477Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:42.098Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:04.863Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:01.728Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:02.574Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:03.764Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:56.229Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:36.207Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:57.992Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:54.035Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:21.640Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:17.589Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:32.791Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:35.559Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:00.969Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:41.547Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:54.099Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:18.684Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:39.242Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:49.998Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:56.454Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:13.964Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:51.432Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:16.962Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:19.534Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:18.008Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:06.250Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:09.664Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:47.532Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:39.836Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:24.756Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:09.403Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:57.274Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:01.353Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:50.994Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:43.680Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:14.083Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:36.601Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:33.486Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:37.072Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:12.971Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:38.860Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:20.451Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:26.553Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:41.731Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:17.089Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:57.016Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:57:17.850Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:02.697Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:24.440Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:55.087Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:02.384Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:00.780Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:49.325Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:04.925Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:46.878Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:45.624Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:05.107Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:43.211Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:44.297Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:44.823Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:12.485Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:37.819Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:11:01.426Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:18.840Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:48.441Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:04.857Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:17.259Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:05.192Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:50.937Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:15.178Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:20.077Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:29.734Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:48.609Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:44.936Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:31.105Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:05.915Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:59.513Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:17:34.608Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:36.243Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:46.290Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:50.377Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:46.327Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:33.451Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:34:06.364Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:17.238Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:37.716Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:58.363Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:26.070Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:24.348Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:19.193Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:47.415Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:22.192Z","7.0.0":"2020-06-23T19:11:18.771Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:07.406Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:31.851Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:18.834Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:59.246Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:58.832Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:39.750Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:00.898Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:09.364Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:54.883Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:07.563Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:11.462Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:38.495Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:59.463Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:41.550Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:05.202Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:55.117Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:58.713Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:47.080Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:22.144Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:34.713Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:37.615Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:21.508Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:55.625Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:37.161Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:14.519Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:34.372Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:52.935Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:37.215Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:23.615Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:07.677Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:59.815Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:50.289Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:10.773Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:39.962Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:42.260Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:39.605Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:57.580Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:24.142Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:28.938Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:52.281Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:48.208Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:57.506Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:27.998Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:01.392Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:34.931Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:37.031Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:39.990Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:10.732Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:56.468Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:21.270Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:04.493Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:47:25.923Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:51.512Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:13.138Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:03.535Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:05.449Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:25.107Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:06.389Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:10.303Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:15.635Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:46.420Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:07:01.824Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:56.856Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:33.027Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:33.284Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:41.887Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:59.831Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:59.837Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:27.296Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:36.519Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:48.317Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:32.134Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:51.511Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:44.997Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:59.375Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:29.607Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:52.658Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:41.568Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:09.406Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:26.565Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:13.814Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:15:20.901Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:54.403Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:53.451Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:58.861Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:46.889Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:05.339Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:40.390Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:56.953Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:35.900Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:24.540Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:59.313Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:51.736Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:52.353Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:10.950Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:53.394Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:28.411Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:09.159Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:54:16.033Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:54:52.675Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:55:05.945Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:49.319Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:47.379Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:40.950Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:16.635Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:28.274Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:28.137Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:51.014Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:04.551Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:29.893Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:13.469Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:55.842Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:48.470Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:21:09.627Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:02.426Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:02.831Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:17.672Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:24.065Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:40.689Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:38.032Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:43.593Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:42.084Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:13.212Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:09.274Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:51.228Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:32.192Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:50:23.628Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:54.487Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:28.993Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:39.776Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:30:17.554Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:56.090Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:53.952Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:45.491Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:17.452Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:18.554Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:29.559Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:22.111Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:31.057Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:31.589Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:09.629Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:55.904Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:24.876Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:56.116Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:35.191Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:11.596Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:56.092Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:03.736Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:17.595Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:12.690Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:48.694Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:18.759Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:18.010Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:52.573Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:50.718Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:31.471Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:56:06.431Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:56:23.363Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:57:14.631Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:18.646Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:28.025Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:00.521Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:20.878Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:05.106Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:42.051Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:42.792Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:12.072Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:54.074Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:23.949Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:20.329Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:26:21.151Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:35.467Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:03.025Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:22.222Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:38.961Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:41.818Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:49.501Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:50.951Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:36:18.702Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:51.758Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:06.252Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:43.855Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:38.646Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:23.235Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:31.606Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:01.784Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:20.616Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:16.480Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:11.096Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:53.968Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:45.157Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:09.897Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:32:13.045Z","8.0.0-canary.596e98424.0":"2020-10-28T16:04:14.462Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:47.959Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:39.071Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:13:23.115Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:52.313Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:00:32.816Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:14.669Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:54.089Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:05:30.713Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:51.517Z","8.0.0":"2020-11-02T23:00:12.767Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:04.196Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:38.628Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:43.067Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:47.552Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:36.745Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:29.502Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:54.680Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:07.759Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:36.734Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:45:13.389Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:23.054Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:32.953Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:22.245Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:49.815Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:41.783Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:51.711Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:41.018Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:27.673Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:23.988Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:36.084Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:56.839Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:52.836Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:57.964Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:49.491Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:56:23.638Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:02.032Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:09:29.641Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:53.654Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:36.668Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:34:38.533Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:56.083Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:55.953Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:11.267Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:57:21.981Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:53.384Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:12.181Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:08.234Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:04.991Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:02.199Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:30:14.536Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:05.486Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:52.374Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:42.195Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:45:47.861Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:31.909Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:34.458Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:09.738Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:05.248Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:03.422Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:50.086Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:53.804Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:55.572Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:46:20.322Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:52.315Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:33.873Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:50:23.746Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:05.108Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:46:13.277Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:53.675Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:02.698Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:53.623Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:21.885Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:10.824Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:59.690Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:28.859Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:38.543Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:07.505Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:01.406Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:31.413Z","9.0.0":"2020-12-29T19:46:35.944Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:39.392Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:24.225Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:58.830Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:46.053Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:11.434Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:48.628Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:06.837Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:50.834Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:29.061Z","10.0.0-canary.968735356.0":"2021-01-06T15:51:27.391Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:44.413Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:54.837Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:40.508Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:22.290Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:05.139Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:07.647Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:48.002Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:33.427Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:53.743Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:46.948Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:36.991Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:48.630Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:42.337Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:08.471Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:54:20.639Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:01.160Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:34.726Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:33.166Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:07.691Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:05:23.684Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:56.174Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:39.315Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:01.279Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:36:21.302Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:24:33.941Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:44.512Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:30.438Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:49.406Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:00.217Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:46:41.712Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:44.639Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:47.608Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:43.332Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:42.373Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:53.625Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:33:00.451Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:04:12.375Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:09.989Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:15:14.468Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:00.674Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:50.094Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:43:41.582Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:05.011Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:35.209Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:48.896Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:48.879Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:29.131Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:10.853Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:16.521Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:18:03.317Z","10.0.0":"2021-02-05T16:19:32.298Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:36.986Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:12.234Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:05:22.308Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:04:18.154Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:35:09.248Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:00.193Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:01:06.778Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:52.246Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:53:14.892Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:36.837Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:07:26.252Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:27.355Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:31:30.428Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:57.304Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:31:33.223Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:12:21.282Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:52.101Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:10:28.850Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:39.687Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:39.121Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:45:16.981Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:35.542Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:05.593Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:38:48.006Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:58.631Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:58.624Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:03.415Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:37:33.934Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:41.472Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:11.389Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:46:16.234Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:13.570Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:00.415Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:46:24.908Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:06.961Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:14:39.693Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:33:36.358Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:54.231Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:35:27.184Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:09.330Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:08.462Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:48:50.236Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:03.434Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:38.445Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:56.558Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:39:21.435Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:40.086Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:21:29.549Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:32:23.121Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:42.000Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:39.274Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:01:29.611Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:36.661Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:05.579Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:10.187Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:40:21.498Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:35.996Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:59.506Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:48.763Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:46.009Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:25:25.080Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:50:22.329Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:03:10.868Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:45.059Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:37:17.708Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:52.255Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:09:13.225Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:35.325Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:54.915Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:39.451Z","11.0.0-canary.73a227194.0":"2021-03-12T00:24:30.186Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:03:30.045Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:35:29.143Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:29.193Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:48:13.749Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:47.789Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:57.243Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:46.203Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:06.362Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:53.567Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:20:25.155Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:38.293Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:32.872Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:18:13.945Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:38:28.343Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:40.792Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:04.680Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:12:51.561Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:34:11.140Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:44:30.840Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:31.285Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:03.333Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:08:12.964Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:03:15.694Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:54:37.288Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:58.440Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:59.187Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:43.641Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:33:04.793Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:57:36.851Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:49.606Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:01.145Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:10.869Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:04.158Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:01.035Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:26.563Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:05:41.370Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:01:19.034Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:39.944Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:24:27.957Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:05:32.354Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:59.174Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:39.507Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:07.993Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:12.486Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:16.192Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:21.374Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:04.285Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:42.706Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:11:29.079Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:53.156Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:57.225Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:59.761Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:50.794Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:25.191Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:31.507Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:50.215Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:37.068Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:41.261Z","11.0.0":"2021-04-15T22:58:45.799Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:27.421Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:12.522Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:41.678Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:15.654Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:00.172Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:37.268Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:15.975Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:48.570Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:59.032Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:50.956Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:38.340Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:32.548Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:53.294Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:19.575Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:16.980Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:01.020Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:52.675Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:08.131Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:37.720Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:56.588Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:13:22.401Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:20.276Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:10.073Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:16.011Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:41.639Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:27.666Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:28.880Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:24:13.794Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:02:30.308Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:11.234Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:45.018Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:02.453Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:02.152Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:15.963Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:24.869Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:12.773Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:45.474Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:36.253Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:49.677Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:59.419Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:15.625Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:54.931Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:25.124Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:06.793Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:35.188Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:39.856Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:05.422Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:22:23.018Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:48.807Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:43.877Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:34.673Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:41:32.219Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:48.383Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:30.313Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:03.685Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:54.322Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:44:08.268Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:46.128Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:21.723Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:59.042Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:09.663Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:57:20.249Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:25.713Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:25:15.315Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:08.371Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:55.475Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:48.798Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:00.500Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:20:15.122Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:45.357Z","12.0.0-canary.33a954852.0":"2021-05-13T15:08:09.886Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:30.366Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:33.306Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:08.986Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:07.325Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:21.068Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:37.862Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:45.581Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:16.491Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:29.776Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:07.505Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:06:19.385Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:53.710Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:52.329Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:20.363Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:02.131Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:52.830Z","12.0.0-canary.464a00286.0":"2021-06-03T14:46:39.205Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:42.918Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:44.825Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:37.701Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:10.431Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:51.605Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:40.585Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:19.527Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:06:42.985Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:42.340Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:20.783Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:13.489Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:18.268Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:51.987Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:43.512Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:32.269Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:26.708Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:35.946Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:01.838Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:51:06.191Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:31.230Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:46.177Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:55.221Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:39.953Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:58.323Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:10.570Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:59.725Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:29.416Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:30.766Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:03.021Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:51.723Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:23.666Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:00.459Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:20.480Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:51.661Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:01.869Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:39.966Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:31.617Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:44.618Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:09.747Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:40.703Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:59.297Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:49.383Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:49.984Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:56.036Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:43.173Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:24.612Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:05.295Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:57.852Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:35.689Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:38.899Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:22.680Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:48.460Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:40.283Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:28.823Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:38.218Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:31.692Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:39.552Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:29.511Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:09:21.467Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:19.685Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:02.877Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:02.146Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:26.384Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:24.219Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:54.474Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:49.589Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:43.942Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:41.534Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:16.024Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:23.447Z","12.0.0":"2021-07-27T19:50:23.196Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:59.971Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:42.209Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:26:21.730Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:35.035Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:50.665Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:05:36.644Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:52.830Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:50.898Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:14:23.292Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:15.993Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:02.241Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:48.003Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:39.621Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:26.058Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:23.288Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:56.757Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:47.456Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:06.696Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:04.869Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:25.371Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:08.950Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:18.211Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:52.228Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:50.193Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:00.804Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:38.028Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:22.704Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:46.208Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:48.736Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:24:11.878Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:46.370Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:10.498Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:49:22.885Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:48.687Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:12.450Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:53.663Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:48.852Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:27:15.264Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:15.951Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:41.164Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:26.420Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:06.726Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:43.193Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:51.625Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:20.799Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:00.853Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:48.091Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:06:30.443Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:39.794Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:54.184Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:55.868Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:01.389Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:41.599Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:22.284Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:23.002Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:46:43.156Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:30:15.195Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:31:53.523Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:32:21.333Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:09.755Z","13.0.0-canary.72464476c.0":"2021-09-07T15:34:31.821Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:33:47.356Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:43:30.622Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:35:49.578Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:01:25.937Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:10:40.522Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:25:42.053Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:08.039Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:21:55.477Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:03:57.756Z","13.0.0-canary.08398f880.0":"2021-09-13T23:34:37.673Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:50:37.332Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:12:36.224Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:59:19.330Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:17:38.867Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:50.990Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:24.000Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:01.799Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:47:39.510Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:46.498Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:11:58.095Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:56.601Z","13.0.0-canary.65084baff.0":"2021-09-23T21:25:32.142Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:56.107Z","13.0.0":"2021-09-24T19:45:55.775Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:46:39.886Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:03.484Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:16.862Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:02.788Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:56:58.585Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:22.688Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:28:33.847Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:59.910Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:06.061Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:59:43.557Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:21:55.639Z","14.0.0-canary.348665978.0":"2021-10-21T14:50:49.087Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:21.850Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:52.213Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:35.830Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:04.636Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:56.565Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:12.851Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:50:55.138Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:51.292Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:58:33.911Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:24:31.174Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:36:31.453Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:52.695Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:52.016Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:21.553Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:10.312Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:16:38.127Z","14.0.0-canary.554c71829.0":"2021-11-16T16:19:29.722Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:24:20.111Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:59:25.915Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:10.260Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:39:27.677Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:35:19.284Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:04:42.431Z","14.0.0-canary.93134d453.0":"2021-11-23T15:39:20.042Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:32:26.840Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:37:35.429Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:50:49.630Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:13.940Z","14.0.0-canary.17a072535.0":"2021-12-02T18:05:27.212Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:44:37.634Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:06:43.495Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:25:33.504Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:29:24.571Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:55:18.922Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:02.104Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:13:09.794Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:09:55.607Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:32:36.740Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:04.675Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:14:25.941Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:01:19.877Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:54:28.017Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:14.325Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:49:48.971Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:42:33.638Z","14.0.0-canary.390220e42.0":"2022-01-17T16:46:23.766Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:52:57.857Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:17:42.962Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:54:35.630Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:03:34.331Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:08.424Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:13:24.878Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:37:15.915Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:41:38.829Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:05.459Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:22:56.029Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:57:24.187Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:46:49.919Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:53:54.755Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:59:23.688Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:06:44.606Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:29:42.463Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:11.309Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:16:31.059Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:18.622Z","14.0.0-canary.868793776.0":"2022-02-22T19:35:34.705Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:19.337Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:19.099Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:27:34.463Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:00:41.150Z","14.0.0-canary.16c166154.0":"2022-03-08T23:22:31.439Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:28:43.971Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:29:44.606Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:12.611Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:03:43.935Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:00.130Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:22.603Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:22.731Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:09.073Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:12.433Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:50:54.738Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:18:42.269Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:04.559Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:04:44.756Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:04.321Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:24.359Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:04.536Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:23.544Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:20.684Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:23:32.225Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:05:51.311Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:50.738Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:11:22.474Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:01.499Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:45:31.039Z","14.0.0":"2022-04-28T16:56:03.729Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:10.746Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:14:48.512Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:31:39.846Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:10.947Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:58:30.673Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:24:56.970Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:40:29.255Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:18:36.285Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:23.262Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:00.456Z","15.0.0-canary.05930a453.0":"2022-05-13T18:47:36.566Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:10.921Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:32:49.861Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:02:55.988Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:21:57.445Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:57:52.729Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:06.474Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:07.109Z","15.0.0-canary.df47894db.0":"2022-06-13T17:08:49.063Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:00.959Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:39.150Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:22:47.620Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:18.816Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:28:38.438Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:14.493Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:54:38.907Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:19.957Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:18.079Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:02:54.016Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:31:39.680Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:38:54.944Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:32.788Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:17.271Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:18.201Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:11.804Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:14.184Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:31.557Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:54.896Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:10.787Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:58.473Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:57.161Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:56.489Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:59.699Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:31.824Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:46.048Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:30.787Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:37.078Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:53.675Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:52.696Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:01.065Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:26.305Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:23.726Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:20.534Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:31.746Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:38.580Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:30.321Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:40.799Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:22.407Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:42.435Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:04.345Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:28.910Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:38.410Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:45.935Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:03.026Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:31.732Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:29.065Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:43.801Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:40.179Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:44.911Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:56.409Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:35.752Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:25.176Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:12.762Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:46.031Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:15.042Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:36.715Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:51.146Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:03.968Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:18.991Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:29.759Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:49.805Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:57.549Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:42.889Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:19.350Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:43.271Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:23.449Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:52.474Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:24.536Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:40.417Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:49.249Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:04.923Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:20.718Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:30.933Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:29.446Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:49.149Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:56:01.065Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:02.232Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:02.948Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:17.625Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:15.631Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:35.375Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:58:45.304Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:20.527Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:41:45.038Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:27.082Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:05.263Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:44.927Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:09.099Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:31.006Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:40.554Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:17.893Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:37.807Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:32.899Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:34.784Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:51.509Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:34.177Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:22.277Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:19.671Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:00.021Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:53.014Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:59.317Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:20.697Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:20.860Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:13.647Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:30:43.507Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:25.829Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:37.790Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:37.518Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:36.615Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:04.132Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:54.819Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:03.656Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:21.307Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:17.702Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:13.043Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:10.355Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:14.743Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:46.154Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:35.438Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:27:59.325Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:44.396Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:06.969Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:44.768Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:26.271Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:02.892Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:13.369Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:00.517Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:41.243Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:00.584Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:27.847Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:58:44.456Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:13.588Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:30.133Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:20.651Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:19.663Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:02.632Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:27.020Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:15:45.818Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:45.842Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:41:37.697Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:11.106Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:00:33.757Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:26.937Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:59.691Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:06.423Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:19.109Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:02:05.835Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:53.841Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:50.570Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:22.949Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:29.469Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:00:59.516Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:16.991Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:25.479Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:06.072Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:00.047Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:39.252Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:14.015Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:00:53.048Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:08.254Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:38.657Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:39.451Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:57.711Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:15:55.321Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:58.362Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:34.489Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:11:53.215Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:39.431Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:49.834Z","15.0.0-canary.65c411674.0":"2022-11-29T17:38:40.937Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:28.572Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:07:29.779Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:31.095Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:46.083Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:23.711Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:33.213Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:14.618Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:08.430Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:26:51.303Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:42:58.809Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:26:27.576Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:10.969Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:13.340Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:32.231Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:38.453Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:03.941Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:08.975Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:27.706Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:24.020Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:07.804Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:51.234Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:11.151Z","15.0.0-canary.34767110.0":"2022-12-14T17:19:40.569Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:25:53.138Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:08:54.132Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:28.593Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:07.296Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:26:05.755Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:34.119Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:24.764Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:08.273Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:01.900Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:30.301Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:18.268Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:11.599Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:01.518Z","15.0.0-canary.af490a848.0":"2023-01-03T15:57:42.023Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:05.967Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:29.491Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:33:17.088Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:02.346Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:38:06.190Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:59.089Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:06.498Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:41.075Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:22:37.409Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:26.513Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:44:03.177Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:18.409Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:22.671Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:11:52.823Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:18:52.408Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:18:40.898Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:13:15.845Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:35.126Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:05.180Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:55:59.962Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:39.630Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:24:48.912Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:36.723Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:28.177Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:03.857Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:36.508Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:11.621Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:51.516Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:20.719Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:26.091Z","15.0.0-canary.15b221540.0":"2023-02-01T17:52:50.823Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:29.558Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:58:41.232Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:20.320Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:32.447Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:11.836Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:14:46.283Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:54.887Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:09:47.293Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:39.968Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:19.959Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:06.910Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:02.301Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:24.439Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:20:39.121Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:36.585Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:06:25.051Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:01.457Z","15.0.0-canary.f32339937.0":"2023-03-06T15:15:49.164Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:42.031Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:01.501Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:10.570Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:35.618Z","15.0.0-canary.274610c77.0":"2023-03-09T14:58:53.043Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:52:52.200Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:29.590Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:12.414Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:29.427Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:55.864Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:06.183Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:05.681Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:34.010Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:14.097Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:11.626Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:26.898Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:38:59.983Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:23.114Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:47:42.849Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:02:55.851Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:25.395Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:39.766Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:11.076Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:36.878Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:52:49.578Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:37.346Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:30.930Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:01.297Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:19.937Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:12.257Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:26:50.020Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:34.940Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:35.424Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:47:56.081Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:58:57.076Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:34.925Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:25.441Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:41:06.582Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:35.103Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:29.759Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:15.608Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:34:45.663Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:48:54.831Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:18.710Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:01.805Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:53:55.820Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:56:15.757Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:28.360Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:26.473Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:38.371Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:21.444Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:47.274Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:36.054Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:06.099Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:21:39.742Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:21:46.486Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:32.437Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:33:43.949Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:58.739Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:32.921Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:26.142Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:24.859Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:20.687Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:13.316Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:36.379Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:03.718Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:09.794Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:09.716Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:25:56.295Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:42:47.566Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:22.884Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:31.403Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:08.853Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:22.399Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:08.727Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:24.221Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:03:58.423Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:21.770Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:16:47.868Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:23:52.979Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:02.483Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:25:59.845Z","15.0.0-canary.83355c322.0":"2023-07-10T15:05:48.146Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:21:05.531Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:27.359Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:06.645Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:30.031Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:06:57.733Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:39:58.152Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:17.425Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:14.581Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:18:08.996Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:03.938Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:11.449Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:13.780Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:39.163Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:18.132Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:29.501Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:36:51.962Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:23.120Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:01.905Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:25.143Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:39.020Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:04.198Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:35.246Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:02.328Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:26.903Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:57.471Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:30.570Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:52.040Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:31.139Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:58.881Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:40:47.713Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:59:50.858Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:49.508Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:51.989Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:04.857Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:56:05.514Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:39.369Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:57.347Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-card"},"keywords":["material components","material design","card"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":"","users":{"abrahamwilliams":true}}